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 |
No records
In order to enable column resizing you’ll have to:
- add a
storeColumnsKey: your_keyproperty to the DataTable (since the order of the columns is persisted in the local storage); - add a
resizable: trueproperty 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
You may also set up the column with to
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 |
| 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
'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>
);
}
