Horizontal Scroll Doesn't Scroll Header Row

[semireg]

• bug: H scroll doesn't scroll the top row. Is this normal? I've tried every layout and it still does this.

Environment Details

• react-tabulator version: 0.21.0
• OS: macOS

                <ReactTabulator
                  className="compact celled"
                  columns={currentColumns}
                  data={data}
                  options={{
                    layout: 'fitDataTable',
                    virtualDomHoz: true,
                    height: tableHeight,
                    movableColumns: isTable,

currentColumns is one row column, and then the data headers.

    const rowNumColumn = {
      title: 'Row',
      field: 'row',
      width: 75,
      hozAlign: 'center',
      headerSort: false,
      frozen: false
    } as const;
    const dataColumns = importRecord
      .get('header')
      .map((h) => ({ title: h, field: h, editor, headerMenu, headerSort: false }))
      .toArray();
    return [rowNumColumn, ...dataColumns];

Really trying to figure out what I'm doing wrong...

[petrov826]

I'm facing the same problem. No one seems to have been assigned to this issue, will it be fixed in next release?

[detonationbox0]

Throwing this out there if anybody else is having this issue, we were having trouble with this file:

import 'react-tabulator/lib/css/tabulator_materialize.min.css';

And replaced it with this file:

import 'tabulator-tables/dist/css/tabulator_materialize.min.css';

Now the header scrolls correctly

[syllith]

Thank you so much @detonationbox0

This fixed my issue. In my case, I was using this theme (from the react-tabulator package):

import 'react-tabulator/lib/css/tabulator_semanticui.min.css'

I wanted to use the same theme, so I just used this one from the tabulator-tables pacakge:

import 'tabulator-tables/dist/css/tabulator_semanticui.min.css';

Worked like a charm. Everything looks the exact same, but my table headers are now functioning as intended.