@human-kit/svelte-components 1.0.0-alpha.16 → 1.0.0-alpha.18

package/dist/table/column-resizer/table-column-resizer-sandbox-overflow-test.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+	import { Table } from '../index';
+	import type { TableColumnWidth } from '../root/context';
+
+	let currentColumnWidths = $state<Map<string, TableColumnWidth> | undefined>(undefined);
+	const rows = Array.from({ length: 24 }, (_, index) => ({
+		id: `row-${index + 1}`,
+		request: `PR-${String(index + 1).padStart(4, '0')}`,
+		requester: ['Ana Gomez', 'Lucas Perez', 'Mara Silva', 'Juan Torres'][index % 4],
+		area: ['Production', 'Logistics', 'Maintenance', 'Quality'][index % 4],
+		status: ['Pending', 'Review', 'Approved'][index % 3],
+		priority: ['Low', 'Medium', 'High'][index % 3],
+		total: 850 + index * 137
+	}));
+</script>
+
+<div
+	data-testid="sandbox-overflow-container"
+	style="width: 920px; max-height: 320px; overflow: auto;"
+>
+	<Table.Root
+		aria-label="Sandbox overflow table"
+		selectionMode="multiple"
+		bind:columnWidths={currentColumnWidths}
+		class="min-w-full border-collapse text-left"
+	>
+		<Table.Header>
+			<Table.Row>
+				<Table.Column id="selection" textValue="Selection" width={44}>
+					<Table.ColumnHeaderCell data-testid="sandbox-selection-header-cell">
+						<Table.Checkbox />
+					</Table.ColumnHeaderCell>
+				</Table.Column>
+				<Table.Column id="request" textValue="Request" isRowHeader defaultWidth={350}>
+					<Table.ColumnHeaderCell data-testid="sandbox-request-header-cell">
+						<div class="flex items-center justify-between gap-3">
+							<span>Request</span>
+							<Table.ColumnResizer
+								data-testid="sandbox-request-resizer"
+								class="inline-flex w-3 cursor-col-resize justify-center"
+							/>
+						</div>
+					</Table.ColumnHeaderCell>
+				</Table.Column>
+				<Table.Column id="requester" textValue="Requester">
+					<Table.ColumnHeaderCell>Requester</Table.ColumnHeaderCell>
+				</Table.Column>
+				<Table.Column id="area" textValue="Area">
+					<Table.ColumnHeaderCell>Area</Table.ColumnHeaderCell>
+				</Table.Column>
+				<Table.Column id="status" textValue="Status">
+					<Table.ColumnHeaderCell>Status</Table.ColumnHeaderCell>
+				</Table.Column>
+				<Table.Column id="priority" textValue="Priority">
+					<Table.ColumnHeaderCell>Priority</Table.ColumnHeaderCell>
+				</Table.Column>
+				<Table.Column id="total" textValue="Total">
+					<Table.ColumnHeaderCell data-testid="sandbox-total-header-cell">
+						<div class="flex w-full justify-end">Total</div>
+					</Table.ColumnHeaderCell>
+				</Table.Column>
+			</Table.Row>
+		</Table.Header>
+
+		<Table.Body>
+			{#each rows as row (row.id)}
+				<Table.Row id={row.id}>
+					<Table.Cell>
+						<Table.Checkbox />
+					</Table.Cell>
+					<Table.Cell>{row.request}</Table.Cell>
+					<Table.Cell>{row.requester}</Table.Cell>
+					<Table.Cell>{row.area}</Table.Cell>
+					<Table.Cell>{row.status}</Table.Cell>
+					<Table.Cell>{row.priority}</Table.Cell>
+					<Table.Cell>
+						<div class="flex w-full justify-end">${row.total.toLocaleString()}</div>
+					</Table.Cell>
+				</Table.Row>
+			{/each}
+		</Table.Body>
+	</Table.Root>
+</div>
+
+<output data-testid="sandbox-overflow-widths"
+	>{JSON.stringify(Object.fromEntries(currentColumnWidths ?? new Map()))}</output
+>

package/dist/table/column-resizer/table-column-resizer-sandbox-overflow-test.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const TableColumnResizerSandboxOverflowTest: import("svelte").Component<Record<string, never>, {}, "">;
+type TableColumnResizerSandboxOverflowTest = ReturnType<typeof TableColumnResizerSandboxOverflowTest>;
+export default TableColumnResizerSandboxOverflowTest;

package/dist/table/column-resizer/table-column-resizer-selection-column-test.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import { Table } from '../index';
+	import type { TableColumnWidth } from '../root/context';
 
-	let currentColumnWidths = $state<Map<string, number> | undefined>(undefined);
+	let currentColumnWidths = $state<Map<string, TableColumnWidth> | undefined>(undefined);
 
 	const checkboxStyle =
 		'display:inline-flex;height:20px;width:20px;align-items:center;justify-content:center;border:1px solid currentColor;border-radius:4px;';

package/dist/table/column-resizer/table-column-resizer-test.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { Table } from '../index';
-	import type { TableSortDescriptor } from '../root/context';
+	import type { TableColumnWidth, TableSortDescriptor } from '../root/context';
 
-	let currentColumnWidths = $state<Map<string, number>>(
+	let currentColumnWidths = $state<Map<string, TableColumnWidth>>(
 		new Map([
 			['email', 200],
 			['group', 160]
@@ -10,7 +10,7 @@
 	);
 	let currentSortDescriptor = $state<TableSortDescriptor | undefined>(undefined);
 	let resizeStartColumnId = $state('');
-	let resizeEndWidths = $state<Record<string, number>>({});
+	let resizeEndWidths = $state<Record<string, TableColumnWidth>>({});
 </script>
 
 <Table.Root

package/dist/table/column-resizer/table-column-resizer-three-column-relative-test.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import { Table } from '../index';
+	import type { TableColumnWidth } from '../root/context';
+
+	let currentColumnWidths = $state<Map<string, TableColumnWidth> | undefined>(undefined);
+</script>
+
+<div data-testid="three-column-relative-container" style="width: 640px; overflow-x: auto;">
+	<Table.Root
+		aria-label="Three column relative resize table"
+		bind:columnWidths={currentColumnWidths}
+		class="min-w-full border-collapse text-left"
+	>
+		<Table.Header>
+			<Table.Row>
+				<Table.Column id="name" isRowHeader textValue="Name">
+					<Table.ColumnHeaderCell data-testid="three-column-name-header-cell">
+						<div class="flex items-center justify-between gap-3">
+							<span>Name</span>
+							<Table.ColumnResizer
+								data-testid="three-column-name-resizer"
+								class="inline-flex w-3 cursor-col-resize justify-center"
+							/>
+						</div>
+					</Table.ColumnHeaderCell>
+				</Table.Column>
+				<Table.Column id="region" textValue="Region" defaultWidth={180} minWidth={140}>
+					<Table.ColumnHeaderCell data-testid="three-column-region-header-cell">
+						<div class="flex items-center justify-between gap-3">
+							<span>Region</span>
+							<Table.ColumnResizer
+								data-testid="three-column-region-resizer"
+								class="inline-flex w-3 cursor-col-resize justify-center"
+							/>
+						</div>
+					</Table.ColumnHeaderCell>
+				</Table.Column>
+				<Table.Column id="plan" textValue="Plan">
+					<Table.ColumnHeaderCell data-testid="three-column-plan-header-cell">
+						<div class="flex items-center justify-between gap-3">
+							<span>Plan</span>
+							<Table.ColumnResizer
+								data-testid="three-column-plan-resizer"
+								class="inline-flex w-3 cursor-col-resize justify-center"
+							/>
+						</div>
+					</Table.ColumnHeaderCell>
+				</Table.Column>
+			</Table.Row>
+		</Table.Header>
+
+		<Table.Body>
+			<Table.Row id="danilo">
+				<Table.Cell>Danilo Fernandez</Table.Cell>
+				<Table.Cell>Buenos Aires</Table.Cell>
+				<Table.Cell>Enterprise</Table.Cell>
+			</Table.Row>
+		</Table.Body>
+	</Table.Root>
+</div>
+
+<output data-testid="three-column-relative-widths"
+	>{JSON.stringify(Object.fromEntries(currentColumnWidths ?? new Map()))}</output
+>

package/dist/table/column-resizer/table-column-resizer-three-column-relative-test.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const TableColumnResizerThreeColumnRelativeTest: import("svelte").Component<Record<string, never>, {}, "">;
+type TableColumnResizerThreeColumnRelativeTest = ReturnType<typeof TableColumnResizerThreeColumnRelativeTest>;
+export default TableColumnResizerThreeColumnRelativeTest;

package/dist/table/column-resizer/table-column-resizer.svelte

@@ -1,6 +1,11 @@
 <script lang="ts">
 	import { onDestroy } from 'svelte';
-	import { getTableCellContext, useTableColumnContext, useTableContext } from '../root/context';
+	import {
+		DEFAULT_TABLE_COLUMN_MIN_WIDTH,
+		getTableCellContext,
+		useTableColumnContext,
+		useTableContext
+	} from '../root/context';
 	import type { TableColumnResizerProps } from '../types.js';
 	import { visuallyHiddenStyle } from '../utils/visually-hidden-style';
 	import {
@@ -60,7 +65,7 @@
 	});
 	const minWidth = $derived.by(() => {
 		void $widthVersion;
-		return table.getColumnMinWidth(column.id) ?? 75;
+		return table.getColumnMinWidth(column.id) ?? DEFAULT_TABLE_COLUMN_MIN_WIDTH;
 	});
 	const maxWidth = $derived.by(() => {
 		void $widthVersion;
@@ -268,16 +273,16 @@
 		suppressNextDoubleClickAutofit = false;
 
 		stopKeyboardResizeMode();
-		table.startColumnResize(column.id);
 
-		const th = element?.closest('th') as HTMLElement | null;
-		const tableEl = th?.closest('table') as HTMLTableElement | null;
-		const startX = event.clientX;
 		const startWidth = table.getColumnWidth(column.id) ?? getHeaderWidth();
 		const pointerId = event.pointerId;
 		const isRTL = isRightToLeft();
+		const pointerStartClientX = event.clientX;
 		let didDrag = false;
-		let latestClientX = startX;
+		let didStartResize = false;
+		let latestClientX = event.clientX;
+		let previousClientX = event.clientX;
+		let dragWidth = startWidth;
 		let animationFrameId: number | null = null;
 
 		// Capture the pointer so we receive move/up events even if the cursor
@@ -299,30 +304,27 @@
 			return clamped;
 		}
 
-		function applyTemporaryWidthToDOM(width: number) {
-			if (th) th.style.width = `${width}px`;
-			if (tableEl) {
-				const allThs = tableEl.querySelectorAll<HTMLElement>('thead th[style*="width"]');
-				let total = 0;
-				for (const cell of allThs) {
-					total += parseFloat(cell.style.width) || 0;
-				}
-				if (total > 0) {
-					tableEl.style.width = `${total}px`;
-					tableEl.style.minWidth = '0';
-				}
-			}
-		}
-
 		function flushPendingPointerMove() {
 			if (animationFrameId !== null) {
 				cancelAnimationFrame(animationFrameId);
 				animationFrameId = null;
 			}
 
-			const direction = isRTL ? -1 : 1;
-			const delta = (latestClientX - startX) * positionScale * direction;
-			const nextWidth = clampWidth(startWidth + delta);
+			if (!didStartResize && latestClientX === pointerStartClientX) {
+				return;
+			}
+
+			if (!didStartResize) {
+				table.startColumnResize(column.id);
+				didStartResize = true;
+				previousClientX = pointerStartClientX;
+			}
+
+			const pointerDelta = latestClientX - previousClientX;
+			previousClientX = latestClientX;
+			const widthDelta = isRTL ? -pointerDelta : pointerDelta;
+			dragWidth = clampWidth(dragWidth + widthDelta);
+			const nextWidth = dragWidth;
 			updateWidth(nextWidth);
 		}
 
@@ -334,30 +336,14 @@
 			});
 		}
 
-		// Measure position compensation factor.
-		// In centered/flex layouts, growing a column shifts the table's left edge,
-		// so the handle moves less than the mouse delta. We detect this by applying
-		// a 1px test change and measuring how much the <th> left edge drifts.
-		// NOTE: applyTemporaryWidthToDOM intentionally mutates the DOM synchronously
-		// outside Svelte's reactive cycle. The mutation is immediately reverted
-		// within the same microtask, so no observer or $effect will see it.
-		let positionScale = 1;
-		if (th) {
-			const leftBefore = th.getBoundingClientRect().left;
-			applyTemporaryWidthToDOM(startWidth + 1);
-			const leftAfter = th.getBoundingClientRect().left;
-			applyTemporaryWidthToDOM(startWidth);
-			const drift = leftBefore - leftAfter;
-			if (drift > 0.01 && drift < 0.99) {
-				positionScale = 1 / (1 - drift);
-			}
-		}
-
 		const handlePointerMove = (moveEvent: PointerEvent) => {
 			if (moveEvent.pointerId !== pointerId) return;
 			moveEvent.preventDefault();
-			didDrag = true;
 			latestClientX = moveEvent.clientX;
+			if (!didStartResize && latestClientX === pointerStartClientX) {
+				return;
+			}
+			didDrag = true;
 			schedulePointerMove();
 		};
 
@@ -386,7 +372,9 @@
 			}
 			// Treat system-initiated cancellation the same as Escape:
 			// restore the width the column had before the drag started.
