MRT logoMaterial React Table

    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 Props

    1
    boolean
    2
    boolean

    Enable Sticky Header

    Enabling the sticky header is as simple as setting the enableStickyHeader prop 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 prop.

    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 prop 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
    DylanMurraydmurray@yopmail.comEast Daphne
    RaquelKohlerrkholer33@yopmail.comColumbus
    ErvinReingerereinger@mailinator.comSouth Linda
    BrittanyMcCulloughbmccullough44@mailinator.comLincoln
    BransonFramibframi@yopmain.comNew York
    KevinKleinkklien@mailinator.comNebraska

    Rows per page

    1-6 of 6

    Source Code

    1import React, { FC, useMemo } from 'react';
    2import MaterialReactTable, { MRT_ColumnDef } from 'material-react-table';
    3import { data, Person } from './makeData';
    4
    5const Example: FC = () => {
    6 const columns = useMemo<MRT_ColumnDef<Person>[]>(
    7 () => [
    8 {
    9 accessorKey: 'firstName',
    10 header: 'First Name',
    11 footer: 'First Name',
    12 },
    13 {
    14 accessorKey: 'lastName',
    15 header: 'Last Name',
    16 footer: 'Last Name',
    17 },
    18 {
    19 accessorKey: 'email',
    20 header: 'Email',
    21 footer: 'Email',
    22 },
    23 {
    24 accessorKey: 'city',
    25 header: 'City',
    26 footer: 'City',
    27 },
    28 ],
    29 [],
    30 );
    31
    32 return (
    33 <MaterialReactTable
    34 columns={columns}
    35 data={data}
    36 enableStickyHeader
    37 enableStickyFooter
    38 muiTableContainerProps={{ sx: { maxHeight: '300px' } }}
    39 />
    40 );
    41};
    42
    43export default Example;
    44

    View Extra Storybook Examples