Examples › Dragging & Toggling

Name	Street address	City	State
Sipes Inc	280 Rigoberto Divide	Twin Falls	MT
Runolfsdottir - Cummerata	102 Konopelski Greens	Missouri City	KY
Johnston LLC	230 Julie Lake	Hartford	KY
Crist and Sons	3387 Blick Turnpike	Attleboro	WV
Schmidt and Sons	286 Leif Lock	Collierville	AL
Nicolas Group	09622 Marcel Place	Highland	OR
Kub and Sons	8699 Upton Fords	East Providence	IN
Jakubowski - Rolfson	191 O'Connell Greens	San Rafael	MA
Welch - Tremblay	31622 Isobel Fall	Olathe	AR
Mueller, Hodkiewicz and Beahan	21751 Elisa Village	Grand Prairie	WA

No records

In order to enable Dragging you’ll have to:

add a storeColumnsKey: 'your_key' property to the DataTable;
add a draggable: true property to each Dragging candidate column;
use the useDataTableColumns() hook to get the sorted columns.

import { DataTable, useDataTableColumns } from 'mantine-datatable';
import { companies, type Company } from '~/data';

import { Button, Group, Stack } from '@mantine/core';

export default function DraggingExample() {
  const key = 'draggable-example';

  const { effectiveColumns, resetColumnsOrder } = useDataTableColumns<Company>({
    key,
    columns: [
      { accessor: 'name', width: '40%', draggable: true },
      { accessor: 'streetAddress', width: '60%', draggable: true },
      { accessor: 'city', width: 160, ellipsis: true, draggable: true },
      { accessor: 'state' },
    ],
  });

  return (
    <Stack>
      <DataTable withBorder withColumnBorders storeColumnsKey={key} records={companies} columns={effectiveColumns} />
      <Group position="right">
        <Button onClick={resetColumnsOrder}>Reset Column Order</Button>
      </Group>
    </Stack>
  );
}

The default order of the columns is the order in which they are defined in the columns prop.

Toggling

In the below example you can toggle the first 3 columns. The last column is not toggleable and will always be visible. The first column is toggled off by default. Click with right mouse button on the header to select the columns you want to toggle.

Street Address	City
280 Rigoberto Divide	Twin Falls	MT
102 Konopelski Greens	Missouri City	KY
230 Julie Lake	Hartford	KY
3387 Blick Turnpike	Attleboro	WV
286 Leif Lock	Collierville	AL
09622 Marcel Place	Highland	OR
8699 Upton Fords	East Providence	IN
191 O'Connell Greens	San Rafael	MA
31622 Isobel Fall	Olathe	AR
21751 Elisa Village	Grand Prairie	WA

No records

In order to enable Toggling you’ll have to:

add a storeColumnsKey: 'your_key' property to the DataTable;
add a toggleable: true property to each Toggling candidate column;
use the useDataTableColumns() hook to get the sorted columns.

import { Button, Group, Stack, Text } from '@mantine/core';
import { IconBuildingCommunity, IconBuildingSkyscraper, IconMap, IconRoadSign } from '@tabler/icons-react';
import { DataTable, useDataTableColumns } from 'mantine-datatable';
import { companies } from '~/data';

export default function TogglingExample() {
  const key = 'toggleable-example';

  const { effectiveColumns, resetColumnsToggle } = useDataTableColumns({
    key,
    columns: [
      {
        accessor: 'name',
        title: (
          <Group spacing={4} mt={-1}>
            <IconBuildingSkyscraper size={16} />
            <Text inherit mt={1}>
              Company
            </Text>
          </Group>
        ),
        width: '40%',
        toggleable: true,
        defaultToggle: false,
      },
      {
        accessor: 'streetAddress',
        title: (
          <Group spacing={4} mt={-1}>
            <IconRoadSign size={16} />
            <Text inherit mt={1}>
              Street Address
            </Text>
          </Group>
        ),
        width: '60%',
        toggleable: true,
      },
      {
        accessor: 'city',
        title: (
          <Group spacing={4} mt={-1}>
            <IconBuildingCommunity size={16} />
            <Text inherit mt={1}>
              City
            </Text>
          </Group>
        ),
        width: 160,
        toggleable: true,
      },
      {
        accessor: 'state',
        width: 40,
        textAlignment: 'right',
        title: (
          <Group position="right">
            <IconMap size={16} />
          </Group>
        ),
      },
    ],
  });

  return (
    <Stack>
      <DataTable withBorder withColumnBorders storeColumnsKey={key} records={companies} columns={effectiveColumns} />
      <Group position="right">
        <Button onClick={resetColumnsToggle}>Reset Column Toggled</Button>
      </Group>
    </Stack>
  );
}

You may define which columns will be toggled by default by setting the defaultToggle: false property