-			updateWidth(startWidth);
+			if (didStartResize) {
+				updateWidth(startWidth);
+			}
 			cleanupPointerListeners();
 		};
 
@@ -399,7 +387,9 @@
 				cancelAnimationFrame(animationFrameId);
 				animationFrameId = null;
 			}
-			updateWidth(startWidth);
+			if (didStartResize) {
+				updateWidth(startWidth);
+			}
 			cleanupPointerListeners();
 		};
 
@@ -429,6 +419,7 @@
 	}
 
 	function handleClick(event: MouseEvent) {
+		if (!isResizable) return;
 		event.preventDefault();
 		event.stopPropagation();
 	}
@@ -555,18 +546,19 @@
 	<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 	<div
 		bind:this={element}
-		role="separator"
+		role={isResizable ? 'separator' : undefined}
 		tabindex={isResizable ? 0 : undefined}
 		class={className}
-		aria-label={accessibleLabel}
-		aria-orientation="vertical"
-		aria-valuenow={currentWidth ?? undefined}
-		aria-valuemin={minWidth}
-		aria-valuemax={maxWidth}
-		aria-valuetext={accessibleValueText}
+		aria-label={isResizable ? accessibleLabel : undefined}
+		aria-orientation={isResizable ? 'vertical' : undefined}
+		aria-valuenow={isResizable ? (currentWidth ?? undefined) : undefined}
+		aria-valuemin={isResizable ? minWidth : undefined}
+		aria-valuemax={isResizable ? maxWidth : undefined}
+		aria-valuetext={isResizable ? accessibleValueText : undefined}
 		data-focused={isFocused ? 'true' : undefined}
 		data-focus-visible={isFocusVisible ? 'true' : undefined}
 		data-resizing={isResizing ? 'true' : undefined}
