MRT logoMaterial React Table

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
DnD
Editing
Filtering
Fetching
Pinning
Virtualization
More Examples

Demo

Open StackblitzOpen Code SandboxOpen on GitHub
First Name
Last Name
Address
City
State
JohnDoe261 Erdman FordEast DaphneKentucky
JaneDoe769 Dominic GroveColumbusOhio
JoeDoe566 Brakus InletSouth LindaWest Virginia
KevinVandy722 Emie StreamLincolnNebraska
JoshuaRolluffs32188 Larkin TurnpikeOmahaNebraska
1-5 of 5

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,
104  });
105

106  return <MaterialReactTable table={table} />;
107};
108

109export default Example;
110

View Extra Storybook Examples