Skip to content

[bug]: unexpected margin between multiple pinned columns in useDataTable columnPinning #913

Description

@Loosand

Issue Description

When using the columnPinning feature in useDataTable to freeze multiple columns, I've noticed that an unexpected margin/gap appears between the pinned columns. This creates a discontinuous UI appearance, affecting the overall visual experience and usability of the table.

Create a data table using useDataTable

Configure columnPinning to pin multiple columns (e.g., columnPinning: { left: ['column1', 'column2', 'column3'] })
Render the table and observe the result
Notice the unexpected gaps/margins between the pinned columns

Expected Behavior

When multiple columns are pinned, they should appear tightly connected without any extra margins or gaps between them, visually presenting as one continuous pinned area.
Actual Behavior
There are noticeable gaps/margins between multiple pinned columns, making the pinned area look disconnected and breaking the visual integrity of the table.
Environment Information

How to reproduce

2025-03-05.10.56.49.mov

Link to reproduction

https://github.com/sadmann7/shadcn-table/blob/main/src/app/_components/tasks-table.tsx

Activity

  1. Loosand commented on Mar 5, 2025

    @Loosand
    Author

    This link may fix the problem

    TanStack/table#5783 (comment)

  2. sadmann7 commented on Oct 2, 2026

    @sadmann7
    Owner

    Fixed in #1166.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions