Risezable column for rich:dataTable

[giuliano.rap]

Hi!

In our system we use dataTable for all tables.
A new requirement is to make the columns resizable.

I have been searching how to do that but it is not so simple.

I think I have 3 options:

- change the tables to scrolldableDataTable;

- change the tables to extendedDataTable;

- use jQuery;

Changing to scrolldableDataTable the table will lose many features because dataTable has much more attributes.
Changing to extendedDataTable the table does not lose many features but the design (size of column, table, css, etc) is not the same as dataTable. I tested it and try to make it similar to dataTable, using similar css, but it is quite different. Also, when I refresh (F5) the page, the table just desappears.

Using jQuery I don't have so many experience with, so I don't have such idea how to start it.

Any idea?

Thanks in advance!

[giuliano.rap]

PS: Just updating - about Changing to extendedDataTable , when refreshing the page and the table desappears is just the way it should be in one of the pages I was testing. It is not an error.

Anyway, any idea?

Thanks

[mcmurdosound]

Well you could extend the rich:dataTable component and columns! by a tablestate feature and visiblity parameters on your own. I've created such a prototype a while ago.

[giuliano.rap]

Thanks Christian!

It is a good idea :]

But I found a javascript code for this, now I am doing some changes because the code is not for richfaces dataTable.
The problem I am facing now is that I only can get the row from the table, and from the row I get the cell (a part of the column). So I didn't get how to get the whole column. Do you know if it's possible to get the column?
The code is working for the cells at the first row.

Here is the javascript:

resizable-tables.js

PS: How can I insert the code here? I am trying at advanced edit but it is not working.

[giuliano.rap]

Hi Christian

I have handled this with javascript but I realized I need to save the "state" of the columns (the new sizes) and keep it if the user goes through the pages in the table (here we use rich:datascroller). And I did not know how to do this with javascript.
Any idea how to do it with javascript?

For this case, I think I need to follow your idea and extend the rich:dataTable.
Can you give me some example you have done? It would be great.

Thank you