MRT logoMaterial React Table

On This Page

    Row Pinning Feature Guide

    Material React Table has a powerful row pinning feature that allows you to either pin rows to the top and bottom of the table as a user scrolls, or pin rows to the top and bottom of the table regardless of scrolling.

    Relevant Props

    #
    Prop Name
    2
    Type
    Default Value
    More Info Links
    1
    boolean | (row: MRT_Row) => boolean
    2
    boolean
    true
    3
    OnChangeFn<RowSelectionState>
    		TanStack Table Pinning Docs
    4
    'sticky' | 'top' | 'bottom' | 'top-and-bottom' | 'select-sticky' | 'select-top' | 'select-bottom'
    'sticky'

    Relevant State

    #
    State Option
    Type
    Default Value
    More Info Links
    1
    { top: string[], bottom: string[] }
    { top: [], bottom: [] }
    		TanStack Table Column Pinning Docs

    Row Pinning Display Modes

    You can enable the row pinning feature with the enableRowPinning prop. There are multiple display modes that you can choose from with the rowPinningDisplayMode prop.

    const table = useMaterialReactTable({
      columns,
      data,
      enableRowPinning: true,
      rowPinningDisplayMode: 'sticky', // default
    });

    • sticky - This is the default display mode. It will make rows stick to the top and bottom of the table as a user scrolls.

    • top - This will statically pin rows to the top of the table upon pinning.

    • bottom - This will statically pin rows to the bottom of the table upon pinning.

    • top-and-bottom - This allows the user to statically pin rows to either the top or bottom of the table.

    • select-sticky - This pins selected rows to the top and bottom of the table as a user scrolls. (alternative pinning UI)

    • select-top - This statically pins selected rows to the top of the table upon pinning. (alternative pinning UI)

    • select-bottom - This statically pins selected rows to the bottom of the table upon pinning. (alternative pinning UI)

    Sticky Row Pinning

    By default, the row pinning feature will add a position sticky style to the pinned rows. This means that the pinned rows will stay in place if the row is already in view. However, the rows will stay in view as the user scrolls up or down.

    Demo

    Open StackblitzOpen Code SandboxOpen on GitHub
    Pin
    First Name
    Last Name
    Email
    City
    DylanMurraydmurray@yopmail.comEast Daphne
    RaquelKohlerrkholer33@yopmail.comColumbus
    ErvinReingerereinger@mailinator.comSouth Linda
    BrittanyMcCulloughbmccullough44@mailinator.comLincoln
    BransonFramibframi@yopmain.comNew York
    BenMurraybenm@email.comSalt Lake City
    ElenaSmithesmith@yopmail.comLos Angeles
    MichaelJohnsonmjohnson@mailinator.comChicago
    SophiaBrownsbrown@yopmail.comHouston
    LucasDavisldavis@mailinator.comPhoenix
    OliviaGarciaogarcia@yopmail.comPhiladelphia
    LiamRodriguezlrodriguez@mailinator.comSan Antonio
    EmmaMartinezemartinez@yopmail.comSan Diego
    NoahHernandeznhernandez@mailinator.comDallas
    AvaLopezalopez@yopmail.comSan Jose
    WilliamGonzalezwgonzalez@mailinator.comAustin
    IsabellaWilsoniwilson@yopmail.comJacksonville
    JamesAndersonjanderson@mailinator.comFort Worth
    MiaThomasmthomas@yopmail.comColumbus
    AlexanderTaylorataylor@mailinator.comCharlotte
    GraceMooregmoore@yopmail.comIndianapolis
    EthanWhiteewhite@mailinator.comSan Francisco
    LilyHarrislharris@yopmail.comSeattle
    DanielMartindmartin@mailinator.comDenver
    ZoeJacksonzjackson@yopmail.comBoston
    MatthewThompsonmthompson@mailinator.comNashville
    EllaGarciaegarcia@yopmail.comDetroit
    DavidMartinezdmartinez@mailinator.comPortland
    AriaRobinsonarobinson@yopmail.comLas Vegas
    JosephClarkjclark@mailinator.comBaltimore

    Source Code 

    1import { useMemo } from 'react';
    2import {
    3  MaterialReactTable,
    4  useMaterialReactTable,
    5  type MRT_ColumnDef,
    6} from 'material-react-table';
    7import { data, type Person } from './makeData';
    8

    9const Example = () => {
    10  const columns = useMemo<MRT_ColumnDef<Person>[]>(
    11    () => [
    12      {
    13        accessorKey: 'firstName',
    14        header: 'First Name',
    15      },
    16      {
    17        accessorKey: 'lastName',
    18        header: 'Last Name',
    19      },
    20      {
    21        accessorKey: 'email',
    22        header: 'Email',
    23      },
    24      {
    25        accessorKey: 'city',
    26        header: 'City',
    27      },
    28    ],
    29    [],
    30  );
    31

    32  const table = useMaterialReactTable({
    33    columns,
    34    data,
    35    enableRowPinning: true,
    36    enablePagination: false,
    37    enableStickyHeader: true,
    38    getRowId: (row) => row.email,
    39    initialState: {
    40      rowPinning: {
    41        top: ['rkholer33@yopmail.com', 'egarcia@yopmail.com'],
    42        bottom: [],
    43      },
    44    },
    45    muiTableContainerProps: {
    46      sx: {
    47        maxHeight: '400px',
    48      },
    49    },
    50  });
    51

    52  return <MaterialReactTable table={table} />;
    53};
    54

    55export default Example;
    56

    Static Row Pinning

    Some of the other row pinning modes will show pinned rows at the top or bottom of the the table regardless of scrolling. This is a simpler implementation of the row pinning feature.

    Demo

    Open StackblitzOpen Code SandboxOpen on GitHub
    Pin
    First Name
    Last Name
    Email
    City
    		DylanMurraydmurray@yopmail.comEast Daphne
    		RaquelKohlerrkholer33@yopmail.comColumbus
    		ErvinReingerereinger@mailinator.comSouth Linda
    		BrittanyMcCulloughbmccullough44@mailinator.comLincoln
    		BransonFramibframi@yopmain.comNew York
    		BenMurraybenm@email.comSalt Lake City
    		ElenaSmithesmith@yopmail.comLos Angeles
    		MichaelJohnsonmjohnson@mailinator.comChicago
    		SophiaBrownsbrown@yopmail.comHouston
    		LucasDavisldavis@mailinator.comPhoenix
    		OliviaGarciaogarcia@yopmail.comPhiladelphia
    		LiamRodriguezlrodriguez@mailinator.comSan Antonio
    		EmmaMartinezemartinez@yopmail.comSan Diego
    		NoahHernandeznhernandez@mailinator.comDallas
    		AvaLopezalopez@yopmail.comSan Jose
    		WilliamGonzalezwgonzalez@mailinator.comAustin
    		IsabellaWilsoniwilson@yopmail.comJacksonville
    		JamesAndersonjanderson@mailinator.comFort Worth
    		MiaThomasmthomas@yopmail.comColumbus
    		AlexanderTaylorataylor@mailinator.comCharlotte
    		GraceMooregmoore@yopmail.comIndianapolis
    		EthanWhiteewhite@mailinator.comSan Francisco
    		LilyHarrislharris@yopmail.comSeattle
    		DanielMartindmartin@mailinator.comDenver
    		ZoeJacksonzjackson@yopmail.comBoston
    		MatthewThompsonmthompson@mailinator.comNashville
    		EllaGarciaegarcia@yopmail.comDetroit
    		DavidMartinezdmartinez@mailinator.comPortland
    		AriaRobinsonarobinson@yopmail.comLas Vegas
    		JosephClarkjclark@mailinator.comBaltimore

    Source Code 

    1import { useMemo } from 'react';
    2import {
    3  MaterialReactTable,
    4  useMaterialReactTable,
    5  type MRT_ColumnDef,
    6} from 'material-react-table';
    7import { data, type Person } from './makeData';
    8

    9const Example = () => {
    10  const columns = useMemo<MRT_ColumnDef<Person>[]>(
    11    () => [
    12      {
    13        accessorKey: 'firstName',
    14        header: 'First Name',
    15      },
    16      {
    17        accessorKey: 'lastName',
    18        header: 'Last Name',
    19      },
    20      {
    21        accessorKey: 'email',
    22        header: 'Email',
    23      },
    24      {
    25        accessorKey: 'city',
    26        header: 'City',
    27      },
    28    ],
    29    [],
    30  );
    31

    32  const table = useMaterialReactTable({
    33    columns,
    34    data,
    35    enableRowPinning: true,
    36    enablePagination: false,
    37    enableStickyHeader: true,
    38    rowPinningDisplayMode: 'top-and-bottom',
    39    getRowId: (row) => row.email,
    40    muiTableContainerProps: {
    41      sx: {
    42        maxHeight: '400px',
    43      },
    44    },
    45  });
    46

    47  return <MaterialReactTable table={table} />;
    48};
    49

    50export default Example;
    51

    Alternative Selection Row Pinning UI

    By default, the row pinning feature adds a pinning display column with pinning buttons for each row. However, you can instead combine the row pinning feature with the row selection feature to pin selected rows.

    const table = useMaterialReactTable({
      columns,
      data,
      enableRowPinning: true,
      enableRowSelection: true,
      rowPinningDisplayMode: 'select-sticky',
    });

    Demo

    Open StackblitzOpen Code SandboxOpen on GitHub
    First Name
    Last Name
    Email
    City
    DylanMurraydmurray@yopmail.comEast Daphne
    RaquelKohlerrkholer33@yopmail.comColumbus
    ErvinReingerereinger@mailinator.comSouth Linda
    BrittanyMcCulloughbmccullough44@mailinator.comLincoln
    BransonFramibframi@yopmain.comNew York
    BenMurraybenm@email.comSalt Lake City
    ElenaSmithesmith@yopmail.comLos Angeles
    MichaelJohnsonmjohnson@mailinator.comChicago
    SophiaBrownsbrown@yopmail.comHouston
    LucasDavisldavis@mailinator.comPhoenix
    OliviaGarciaogarcia@yopmail.comPhiladelphia
    LiamRodriguezlrodriguez@mailinator.comSan Antonio
    EmmaMartinezemartinez@yopmail.comSan Diego
    NoahHernandeznhernandez@mailinator.comDallas
    AvaLopezalopez@yopmail.comSan Jose
    WilliamGonzalezwgonzalez@mailinator.comAustin
    IsabellaWilsoniwilson@yopmail.comJacksonville
    JamesAndersonjanderson@mailinator.comFort Worth
    MiaThomasmthomas@yopmail.comColumbus
    AlexanderTaylorataylor@mailinator.comCharlotte
    GraceMooregmoore@yopmail.comIndianapolis
    EthanWhiteewhite@mailinator.comSan Francisco
    LilyHarrislharris@yopmail.comSeattle
    DanielMartindmartin@mailinator.comDenver
    ZoeJacksonzjackson@yopmail.comBoston
    MatthewThompsonmthompson@mailinator.comNashville
    EllaGarciaegarcia@yopmail.comDetroit
    DavidMartinezdmartinez@mailinator.comPortland
    AriaRobinsonarobinson@yopmail.comLas Vegas
    JosephClarkjclark@mailinator.comBaltimore

    Source Code 

    1import { useMemo } from 'react';
    2import {
    3  MaterialReactTable,
    4  useMaterialReactTable,
    5  type MRT_ColumnDef,
    6} from 'material-react-table';
    7import { data, type Person } from './makeData';
    8

    9const Example = () => {
    10  const columns = useMemo<MRT_ColumnDef<Person>[]>(
    11    () => [
    12      {
    13        accessorKey: 'firstName',
    14        header: 'First Name',
    15      },
    16      {
    17        accessorKey: 'lastName',
    18        header: 'Last Name',
    19      },
    20      {
    21        accessorKey: 'email',
    22        header: 'Email',
    23      },
    24      {
    25        accessorKey: 'city',
    26        header: 'City',
    27      },
    28    ],
    29    [],
    30  );
    31

    32  const table = useMaterialReactTable({
    33    columns,
    34    data,
    35    enablePagination: false,
    36    enableRowPinning: true,
    37    enableRowSelection: true,
    38    enableStickyHeader: true,
    39    rowPinningDisplayMode: 'select-sticky',
    40    getRowId: (row) => row.email,
    41    muiTableContainerProps: {
    42      sx: {
    43        maxHeight: '400px',
    44      },
    45    },
    46  });
    47

    48  return <MaterialReactTable table={table} />;
    49};
    50

    51export default Example;
    52