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.


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

Rows per page

1-5 of 5

Source Code

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

View Extra Storybook Examples