Column Pinning Guide

Column pinning is a cool feature that lets users pin (freeze) columns to the left or right of the table. Pinned columns will not scroll horizontally with the rest of the columns so that they always stay visible to the user.

Relevant Table OptionsCopy Anchor Link

Relevant Column OptionsCopy Anchor Link

Relevant StateCopy Anchor Link

Enable Column PinningCopy Anchor Link

Column pinning can simply be enabled by setting the enableColumnPinning table option to true.

const table = useShadcnTable({
  data,
  columns,
  enableColumnPinning: true,
});

return <ShadcnTable table={table} />;

Pin (Freeze) Columns By DefaultCopy Anchor Link

Columns can start out pinned in your table by setting the columnPinning states in initialState or state.

const table = useShadcnTable({
  data,
  columns,
  enableColumnPinning: true,
  initialState: { columnPinning: { start: ['email'] } }, //pin email column to the start (left in LTR) by default
});

return <ShadcnTable table={table} />;

Apply Absolute Column WidthsCopy Anchor Link

You might consider using the layoutMode: 'grid-no-grow' table option to give all columns an exact width if you don't want the columns collapsing a little while scrolling. Some people like this subtle behavior, but others do not.

const table = useShadcnTable({
  data,
  columns,
  enableColumnPinning: true,
  layoutMode: 'grid-no-grow',
});

return <ShadcnTable table={table} />;

Column Pinning ExampleCopy Anchor Link

View Extra Storybook Examples