Material React Table

Display Columns are columns that 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.

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

Material 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 prop are true

• mrt-row-actions - created when enableRowActions (or sometimes when enableEditing) props are true

• mrt-row-expand - created when enableExpanding, enableGrouping, or renderDetailPanel props are true

• mrt-row-select - created when enableRowSelection prop is true

• mrt-row-numbers - created when enableRowNumbers prop is true

Display columns are for the most part the same as a data column, except for not having any accessor. Also, when a display column is created internally by Material 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,
  enablePinning: 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.

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 'n drop, you can do it with the displayColumnDefOptions prop.

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 like so:

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

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

<MaterialReactTable
  columns={columns}
  data={data}
  displayColumnDefOptions={{
    'mrt-row-numbers': {
      enableOrdering: true,
      enablePinning: true,
      enableColumnActions: true,
    },
  }}
  enableRowNumbers
/>

Here is a full example and demo for customizing display columns

1import React, { FC, useMemo } from 'react';
2import { Box, Button } from '@mui/material';
3import MaterialReactTable, { MRT_ColumnDef } from 'material-react-table';
4import { data, Person } from './makeData';
5
6const Example: FC = () => {
7  const columns = useMemo<MRT_ColumnDef<Person>[]>(
8    //column definitions...
9    () => [
10      {
11        accessorKey: 'firstName',
12        header: 'First Name',
13      },
14      {
15        accessorKey: 'lastName',
16        header: 'Last Name',
17      },
18      {
19        accessorKey: 'address',
20        header: 'Address',
21      },
22      {
23        accessorKey: 'city',
24        header: 'City',
25      },
26      {
27        accessorKey: 'state',
28        header: 'State',
29      },
30    ],
31    [],
32    
33  );
34
35  return (
36    <MaterialReactTable
37      columns={columns}
38      data={data}
39      displayColumnDefOptions={{
40        'mrt-row-actions': {
41          size: 350, //set custom width
42          muiTableHeadCellProps: {
43            align: 'center', //change head cell props
44          },
45        },
46        'mrt-row-numbers': {
47          enableColumnOrdering: true, //turn on some features that are usually off
48          enableResizing: true,
49          muiTableHeadCellProps: {
50            sx: {
51              fontSize: '1.2rem',
52            },
53          },
54        },
55        'mrt-row-select': {
56          enableColumnActions: true,
57          enableHiding: true,
58          size: 100,
59        },
60      }}
61      enableColumnResizing
62      enableColumnOrdering
63      enableRowNumbers
64      enableRowSelection
65      enableRowActions
66      renderRowActions={({ row }) => (
67        <Box sx={{ display: 'flex', gap: '1rem' }}>
68          <Button>Button 1</Button>
69          <Button>Button 2</Button>
70          <Button>Button 3</Button>
71        </Box>
72      )}
73    />
74  );
75};
76
77export default Example;
78

You don't 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, but 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',
  },
];