Material React Table

Data Columns are the columns that are used to display data. They are the default columns that are created when you create a column with an accessorKey or accessorFn.

The table can perform processing on the data of a Data Column, such as sorting, filtering, grouping, etc.

The other type of column that you can make is a "Display Column", which you can learn more about in the next section.

Each column definition must have, at the very least, an accessorKey (or a combination of an id and accessorFn) and a header property. The accessorKey/accessorFn property is the key that will be used to join the data from the data keys. The header property is used to display the column header, but is also used in other places in the table.

The simplest and most common way to define a column is to use the accessorKey property. The accessorKey property is the key that will be used to join the data from the data keys.

The accessorKey must match one of the keys in your data, or else no data will show up in the column. The accessorKey also supports dot notation, so you can access nested data.

By default, the accessorKey will double as the id for the column, but if you need the id of the column to be different than the accessorKey, you can use the id property in addition.

const columns = useMemo<MRT_ColumnDef<Customer>[]>( //TS helps with the autocomplete while writing columns
  () => [
    {
      accessorKey: 'username', //normal recommended usage of an accessorKey
      header: 'Username',
    },
    {
      accessorKey: 'name.firstName', //example of dot notation used to access nested data
      header: 'First Name',
    },
    {
      accessorKey: 'name.lastName', //example of dot notation used to access nested data
      header: 'Last Name',
    },
    {
      accessorKey: 'customerAge',
      id: 'age' //id overridden, usually not necessary to do this, but can be helpful
      header: 'Age',
    },
  ],
  [],
);

You can alternatively use the accessorFn property. Here are at least 3 ways you can use it.

In each case, the id property is now required since there is no accessorKey for MRT to derive it from.

const columns = useMemo(
  () => [
    {
      //simple accessorFn that works the same way as an `accessorKey`
      accessorFn: (row) => row.username,
      id: 'username',
      header: 'Username',
    },
    {
      //accessorFn function that combines multiple data together
      accessorFn: (row) => `${row.firstName} ${row.lastName}`,
      id: 'name',
      header: 'Name',
    },
    {
      //accessorFn used to access nested data, though you could just use dot notation in an accessorKey
      accessorFn: (row) => row.personalInfo.age,
      id: 'age',
      header: 'Age',
    },
  ],
  [],
);

If you want to pass in custom JSX to render the header, you can pass in a Header option in addition to the header string property.

The header (lowercase) property is still required and still must only be a string because it is used within multiple components in the table and has string manipulation methods performed on it.

const columns = useMemo(
  () => [
    {
      accessorKey: 'name',
      header: 'Name',
      Header: ({ column }) => (
        <i style={{ color: 'red' }}>{column.columnDef.header}</i>
      ), //arrow function
    },
    {
      accessorKey: 'age',
      header: 'Age',
      Header: <i style={{ color: 'red' }}>Age</i>, //plain jsx with no function
    },
  ],
  [],
);

Similarly, the data cells in a column can have a custom JSX render with the Cell option.

const columns = useMemo(
  () => [
    {
      accessorKey: 'salary',
      header: 'Salary',
      Cell: ({ cell }) => (
        <span>${cell.getValue<number>().toLocaleString()}</span>
      ),
    },
    {
      accessorKey: 'profileImage',
      header: 'Profile Image',
      Cell: ({ cell }) => <img src={cell.getValue<string>()} />,
    },
  ],
  [],
);

If you want to pass in custom JSX to render the footer, you can pass in a Footer option. If no custom markup is needed, you can just use the footer string property.

The footer cells can be a good place to put totals or other summary information.

const columns = useMemo(
  () => [
    {
      accessorKey: 'name',
      header: 'Name',
      footer: 'Name', //simple string header
    },
    {
      accessorKey: 'age',
      header: 'Age',
      //Custom footer markup for a aggregation calculation
      Footer: () => (
        <Stack>
          Max Age:
          <Box color="warning.main">{Math.round(maxAge)}</Box>
        </Stack>
      ),
    },
  ],
  [],
);

See the Customize Components Guide for more ways to style and customize header and cell components

In the same way that you can pass props to the main <MaterialReactTable /> component to enable or disable features, you can also specify options on the column definitions to enable or disable features on a per-column basis.

const columns = useMemo(
  () => [
    {
      accessorKey: 'salary',
      header: 'Salary',
      enableClickToCopy: true, //enable click to copy on this column
    },
    {
      accessorKey: 'profileImage',
      header: 'Profile Image',
      enableSorting: false, //disable sorting on this column
    },
  ],
  [],
);

See all the column options you can use in the Column Options API Reference

This is also covered in the Column Resizing Guide, but we'll also quickly cover it here.

Setting a CSS (sx or style) width prop will NOT work! Material React Table (really TanStack Table) keep track and set the widths of each column internally.

You CAN, however, change the default width of any column by setting its size option on the column definition. minSize and maxSize are also available to set the minimum and maximum width of the column during resizing.

const columns = [
  {
    accessorKey: 'id',
    header: 'ID',
    size: 50, //small column
  },
  {
    accessorKey: 'username',
    header: 'Username',
    minSize: 100, //min size enforced during resizing
    maxSize: 200, //max size enforced during resizing
    size: 180, //medium column
  },
  {
    accessorKey: 'email',
    header: 'Email',
    size: 300, //large column
  },
];

You may notice however, that the columns may be not change their size as much as you would expect. This is because the browser treats <th> and <td> elements differently with in a <table> element by default.

You can improve this slightly by changing the table layout to fixed instead of the default auto in the muiTableProps.

<MaterialReactTable
  muiTableProps={{
    sx: {
      tableLayout: 'fixed',
    },
  }}
/>

The Columns will still try to increase their width to take up the full width of the table, but the columns that do have a defined size will have their width respected more.

For further reading on how table-layout fixed vs auto works, we recommend this blog post by CSS-Tricks.