MRT logoMaterial React Table

Legacy V2 Docs

Sticky 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 initially appear to stay in place, but when the user scrolls up or down, the rows will stick to 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 getRowId: (row) => row.email,
39 initialState: {
40 rowPinning: {
41 top: ['rkholer33@yopmail.com', 'egarcia@yopmail.com'],
42 bottom: [],
43 },
44 },
45 muiTableContainerProps: {
46 sx: {
47 maxHeight: '400px',
48 },
49 },
50 muiTableBodyRowProps: ({ row, table }) => {
51 const { density } = table.getState();
52 return {
53 sx: {
54 //Set a fixed height for pinned rows
55 height: row.getIsPinned()
56 ? `${
57 //Default mrt row height estimates. Adjust as needed.
58 density === 'compact' ? 37 : density === 'comfortable' ? 53 : 69
59 }px`
60 : undefined,
61 },
62 };
63 },
64 });
65
66 return <MaterialReactTable table={table} />;
67};
68
69export default Example;
70

View Extra Storybook Examples