Examples › Column resizing

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

Table Border

Column Borders

In order to enable column resizing you’ll have to:

add a storeColumnsKey: your_key property to the DataTable (since the order of the columns is persisted in the local storage);
add a resizable: true property to each resizing candidate column;
use the useDataTableColumns() hook to get the effective columns.

import { Button, Group, Stack, Switch } from '@mantine/core';
import { DataTable, useDataTableColumns } from 'mantine-datatable';
import { useState } from 'react';
import { companies, type Company } from '~/data';

export default function ResizingExample() {
  const key = 'resize-example';

  const [withTableBorder, setWithTableBorder] = useState<boolean>(true);
  const [withColumnBorders, setWithColumnBorders] = useState<boolean>(true);

  const { effectiveColumns, resetColumnsWidth } = useDataTableColumns<Company>({
    key,
    columns: [
      { accessor: 'name', width: 100, resizable: true },
      { accessor: 'streetAddress', resizable: true },
      { accessor: 'city', resizable: true },
      { accessor: 'state' },
    ],
  });

  return (
    <Stack>
      <DataTable
        withBorder={withTableBorder}
        withColumnBorders={withColumnBorders}
        storeColumnsKey={key}
        records={companies}
        columns={effectiveColumns}
      />
      <Group grow position="apart">
        <Group position="left">
          <Switch
            checked={withTableBorder}
            onChange={(event) => setWithTableBorder(event.currentTarget.checked)}
            labelPosition="left"
            label="Table Border"
          />
          <Switch
            checked={withColumnBorders}
            onChange={(event) => setWithColumnBorders(event.currentTarget.checked)}
            labelPosition="left"
            label="Column Borders"
          />
        </Group>
        <Group position="right">
          <Button onClick={resetColumnsWidth}>Reset Column Width</Button>
        </Group>
      </Group>
    </Stack>
  );
}

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

Of course, you can reset the column width to the default value by using the resetColumnsWidth() function.
You may also set up the column with to initial by double-clicking on the resize handle.

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

Table Border

Column Borders

import { Button, Group, Stack, Switch } from '@mantine/core';
import { sortBy } from 'lodash';
import { DataTable, DataTableSortStatus, useDataTableColumns } from 'mantine-datatable';
import { useEffect, useState } from 'react';
import { companies, type Company } from '~/data';

export default function ResizingComplexExample() {
  const key = 'resize-complex-example';

  const [withTableBorder, setWithTableBorder] = useState<boolean>(true);

  const [withColumnBorders, setWithColumnBorders] = useState<boolean>(true);

  const props = {
    resizable: true,
    sortable: true,
    toggleable: true,
    draggable: true,
  };

  const { effectiveColumns, resetColumnsWidth, resetColumnsOrder, resetColumnsToggle } = useDataTableColumns<Company>({
    key,
    columns: [
      { accessor: 'name', ...props },
      { accessor: 'streetAddress', ...props },
      { accessor: 'city', ...props },
      { accessor: 'state', ...props },
    ],
  });

  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]);

  return (
    <Stack>
      <DataTable
        withBorder={withTableBorder}
        withColumnBorders={withColumnBorders}
        storeColumnsKey={key}
        records={records}
        columns={effectiveColumns}
        sortStatus={sortStatus}
        onSortStatusChange={setSortStatus}
      />
      <Group grow position="apart">
        <Group position="left">
          <Switch
            checked={withTableBorder}
            onChange={(event) => setWithTableBorder(event.currentTarget.checked)}
            labelPosition="left"
            label="Table Border"
          />
          <Switch
            checked={withColumnBorders}
            onChange={(event) => setWithColumnBorders(event.currentTarget.checked)}
            labelPosition="left"
            label="Column Borders"
          />
        </Group>
        <Group position="right">
          <Button size="xs" compact onClick={resetColumnsWidth}>
            Reset Column Width
          </Button>
          <Button size="xs" compact onClick={resetColumnsOrder}>
            Reset Column Order
          </Button>
          <Button size="xs" compact onClick={resetColumnsToggle}>
            Reset Column Toggle
          </Button>
        </Group>
      </Group>
    </Stack>
  );
}