MRT logoMaterial React Table

Legacy V2 Docs

Static Row Pinning Example

Material React Table has the ability to pin rows and keep them in view while scrolling. In this example, when rows are pinned, they will be pinned statically to either the top or bottom of the table. Learn more about row pinning in the Row Pinning Feature Guide.

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 () => [
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

View Extra Storybook Examples