Memoize Components Guide

The memoMode prop will allow you to either memoize table cells, table rows, or the entire table body in order to improve render performance on large tables.

However, memoizing these components will BREAK some features!

DON'T MEMOIZE COMPONENTS UNLESS YOU KNOW WHAT YOU'RE DOING AND UNDERSTAND WHICH FEATURES WILL BREAK.

Memoizing Table Cells

Memoizing table cells can make a small but positive impact on render performance, and it is only incompatible with a few of the dynamic features of Mantine React Table.

Cell Memoization Breaks the Following Features:

density toggle, column resizing

These features are incompatible with cell memoization because they depend on table cells being re-rendered.

Features That Should Still Work with Cell Memoization:

column hiding, column reordering, column pinning, editing, filtering,   pagination, searching, sorting, row expanding, row selection, row   virtualization,

const table = useMantineReactTable({
  columns,
  data,
  enableDensityToggle: false, //density does not work with memoized cells
  memoMode: 'cells', // memoize table cells to improve render performance, but break some features
})

Demo

Memoized Cells

First Name	Last Name	Address	City	State
Alberta	Kautzer	82321 Reichert Bridge	Armandoland	Mississippi

Imelda	Harber	866 Kuvalis Groves	North Kieran	Iowa

Leonie	Hickle	6094 Hudson Park	Mandytown	Oregon

Cristal	Carroll	41222 Webster Oval	South Blaze	New Mexico

Golda	Brakus	13718 Blick Port	Fort Tressachester	New Mexico

Jackeline	Little	130 Kuhlman Creek	Gordonworth	Ohio

Karson	Flatley	9494 McCullough Stravenue	Pricemouth	Delaware

Jonathan	Bednar	79954 Klein Loaf	Abdielville	Indiana

Rocky	Funk	602 Josianne Ramp	Fort Pearlworth	Mississippi

Anthony	Stokes	71571 Santa Mission	Beaumont	Alaska

Brenden	Gislason	1291 Lyla Gateway	Lacey	North Carolina

Webster	Ankunding	229 Yasmin Passage	Doylefurt	Arizona

Marley	Towne	5895 Bartoletti Falls	Kendale Lakes	Indiana

Alexandrine	Hintz	89462 Halvorson Junction	Jerrodview	Missouri

Xavier	Lowe	829 Rodriguez Mall	Grantberg	Texas

Camden	Kemmer	3110 Andreane Villages	Corpus Christi	Nebraska

Ashtyn	Hermiston	6087 Howell Ports	Castro Valley	Tennessee

Kaylee	Baumbach	9576 Kristina Stravenue	South Beverly	Colorado

Eugene	VonRueden	43151 Rogelio Alley	Balistrerifurt	Tennessee

Robin	McDermott	5032 Batz Valleys	Shaynabury	Montana

Rows per page

1-20 of 86

1
import { useMemo } from 'react';
2
import { MantineReactTable, type MRT_ColumnDef } from 'mantine-react-table';
3
import { Title } from '@mantine/core';
4
import { data, type Person } from './makeData';
5

6
export const Example = () => {
7
  const columns = useMemo<MRT_ColumnDef<Person>[]>(
8
    () => [
9
      {
10
        accessorKey: 'firstName',
11
        header: 'First Name',
12
      },
13
      {
14
        accessorKey: 'lastName',
15
        header: 'Last Name',
16
      },
17
      {
18
        accessorKey: 'address',
19
        header: 'Address',
20
      },
21
      {
22
        accessorKey: 'city',
23
        header: 'City',
24
      },
25
      {
26
        accessorKey: 'state',
27
        header: 'State',
28
      },
29
    ],
30
    [],
31
  );
32

33
  return (
34
    <MantineReactTable
35
      columns={columns}
36
      data={data}
37
      //just for demo purposes
38
      defaultColumn={{
39
        Cell: ({ cell }) => {
40
          //see how often cells are re-rendered
41
          // console.info('render cell', cell.id);
42
          return <>{cell.getValue()}</>;
43
        },
44
      }}
45
      editDisplayMode="row"
46
      enableColumnOrdering
47
      enableDensityToggle={false} //density toggle is not compatible with memoization
48
      enableEditing
49
      enablePinning
50
      enableRowSelection
51
      enableStickyHeader
52
      initialState={{ pagination: { pageSize: 20, pageIndex: 0 } }}
53
      memoMode="cells"
54
      mantineTableContainerProps={{ sx: { maxHeight: '500px' } }}
55
      renderDetailPanel={({ row }) => <div>{row.original.firstName}</div>}
56
      renderTopToolbarCustomActions={() => (
57
        <Title order={4}>Memoized Cells</Title>
58
      )}
59
    />
60
  );
61
};
62

