MRT logoMantine React Table

Column Pinning Example

Mantine React Table has an easy-to-enable column pinning feature. Columns can be pinned to the left or right of the table, and the column will be frozen in place while the rest of the table scrolls horizontally. See the Column Pinning Feature Guide for more information.

First Name
Middle Name
Last Name
Kentucky1DylanSprouseMurray261 Erdman FordEast Daphne
Ohio2RaquelHakeemKohler769 Dominic GroveColumbus
West Virginia3ErvinKrisReinger566 Brakus InletSouth Linda
Nebraska4BrittanyKathrynMcCullough722 Emie StreamLincoln
South Carolina5BransonJohnFrami32188 Larkin TurnpikeCharleston

Rows per page

1-5 of 5

import '@mantine/core/styles.css';
import '@mantine/dates/styles.css'; //if using mantine date picker features
import 'mantine-react-table/styles.css'; //make sure MRT styles were imported in your app root (once)
import { useMemo } from 'react';
import { MantineReactTable, type MRT_ColumnDef } from 'mantine-react-table';
import { data, type Person } from './makeData';

const Example = () => {
  const columns = useMemo<MRT_ColumnDef<Person>[]>(
    () => [
        accessorKey: 'id',
        enableColumnPinning: false, //disable column pinning for this column
        header: 'ID',
        size: 50,
        accessorKey: 'firstName',
        header: 'First Name',
        accessorKey: 'middleName',
        header: 'Middle Name',
        accessorKey: 'lastName',
        header: 'Last Name',
        accessorKey: 'address',
        header: 'Address',
        size: 300,
        accessorKey: 'city', //this column gets pinned to the right by default because of the initial state,
        header: 'City',

        accessorKey: 'state', //this column gets pinned left by default because of the the initial state,
        header: 'State',

  return (
      initialState={{ columnPinning: { left: ['state'], right: ['city'] } }}

export default Example;

View Extra Storybook Examples