Horizontally scroll with fixed columns

PMartins

Hello,

We are trying to implement a table which has the first two columns fixed and where the rest of the columns (which are quite a few) can be scrolled horizontally. Has this been done before? If not, do you have any idea on how to implement this?
There is the solution of using two tables (fixed + scrollable), and hide the contents on the scrollable table which are shown on the fixed. However, these tables also need to be sortable and have pagination when needed.

Any tip or help will be highly appreciated, thank you! :)
Cheers,
Pedro Martins

allan

Something a bit like this: http://datatables.net/release-datatables/extras/FixedColumns/two_columns.html ? :-)

Allan

PMartins

Yes! Wow, that was a quick reply :).

This is exactly the layout we had in mind. I tried your example with Firefox4 and IE8. On FF4, while scrolling, it is visible that the fixed columns still wobble a bit.

Sorry for giving you more trouble with this, but maybe you can tell us a couple of ideas on how we could improve this just a bit more :)?

Thanks,
Pedro

allan

Yeah - use Webkit ;-). The wobble is caused by Firefox's slow redraw I'm afraid - there is very little which can be done about this. The way FixedColumns works is to position the fixed columns, which is a clone of those two columns 'absolutely'. As you scroll the position needs to be updated to keep it in place - and because Firefox isn't redrawing quite a quick as we would like (25 times a second) you get the 'jitter'.

The one way to fix this is to use 'fixed' positioning for the fixed columns. However, that would mean you can't use y-scrolling in DataTables (since the fixed element would spill over the container in the y direction - fixed is to the whole screen). FixedHeader uses fixed positioning ( http://datatables.net/extras/fixedheader/ ) and that should draw smoothly - but FixedColumns can be used when y-scrolling, so fixed positioning is not an option. If you don't want to use y-scrolling, then it would certainly be possible to hack FixedColumns to use fixed positioning.

Allan

pmalves

Hum, we'll be using pagination, so I think we can try that approach.

Oh - and we'll log an improvement request in bugzilla - that can't happen :)


Thanks

maitrikgpanchal

Hi,

I am using this first 2 fixed columns layout but I am stuck with one problem. I have added CSS for my table for changing bgcolor on HOVER event on but in fixed columns layout first two cells are skipped for hover effect and rest of the cells in that row are affected by that hover effect. So on hover effect, whole row's bgcolor is not being changed.

Please guide me that how can i forward that event in that 2 fixed columns.

Regards,
Maitrik