63
export default Example;

1
import { useMemo } from 'react';
2
import { MantineReactTable } from 'mantine-react-table';
3
import { Title } from '@mantine/core';
4
import { data } from './makeData';
5

6
export const Example = () => {
7
  const columns = useMemo(
8
    () => [
9
      {
10
        accessorKey: 'firstName',
11
        header: 'First Name',
12
      },
13
      {
14
        accessorKey: 'lastName',
15
        header: 'Last Name',
16
      },
17
      {
18
        accessorKey: 'address',
19
        header: 'Address',
20
      },
21
      {
22
        accessorKey: 'city',
23
        header: 'City',
24
      },
25
      {
26
        accessorKey: 'state',
27
        header: 'State',
28
      },
29
    ],
30
    [],
31
  );
32

33
  return (
34
    <MantineReactTable
35
      columns={columns}
36
      data={data}
37
      //just for demo purposes
38
      defaultColumn={{
39
        Cell: ({ cell }) => {
40
          //see how often cells are re-rendered
41
          // console.info('render cell', cell.id);
42
          return <>{cell.getValue()}</>;
43
        },
44
      }}
45
      editDisplayMode="row"
46
      enableColumnOrdering
47
      enableDensityToggle={false} //density toggle is not compatible with memoization
48
      enableEditing
49
      enablePinning
50
      enableRowSelection
51
      enableStickyHeader
52
      initialState={{ pagination: { pageSize: 20, pageIndex: 0 } }}
53
      memoMode="cells"
54
      mantineTableContainerProps={{ sx: { maxHeight: '500px' } }}
55
      renderDetailPanel={({ row }) => <div>{row.original.firstName}</div>}
56
      renderTopToolbarCustomActions={() => (
57
        <Title order={4}>Memoized Cells</Title>
58
      )}
59
    />
60
  );
61
};
62

63
export default Example;

Memoizing Table Rows

Memoizing entire table rows can make an even more positive impact on render performance, but it is incompatible with a lot of the dynamic features of Mantine React Table.

Row Memoization Breaks the Following Features:

density toggle, column hiding, column resizing, column reordering, column pinning, row expanding, row selection

These features are incompatible with row memoization because they require the entire row or cells to be re-rendered in order to update the UI.

Features That Should Still Work with Row Memoization:

filtering, pagination, searching, sorting, row virtualization,

const table = useMantineReactTable({
  columns,
  data,
  enableDensityToggle: false, //density does not work with memoized rows
  enableHiding: false, //column hiding does not work with memoized rows
  memoMode: 'rows', // memoize table rows to improve render performance, but break a lot of features
});

Demo

Memoized Rows

First Name	Last Name	Address	City	State
Kyleigh	Padberg	57128 Layla Canyon	Sedrickfurt	Alabama
Madelynn	Conroy	006 Edna Well	Oak Lawn	Utah
Lisette	King	37090 Jordon Light	Fort Natalie	Oregon
Emmet	Medhurst	27667 Tillman Drive	Pittsburg	Vermont
Melissa	Stark	70121 Gleichner Expressway	East Cary	Florida
Thaddeus	Davis	250 Maybell Springs	East Norvalmouth	Missouri
Nettie	Flatley	96048 Abernathy Way	South Jackie	Maine
Narciso	Veum	164 Prosacco Estate	Lake Linwoodstead	Florida
Giovani	Wolff	66888 Cullen Center	New Nicolashaven	Rhode Island
Jalen	Cormier	50679 Darby Drive	Jamaalburgh	Texas
Jasmin	Gibson	72724 Crist Groves	West Harley	Illinois
Mohammad	Hamill	443 Wilhelm Plaza	Terre Haute	New Mexico
Milo	Dicki	778 Wilfred Meadow	Krisland	Arkansas
Erich	Lynch	60472 Price Parks	Lake Mavis	Illinois
Deontae	Boyle	4573 Zboncak Underpass	Dandrefort	Michigan
Antwon	Turcotte	80006 Luettgen Well	New Lucienneshire	West Virginia
Marcella	Hermann	0339 Kunde Junctions	Tallahassee	Alaska
Maud	Abernathy	3590 Shayna Path	North Afton	South Carolina
Asa	Crist	675 Tamara Corner	North Melody	New Mexico
Anita	Wiza	47680 Rhianna Roads	Welchhaven	Ohio

