Material React Table

Material React Table lets you easily change the default widths (sizes) of columns and has a built-in column resizing draggable handle feature.

'ltr' | 'rtl'

muiTheme.direction || 'ltr'

'onEnd' | 'onChange'

'onChange'

Partial<MRT_ColumnDef<TData>>

boolean

'semantic' | 'grid' | 'grid-no-grow'

'semantic' //(changes based on other enabled features)

OnChangeFn<ColumnSizingState>

OnChangeFn<ColumnSizingInfoState>

boolean

number

1000

number

40

number

180

Record<string, number>

{}

See TanStack Docs

{}

Material React Table has 3 layout modes that affect how columns styles are applied internally. Depending on which features you enable, the layoutMode table option will automatically change to the appropriate value, though you can override it with your own value if you want.

1. "semantic" (default with default features) - uses default css styles that come with <table>, <tr>, <td>, etc. elements.

2. "grid" (default when virtualization is enabled) - uses CSS Grid and Flexbox styles instead of default styles.

3. "grid-no-grow" (default when column resizing is enabled) - uses CSS Grid and Flexbox styles, but also sets flex-grow: 0 on all columns.

This was also covered in the Data Columns Guide, but we'll cover it again here.

You can change the width of any column by setting its size option on the column definition. minSize and maxSize are also available to enforce limits during resizing.

const columns = [
  {
    accessorKey: 'id',
    header: 'ID',
    size: 50, //small column
  },
  {
    accessorKey: 'username',
    header: 'Username',
    minSize: 100, //min size enforced during resizing
    maxSize: 400, //max size enforced during resizing
    size: 180, //medium column
  },
  {
    accessorKey: 'email',
    header: 'Email',
    size: 300, //large column
  },
];

By default, columns will have the following size properties defined:

defaultColumn = { minSize: 40, maxSize: 1000, size: 180 }; //units are in px

You can modify the default column widths by setting the defaultColumn table option on the table.

const table = useMaterialReactTable({
  columns,
  data,
  defaultColumn: {
    minSize: 20, //allow columns to get smaller than default
    maxSize: 9001, //allow columns to get larger than default
    size: 260, //make columns wider by default
  },
});

enableColumnResizing is the boolean prop that enables the column resizing feature.

const table = useMaterialReactTable({
  columns,
  data,
  enableColumnResizing: true,
});

return <MaterialReactTable table={table} />;

You can disable specific columns from being resizable by setting the enableResizing column option to false in their respective column definition.

The default columnResizeMode is onChange (in MRT versions v1.7+), which means that the column resizing will occur immediately as the user drags the column resize handle. If you are running into performance issues because of many other enabled features, you might want to set the columnResizeMode to onEnd instead. This will make the column resizing only occur after the user has finished dragging the column resize handle and released their mouse.

const table = useMaterialReactTable({
  columns,
  data,
  enableColumnResizing: true,
  columnResizeMode: 'onEnd', //instead of the default "onChange" mode
});

1import { useMemo } from 'react';
2import {
3  MaterialReactTable,
4  useMaterialReactTable,
5  type MRT_ColumnDef,
6} from 'material-react-table';
7import { data, type Person } from './makeData';
8
9const Example = () => {
10  const columns = useMemo<MRT_ColumnDef<Person>[]>(
11    () => [
12      {
13        accessorKey: 'firstName',
14        header: 'First Name', //uses the default width from defaultColumn prop
15      },
16      {
17        accessorKey: 'lastName',
18        header: 'Last Name',
19      },
20      {
21        accessorKey: 'email',
22        header: 'Email Address',
23        size: 250, //increase the width of this column
24      },
25      {
26        accessorKey: 'city',
27        header: 'City',
28        size: 200, //decrease the width of this column
29        enableResizing: false, //disable resizing for this column
30      },
31      {
32        accessorKey: 'country',
33        header: 'Country',
34        size: 140, //decrease the width of this column
35      },
36    ],
37    [],
38  );
39
40  const table = useMaterialReactTable({
41    columns,
42    data,
43    //optionally override the default column widths
44    defaultColumn: {
45      maxSize: 400,
46      minSize: 80,
47      size: 160, //default size is usually 180
48    },
49    enableColumnResizing: true,
50    columnResizeMode: 'onChange', //default
51  });
52
53  return <MaterialReactTable table={table} />;
54};
55
56export default Example;
57

MRT V2 has a new "opposite" behavior in regards to column sizes when column resizing is enabled compared to MRT V2

When column resizing is enabled, by default, a layoutMode of "grid-no-grow" will be applied internally. This means that columns will have an absolute size and they will not grow to fill in the remaining space of the table.

const table = useMaterialReactTable({
  columns,
  data,
  enableColumnResizing: true,
  layoutMode: 'grid', //instead of the default "grid-no-grow" when column resizing is enabled
});

New in V2.1

If you are displaying your table in a RTL (right-to-left) language, you can set the columnResizeDirection table option to "rtl" to make the column resize handle appear on the left side of the column instead of the right side. This may behave differently depending on which Emotion or MUI theme settings you have enabled.

If you have already set the proper theme.direction setting in your MUI theme, then this option will already have been set automatically for you, but you can still override it using the columnResizeDirection table option.

const table = useMaterialReactTable({
  columns,
  data,
  enableColumnResizing: true,
  columnResizeDirection: 'rtl', //instead of the default "ltr" direction
});

return (
  <div style={{ direction: 'rtl' }}> {/* app-wide style? */}
    <MaterialReactTable table={table} />
  </div>
);

1//Import Material React Table and its Types
2import { MaterialReactTable, type MRT_ColumnDef } from 'material-react-table';
3
4//Import Material React Table Translations
5import { MRT_Localization_FA } from 'material-react-table/locales/fa';
6
7//mock data
8import { data, type Person } from './makeData';
9
10const columns: MRT_ColumnDef<Person>[] = [
11  //column definitions...
12  {
13    accessorKey: 'firstName',
14    header: 'نام',
15  },
16  {
17    accessorKey: 'lastName',
18    header: 'نام خانوادگی',
19    enableClickToCopy: true,
20  },
21  {
22    accessorKey: 'age',
23    header: 'سن',
24  },
25  
26];
27
28const Example = () => {
29  return (
30    <MaterialReactTable
31      columns={columns}
32      data={data}
33      defaultColumn={{ size: 250 }}
34      columnResizeDirection="rtl"
35      enableColumnFilterModes
36      enableColumnOrdering
37      enableColumnResizing
38      enableEditing
39      enableColumnPinning
40      enableRowActions
41      enableRowSelection
42      enableSelectAll={false}
43      initialState={{ showColumnFilters: true, showGlobalFilter: true }}
44      localization={MRT_Localization_FA}
45    />
46  );
47};
48
49//App.tsx or similar
50import { createTheme, ThemeProvider, useTheme } from '@mui/material';
51import { faIR } from '@mui/material/locale';
52
53const ExampleWithThemeProvider = () => {
54  const theme = useTheme(); //replace with your theme/createTheme
55
56  return (
57    //Setting Material UI locale as best practice to result in better accessibility
58    <ThemeProvider theme={createTheme({ ...theme, direction: 'rtl' }, faIR)}>
59      <div style={{ direction: 'rtl' }}>
60        <Example />
61      </div>
62    </ThemeProvider>
63  );
64};
65
66export default ExampleWithThemeProvider;
67

View Extra Storybook Examples