Column Pinning on DataGrid not pinning to side when scrolling horizontally

Hi Mohammad,

Understanding

You're using the ReUI DataGrid with column pinning. When you pin columns to the left or right, the pinning works initially but the columns don't stay in place when you scroll horizontally.

Solution

This is a common issue with ReUI's DataGrid column pinning. The pinned columns use CSS position: sticky, which requires the table container to have overflow-x set to auto or scroll for the sticky behaviour to work.

Here's what to check:

1. Make sure the DataGrid is inside the ReUI DataGridTableViewport — the wrapper component that handles the scrollable viewport with proper overflow. If you wrapped the DataGrid in your own container, the overflow might not be set correctly.

2. Check for parent overflow: hidden — if any ancestor of the DataGrid has overflow: hidden, sticky positioning on the columns won't work outside that container. Remove or change overflow: hidden on parent divs.

3. The DataGrid needs a defined width — if the grid is inside a flex container without a fixed width, the table may not have enough room to scroll, and sticky won't engage.

4. Verify you're passing columnPinning state correctly — In TanStack Table v9 (used by ReUI), pinning uses start/end (not left/right). Your pin state should look like:

   columnPinning: {
     start: ['columnId1', 'columnId2'],
     end: ['columnId3']
   }
   

Could you share a minimal reproduction of your DataGrid setup? That would help narrow down exactly where the sticky positioning is being blocked.

Sources

• ReUI DataGrid Docs

Next Steps

If the above doesn't resolve it, try isolating the DataGrid in a simple page with no custom containers to confirm the pinning works in a clean setup.

This reply was generated by AI. A human will follow up if needed.