Rows per page

1-20 of 88

1
import { useMemo } from 'react';
2
import { MantineReactTable, type MRT_ColumnDef } from 'mantine-react-table';
3
import { Title } from '@mantine/core';
4
import { data, type Person } from './makeData';
5

6
export const Example = () => {
7
  const columns = useMemo<MRT_ColumnDef<Person>[]>(
8
    () => [
9
      {
10
        accessorKey: 'firstName',
11
        header: 'First Name',
12
      },
13
      {
14
        accessorKey: 'lastName',
15
        header: 'Last Name',
16
      },
17
      {
18
        accessorKey: 'address',
19
        header: 'Address',
20
      },
21
      {
22
        accessorKey: 'city',
23
        header: 'City',
24
      },
25
      {
26
        accessorKey: 'state',
27
        header: 'State',
28
      },
29
    ],
30
    [],
31
  );
32

33
  return (
34
    <MantineReactTable
35
      columns={columns}
36
      data={data}
37
      //just for demo purposes
38
      defaultColumn={{
39
        Cell: ({ cell }) => {
40
          //see how often cells are re-rendered
41
          // console.info('render cell', cell.id);
42
          return <>{cell.getValue()}</>;
43
        },
44
      }}
45
      enableDensityToggle={false} //density toggle is not compatible with memoization
46
      enableHiding={false}
47
      enableStickyHeader
48
      initialState={{ pagination: { pageSize: 20, pageIndex: 0 } }}
49
      memoMode="rows"
50
      mantineTableContainerProps={{ sx: { maxHeight: '500px' } }}
51
      renderTopToolbarCustomActions={() => (
52
        <Title order={4}>Memoized Rows</Title>
53
      )}
54
    />
55
  );
56
};
57

58
export default Example;

1
import { useMemo } from 'react';
2
import { MantineReactTable } from 'mantine-react-table';
3
import { Title } from '@mantine/core';
4
import { data } from './makeData';
5

6
export const Example = () => {
7
  const columns = useMemo(
8
    () => [
9
      {
10
        accessorKey: 'firstName',
11
        header: 'First Name',
12
      },
13
      {
14
        accessorKey: 'lastName',
15
        header: 'Last Name',
16
      },
17
      {
18
        accessorKey: 'address',
19
        header: 'Address',
20
      },
21
      {
22
        accessorKey: 'city',
23
        header: 'City',
24
      },
25
      {
26
        accessorKey: 'state',
27
        header: 'State',
28
      },
29
    ],
30
    [],
31
  );
32

33
  return (
34
    <MantineReactTable
35
      columns={columns}
36
      data={data}
37
      //just for demo purposes
38
      defaultColumn={{
39
        Cell: ({ cell }) => {
40
          //see how often cells are re-rendered
41
          // console.info('render cell', cell.id);
42
          return <>{cell.getValue()}</>;
43
        },
44
      }}
45
      enableDensityToggle={false} //density toggle is not compatible with memoization
46
      enableHiding={false}
47
      enableStickyHeader
48
      initialState={{ pagination: { pageSize: 20, pageIndex: 0 } }}
49
      memoMode="rows"
50
      mantineTableContainerProps={{ sx: { maxHeight: '500px' } }}
51
      renderTopToolbarCustomActions={() => (
52
        <Title order={4}>Memoized Rows</Title>
53
      )}
54
    />
55
  );
56
};
57

58
export default Example;

Memoizing Table Body

If your table never needs to re-render and you do not use any of the dynamic features of Mantine React Table, you can memoize the entire table body to massively improve render performance.

Table Body Memoization Breaks the Following Features:

density toggle, column hiding, column resizing, column reordering, column   pinning, row expanding, row selection, filtering (internal client-side),   pagination (internal client-side), searching (internal client-side), sorting   (internal client-side), row virtualization

None of these features will work with table body memoization because the entire table body is memoized. The table is essentially "frozen" at the first render.

Features That Should Still Work with Table Body Memoization:

manual server side sorting, pagination, filtering

