FixedColumns: New plug-in for DataTables - fix columns when scrolling
FixedColumns: New plug-in for DataTables - fix columns when scrolling
![allan](https://secure.gravatar.com/avatar/5e2528412f84f2db0280e04c7ed120a5/?default=https%3A%2F%2Fvanillicon.com%2F5e2528412f84f2db0280e04c7ed120a5_200.png&rating=g&size=120)
Hello all,
I'm very pleased to be able to release a new plug-in for DataTables called "FixedColumns". When DataTables 1.7 was released, there was a gap in functionality for scrolling tables, that is provided by the FixedHeader plug-in for non-scrolling tables (due to the way that scrolling is implemented). FixedColumns is the plug-in to fill that gap providing the ability to fix (or "freeze") one or more columns to the left hand-side of a scrolling table.
- Example:
http://datatables.net/release-datatables/extras/FixedColumns/index_column.html
- Download:
http://datatables.net/releases/FixedColumns-1.0.0.zip
- FixedHeader:
Some of the functionality provided by FixedColumns overlaps with FixedHeader (i.e. the left hand column freezing). The reason for creating FixedColumns as a compliment to FixedHeader is the significantly different way in which a table is constructed for scrolling by DataTables. FixedHeader will remain a first class plug-in for DataTables. If you want scrolling with a fixed column, use FixedColumns. For non-scrolling tables, use FixedHeader.
- Known limitations:
Absolute positioning is used, so in some browsers which are a little slower (basically everything but Webkit), there can be a little jarring when scrolling. Fixed positioning cannot be used for FixedColumns (unlike FixedHeader where it is used), since the element must be placed relative to other elements, not to the screen.
DataTables and it's plug-ins are made possible by your donations. If you find this software useful, please consider making a donation ( http://datatables.net/donate ) so it can continue to be supported and developed.
Enjoy!
Allan
I'm very pleased to be able to release a new plug-in for DataTables called "FixedColumns". When DataTables 1.7 was released, there was a gap in functionality for scrolling tables, that is provided by the FixedHeader plug-in for non-scrolling tables (due to the way that scrolling is implemented). FixedColumns is the plug-in to fill that gap providing the ability to fix (or "freeze") one or more columns to the left hand-side of a scrolling table.
- Example:
http://datatables.net/release-datatables/extras/FixedColumns/index_column.html
- Download:
http://datatables.net/releases/FixedColumns-1.0.0.zip
- FixedHeader:
Some of the functionality provided by FixedColumns overlaps with FixedHeader (i.e. the left hand column freezing). The reason for creating FixedColumns as a compliment to FixedHeader is the significantly different way in which a table is constructed for scrolling by DataTables. FixedHeader will remain a first class plug-in for DataTables. If you want scrolling with a fixed column, use FixedColumns. For non-scrolling tables, use FixedHeader.
- Known limitations:
Absolute positioning is used, so in some browsers which are a little slower (basically everything but Webkit), there can be a little jarring when scrolling. Fixed positioning cannot be used for FixedColumns (unlike FixedHeader where it is used), since the element must be placed relative to other elements, not to the screen.
DataTables and it's plug-ins are made possible by your donations. If you find this software useful, please consider making a donation ( http://datatables.net/donate ) so it can continue to be supported and developed.
Enjoy!
Allan
This discussion has been closed.
Replies
2) If we have several strings into some cells, we have a bug with fixed columns rendering - because they could render like 1 string and the height of the fixed columns and the height of all other columns are different in such case
3) I wanted to ask. Is it possible to move scroll bar to the top of the table? I didn't see in examples how to do it for it, because it'is not in DOM nodes
2. Could you post an example of that please? I did consider that when writing the code, but felt that since the column text should be the same as the text in the table, the height should be the same. Although - thinking about it, if it's a cell further on in the table which causes the height to increase - then you'd get this issue. Yup - bug here...
3. Basically no, it's not possible since its position is dictated by the browser's (and therefore the OS's) widgets. The scrolling element is just a div with overflow: auto, so the browser will put in automatic scrollbars. It is actually possible to trick the browser by putting in other elements and some clever Javascript handling of it - but it's messy...
Allan
Allan
Allan
With regard to the history plugin, no I've made no attempt to support that kind of thing. I'm not sure how useful it would be for this plugin - but I'm sure it could be implemented if you wanted to do so.
Allan
2. Ah you mean DataTables itself rather than the FixedColumns plug-in. I had always thought about the table as being more or less stateless (although it is possible save the state using cookies), and that it should have no effect on the back button. As a user I'd probably find it a bit frustrating that if I click to sort a column, then it would require two 'back' clicks to go back. Although as I say, I'm sure it would be possible to hack it into DataTables.
Allan
Allan
http://yuilibrary.com/gallery/show/history-lite
is it good for this?
Allan
At least in the case of the FixedColumn plugin, there seems to be multiple issues in IE6. The fixed column headers move with the scrollbar while the others stay fixed. Columns outside the intended visible have headings overflowing to the right outside the area. Upon sorting after a horizontal scroll, the intended fixed headers pop out to the left.
Thanks!
While DataTables itself should be fully compatible with IE6, I've not tested FixedColumn in IE6. I'll have a look at how readily possible it will be to add support for IE6 with this. Part of me is surprised it doesn't work, since it doesn't really do anything all that clever - but then part of me isn't surprised since it is IE6 :-)
Allan
I've just committed a fix for the IE6 issue you were seeing: http://github.com/DataTables/FixedColumns/blob/master/media/js/FixedColumns.js . It will be part of the next release of FixedColumns, but this is it ready to roll :-)
Regards,
Allan
Best Regards,
David Baldwin
[code]
Rendering engine
Browser
Machine
CSS grade
Platform(s)
Engine version
[/code]
In newer browsers, instead of fixing only the "Rendering engine" column, it also places the "Platform(s)" column and fixes it to the right of the single intended fixed column. This is presumably because this is the first column of the second row in the header. It also has a gap below the fixed column headers and the tbody, but that may be due to the aforementioned issue. In IE6, I assume the same would happen, but I get a runtime error on page load "Line: 315 - Error: 'this.dom.clone.body.style' is null or not an object"
Best regards,
David Baldwin
I've just committed a fix for the footer issue as well, which can also now be picked up from the link above. Basically the issue appears to be with IE6 and having position: relative, and overflow: hidden on the same element - ouch. Fortunately the DOM is already in a suitable arrangement where by FixedColumns can apply the position: relative to a different element - which is what the fix is.
With regard to the issue about the multiple TR elements in the header, I'm not surprised that this doesn't work in any browser at the moment, as I hadn't made any attempt at supporting this kind of behaviour. However, you got me thinking about it with your example HTML there (thanks for that) and with that format (i.e. rowspan on the fixed columns, spanning the number of rows, and no colspan on the fixed columns), it's actually not all that difficult to do. I've just committed a change which will allow this to work for both the header and footer (and in IE6 ;-) ). As noted, there are a couple of limitations (addressing them would require a lot more work I think), but the example above seems to work well.
Regards,
Allan
Excellent stuff. You are probably getting sick of me by now, but I did run into another issue. The cloned fixed column does not seem to take into account for text wrapping in columns of the main table. The example below using the "index.html' example file is contrived, but should describe what I mean...
[code]
Gecko
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Win 98+ / OSX.2+
1.7
A
[/code]
In this example, the "lorem ipsum" column wraps and takes up additional vertical space. However, the adjacent fixed column does not match this additional space. Thus, this column and all columns below do not line up. This is a very common occurrence in tables with a lot of columns, which is also the most common use case for this plugin. Does that make sense?
Best Regards,
David Baldwin
Allan
Best Regards,
David Baldwin
So the fix is to copy the height from the original table rows, to the cloned table rows, which is fine until it is tried in Firefox... For whatever reason, Firefox appears to add 1px to some rows, and not to others - you can see the effect in this picture: http://datatables.net/dev/fixedcolumns_height.png . It causes vertical scrolling to occur, and just slight misalignment. I can't figure out why, nor can I reproduce it in a simpler scenario. Hence - frustrating...
@wjshohs: Yes DataTables could be styled to look like that. It would need a but of work to get the styling and element positioning exactly right, and I'm not sure what 'select columns' is (a bit like ColVis?), but in principle certainly do-able. The styling section of the site explains the classes and elements DataTables adds to the table and how you can control them: http://datatables.net/styling .
Regards,
Allan
Best Regards,
David Baldwin
Allan
Best Regards,
David Baldwin
~75% of users still using IE6! Ouch...
Allan