Dragging & Toggling with context menu Reset

Name	Street address	City	State
Sipes Inc	280 Rigoberto Divide	Twin Falls	MT
Runolfsdottir - Cummerata	102 Konopelski Greens	Missouri City	KY
Johnston LLC	230 Julie Lake	Hartford	KY
Crist and Sons	3387 Blick Turnpike	Attleboro	WV
Schmidt and Sons	286 Leif Lock	Collierville	AL
Nicolas Group	09622 Marcel Place	Highland	OR
Kub and Sons	8699 Upton Fords	East Providence	IN
Jakubowski - Rolfson	191 O'Connell Greens	San Rafael	MA
Welch - Tremblay	31622 Isobel Fall	Olathe	AR
Mueller, Hodkiewicz and Beahan	21751 Elisa Village	Grand Prairie	WA

No records

import { IconColumnRemove, IconColumns3 } from '@tabler/icons-react';
import { DataTable, useDataTableColumns } from 'mantine-datatable';
import { companies } from '~/data';

export default function DraggingTogglingResetExample() {
  const key = 'toggleable-reset-example';

  const { effectiveColumns, resetColumnsOrder, resetColumnsToggle } = useDataTableColumns({
    key,
    columns: [
      { accessor: 'name', width: '40%', toggleable: true, draggable: true },
      { accessor: 'streetAddress', width: '60%', toggleable: true, draggable: true },
      { accessor: 'city', width: 160, ellipsis: true, toggleable: true, draggable: true },
      { accessor: 'state' },
    ],
  });

  return (
    <DataTable
      withBorder
      withColumnBorders
      storeColumnsKey={key}
      records={companies}
      columns={effectiveColumns}
      rowContextMenu={{
        items: () => [
          {
            key: 'reset-toggled-columns',
            icon: <IconColumnRemove size={16} />,
            onClick: resetColumnsToggle,
          },
          {
            key: 'reset-columns-order',
            icon: <IconColumns3 size={16} />,
            onClick: resetColumnsOrder,
          },
        ],
      }}
    />
  );
}

Complex usage

Name	Street address	City	State
Crist and Sons	3387 Blick Turnpike	Attleboro	WV
Jakubowski - Rolfson	191 O'Connell Greens	San Rafael	MA
Johnston LLC	230 Julie Lake	Hartford	KY
Kub and Sons	8699 Upton Fords	East Providence	IN
Mueller, Hodkiewicz and Beahan	21751 Elisa Village	Grand Prairie	WA
Nicolas Group	09622 Marcel Place	Highland	OR
Runolfsdottir - Cummerata	102 Konopelski Greens	Missouri City	KY
Schmidt and Sons	286 Leif Lock	Collierville	AL
Sipes Inc	280 Rigoberto Divide	Twin Falls	MT
Welch - Tremblay	31622 Isobel Fall	Olathe	AR

No records

import { IconColumnRemove, IconColumns3 } from '@tabler/icons-react';
import sortBy from 'lodash/sortBy';
import { DataTable, DataTableSortStatus, useDataTableColumns } from 'mantine-datatable';
import { useEffect, useState } from 'react';
import { companies, type Company } from '~/data';

export default function DraggingTogglingComplexExample() {
  const key = 'draggable-toggleable-complex-example';

  const [sortStatus, setSortStatus] = useState<DataTableSortStatus>({
    columnAccessor: 'name',
    direction: 'asc',
  });

  const [records, setRecords] = useState(sortBy(companies, 'name'));

  useEffect(() => {
    const data = sortBy(companies, sortStatus.columnAccessor) as Company[];
    setRecords(sortStatus.direction === 'desc' ? data.reverse() : data);
  }, [sortStatus]);

  const { effectiveColumns, resetColumnsOrder, resetColumnsToggle } = useDataTableColumns({
    key,
    columns: [
      { accessor: 'name', width: '40%', toggleable: true, draggable: true, sortable: true },
      { accessor: 'streetAddress', width: '60%', toggleable: true, draggable: true },
      { accessor: 'city', width: 160, ellipsis: true, toggleable: true, draggable: true },
      { accessor: 'state' },
    ],
  });

  return (
    <DataTable
      withBorder
      withColumnBorders
      storeColumnsKey={key}
      records={records}
      columns={effectiveColumns}
      sortStatus={sortStatus}
      onSortStatusChange={setSortStatus}
      rowContextMenu={{
        items: () => [
          {
            key: 'reset-toggled-columns',
            icon: <IconColumnRemove size={16} />,
            onClick: resetColumnsToggle,
          },
          {
            key: 'reset-columns-order',
            icon: <IconColumns3 size={16} />,
            onClick: resetColumnsOrder,
          },
        ],
      }}
    />
  );
}