Mantine DataTable

Examples › Column grouping

Sometimes a sub-set of data is very closely related. In such a case it might make sense to group the headers of those columns. This can be easily achieved by specifying groups instead of columns.

Each group requires the following properties:

• id
  Used as a key. Can be any string, as long as it is unique among the groups.
  A humanized version of this value is used as header if no title is provided.
• columns
  An array of column definitions that are part of this group.

In addition to the aforementioned required properties, a group accepts some optional props for customization purposes:

• title
  A ReactNode that will be rendered inside the column group. If not specified (or set to undefined), the id is humanized to generate a string.
• textAlign: 'left' | 'center' | 'right'
  The text alignment for all columns in this group.
• className: string
  Optional class to apply to the group header.
• style
  Optional style to be applied to the group header.
  Can be a style object or a function that receives the current theme and returns a style object.

Groups are hidden if they don’t have any visible columns. This could be the result of all columns being hidden due to the hidden or visibleMediaQuery attribute, or by simply providing an empty array of columns.

Here is the code used to generate the table above:

'use client';

import { DataTable } from 'mantine-datatable';
import { companies } from '~/data';

export function ColumnGroupingExample() {
  return (
    <DataTable
      withTableBorder
      withColumnBorders
      records={companies}
      groups={[
        {
          id: 'company',
          style: { fontStyle: 'italic' },
          columns: [
            { accessor: 'name' },
            { accessor: 'missionStatement', visibleMediaQuery: (theme) => `(min-width: ${theme.breakpoints.md})` },
          ],
        },
        {
          id: 'contact-info',
          title: 'Contact information',
          textAlign: 'center',
          style: (theme) => ({ color: theme.colors.blue[6] }),
          columns: [{ accessor: 'streetAddress' }, { accessor: 'city' }, { accessor: 'state', textAlign: 'right' }],
        },
        // 👇 all columns in this group are hidden, so it will not be rendered
        {
          id: 'other',
          columns: [{ accessor: 'id', hidden: true }],
        },
        // 👇 this group has no columns, so it will not be rendered
        {
          id: 'empty-group',
          title: 'Empty group',
          columns: [],
        },
      ]}
    />
  );
}

Head over to the next example to discover more features.