How to make sticky columns

kenxu

Hello,

I need to implement a table with many columns. The table is too wide and the container element can't accommodate the entire table. Users use horizontal scroll bar to see all the content. I want the first two columns to be sticky (fixed at their position regardless the scroll bar), the scroll bar only scroll other columns.

Could you share your idea of above problem? Thank you in advance.

Ken

kenxu

I wonder if anyone had this same problem and would you share your experience? Thank you.

pwc1011

I haven't tried what you are talking about, but I know a bit about DataTables. Given the complexity of what you are trying, it would seem as though you need a table within the table approach.

Patrick

allan

FixedHeader will do a single column:

http://datatables.net/plug-ins/
http://datatables.net/release-datatables/extras/FixedHeader/top_bottom_left_right.html (for example)

But it won't fix two columns in place at the moment. I believe the code is flexible enough to be expanded to do this, although it might be a little tricky in places :-)

Allan

kenxu

Hi, Allan,

The FixedHeader demo places fixed-position left and right column on the page. It only works for tables which occupy the whole screen. Does it also work for non-full-screen tables?

In addition, the demo's left and right column is row number but not actual column data. In my case, I want the left column to be a real column data, and it should reorder along with other columns while sorting.

What direction should I go if I need to expand FixedHeader to implement above features?

Thanks.

Ken

allan

Have a look at the other demos for TableTools: http://datatables.net/plug-ins/#FixedHeader . Yes it will work with a non-full screen table - that was just an example. It should operate just as a normal column - would be worth experimenting a bit to see what happens :-)

As for how to expand FixedHeader - I'd suggest looking at the code to understand how it fixes the left hand column to start with - the expansion is simply to add an additional column to that.

Allan