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

View Extra Storybook Examples