Examples › Column resizing | Mantine DataTable

Examples › Column resizing

Starting with v7.3.1, Mantine DataTable supports column toggling and drag-and-drop reordering, thanks to the outstanding work of Giovambattista Fazioli.

Name	Street address	City	State
Feest, Bogan and Herzog	21716 Ratke Drive	Stromanport	WY
Cummerata - Kuhlman	6389 Dicki Stream	South Gate	NH
Goyette Inc	8873 Mertz Rapid	Dorthyside	ID
Runte Inc	2996 Ronny Mount	McAllen	MA
Goldner, Rohan and Lehner	632 Broadway Avenue	North Louie	WY
Doyle, Hodkiewicz and O'Connell	576 Joyce Ways	Tyraburgh	KS
Rau - O'Hara	7508 Lansdowne Road	Shieldsborough	MI
Tillman - Jacobi	57918 Gwendolyn Circles	Sheridanport	MI
Connelly, Feest and Hodkiewicz	7057 Stanley Road	Kearaburgh	CA
Shanahan, Robel and Beier	378 Berta Crescent	West Gerry	KS
Kling - McLaughlin	8346 Kertzmann Square	South Joesph	ID
Jogi - McLaughlin	83462 Shazam Street	North Joesph	ID
Jogi - McLaughlin	83462 Shazam Street	North Joesph	ID

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.

'use client';

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', ellipsis: true, resizable: true },
      { accessor: 'state', textAlign: 'right' },
    ],
  });

  return (
    <Stack>
      <DataTable
        withTableBorder={withTableBorder}
        withColumnBorders={withColumnBorders}
        storeColumnsKey={key}
        records={companies}
        columns={effectiveColumns}
      />
      <Group grow justify="space-between">
        <Group justify="flex-start">
          <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 justify="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
Connelly, Feest and Hodkiewicz	7057 Stanley Road	Kearaburgh	CA
Cummerata - Kuhlman	6389 Dicki Stream	South Gate	NH
Doyle, Hodkiewicz and O'Connell	576 Joyce Ways	Tyraburgh	KS
Feest, Bogan and Herzog	21716 Ratke Drive	Stromanport	WY
Goldner, Rohan and Lehner	632 Broadway Avenue	North Louie	WY
Goyette Inc	8873 Mertz Rapid	Dorthyside	ID
Jogi - McLaughlin	83462 Shazam Street	North Joesph	ID
Jogi - McLaughlin	83462 Shazam Street	North Joesph	ID
Kling - McLaughlin	8346 Kertzmann Square	South Joesph	ID
Rau - O'Hara	7508 Lansdowne Road	Shieldsborough	MI
Runte Inc	2996 Ronny Mount	McAllen	MA
Shanahan, Robel and Beier	378 Berta Crescent	West Gerry	KS
Tillman - Jacobi	57918 Gwendolyn Circles	Sheridanport	MI

No records

Table Border

Column Borders

'use client';

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

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

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

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

  const [withTableBorder, setWithTableBorder] = useState(true);
  const [withColumnBorders, setWithColumnBorders] = useState(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', ellipsis: true, ...props },
      { accessor: 'state', textAlign: 'right', ...props },
    ],
  });

  return (
    <Stack>
      <DataTable
        withTableBorder={withTableBorder}
        withColumnBorders={withColumnBorders}
        storeColumnsKey={key}
        records={records}
        columns={effectiveColumns}
        sortStatus={sortStatus}
        onSortStatusChange={setSortStatus}
      />
      <Group grow justify="space-between">
        <Group justify="flex-start">
          <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 justify="right">
          <Button size="compact-xs" onClick={resetColumnsWidth}>
            Reset Column Width
          </Button>
          <Button size="compact-xs" onClick={resetColumnsOrder}>
            Reset Column Order
          </Button>
          <Button size="compact-xs" onClick={resetColumnsToggle}>
            Reset Column Toggle
          </Button>
        </Group>
      </Group>
    </Stack>
  );
}

Go back

Examples › Row dragging

Up next

Examples › Infinite scrolling

Mantine DataTable is trusted by

SegmentX

Dera

Pachtop

Ganymede

COH3 Stats

ccrentals.org