Pinned header group column not moving with its children

[ajkarell]

material-react-table version

v2.0.1

react & react-dom versions

v18.2.0

Describe the bug and the steps to reproduce it

When column pinning is enabled and a header group is pinned along with it's children, the header doesn't move with the pinned columns.

Minimal, Reproducible Example - (Optional, but Recommended)

Enable column pinning on the MaterialReactTable component in the ColumnResizingWithHeaderGroups story, for example:

export const ColumnResizingWithHeaderGroups = () => (
  <MaterialReactTable
    columns={[
      {
        columns: [
          {
            accessorKey: 'firstName',
            footer: 'First Name',
            header: 'First Name',
          },

          {
            accessorKey: 'lastName',
            footer: 'Last Name',
            header: 'Last Name',
          },
        ],
        footer: 'Name',
        header: 'Name',
      },
      {
        columns: [
          {
            accessorKey: 'age',
            footer: 'Age',
            header: 'Age',
          },
          {
            accessorKey: 'address',
            footer: 'Address',
            header: 'Address',
          },
        ],
        footer: 'Info',
        header: 'Info',
      },
    ]}
    data={[...Array(5)].map(() => ({
      address: faker.location.streetAddress(),
      age: faker.number.int(80),
      firstName: faker.person.firstName(),
      lastName: faker.person.lastName(),
    }))}
    enableColumnPinning
    enableColumnResizing
    enableRowSelection
  />
);

Then pin the header group Name. Observe that the header does not move with it's children.

Screenshots or Videos (Optional)

Do you intend to try to help solve this bug with your own PR?

Maybe, I'll investigate and start debugging

Terms

• [X] I understand that if my bug cannot be reliably reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[LueKedowsky]

I have same problem. Do you found the solution?

[ajkarell]

I have same problem. Do you found the solution?

Unfortunately I haven't solved it, but I also haven't tried it since v2.0.1

[KevinVandy]

It won't be solved until a big internal column virtualization refactor. For now, column header groups cannot be virtualized.

[groteck]

I found a workaround with my colleges for that, so using the muiTableHeadCellProps Example:

muiTableHeadCellProps: ({ column}) => ({ sx: column.getIsPinned() ? {
    position: 'sticky',
    top: 0,
    left: 0,
    zIndex: 900,
} : {} })

This is using the hook but you can do the same rapping the function in {} in the component prop muiTableHeadCellProps It is not perfect but at least solve the pinning issue for now.

Forgot to mention that can be a good idea to merge the original props with this not needed in my case but bare in mind that maybe it is a good idea to add it as a result