How can I make the Actions column of the DataTable stick to the right side of the visible area even when scrolling?

[geraldodev]

Hi,

Yesterday, I was investigating the TanStack table and discovered that it has a pinning API feature. You can find more information about it here: https://tanstack.com/table/v8/docs/api/features/column-pinning

Additionally, there is an example available at: https://tanstack.com/table/v8/docs/examples/react/column-pinning However, the example doesn't use sticky columns. Instead, it utilizes three separate tables for the left, center, and right columns.

Initially, I considered placing the Actions column at the beginning, but it seems that most interfaces position it on the right.

So, my question is: Is it possible to implement the desired layout using a single table and the pinning API provided by TanStack?

[danielhangan]

following

[suplere]

Hello, any solution for this issue?

[daga-segwise]

Here is how I did it for the left column.

You can also add initial state to keep it always sticky

You can abstract it more to use for right column pinning, etc.

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.