{activeIndex !== null && segments[activeIndex]
? `${segments[activeIndex].label}: ${fmtValue(segments[activeIndex].value)} (${Math.round(segments[activeIndex].pct)}%)`
diff --git a/src/components/Table/Table.stories.tsx b/src/components/Table/Table.stories.tsx
index 5792948..314bb47 100644
--- a/src/components/Table/Table.stories.tsx
+++ b/src/components/Table/Table.stories.tsx
@@ -7,6 +7,7 @@ import {
AlignedTable,
LoadingTable,
ResizableTable,
+ ColumnSizingTable,
SlotsTable,
DescriptionTable,
FooterTable,
@@ -91,6 +92,18 @@ export const Resizable: Story = {
},
};
+export const ColumnSizing: Story = {
+ render: () =>
,
+ parameters: {
+ docs: {
+ description: {
+ story:
+ 'Hug columns (checkbox, status, amount, actions) get explicit widths; fill columns (customer, product, note) omit width and split remaining space equally. Tag hug columns with `meta: { sizing: "hug" }` and only pass `style.width` when that flag is set.',
+ },
+ },
+ },
+};
+
export const WithSlots: Story = {
render: () =>
,
parameters: {
diff --git a/src/components/Table/Table.test-stories.tsx b/src/components/Table/Table.test-stories.tsx
index aeafa2d..a49ddb8 100644
--- a/src/components/Table/Table.test-stories.tsx
+++ b/src/components/Table/Table.test-stories.tsx
@@ -760,6 +760,150 @@ export function ClickableRowTable() {
);
}
+/**
+ * Table with hug/fill column sizing.
+ * Hug columns get an explicit width; fill columns omit width
+ * and split remaining space equally via table-layout: fixed.
+ */
+export function ColumnSizingTable() {
+ interface Order {
+ id: string;
+ customer: string;
+ product: string;
+ note: string;
+ amount: number;
+ status: 'completed' | 'pending' | 'failed';
+ }
+
+ const data: Order[] = [
+ { id: 'ORD-001', customer: 'Alice Johnson', product: 'Widget Pro', note: 'Rush delivery requested', amount: 249.99, status: 'completed' },
+ { id: 'ORD-002', customer: 'Bob Smith', product: 'Gadget Max', note: 'Gift wrap', amount: 149.50, status: 'pending' },
+ { id: 'ORD-003', customer: 'Carol White', product: 'Gizmo Ultra', note: '', amount: 89.00, status: 'failed' },
+ { id: 'ORD-004', customer: 'David Brown', product: 'Widget Pro', note: 'Include invoice', amount: 499.99, status: 'completed' },
+ { id: 'ORD-005', customer: 'Eve Davis', product: 'Gadget Max', note: 'Second order this month', amount: 149.50, status: 'pending' },
+ ];
+
+ const orderColumnHelper = createColumnHelper
();
+
+ const columns = [
+ orderColumnHelper.display({
+ id: 'select',
+ meta: { sizing: 'hug' },
+ size: 40,
+ header: () => null,
+ cell: () => (
+
+
+ ✓
+
+
+ ),
+ }),
+ orderColumnHelper.accessor('customer', {
+ header: 'Customer',
+ }),
+ orderColumnHelper.accessor('product', {
+ header: 'Product',
+ }),
+ orderColumnHelper.accessor('note', {
+ header: 'Note',
+ }),
+ orderColumnHelper.accessor('status', {
+ header: 'Status',
+ meta: { sizing: 'hug' },
+ size: 100,
+ }),
+ orderColumnHelper.accessor('amount', {
+ header: 'Amount',
+ meta: { sizing: 'hug', align: 'right' as const },
+ size: 100,
+ cell: (info) => `$${info.getValue().toFixed(2)}`,
+ }),
+ orderColumnHelper.display({
+ id: 'actions',
+ meta: { sizing: 'hug' },
+ size: 64,
+ header: () => null,
+ cell: () => (
+
+ ),
+ }),
+ ];
+
+ const table = useReactTable({
+ data,
+ columns,
+ getCoreRowModel: getCoreRowModel(),
+ });
+
+ return (
+
+
+ {table.getHeaderGroups().map((headerGroup) => (
+
+ {headerGroup.headers.map((header) => {
+ const meta = header.column.columnDef.meta as
+ | { sizing?: string; align?: 'left' | 'right' }
+ | undefined;
+ return (
+
+ {header.isPlaceholder
+ ? null
+ : flexRender(header.column.columnDef.header, header.getContext())}
+
+ );
+ })}
+
+ ))}
+
+
+ {table.getRowModel().rows.map((row) => (
+
+ {row.getVisibleCells().map((cell) => {
+ const meta = cell.column.columnDef.meta as
+ | { sizing?: string; align?: 'left' | 'right' }
+ | undefined;
+ return (
+
+ {flexRender(cell.column.columnDef.cell, cell.getContext())}
+
+ );
+ })}
+
+ ))}
+
+
+ );
+}
+
/**
* Table with cell description (secondary text)
*/