Display (Built-in) Columns

Display columns are used to display non-data elements in a table. They only require an id and header in the column definition. They do not need an accessorKey or accessorFn, as they are not meant to connect to your data at all.

Display columns do not have any processing features, such as sorting, filtering, grouping, etc. enabled on them by default.

Built-in MRT Display Columns

Mantine React Table has a few built-in display columns that are created automatically when certain features are enabled.

mrt-row-drag - created when enableRowDragging or enableRowOrdering table options are true
mrt-row-actions - created when enableRowActions (or sometimes when enableEditing) table options are true
mrt-row-expand - created when enableExpanding, enableGrouping, or renderDetailPanel table options are true
mrt-row-select - created when enableRowSelection table option is true
mrt-row-numbers - created when enableRowNumbers table option is true

Display columns are, for the most part, the same as a data column, except they do not have an accessor to access data. When a display column is created internally by Mantine React Table, the following options are all set to false by default:

const defaultDisplayColumnDefOptions = {
  columnDefType: 'display',
  enableClickToCopy: false,
  enableColumnActions: false,
  enableColumnDragging: false,
  enableColumnFilter: false,
  enableColumnOrdering: false,
  enableEditing: false,
  enableGlobalFilter: false,
  enableGrouping: false,
  enableHiding: false,
  enableResizing: false,
  enableSorting: false,
} as Partial<MRT_ColumnDef>;

All of these values are able to be overridden if needed, and you'll learn about that in the next section down below.

Customize Built-in MRT Display Columns

It is possible to change and override the default behavior of built-in display columns. Whether you want to change the default column width, add some styles, or enable some features, such as column actions or column drag and drop, you can do it with the displayColumnDefOptions table option.

Display Column Definition Options

Let's say you need to adjust the width of the Actions column to be wide enough to fit all of your action buttons. You could do that as follows:

const table = useMantineReactTable({
  columns,
  data,
  displayColumnDefOptions: { 'mrt-row-actions': { size: 300 } }, //change width of actions column to 300px
  enableRowActions: true,
  renderRowActions: ({ row }) => (
    <div>
      <Button>Action 1</Button>
      <Button>Action 2</Button>
      <Button>Action 3</Button>
    </div>
  ),
});

return <MantineReactTable table={table} />;

Or maybe you want to enable a feature that is off by default for display columns, such as column ordering or pinning.

const table = useMantineReactTable({
  columns,
  data,
  displayColumnDefOptions: {
    'mrt-row-numbers': {
      enableOrdering: true,
      enablePinning: true,
      enableColumnActions: true,
    },
  },
  enableRowNumbers: true,
});

Here is a full example and demo for customizing display columns.

Demo

#	First Name	Last Name	Address	City	State
1	Dylan	Murray	261 Erdman Ford	East Daphne	Kentucky
2	Raquel	Kohler	769 Dominic Grove	Columbus	Ohio
3	Ervin	Reinger	566 Brakus Inlet	South Linda	West Virginia
4	Brittany	McCullough	722 Emie Stream	Lincoln	Nebraska
5	Branson	Frami	32188 Larkin Turnpike	Charleston	South Carolina

Rows per page

1-5 of 5

1
import { useMemo } from 'react';
2
import { Box, Button } from '@mantine/core';
3
import { MantineReactTable, type MRT_ColumnDef } from 'mantine-react-table';
4
import { data, type Person } from './makeData';
5

