MRT logoMaterial React Table

Sticky Row Selection Example

Material React Table has the ability to pin rows as they are selected and keep them in view while scrolling. In this example, when rows are selected, they will initially appear to stay in place, but when the user scrolls up or down, the selected 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 //column definitions...
32 );
33
34 const table = useMaterialReactTable({
35 columns,
36 data,
37 enablePagination: false,
38 enableRowPinning: true,
39 enableRowSelection: true,
40 enableStickyHeader: true,
41 rowPinningDisplayMode: 'select-sticky',
42 getRowId: (row) => row.email,
43 initialState: {
44 rowPinning: {
45 top: ['ereinger@mailinator.com'],
46 },
47 rowSelection: {
48 'ereinger@mailinator.com': true,
49 },
50 },
51 muiTableContainerProps: {
52 sx: {
53 maxHeight: '400px',
54 },
55 },
56 muiTableBodyRowProps: ({ row, table }) => {
57 const { density } = table.getState();
58 return {
59 sx: {
60 //Set a fixed height for pinned rows
61 height: row.getIsPinned()
62 ? `${
63 //Default mrt row height estimates. Adjust as needed.
64 density === 'compact' ? 37 : density === 'comfortable' ? 53 : 69
65 }px`
66 : undefined,
67 },
68 };
69 },
70 });
71
72 return <MaterialReactTable table={table} />;
73};
74
75export default Example;
76

View Extra Storybook Examples