Describe the bug
When setting the resizable prop of columns to true, the initial column width calculation results in table where each column is evenly spaced:
In contrast, with resizable is not enabled, column widths are fit to the content, as seen here:
To Reproduce
Just set resizable to true in all columns in a Datatable.
You can use this modified code from ResizingExample.tsx to easily replicate it (i.e. just replace ResizingExample.tsx contents with this code):
'use client';
import { Button, Group, Stack, Switch } from '@mantine/core';
import { DataTable, useDataTableColumns } from '__PACKAGE__';
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 },
{ accessor: 'city', resizable },
{ accessor: 'state', resizable },
{ accessor: 'missionStatement', resizable },
],
});
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>
);
}Expected behavior
Initial column widths should be consistent and independent of the resizable prop. Columns should always fit their content by default, to avoid rows with excessive empty space.
Describe the bug
When setting the
resizableprop of columns to true, the initial column width calculation results in table where each column is evenly spaced:In contrast, with
resizableis not enabled, column widths are fit to the content, as seen here:To Reproduce
Just set resizable to
truein all columns in aDatatable.You can use this modified code from
ResizingExample.tsxto easily replicate it (i.e. just replaceResizingExample.tsxcontents with this code):Expected behavior
Initial column widths should be consistent and independent of the
resizableprop. Columns should always fit their content by default, to avoid rows with excessive empty space.