+		data-resizable={isResizable ? 'true' : undefined}
 		data-table-column-resizer="true"
 		data-resizable-direction="right"
 		style:position="absolute"
@@ -580,6 +572,7 @@
 		style:align-items="center"
 		style:justify-content="center"
 		style:user-select="none"
+		style:pointer-events={isResizable ? 'auto' : 'none'}
 		style:touch-action="none"
 		onpointerdown={handlePointerDown}
 		ondblclick={handleDoubleClick}

package/dist/table/root/README.md

@@ -23,16 +23,16 @@ Public prop type: `TableRootProps`
 | `defaultSelectedKeys`    | `Iterable<string \| number>`                                 | `undefined` | Initial selected row ids for uncontrolled usage. When `selectionMode` later becomes `none`, the internal selection is cleared.                       |
 | `sortDescriptor`         | `{ column: string; direction: 'ascending' \| 'descending' }` | `undefined` | Controlled sort state. Supports `bind:sortDescriptor`. Setting it back to `undefined` clears the sort.                                               |
 | `defaultSortDescriptor`  | `{ column: string; direction: 'ascending' \| 'descending' }` | `undefined` | Initial sort state for uncontrolled usage.                                                                                                           |
-| `columnWidths`           | `Map<string, number>`                                        | `undefined` | Controlled column width state in px. Supports `bind:columnWidths`.                                                                                   |
-| `defaultColumnWidths`    | `Iterable<[string, number]>`                                 | `undefined` | Initial uncontrolled column widths in px.                                                                                                            |
+| `columnWidths`           | `Map<string, TableColumnWidth>`                              | `undefined` | Controlled column width state. Supports px, `%`, and `fr` specs via `bind:columnWidths`.                                                             |
+| `defaultColumnWidths`    | `Iterable<[string, TableColumnWidth]>`                       | `undefined` | Initial uncontrolled column widths using px, `%`, or `fr` specs.                                                                                     |
 | `disabledKeys`           | `Iterable<string \| number>`                                 | `undefined` | Row ids that should be non-selectable.                                                                                                               |
 | `onRowAction`            | `(id: string \| number) => void`                             | `undefined` | Called when a row action is triggered for an actionable row.                                                                                         |
 | `onSelectionChange`      | `(keys: Set<string \| number>) => void`                      | `undefined` | Called when row selection changes.                                                                                                                   |
 | `onSortChange`           | `(descriptor) => void`                                       | `undefined` | Called when sortable header state changes.                                                                                                           |