const table = useMantineReactTable({
  columns,
  data,
  enableColumnActions: false, //no need for column actions if none of them are enabled
  enableColumnFilters: false, //filtering does not work with memoized table body
  enableDensityToggle: false, //density does not work with memoized table body
  enableGlobalFilter: false, //searching does not work with memoized table body
  enableHiding: false, //column hiding does not work with memoized table body
  enablePagination: false, //pagination does not work with memoized table body
  enableSorting: false, //sorting does not work with memoized table body
  memoMode: 'table-body', // memoize table body to improve render performance, but break all features
})

Demo

Static Memoized Table

First Name	Last Name	Address	City	State
Erna	Haag	8371 Legros Mountain	Leonport	Wyoming
Judy	Koepp	88662 Nelda Coves	Farmington Hills	Alaska
Carmine	Adams	543 Herzog Mount	East Eleanoraview	Texas
Neoma	Hettinger	570 Mason Course	Jeniferhaven	New Jersey
Hulda	Hauck	859 Kilback Ridges	Azusa	Georgia
Gregory	Bayer	900 Emely Shores	Minnetonka	Missouri
Edgardo	Klocko	64056 Malachi Station	Kautzerville	New Hampshire
Francesca	O'Hara	84041 Kaleb Club	Lake Alize	Massachusetts
Jedediah	McGlynn	64073 Lynch Burg	South Titus	Texas
Arianna	West	9007 Gottlieb Cliffs	Rockwall	Illinois
Lizzie	Grant	359 Kristy Square	North Conradfort	Kentucky
Hobart	Harris	696 Grant Lock	Anahiberg	Arizona
Bailey	Kessler	31389 Gerhard Meadow	Birmingham	New Hampshire
Meda	Denesik	2454 Shana Plains	Bradtkeland	Illinois
Cruz	Purdy	761 Boyer Vista	Bolingbrook	Arizona
Abdul	Leuschke	7263 Maynard Greens	Port Jazmyne	Maine
Alia	Yost	40402 Fahey Neck	Lehnerstad	Louisiana
Maribel	Johns	093 Alvis Lights	Port Leathabury	Pennsylvania
Bertrand	Pagac	660 Smith Canyon	West Craig	Florida
Bennie	Lueilwitz	04589 Simonis Circle	Kozeycester	Tennessee
Adelle	Wiza	90890 Chelsie Manors	Kuhlmanville	Oklahoma
Rosendo	Skiles	293 Barry Rest	Guiseppeboro	Maine
Anahi	Howell	844 Marilyne Road	Kipport	Arkansas
Wilbert	Cummings	5031 Chandler Center	West Florence	Connecticut
Daphne	Reichert	0415 Ratke Junction	Troy	Oklahoma
Vladimir	Lesch	73073 Elinor Ville	West Hope	Michigan
Jayde	Shields	4424 Zane Glens	Auerside	Florida
Jennie	Reichert	007 Zboncak Light	Alyciahaven	Delaware
Leilani	Rohan	16737 Elta Roads	Osinskichester	Alabama
Emery	Schultz	40078 Lolita Oval	Wauwatosa	Oregon
Aisha	Bosco	466 Crist Coves	North Henriette	Connecticut
Zita	Mraz	788 Malinda Plaza	East Jayda	Wisconsin
Kelvin	Will	07225 Kub Rue	Vacaville	Wyoming
Salma	Howe	724 Marvin Lakes	West Alanaview	Indiana
May	Braun	1700 Gerlach Route	Fort Carson	Alabama
Helena	Senger	05454 Mills View	Fort Kiarramouth	Texas
Sallie	Wintheiser	645 O'Conner Place	Kihnland	Wyoming
Sydni	McGlynn	124 Brock Branch	Fort Jerel	Maryland
Gennaro	Carroll	58234 Runolfsson Mountain	Nikolascester	Maine
Sidney	Kuvalis	186 Donavon Corners	West Marcellusfort	Texas
Ted	O'Hara	47585 Halie Harbors	Lake Kyle	Michigan
Jeffrey	Wiegand	77672 Kilback Curve	West Jazminboro	Utah
Geo	Marks	122 Misty Trace	Louveniastead	Michigan
Jayde	Crooks	019 Garnet Passage	Croninfield	Delaware
Zula	Kuphal	865 Dach Stravenue	Framingham	North Carolina
Katarina	Luettgen	69556 Jayden Springs	Freemanchester	New Mexico
Jabari	Barrows	988 Halvorson Hills	West Alessandraport	New Jersey
Aurelie	Kohler	0568 Shields Manors	Lakewood	Maryland
Nelle	Sauer	21492 Huels Walk	Citrus Heights	North Carolina
Nat	Konopelski	50202 Jovan Underpass	Cornellside	Vermont
Jada	Graham	561 Samson Vista	Port Toneyview	Louisiana
Laurianne	Sawayn	247 Tremblay Rapid	Vanceville	Idaho
Shemar	Kirlin	7049 Skiles Field	North Dudley	Alaska
Edna	Brakus	899 Edd Crossing	New Jadyn	Texas
Lilly	Yost	085 Milton Vista	Lindaton	Louisiana
Clemmie	Haley	1242 Chesley Greens	Smyrna	Hawaii
Robb	Bernhard	717 Enrique Village	Giovannimouth	Idaho
Adrain	Will	711 Alycia Corner	East Myra	South Dakota
Madelynn	Volkman	20823 Marcos Mountain	Runolfsdottircester	Wisconsin
Winifred	Champlin	172 Daisy Mill	North Patsyhaven	Montana
Coy	Schowalter	890 Alverta Plaza	Hadleyfort	Wisconsin
Maryse	Beer	4664 Stefan Circles	Lake Issac	New Hampshire
Norene	Jacobi	52793 Hegmann Isle	Erie	Alaska
Johnathon	Barton	253 Cayla Dale	Blandaside	Florida
Ramiro	Lang	099 Garth Station	Springfield	Kansas
Kristoffer	Grady	0916 MacGyver Gateway	East Lou	Arkansas
Jaunita	Hills	4887 Phyllis Neck	South Isaiahmouth	Ohio
Nikolas	Schowalter	285 Stanton Lock	North Jonathon	Georgia
Ansley	Wolff	505 Jerde Mountains	South Brandi	Pennsylvania
Maud	Hegmann	09899 Mohr Shores	Erinfort	Alaska
Shea	Kohler	2215 Angela Valley	Cletatown	Kentucky
Fernando	Shields	25912 Jaren Neck	Cheyenne	Mississippi
Kira	Wilkinson	33035 Otilia Mission	Lake Kareem	Kentucky
Wilford	Monahan	27850 Chloe Lane	Nyafort	North Dakota
Jackeline	Schamberger	925 Anjali Row	Kiehnmouth	Kentucky
Gerson	Wyman	51420 Jakubowski Island	Shanyboro	Washington
Ken	Medhurst	55814 Volkman Ways	New Marleyside	Alabama
Edgardo	Davis	4098 Boehm Mountain	Lake Adityaburgh	Alaska
Concepcion	Haag	5306 Ludie Port	Lake Delaneyton	New Mexico
Nikita	Adams	071 Nick Roads	Port Jada	Michigan
Norberto	Green	578 Noel Falls	Gutkowskiburgh	North Carolina
Matilde	Kerluke	3555 Nolan Common	Lake Elaina	Montana
Verda	Bartoletti	14524 Hand Springs	Domenicshire	Alabama
Adelia	Emmerich	6461 Ellsworth Junctions	East Bridgette	Massachusetts
Roma	Ankunding	038 Rutherford Bypass	Creminland	Hawaii
Benton	Will	027 Lakin Union	Port Melany	Nebraska
Jayson	Rosenbaum	696 Abshire Orchard	Palm Beach Gardens	Mississippi
Abbey	Hoeger	308 Hirthe Bypass	Lakeland	Massachusetts
Stan	DuBuque	54220 Howe Trail	New Virgil	New Hampshire
Thelma	Marvin	8316 Anissa Skyway	Bellevue	Texas
Adela	Mosciski	7175 Scarlett Inlet	Malloryfurt	Wyoming
Narciso	Hessel	2582 Telly Spurs	Dublin	Georgia
Jazlyn	Anderson	7113 Kelley Wall	East Vito	Georgia
Etha	Hudson	305 Kiera Common	East Miracle	Michigan
Monique	Kuhic	65159 Wava Lodge	Oklahoma City	Montana
Cielo	Mills	07954 West Road	Sunrise Manor	Wyoming
Llewellyn	Frami	90812 Gorczany Junction	Mitchellville	Missouri
Cierra	King	0797 Reinger Fort	Conncester	Massachusetts
Francesco	Schuppe	5247 Lockman Dale	Lake Jacintocester	Ohio
Valentina	Stoltenberg	3049 Oberbrunner Isle	Osinskifield	Montana
Carmel	Dooley	6079 Madisyn Crest	Riverton	Nebraska
Bettye	Little	14055 Bette Views	New Olen	Arizona
Kim	Johnston	9157 Gleason Islands	North Taniafield	Maine
Rebekah	Hackett	20891 Darrion Curve	Ryleyhaven	Arizona
Guy	Brown	4856 Rohan Ford	Fayborough	Florida
Gus	Wehner	533 Hayes Forge	Rancho Palos Verdes	Oregon
Howell	Hudson	6079 Treva Falls	Lake David	Vermont
Keshawn	Grimes	0865 Krystina Light	Amosfurt	Louisiana
Lauretta	Bartoletti	48011 Howe Shore	Lake Khalid	Alaska
Gaetano	Klein	8433 Wilkinson Forks	Schaefermouth	Massachusetts
Jarred	Wyman	7308 O'Reilly Squares	Fort Albachester	New Hampshire
Kaitlyn	Cassin	252 Parisian Locks	North Augustusville	Virginia
Cydney	Gleichner	072 Gretchen Walks	Yoshikoshire	Maryland
Daphne	Koelpin	21942 Agustina Forge	Lake Darrick	Vermont
Jordane	Brekke	1187 Ervin Dam	Ullrichberg	Hawaii
Samantha	Feest	0407 Jaunita Ranch	Greeley	Utah
Austin	Spencer	4251 Maureen Plain	Aufderharbury	North Carolina
Thora	Ankunding	1197 Huel Cliffs	Shoreline	Maryland
Rudy	Mertz	9903 Randall Mission	Melyssaborough	Maryland
Ebony	Keebler	37823 Larkin Way	Deefurt	Michigan
Muriel	Ruecker	12922 Summer Throughway	Manteca	Illinois
Werner	Berge	536 Kohler Trace	North Amarafort	Louisiana
Macey	Lemke	50890 Blanca Fords	Heidenreichfield	Nebraska
Aliza	Jaskolski	8679 Yazmin Trace	Asheville	Ohio
Laron	Pfeffer	8601 Lang Corners	Laurianecester	Wyoming
Samson	Dicki	99371 Dickens Vista	Allenehaven	Ohio
Desiree	Reichert	763 Ora Pines	Khalilmouth	Vermont
Tate	Stamm	30509 Boyle Harbors	East Queen	Georgia
Kim	Beer	825 Norberto Extension	Jaedencester	New Jersey
Viviane	Koelpin	722 Mueller Crest	Arcadia	Massachusetts
Milan	O'Keefe	013 King Prairie	Sandyfurt	Nebraska
Kameron	Hettinger	163 Virginia Fork	New Zorachester	Wyoming
Chet	Reilly	0459 Haven Glens	Gwendolynhaven	Kentucky
Rashawn	Blanda	17035 Ernest Lane	Margareteborough	West Virginia
Nathen	Pollich	9604 Harley Street	Hackettview	Alabama
Modesta	Windler	08804 Walsh Lake	Hannahshire	Texas
Lucas	Senger	28874 Gerlach Crossing	Strongsville	Alaska
Mathilde	Wehner	141 Medhurst Extensions	New Paul	Texas
Emmy	Runolfsson	31588 Brenna Hollow	New Brigitte	Virginia
Ara	Roberts	62361 Dimitri Island	Amarillo	Indiana
Frida	Crona	9178 Susana Crest	Vergieburgh	Kentucky
Kenyatta	Littel	93163 Charley Summit	Kansas City	Arizona
Kiel	Carroll	696 Mellie Pike	South Gisselle	New Hampshire
Skylar	Windler	312 Haylee Row	Lake Lina	Tennessee
Myrtis	Jones	04067 Marquardt Locks	North Deja	Arizona
Janis	Russel	0923 Heaney Trail	Riverview	North Dakota
Geovany	Batz	6789 Madelynn Meadow	Fort Meaganburgh	Idaho
Kellen	Flatley	55886 Torphy Turnpike	Brekkeborough	Wisconsin
Audie	Cronin	612 Gladyce Inlet	North Hassan	Oklahoma
Alexane	Kilback	732 Magali Hollow	Lefflerstead	Massachusetts
Bella	Kris	3295 Yessenia Expressway	Biloxi	Indiana
Grayson	Corwin	437 D'Amore Hill	Beierland	Kansas
Logan	Gislason	53779 Reichel Rapid	Gideonshire	Nebraska
Maiya	Lesch	6999 Thalia Prairie	North Micheal	Virginia
Aylin	Leffler	32399 Thurman Island	Lake Aron	Missouri
Sheila	Borer	1169 Gabrielle Springs	Annamaecester	Kentucky
Rylee	Ankunding	194 Buckridge Hill	South Berta	Ohio
Corene	Grimes	641 Monahan Pines	East Princefurt	Illinois

