How to fix columns when I have 2 header rows
How to fix columns when I have 2 header rows
I have a DataTable with 2 header rows. Both wrapped in the same THEAD.
I want to update to FixedColumns 4.2.1 and noticed that the columns, that are supposed to be fixed, in the second header row, move when I scroll the table horizontally
$("#myTable").DataTable(
fixedColumns: {
left: 2
}
)
In the file dataTables.fixedColumns.js there's the responsible code
var colHeader = $$1(column.header());
[...]
colHeader
.css(this._getCellCSS(true, headLeft, 'left'))
.addClass(this.classes.fixedLeft);
The first line tries to identify the header for the current column
The second part eventually sets the styles that fixes the header-columns. Setting position:sticky and add class dtfc-fixed-left
It seems to me call to column.header() only returns one cell. I had expected it to return every cell from the THEAD from the given column, which would be two cells when there are two rows in the THEAD.
Is this an issue in DataTables or in the FixedColumns extension?
Why does the call to header() only return one cell and not the respective cell of every header row? Is this expected behaviour?
I guess I would use the callback fnHeaderCallback to iterate through the cells from the first row and copy position:sticky and class dtfc-fixed-left to the respective cells from the second row.
Are there better solutions?
Answers
At the moment you can't - sorry. FixedHeader is not multi-row
thead
aware at this time. It is something I want to address in future.Allan