Mantine React Table

Mantine 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.

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 = useMantineReactTable({
  columns,
  data,
  enableColumnResizing: true,
});

return <MantineReactTable 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 = useMantineReactTable({
  columns,
  data,
  enableColumnResizing: true,
  columnResizeMode: 'onEnd', //instead of the default "onChange" mode
});

import '@mantine/core/styles.css';
import '@mantine/dates/styles.css'; //if using mantine date picker features
import 'mantine-react-table/styles.css'; //make sure MRT styles were imported in your app root (once)
import { useMemo } from 'react';
import { MantineReactTable, type MRT_ColumnDef } from 'mantine-react-table';
import { data, type Person } from './makeData';

const Example = () => {
  const columns = useMemo<MRT_ColumnDef<Person>[]>(
    () => [
      {
        accessorKey: 'firstName',
        header: 'First Name', //uses the default width from defaultColumn prop
      },
      {
        accessorKey: 'lastName',
        header: 'Last Name',
        enableResizing: false, //disable resizing for this column
      },
      {
        accessorKey: 'email',
        header: 'Email Address',
        size: 200, //increase the width of this column
      },
      {
        accessorKey: 'city',
        header: 'City',
        size: 120, //decrease the width of this column
      },
      {
        accessorKey: 'country',
        header: 'Country',
        size: 100, //decrease the width of this column
      },
    ],
    [],
  );

  return (
    <MantineReactTable
      columns={columns}
      data={data}
      //optionally override the default column widths
      defaultColumn={{
        maxSize: 400,
        minSize: 80,
        size: 150, //default size is usually 180
      }}
      enableColumnResizing
      columnResizeMode="onChange" //default
    />
  );
};

export default Example;

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 = useMantineReactTable({
  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.

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 = useMantineReactTable({
  columns,
  data,
  enableColumnResizing: true,
  columnResizeDirection: 'rtl', //instead of the default "ltr" direction
});

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

import '@mantine/core/styles.css';
import '@mantine/dates/styles.css'; //if using mantine date picker features
import 'mantine-react-table/styles.css'; //make sure MRT styles were imported in your app root (once)
//Import Mantine React Table and its Types
import { MantineReactTable, type MRT_ColumnDef } from 'mantine-react-table';

//Import Mantine React Table Translations
import { MRT_Localization_FA } from 'mantine-react-table/locales/fa';

//mock data
import { data, type Person } from './makeData';
import {
  DirectionProvider,
  MantineProvider,
  useMantineTheme,
} from '@mantine/core';

const columns: MRT_ColumnDef<Person>[] = [
  {
    accessorKey: 'firstName',
    header: 'نام',
  },
  {
    accessorKey: 'lastName',
    header: 'نام خانوادگی',
    enableClickToCopy: true,
  },
  {
    accessorKey: 'age',
    header: 'سن',
  },
];

const Example = () => {
  const theme = useMantineTheme();
  return (
    <DirectionProvider detectDirection={false} initialDirection={'rtl'}>
      <MantineProvider theme={theme}>
        <div style={{ direction: 'rtl' }}>
          <MantineReactTable
            columns={columns}
            data={data}
            enableColumnFilterModes
            enableColumnOrdering
            enableEditing
            enableColumnPinning
            enableRowActions
            enableRowSelection
            enableSelectAll={false}
            initialState={{ showColumnFilters: true, showGlobalFilter: true }}
            localization={MRT_Localization_FA}
          />
        </div>
      </MantineProvider>
    </DirectionProvider>
  );
};

export default Example;

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 = useMantineReactTable({
  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 <MantineReactTable table={table} />;

View Extra Storybook Examples