-| `onColumnWidthsChange`   | `(widths: Map<string, number>) => void`                      | `undefined` | Called when resize interactions update column widths.                                                                                                |
+| `onColumnWidthsChange`   | `(widths: Map<string, TableColumnWidth>) => void`            | `undefined` | Called when resize interactions update managed column widths.                                                                                        |
 | `onHiddenColumnsChange`  | `(columnIds: string[]) => void`                              | `undefined` | Called when hidden column state changes.                                                                                                             |
 | `onColumnResizeStart`    | `(columnId: string) => void`                                 | `undefined` | Called when a column resize drag starts.                                                                                                             |
-| `onColumnResizeEnd`      | `(widths: Map<string, number>) => void`                      | `undefined` | Called when a column resize drag ends.                                                                                                               |
+| `onColumnResizeEnd`      | `(widths: Map<string, TableColumnWidth>) => void`            | `undefined` | Called when a column resize drag ends.                                                                                                               |
 | `aria-label`             | `string`                                                     | `undefined` | Accessible name when no external label is present.                                                                                                   |
 | `aria-labelledby`        | `string`                                                     | `undefined` | Id reference for an external label.                                                                                                                  |
 | `class`                  | `string`                                                     | `''`        | Class names for the root table element.                                                                                                              |
@@ -45,14 +45,14 @@ Public prop type: `TableRootProps`
 Name: Selection and sorting notes
 Description: Current v1 interaction constraints that affect consumer expectations.
 
