MRT logoMaterial React Table

Legacy V2 Docs

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
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, //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