MRT logoMaterial React Table

Minimal Example

Material React Table gives you a lot out of the box, but it's also easy to turn off any features that you don't need.

Every feature has an enable... prop that let's you turn it on or off.

Don't want sorting? You can turn it off! Don't want either the top or bottom toolbars? You can hide them!


Demo

Open Code SandboxOpen on GitHub
First Name
Last Name
Address
City
State
DylanMurray261 Erdman FordEast DaphneKentucky
RaquelKohler769 Dominic GroveColumbusOhio
ErvinReinger566 Brakus InletSouth LindaWest Virginia
BrittanyMcCullough722 Emie StreamLincolnNebraska
BransonFrami32188 Larkin TurnpikeCharlestonSouth Carolina

Source Code

1import React, { FC, useMemo } from 'react';
2import MaterialReactTable, { MRT_ColumnDef } from 'material-react-table';
3
4type Person = {
5 firstName: string;
6 lastName: string;
7 address: string;
8 city: string;
9 state: string;
10};
11
12export const Example: FC = () => {
13 const columns = useMemo<MRT_ColumnDef<Person>[]>(
14 () => [
15 //column definitions...
37 ],
38 [],
39 );
40
41 const data = useMemo(
42 () => [
43 //data definitions...
80 ],
81 [],
82 );
83
84 return (
85 <MaterialReactTable
86 columns={columns}
87 data={data}
88 enableColumnActions={false}
89 enableColumnFilters={false}
90 enablePagination={false}
91 enableSorting={false}
92 enableBottomToolbar={false}
93 enableTopToolbar={false}
94 muiTableBodyRowProps={{ hover: false }}
95 />
96 );
97};
98
99export default Example;
100

View Extra Storybook Examples