MRT logoMaterial React Table

Sticky Header Example

Material React Table easily allows you to make the header and footer sticky while scrolling. See the Sticky Header Feature Guide for more information.

More Examples

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
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 //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