MRT logoMaterial React Table

On This Page

    The sticky header and footer feature allows you to keep the header and footer of the table visible while scrolling through the table. This is useful when you have a large table and want to keep the header and footer visible at all times.

    Relevant Table Options

    #
    Prop Name
    Type
    Default Value
    More Info Links
    1
    boolean
    2
    boolean

    Enable Sticky Header

    Enabling the sticky header is as simple as setting the enableStickyHeader table option to true. This will make the header of the table stick to the top and remain visible while scrolling through the table.

    When the sticky header is enabled, you will probably also want to give the table a maxHeight so that the table can scroll vertically and keep the header visible. You can do this by styling the table container with the muiTableContainerProps table option.

    If no maxHeight is specified, the table container will default to a 100vh maxHeight when enableStickyHeader is enabled.

    <MaterialReactTable
      columns={columns}
      data={data}
      enableStickyHeader
      muiTableContainerProps={{ sx: { maxHeight: '500px' } }}
    />

    Similarly, enabling the sticky footer is as simple as setting the enableStickyFooter table option to true. This will make the footer of the table stick to the bottom of the table and always be visible, even before the table is scrolled to the bottom.

    <MaterialReactTable columns={columns} data={data} enableStickyFooter />

    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
    First NameLast NameEmailCity

    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    //column definitions...
    36  );
    37

    38  const table = useMaterialReactTable({
    39    columns,
    40    data,
    41    enableBottomToolbar: false,
    42    enableStickyHeader: true,
    43    enableStickyFooter: true,
    44    enablePagination: false,
    45    muiTableContainerProps: { sx: { maxHeight: '400px' } },
    46    muiTableBodyCellProps: {
    47      sx: (theme) => ({
    48        backgroundColor:
    49          theme.palette.mode === 'dark'
    50            ? theme.palette.grey[900]
    51            : theme.palette.grey[50],
    52      }),
    53    },
    54  });
    55

    56  return <MaterialReactTable table={table} />;
    57};
    58

    59export default Example;
    60

    View Extra Storybook Examples