-| Topic                   | Behavior                                                                                                                                                                                                                                                                                                                                                          |
-| ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `selectionMode="none"`  | Clears existing row selection internally and prevents further row selection until another mode is set.                                                                                                                                                                                                                                                            |
-| Text selection and copy | Browser-native text selection and `Ctrl+C` behavior are preserved; the component does not implement custom clipboard logic.                                                                                                                                                                                                                                       |
-| `replace` mode blur     | Clicking or tabbing outside the table clears focus state but does not clear row selection.                                                                                                                                                                                                                                                                        |
-| Sort announcements      | Sort changes are mirrored into a polite live region. Use `Table.Column.textValue` when the announced label should differ from the column `id`.                                                                                                                                                                                                                    |
-| Column resizing         | Width state is normalized to px values and a `Table.ColumnResizer` only affects the `Table.Column` it is composed within.                                                                                                                                                                                                                                         |
-| Row edge focus          | In body rows, `ArrowLeft` before the first cell and `ArrowRight` after the last cell move focus onto the row itself; `ArrowUp` / `ArrowDown` keep that row-edge focus aligned across rows, repeating the same horizontal arrow loops back into the opposite edge cell, and `Home` / `End` jump to the first or last focusable body row while row focus is active. |
+| Topic                   | Behavior                                                                                                                                                                                                                                                                                                                                                                                       |
+| ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `selectionMode="none"`  | Clears existing row selection internally and prevents further row selection until another mode is set.                                                                                                                                                                                                                                                                                         |
+| Text selection and copy | Browser-native text selection and `Ctrl+C` behavior are preserved; the component does not implement custom clipboard logic.                                                                                                                                                                                                                                                                    |
+| `replace` mode blur     | Clicking or tabbing outside the table clears focus state but does not clear row selection.                                                                                                                                                                                                                                                                                                     |
+| Sort announcements      | Sort changes are mirrored into a polite live region. Use `Table.Column.textValue` when the announced label should differ from the column `id`.                                                                                                                                                                                                                                                 |
+| Column resizing         | Width state accepts px, `%`, and `fr` specs. Before interaction, unspecified columns behave like implicit flexible space. On the first real resize, visible columns are converted to px; the trailing column absorbs the delta until its minimum width, and additional growth overflows the table horizontally. A `Table.ColumnResizer` only affects the `Table.Column` it is composed within. |
+| Row edge focus          | In body rows, `ArrowLeft` before the first cell and `ArrowRight` after the last cell move focus onto the row itself; `ArrowUp` / `ArrowDown` keep that row-edge focus aligned across rows, repeating the same horizontal arrow loops back into the opposite edge cell, and `Home` / `End` jump to the first or last focusable body row while row focus is active.                              |
 
 ### Context utilities
 

