Responsive Collapse of Columns in TanStack Table
If you're building responsive React apps and you are using the TanStack Table v8 library, you might have noticed something: There’s no native way to collapse hidden columns on smaller screens. By default, TanStack Table creates a horizontal scrollbar when columns overflow, and in many UX cases, this isn't ideal. There's even an open discussion about this feature on the official repo: TanStack Table GitHub Discussion #3259 In fact, that GitHub issue is what inspired me to write my first article. I wanted to show a full working implementation of how this can be done today. So, instead of relying on scrollbars, we are going to make a custom implementation inspired on the DataTables Responsive Extension, where hidden columns collapse into expandable sub-rows.
If you're building responsive React apps and you are using the TanStack Table v8 library, you might have noticed something: There’s no native way to collapse hidden columns on smaller screens.
By default, TanStack Table creates a horizontal scrollbar when columns overflow, and in many UX cases, this isn't ideal.
There's even an open discussion about this feature on the official repo: TanStack Table GitHub Discussion #3259
In fact, that GitHub issue is what inspired me to write my first article. I wanted to show a full working implementation of how this can be done today.
So, instead of relying on scrollbars, we are going to make a custom implementation inspired on the DataTables Responsive Extension, where hidden columns collapse into expandable sub-rows.
