column-pinning.mdx

import Head from 'next/head'; import TableOptionsTable from '../../../components/prop-tables/TableOptionsTable'; import ColumnOptionsTable from '../../../components/prop-tables/ColumnOptionsTable'; import StateOptionsTable from '../../../components/prop-tables/StateOptionsTable'; import Example from '../../../examples/enable-column-pinning';

<title>{'Column Pinning Guide - Material React Table V3 Docs'}</title>

Column Pinning Feature 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 Options

<TableOptionsTable onlyOptions={new Set(['enableColumnPinning', 'enableColumnUnpinAll', 'enableColumnResetPins', 'onColumnPinningChange'])} />

Relevant Column Options

<ColumnOptionsTable onlyOptions={new Set(['enablePinning'])} />

Relevant State

<StateOptionsTable onlyOptions={new Set(['columnPinning'])} />

Enable Column Pinning

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

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

return <MaterialReactTable table={table} />;

Pin (Freeze) Columns By Default

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

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

return <MaterialReactTable table={table} />;

Apply Absolute Column Widths

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 = useMaterialReactTable({
  data,
  columns,
  enableColumnPinning: true,
  layoutMode: 'grid-no-grow',
});

return <MaterialReactTable table={table} />;

Column Pinning Example

View Extra Storybook Examples