peter/siftlode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(ui): content-driven column widths in DataTable

Browse source 
Columns auto-size to their content (table-layout: auto) via a per-column 'nowrap' flag;
headers never wrap. Replaces hand-tuned fixed widths so values like 'N / S / L' no longer
wrap, and callers give a min-width only where a column must not collapse.
This commit is contained in:
npeter83 2026-06-17 23:24:25 +02:00
parent 2103920cbd
commit c000ea8bce
1 changed files with 8 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

10
frontend/src/components/DataTable.tsx
View file

@ -22,6 +22,8 @@ export interface Column<T> {
sortable?: boolean; sortable?: boolean;
sortValue?: (row: T) => string | number; sortValue?: (row: T) => string | number;
filter?: ColumnFilter<T>; filter?: ColumnFilter<T>;
// Keep the cell on one line so the column auto-sizes to its content (table-layout: auto).
nowrap?: boolean;
// Card fallback (below md): `cardPrimary` renders as the card heading (no label); `hideInCard` // Card fallback (below md): `cardPrimary` renders as the card heading (no label); `hideInCard`
// omits the column; `cardLabel:false` shows the value without its header label. // omits the column; `cardLabel:false` shows the value without its header label.
cardPrimary?: boolean; cardPrimary?: boolean;
@ -325,7 +327,7 @@ export default function DataTable<T>({
<th <th
key={col.key} key={col.key}
style={col.width ? { width: col.width } : undefined} style={col.width ? { width: col.width } : undefined}
className={`relative font-medium px-2 py-2 ${align(col.align)}`} className={`relative font-medium px-2 py-2 whitespace-nowrap ${align(col.align)}`}
> >
<span className="inline-flex items-center gap-1"> <span className="inline-flex items-center gap-1">
<button <button
@ -370,7 +372,11 @@ export default function DataTable<T>({
}`} }`}
> >
{columns.map((col) => ( {columns.map((col) => (
<td key={col.key} style={col.width ? { width: col.width } : undefined} className={`px-2 py-2 align-middle ${align(col.align)}`}> <td
key={col.key}
style={col.width ? { width: col.width } : undefined}
className={`px-2 py-2 align-middle ${col.nowrap ? "whitespace-nowrap" : ""} ${align(col.align)}`}
>
{col.render(row)} {col.render(row)}
</td> </td>
))} ))}