How to fix columns when I have 2 header rows

How to fix columns when I have 2 header rows

BardnetBardnet Posts: 3Questions: 2Answers: 0

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

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin

    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

Sign In or Register to comment.