Material React Table

Material React Table has a built-in column resizing draggable handle feature.

The Column Size features was recently split into its own Guide. View that guide as a prerequisite to this one.

'ltr' | 'rtl'

muiTheme.direction || 'ltr'

'onEnd' | 'onChange'

'onChange'

Partial<MRT_ColumnDef<TData>>

Partial<MRT_DisplayColumnDef<TData>>

{ [key: string]: MRT_DisplayColumnDef<TData> }

boolean

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

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

OnChangeFn<ColumnSizingState>

OnChangeFn<ColumnSizingInfoState>

boolean

boolean | number

number

1000

number

40

number

180

Record<string, number>

{}

See TanStack Docs

{}

Column sizes will behave differently depending on which layoutMode you have set.

See the Column Size Guide for more information on layout modes and how to set initial column sizes properly for you use case.

enableColumnResizing is the boolean table option 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. You can let columns grow to fill in the remaining space by changing the layoutMode back to "grid" or "semantic".

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

Alternatively, if you only want certain columns to grow to fill the remaining space, you can set the grow column option to true in their respective column definitions.

const columns = [
  //...
  {
    accessorKey: 'address',
    header: 'Address',
    size: 250,
    grow: true, //allow this column to grow to fill the remaining space
  },
];

This is discussed in more detail in the Column Size Guide.

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

As discussed further in the Display Columns Guide, you can customize the options of the built-in columns that get generated under the hood by MRT by enabling certain features.

Here, we can enable column resizing on the built-in row numbers column by setting the enableResizing column option to true in the displayColumnDefOptions table option.

const table = useMaterialReactTable({
  columns,
  data,
  displayColumnDefOptions: {
    'mrt-row-numbers': {
      enableResizing: true, //allow the row numbers column to be resized
      size: 40,
      grow: false, //new in v2.8 - do not fill remaining space using this column
    },
  },
  enableRowNumbers: true,
  layoutMode: 'grid', // `grow` only works in the grid* layout modes
});

return <MaterialReactTable table={table} />;

View Extra Storybook Examples