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	Mission statement
Feest, Bogan and Herzog	21716 Ratke Drive	Stromanport	WY	Innovate bricks-and-clicks metrics.
Cummerata - Kuhlman	6389 Dicki Stream	South Gate	NH	Harness real-time channels.
Goyette Inc	8873 Mertz Rapid	Dorthyside	ID	Productize front-end web services.
Runte Inc	2996 Ronny Mount	McAllen	MA	Engage synergistic infrastructures.
Goldner, Rohan and Lehner	632 Broadway Avenue	North Louie	WY	Incubate cross-platform metrics.
Doyle, Hodkiewicz and O'Connell	576 Joyce Ways	Tyraburgh	KS	Scale web-enabled e-business.
Rau - O'Hara	7508 Lansdowne Road	Shieldsborough	MI	Innovate real-time applications.
Tillman - Jacobi	57918 Gwendolyn Circles	Sheridanport	MI	Matrix viral synergies.
Connelly, Feest and Hodkiewicz	7057 Stanley Road	Kearaburgh	CA	Maximize dynamic e-commerce.
Shanahan, Robel and Beier	378 Berta Crescent	West Gerry	KS	Synthesize customized portals.
Kling - McLaughlin	8346 Kertzmann Square	South Joesph	ID	Reinvent cross-platform channels.
Jogi - McLaughlin	83462 Shazam Street	North Joesph	ID	Eliminate best-of-breed e-markets.
Jogi - McLaughlin	83462 Shazam Street	North Joesph	ID	Eliminate best-of-breed e-markets.

No records

Resizable

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 [resizable, setResizable] = useState<boolean>(true);
  const [withTableBorder, setWithTableBorder] = useState<boolean>(true);
  const [withColumnBorders, setWithColumnBorders] = useState<boolean>(true);

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

  return (
    <Stack>
      <DataTable
        withTableBorder={withTableBorder}
        withColumnBorders={withColumnBorders}
        storeColumnsKey={key}
        records={companies}
        columns={effectiveColumns}
      />
      <Group grow justify="space-between">
        <Group justify="flex-start">
          <Switch
            checked={resizable}
            onChange={(event) => setResizable(event.currentTarget.checked)}
            labelPosition="left"
            label="Resizable"
          />
          <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'));
  const [selectedRecords, setSelectedRecords] = useState<Company[]>([]);

  useEffect(() => {
    const data = sortBy(companies, sortStatus.columnAccessor);
    // eslint-disable-next-line react-hooks/set-state-in-effect
    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', ellipsis: true, ...props },
      { accessor: 'streetAddress', ellipsis: true, ...props },
      { accessor: 'city', ellipsis: true, ...props },
      { accessor: 'state', textAlign: 'right', ...props },
    ],
  });

  return (
    <Stack>
      <DataTable
        withTableBorder={withTableBorder}
        withColumnBorders={withColumnBorders}
        selectedRecords={selectedRecords}
        onSelectedRecordsChange={setSelectedRecords}
        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 used and trusted by

CodeParrot.AI

SegmentX

Dera

Pachtop

Ganymede

Pipedash

COH3 Stats

ccrentals.org