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 React component which will be rendered inside the column group. If not specified (or set to undefined), the id is humanized to generate a string
className → Class to apply to the <th/>
sx: See Mantine’s documentation for more information.
style → Object with CSS styles to be applied to the <th/>

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 visibleMdediaQuery attribute, or by simply providing an empty array of columns.

Company		Contact info
Name	Mission statement	Street address	City	State
Sipes Inc	Strategize magnetic vortals.	280 Rigoberto Divide	Twin Falls	MT
Runolfsdottir - Cummerata	Leverage one-to-one methodologies.	102 Konopelski Greens	Missouri City	KY
Johnston LLC	Transition wireless initiatives.	230 Julie Lake	Hartford	KY
Crist and Sons	Revolutionize out-of-the-box infomediaries.	3387 Blick Turnpike	Attleboro	WV
Schmidt and Sons	Optimize bricks-and-clicks eyeballs.	286 Leif Lock	Collierville	AL
Nicolas Group	Transition vertical interfaces.	09622 Marcel Place	Highland	OR
Kub and Sons	Drive proactive models.	8699 Upton Fords	East Providence	IN
Jakubowski - Rolfson	Streamline cutting-edge architectures.	191 O'Connell Greens	San Rafael	MA
Welch - Tremblay	Deploy wireless solutions.	31622 Isobel Fall	Olathe	AR
Mueller, Hodkiewicz and Beahan	Facilitate bleeding-edge web-readiness.	21751 Elisa Village	Grand Prairie	WA

No records

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

export default function ColumnGroupingExample() {
  return (
    <DataTable
      withBorder
      withColumnBorders
      records={companies}
      groups={[
        {
          id: 'company',
          columns: [
            { accessor: 'name' },
            { accessor: 'missionStatement', visibleMediaQuery: (theme) => `(min-width: ${theme.breakpoints.md})` },
          ],
        },
        {
          id: 'contact-info',
          title: <i>Contact info</i>,
          columns: [{ accessor: 'streetAddress' }, { accessor: 'city' }, { accessor: 'state' }],
        },
        {
          id: 'other',
          columns: [{ accessor: 'id', hidden: true }],
        },
        {
          id: 'empty-group',
          title: 'Empty group',
          columns: [],
        },
      ]}
    />
  );
}

[
  {
    "id": "9d7b6df5-aa1e-4203-bfa8-7d9464e331cb",
    "name": "Sipes Inc",
    "streetAddress": "280 Rigoberto Divide",
    "city": "Twin Falls",
    "state": "MT",
    "missionStatement": "Strategize magnetic vortals."
  },
  {
    "id": "3c147f0b-c63f-4830-8ced-f378aad9efc6",
    "name": "Runolfsdottir - Cummerata",
    "streetAddress": "102 Konopelski Greens",
    "city": "Missouri City",
    "state": "KY",
    "missionStatement": "Leverage one-to-one methodologies."
  },
  {
    "id": "331992e8-7144-49c4-a8fd-fae9a6921b13",
    "name": "Johnston LLC",
    "streetAddress": "230 Julie Lake",
    "city": "Hartford",
    "state": "KY",
    "missionStatement": "Transition wireless initiatives."
  },
  {
    "id": "eb089974-a0ed-4ec2-84a3-4d7bd3935b63",
    "name": "Crist and Sons",
    "streetAddress": "3387 Blick Turnpike",
    "city": "Attleboro",
    "state": "WV",
    "missionStatement": "Revolutionize out-of-the-box infomediaries."
  },
  {
    "id": "fc257801-7b32-41ca-a31b-57ae6739415b",
    "name": "Schmidt and Sons",
    "streetAddress": "286 Leif Lock",
    "city": "Collierville",
    "state": "AL",
    "missionStatement": "Optimize bricks-and-clicks eyeballs."
  },
  {
    "id": "c942ac73-2c51-4bf1-b4a7-04419acf58c0",
    "name": "Nicolas Group",
    "streetAddress": "09622 Marcel Place",
    "city": "Highland",
    "state": "OR",
    "missionStatement": "Transition vertical interfaces."
  },
  {
    "id": "ad36f2d0-b186-4f1e-9a04-57e59715dc8f",
    "name": "Kub and Sons",
    "streetAddress": "8699 Upton Fords",
    "city": "East Providence",
    "state": "IN",
    "missionStatement": "Drive proactive models."
  },
  {
    "id": "e4a64ab6-4a9f-4f53-8f9e-dbf761fe9a69",
    "name": "Jakubowski - Rolfson",
    "streetAddress": "191 O'Connell Greens",
    "city": "San Rafael",
    "state": "MA",
    "missionStatement": "Streamline cutting-edge architectures."
  },
  {
    "id": "996fdd92-a399-4bef-9188-b0458ecee682",
    "name": "Welch - Tremblay",
    "streetAddress": "31622 Isobel Fall",
    "city": "Olathe",
    "state": "AR",
    "missionStatement": "Deploy wireless solutions."
  },
  {
    "id": "d0d0f9b1-7bb9-4b1e-967d-3ea81de7dd59",
    "name": "Mueller, Hodkiewicz and Beahan",
    "streetAddress": "21751 Elisa Village",
    "city": "Grand Prairie",
    "state": "WA",
    "missionStatement": "Facilitate bleeding-edge web-readiness."
  }
]