Skip to content

[v7+] Collapse header group #6102

@SamuelBageot

Description

@SamuelBageot

TanStack Table version

v7.3.2

Framework/Library version

v18.3

Describe the bug and the steps to reproduce it

I am trying to implement a "toggle collapse header group" functionality:

  • say I have a table with a header, for example like the docs resizing demo :
Image
  • I want to collapse this header (we can imagine a little button at the left of the "Info" text)
  • This way the "Info" header width is reduced, and the subheader width is reduced too, like this for example :
Image

So it keeps the first subheader column, or maybe we can imagine a placeholder column to represents this collapse.

Very important, I need to keep the visibleColumns state independent, because in my app this collapsed columns can't be considered as hided (in the way Tanstack table considered hided columns), but really as collapsed.

Your Minimal, Reproducible Example - (Sandbox Highly Recommended)

https://codesandbox.io/p/sandbox/github/tannerlinsley/react-table/tree/v7/examples/column-resizing?file=%2Fsrc%2FApp.js%3A62%2C19&from-embed

Screenshots or Videos (Optional)

No response

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

None

Terms & Code of Conduct

  • I agree to follow this project's Code of Conduct
  • I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions