How to pin column and scroll the rest of the table?
Hello people,
Given a Tanstack table with several columns in a React application.
As a user I'd like to see at all times the first column (e.g. ID) while I horizontally scroll the rest of the table (more columns than the screen can fit).
In Tanstack table there's the concept of pinning here:
https://tanstack.com/table/v8/docs/api/features/pinning
But does it behave like I described?
Would you have any tips to implement it?
Thanks! ❤️
3 Replies
fascinating-indigo•2y ago
Hello, I'm working on a Next.js project that uses TanStack Table and I'm having the same doubts. When looking at the examples provided to illustrate the pinning behaviour, I can't see any pinned columns nor understand what to do to pin the first column, or any other of our choice, to either the left or the right. Any insights would be much appreciated.
wise-white•2y ago
Column Pinning Guide | TanStack Table Docs
Examples
Want to skip to the implementation? Check out these examples:
wise-white•2y ago
React TanStack Table Column Pinning Sticky Example | TanStack Table...
An example showing how to implement Column Pinning Sticky in React using TanStack Table.