Basic Material React Table Example

Basic Example

Material React Table enables client-side sorting, filtering, search, pagination, column hiding, and more by default. These features can easily be disabled or customized further, but here is a showcase of their default behavior. Be sure to check out a more Advanced Example to see how more features can be customized.

Data Export

Demo

Open Stackblitz Open Code Sandbox Open on GitHub

Primary

Secondary

Drop to group by

First Name 0	Last Name 0	Address 0	City 0	State 0
John	Doe	261 Erdman Ford	East Daphne	Kentucky
Jane	Doe	769 Dominic Grove	Columbus	Ohio
Joe	Doe	566 Brakus Inlet	South Linda	West Virginia
Kevin	Vandy	722 Emie Stream	Lincoln	Nebraska
Joshua	Rolluffs	32188 Larkin Turnpike	Omaha	Nebraska

Rows per page

1-5 of 5

This example is written for MRT V3.

If your app is still using MRT V1, either Upgrade to MRT V3 or use the V1 Docs instead. (useMaterialReactTable only exists in V2 and V3)

Source Code

1import { useMemo } from 'react';
2import {
3  MaterialReactTable,
4  useMaterialReactTable,
5  type MRT_ColumnDef,
6} from 'material-react-table';
7
8//example data type
9type Person = {
10  name: {
11    firstName: string;
12    lastName: string;
13  };
14  address: string;
15  city: string;
16  state: string;
17};
18
19//nested data is ok, see accessorKeys in ColumnDef below
20const data: Person[] = [
21  {
22    name: {
23      firstName: 'John',
24      lastName: 'Doe',
25    },
26    address: '261 Erdman Ford',
27    city: 'East Daphne',
28    state: 'Kentucky',
29  },
30  {
31    name: {
32      firstName: 'Jane',
33      lastName: 'Doe',
34    },
35    address: '769 Dominic Grove',
36    city: 'Columbus',
37    state: 'Ohio',
38  },
39  {
40    name: {
41      firstName: 'Joe',
42      lastName: 'Doe',
43    },
44    address: '566 Brakus Inlet',
45    city: 'South Linda',
46    state: 'West Virginia',
47  },
48  {
49    name: {
50      firstName: 'Kevin',
51      lastName: 'Vandy',
52    },
53    address: '722 Emie Stream',
54    city: 'Lincoln',
55    state: 'Nebraska',
56  },
57  {
58    name: {
59      firstName: 'Joshua',
60      lastName: 'Rolluffs',
61    },
62    address: '32188 Larkin Turnpike',
63    city: 'Omaha',
64    state: 'Nebraska',
65  },
66];
67
68const Example = () => {
69  //should be memoized or stable
70  const columns = useMemo<MRT_ColumnDef<Person>[]>(
71    () => [
72      {
73        accessorKey: 'name.firstName', //access nested data with dot notation
74        header: 'First Name',
75        size: 150,
76      },
77      {
78        accessorKey: 'name.lastName',
79        header: 'Last Name',
80        size: 150,
81      },
82      {
83        accessorKey: 'address', //normal accessorKey
84        header: 'Address',
85        size: 200,
86      },
87      {
88        accessorKey: 'city',
89        header: 'City',
90        size: 150,
91      },
92      {
93        accessorKey: 'state',
94        header: 'State',
95        size: 150,
96      },
97    ],
98    [],
99  );
100
101  const table = useMaterialReactTable({
102    columns,
103    data, //data must be memoized or stable (useState, useMemo, defined outside of this component, etc.)
104  });
105
106  return <MaterialReactTable table={table} />;
107};
108
109export default Example;
110

View Extra Storybook Examples