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
0
Type
0
Default Value
0
More Info Links
0
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
0
Last Name
0
Email
0
City
0
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