package/dist/table/root/context.d.ts

@@ -17,7 +17,18 @@ export type TableSortDescriptor = {
     column: string;
     direction: TableSortDirection;
 };
-export type TableColumnWidth = number | `${number}px`;
+export type TableColumnWidth = number | `${number}px` | `${number}%` | `${number}fr`;
+export declare const DEFAULT_TABLE_COLUMN_MIN_WIDTH = 60;
+export type RoundedWidthDistributionEntry = {
+    columnId: string;
+    index: number;
+    exactWidth: number;
+    width: number;
+    minWidth: number;
+    maxWidth?: number;
+    remainder: number;
+};
+export declare function distributeRoundedWidths(entries: RoundedWidthDistributionEntry[], targetTotal: number): RoundedWidthDistributionEntry[];
 export type TableGridCoord = {
     row: number;
     col: number;
@@ -58,16 +69,16 @@ export type CreateTableContextOptions = {
     disallowEmptySelection?: boolean;
     initialSelectedKeys?: Iterable<TableSelectionKey>;
     initialSortDescriptor?: TableSortDescriptor;
-    initialColumnWidths?: Iterable<readonly [string, number]>;
+    initialColumnWidths?: Iterable<readonly [string, TableColumnWidth]>;
     initialHiddenColumns?: Iterable<string>;
     disabledKeys?: Iterable<TableSelectionKey>;
     onRowAction?: TableRowActionHandler;
     onSelectionChange?: (keys: Set<TableSelectionKey>) => void;
     onSortChange?: (descriptor: TableSortDescriptor | undefined) => void;
-    onColumnWidthsChange?: (widths: Map<string, number>) => void;
+    onColumnWidthsChange?: (widths: Map<string, TableColumnWidth>) => void;
     onHiddenColumnsChange?: (columnIds: string[]) => void;
     onColumnResizeStart?: (columnId: string) => void;
-    onColumnResizeEnd?: (widths: Map<string, number>) => void;
+    onColumnResizeEnd?: (widths: Map<string, TableColumnWidth>) => void;
 };
 export type TableContext = {
     layoutVersion: Readable<number>;
@@ -98,13 +109,18 @@ export type TableContext = {
     getVisibleColumnIndexByToken: (token: string) => number;
     getColumnTextValue: (columnId: string) => string | undefined;
     getColumnWidth: (columnId: string) => number | undefined;
+    getColumnWidthStyle: (columnId: string) => string | undefined;
+    hasAuthoredColumnWidthSpec: (columnId: string) => boolean;
     getColumnMinWidth: (columnId: string) => number | undefined;
     getColumnMaxWidth: (columnId: string) => number | undefined;
     isColumnHidden: (columnId: string) => boolean;
     isColumnResizable: (columnId: string) => boolean;
-    getColumnWidths: () => Map<string, number>;
-    getVisibleColumnWidths: () => Map<string, number>;
-    setColumnWidths: (widths?: Iterable<readonly [string, number]>) => void;
+    getColumnWidths: () => Map<string, TableColumnWidth>;
+    getVisibleColumnWidths: () => Map<string, TableColumnWidth>;
+    getResolvedVisibleColumnWidths: () => Map<string, number>;
+    hasRelativeVisibleColumnWidths: () => boolean;
+    refreshMeasuredLayout: () => void;
+    setColumnWidths: (widths?: Iterable<readonly [string, TableColumnWidth]>) => void;
     setColumnWidth: (columnId: string, width: number) => void;
     setHiddenColumns: (columnIds?: Iterable<string>) => void;
     measureColumnContentWidth: (columnId: string) => number | undefined;
@@ -115,6 +131,7 @@ export type TableContext = {
     hasResizableColumns: () => boolean;
     registerRow: (row: TableRowRegistration) => void;
     unregisterRow: (token: string) => void;
+    markBodyRowsInitialized: () => void;
     getHeaderRowCount: () => number;
     getBodyRowCount: () => number;
     isRowSelected: (id: TableSelectionKey | undefined) => boolean;