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.

'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 prop 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
});

View Extra Storybook Examples