1
import { useMemo } from 'react';
2
import { MantineReactTable, type MRT_ColumnDef } from 'mantine-react-table';
3
import { Title } from '@mantine/core';
4
import { data, type Person } from './makeData';
5

6
export const Example = () => {
7
  const columns = useMemo<MRT_ColumnDef<Person>[]>(
8
    () => [
9
      {
10
        accessorKey: 'firstName',
11
        header: 'First Name',
12
      },
13
      {
14
        accessorKey: 'lastName',
15
        header: 'Last Name',
16
      },
17
      {
18
        accessorKey: 'address',
19
        header: 'Address',
20
      },
21
      {
22
        accessorKey: 'city',
23
        header: 'City',
24
      },
25
      {
26
        accessorKey: 'state',
27
        header: 'State',
28
      },
29
    ],
30
    [],
31
  );
32

33
  return (
34
    <MantineReactTable
35
      columns={columns}
36
      data={data}
37
      enableBottomToolbar={false} //no need for bottom toolbar if no pagination
38
      enableColumnActions={false} //no need for column actions if none of them are enabled
39
      enableColumnFilters={false} //filtering does not work with memoized table body
40
      enableDensityToggle={false} //density does not work with memoized table body
41
      enableGlobalFilter={false} //searching does not work with memoized table body
42
      enableHiding={false} //column hiding does not work with memoized table body
43
      enablePagination={false} //pagination does not work with memoized table body
44
      enableSorting={false} //sorting does not work with memoized table body
45
      enableStickyHeader
46
      memoMode="table-body" // memoize table body to improve render performance, but break all features
47
      mantineTableContainerProps={{ sx: { maxHeight: '500px' } }}
48
      renderTopToolbarCustomActions={() => (
49
        <Title order={4}>Static Memoized Table</Title>
50
      )}
51
    />
52
  );
53
};
54