6
const Example = () => {
7
  const columns = useMemo<MRT_ColumnDef<Person>[]>(
8
    () => [
9
      {
10
        accessorKey: 'firstName',
11
        header: 'First Name',
12
      },
13
      {
14
        accessorKey: 'lastName',
15
        header: 'Last Name',
16
      },
17
      {
18
        accessorKey: 'address',
19
        header: 'Address',
20
      },
21
      {
22
        accessorKey: 'city',
23
        header: 'City',
24
      },
25
      {
26
        accessorKey: 'state',
27
        header: 'State',
28
      },
29
    ],
30
    [],
31
  );
32

33
  return (
34
    <MantineReactTable
35
      columns={columns}
36
      data={data}
37
      displayColumnDefOptions={{
38
        'mrt-row-actions': {
39
          size: 350, //set custom width
40
          mantineTableHeadCellProps: {
41
            align: 'center', //change head cell props
42
          },
43
        },
44
        'mrt-row-numbers': {
45
          enableColumnOrdering: true, //turn on some features that are usually off
46
          enableResizing: true,
47
          mantineTableHeadCellProps: {
48
            sx: {
49
              fontSize: '1.2rem',
50
            },
51
          },
52
        },
53
        'mrt-row-select': {
54
          enableColumnActions: true,
55
          enableHiding: true,
56
          size: 100,
57
        },
58
      }}
59
      enableColumnResizing
60
      enableColumnOrdering
61
      enableRowNumbers
62
      enableRowSelection
63
      enableRowActions
64
      renderRowActions={({ row }) => (
65
        <Box sx={{ display: 'flex', gap: '16px' }}>
66
          <Button>Button 1</Button>
67
          <Button>Button 2</Button>
68
          <Button>Button 3</Button>
69
        </Box>
70
      )}
71
    />
72
  );
73
};
74

75
export default Example;

1
import { useMemo } from 'react';
2
import { Box, Button } from '@mantine/core';
3
import { MantineReactTable } from 'mantine-react-table';
4
import { data } from './makeData';
5

6
const Example = () => {
7
  const columns = useMemo(
8
    () => [
9
      {
10
        accessorKey: 'firstName',
11
        header: 'First Name',
12
      },
13
      {
14
        accessorKey: 'lastName',
15
        header: 'Last Name',
16
      },
17
      {
18
        accessorKey: 'address',
19
        header: 'Address',
20
      },
21
      {
22
        accessorKey: 'city',
23
        header: 'City',
24
      },
25
      {
26
        accessorKey: 'state',
27
        header: 'State',
28
      },
29
    ],
30
    [],
31
  );
32

33
  return (
34
    <MantineReactTable
35
      columns={columns}
36
      data={data}
37
      displayColumnDefOptions={{
38
        'mrt-row-actions': {
39
          size: 350, //set custom width
40
          mantineTableHeadCellProps: {
41
            align: 'center', //change head cell props
42
          },
43
        },
44
        'mrt-row-numbers': {
45
          enableColumnOrdering: true, //turn on some features that are usually off
46
          enableResizing: true,
47
          mantineTableHeadCellProps: {
48
            sx: {
49
              fontSize: '1.2rem',
50
            },
51
          },
52
        },
53
        'mrt-row-select': {
54
          enableColumnActions: true,
55
          enableHiding: true,
56
          size: 100,
57
        },
58
      }}
59
      enableColumnResizing
60
      enableColumnOrdering
61
      enableRowNumbers
62
      enableRowSelection
63
      enableRowActions
64
      renderRowActions={({ row }) => (
65
        <Box sx={{ display: 'flex', gap: '16px' }}>
66
          <Button>Button 1</Button>
67
          <Button>Button 2</Button>
68
          <Button>Button 3</Button>
69
        </Box>
70
      )}
71
    />
72
  );
73
};
74

75
export default Example;

Create your own Display Columns

You do not have to use the built in Row Actions feature. You can just create your own display columns instead. It is as easy as creating a normal column, only specifying the columnDefType as display.

const columns = [
  {
    id: 'sendEmail',
    header: 'Send Email',
    columnDefType: 'display', //turns off data column features like sorting, filtering, etc.
    enableColumnOrdering: true, //but you can turn back any of those features on if you want like this
    Cell: ({ row }) => (
      <Button onClick={() => sendEmail(row.original.userId)}>Send Email</Button>
    ),
  },
  {
    id: 'name',
    header: 'Name',
    accessorKey: 'name',
  },
];