MRT logoMaterial React Table

Legacy V1 Docs

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 do not need.

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

For example, you can turn off sorting or hide the top or bottom toolbars if you want.


Demo

Open StackblitzOpen Code SandboxOpen on GitHub
DylanMurray261 Erdman FordEast DaphneKentucky
RaquelKohler769 Dominic GroveColumbusOhio
ErvinReinger566 Brakus InletSouth LindaWest Virginia
BrittanyMcCullough722 Emie StreamLincolnNebraska
BransonFrami32188 Larkin TurnpikeCharlestonSouth Carolina

Source Code

1import React, { useMemo } from 'react';
2import { MaterialReactTable, type MRT_ColumnDef } from 'material-react-table';
3import { data, type Person } from './makeData';
4
5export const Example = () => {
6 const columns = useMemo<MRT_ColumnDef<Person>[]>(
7 //column definitions...
32 );
33
34 return (
35 <MaterialReactTable
36 columns={columns}
37 data={data}
38 enableColumnActions={false}
39 enableColumnFilters={false}
40 enablePagination={false}
41 enableSorting={false}
42 enableBottomToolbar={false}
43 enableTopToolbar={false}
44 muiTableBodyRowProps={{ hover: false }}
45 muiTableProps={{
46 sx: {
47 border: '1px solid rgba(81, 81, 81, 1)',
48 },
49 }}
50 muiTableHeadCellProps={{
51 sx: {
52 border: '1px solid rgba(81, 81, 81, 1)',
53 },
54 }}
55 muiTableBodyCellProps={{
56 sx: {
57 border: '1px solid rgba(81, 81, 81, 1)',
58 },
59 }}
60 />
61 );
62};
63
64export default Example;
65

View Extra Storybook Examples