55
export default Example;

1
import { useMemo } from 'react';
2
import { MantineReactTable } from 'mantine-react-table';
3
import { Title } from '@mantine/core';
4
import { data } from './makeData';
5

6
export const Example = () => {
7
  const columns = useMemo(
8
    () => [
9
      {
10
        accessorKey: 'firstName',
11
        header: 'First Name',
12
      },
13
      {
14
        accessorKey: 'lastName',
15
        header: 'Last Name',
16
      },
17
      {
18
        accessorKey: 'address',
19
        header: 'Address',
20
      },
21
      {
22
        accessorKey: 'city',
23
        header: 'City',
24
      },
25
      {
26
        accessorKey: 'state',
27
        header: 'State',
28
      },
29
    ],
30
    [],
31
  );
32

33
  return (
34
    <MantineReactTable
35
      columns={columns}
36
      data={data}
37
      enableBottomToolbar={false} //no need for bottom toolbar if no pagination
38
      enableColumnActions={false} //no need for column actions if none of them are enabled
39
      enableColumnFilters={false} //filtering does not work with memoized table body
40
      enableDensityToggle={false} //density does not work with memoized table body
41
      enableGlobalFilter={false} //searching does not work with memoized table body
42
      enableHiding={false} //column hiding does not work with memoized table body
43
      enablePagination={false} //pagination does not work with memoized table body
44
      enableSorting={false} //sorting does not work with memoized table body
45
      enableStickyHeader
46
      memoMode="table-body" // memoize table body to improve render performance, but break all features
47
      mantineTableContainerProps={{ sx: { maxHeight: '500px' } }}
48
      renderTopToolbarCustomActions={() => (
49
        <Title order={4}>Static Memoized Table</Title>
50
      )}
51
    />
52
  );
53
};
54

55
export default Example;

View Extra Storybook Examples