@galaxy-io/dls 1.2.6 → 1.3.0

package/dist/table/InfiniteTable.js

@@ -1,403 +1,136 @@
-import { withTheme } from "../theme/GalaxyTheme.js";
-import { getCssSizeValue } from "../utils/linaria.js";
-import Text, { TextSize, TextVariant, TextWeight } from "../text/Text.js";
-import Icon, { IconVariant } from "../icons/Icon.js";
-import Button, { ButtonSize, ButtonVariant } from "../buttons/Button.js";
-/* empty css                        */
-import { styled } from "@linaria/react";
-import { match } from "ts-pattern";
-import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import Text, { TextSize, TextVariant } from "../text/Text.js";
+import { ColumnAlign, ColumnPin, ColumnResizeMode, TableDensity, TableVariant } from "./types.js";
+import { EXPAND_COLUMN_ID, SELECT_COLUMN_ID, estimateColumnWidth } from "./utils.js";
+import { useTableRowSelection } from "./useTableRowSelection.js";
+import { useTableRowExpansion } from "./useTableRowExpansion.js";
+import { useTableKeyboardNavigation } from "./useTableKeyboardNavigation.js";
+import { useTableColumnResize } from "./useTableColumnResize.js";
+import { useTableColumnLayout } from "./useTableColumnLayout.js";
+import { useInfiniteScrollSentinel } from "./useInfiniteScrollSentinel.js";
+import { useElementClientSize } from "../hooks/useElementClientSize.js";
+import { InfiniteScrollSentinel, StyledTable, TableBody, TableDataCell, TableHead, TableHeaderCell, TableHeaderRow, TableLoadingRow, TableOuterContainer, TableRow, TableScrollContainer } from "./TablePrimitives.js";
+import TableHeaderCellContent from "./TableHeaderCellContent.js";
+import TableStatusRow from "./TableStatusRow.js";
+import TableSelectCell from "./TableSelectCell.js";
+import TableExpandedRow from "./TableExpandedRow.js";
+import TableExpandCell from "./TableExpandCell.js";
+import React, { useCallback, useEffect, useId, useMemo, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { CaretDownIcon, CaretRightIcon, CaretUpDownIcon, SortAscendingIcon, SortDescendingIcon } from "@phosphor-icons/react";
-import { flexRender, getCoreRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
+import { flexRender, getCoreRowModel, getExpandedRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
 //#region src/table/InfiniteTable.tsx
-var TableVariant = /* @__PURE__ */ function(TableVariant) {
-	TableVariant["BASE"] = "BASE";
-	TableVariant["PRIMARY"] = "PRIMARY";
-	TableVariant["SECONDARY"] = "SECONDARY";
-	TableVariant["TERTIARY"] = "TERTIARY";
-	return TableVariant;
-}({});
-var TableDensity = /* @__PURE__ */ function(TableDensity) {
-	TableDensity["SMALL"] = "SMALL";
-	TableDensity["MEDIUM"] = "MEDIUM";
-	TableDensity["LARGE"] = "LARGE";
-	return TableDensity;
-}({});
-var ColumnPin = /* @__PURE__ */ function(ColumnPin) {
-	ColumnPin["LEFT"] = "LEFT";
-	ColumnPin["RIGHT"] = "RIGHT";
-	return ColumnPin;
-}({});
-var ColumnAlign = /* @__PURE__ */ function(ColumnAlign) {
-	ColumnAlign["LEFT"] = "LEFT";
-	ColumnAlign["CENTER"] = "CENTER";
-	ColumnAlign["RIGHT"] = "RIGHT";
-	return ColumnAlign;
-}({});
-/**
-* Estimate column width based on header name and sample data values.
-* Useful for auto-sizing table columns based on content.
-*/
-var estimateColumnWidth = (columnName, sampleValues, options = {}) => {
-	const { minWidth = 80, maxWidth = 400, charWidth = 8, padding = 32 } = options;
-	const headerLength = columnName.length;
-	const maxValueLength = sampleValues.reduce((max, val) => Math.max(max, String(val).length), 0);
-	const estimatedWidth = Math.max(headerLength, maxValueLength) * charWidth + padding;
-	return Math.max(minWidth, Math.min(maxWidth, estimatedWidth));
-};
-var EXPAND_COLUMN_ID = "__expand__";
-var EXPAND_COLUMN_WIDTH = 44;
-var TABLE_DENSITY_TO_BUTTON_SIZE_MAP = {
-	["SMALL"]: ButtonSize.SMALL,
-	["MEDIUM"]: ButtonSize.SMALL,
-	["LARGE"]: ButtonSize.MEDIUM
-};
-function getVariantBackgroundColor(theme, variant) {
-	return match(variant).with("BASE", () => theme.color.background.base).with("PRIMARY", () => theme.color.background.primary).with("SECONDARY", () => theme.color.background.secondary).with("TERTIARY", () => theme.color.background.tertiary).with(void 0, () => theme.color.background.primary).exhaustive();
-}
-function getVariantHoverBackgroundColor(theme, variant) {
-	return match(variant).with("BASE", () => theme.color.background.tertiary).with("PRIMARY", () => theme.color.background.tertiary).with("SECONDARY", () => theme.color.background.tertiary).with("TERTIARY", () => theme.color.background.secondary).with(void 0, () => theme.color.background.tertiary).exhaustive();
-}
-function getVariantSelectedBackgroundColor(theme, variant) {
-	return match(variant).with("BASE", () => theme.color.background.secondary).with("PRIMARY", () => theme.color.background.secondary).with("SECONDARY", () => theme.color.background.primary).with("TERTIARY", () => theme.color.background.primary).with(void 0, () => theme.color.background.secondary).exhaustive();
-}
-var _exp = () => ({ $width, $fillWidth }) => {
-	if ($fillWidth) return "100%";
-	if ($width) return getCssSizeValue($width);
-	return "auto";
-};
-var _exp2 = () => ({ $height, $fillHeight }) => {
-	if ($fillHeight) return "100%";
-	if ($height) return getCssSizeValue($height);
-	return "auto";
-};
-var TableOuterContainer = withTheme(/*#__PURE__*/ styled("div")({
-	name: "TableOuterContainer",
-	class: "t15fnb8v",
-	propsAsIs: false,
-	vars: {
-		"t15fnb8v-0": [_exp()],
-		"t15fnb8v-1": [_exp2()]
-	}
-}));
-var _exp3 = () => ({ $noLastRowPadding }) => $noLastRowPadding ? "0" : "8px";
-var TableScrollContainer = /*#__PURE__*/ styled("div")({
-	name: "TableScrollContainer",
-	class: "t1xd4vnx",
-	propsAsIs: false,
-	vars: { "t1xd4vnx-0": [_exp3()] }
-});
-var StyledTable = /*#__PURE__*/ styled("table")({
-	name: "StyledTable",
-	class: "sk741d9",
-	propsAsIs: false
-});
-var TableHead = /*#__PURE__*/ styled("thead")({
-	name: "TableHead",
-	class: "t7f6tk3",
-	propsAsIs: false
-});
-var TableBody = /*#__PURE__*/ styled("tbody")({
-	name: "TableBody",
-	class: "tl0vwdj",
-	propsAsIs: false
-});
-var _exp4 = () => ({ $isClickable }) => $isClickable ? "pointer" : "default";
-var _exp5 = () => ({ $density }) => match($density).with("SMALL", () => "32px").with("MEDIUM", () => "48px").with("LARGE", () => "56px").with(void 0, () => "48px").exhaustive();
-var _exp6 = () => ({ $isSelected, $variant, theme }) => $isSelected ? getVariantSelectedBackgroundColor(theme, $variant) : getVariantBackgroundColor(theme, $variant);
-var _exp7 = () => ({ $isExpanded, $isLastRow, theme }) => {
-	if ($isExpanded || $isLastRow) return "none";
-	return `0.5px solid ${theme.color.border.primary}`;
-};
-var _exp8 = () => ({ $isClickable, $isSelected, $variant, theme }) => {
-	if ($isSelected) return getVariantSelectedBackgroundColor(theme, $variant);
-	if ($isClickable) return getVariantHoverBackgroundColor(theme, $variant);
-	return getVariantBackgroundColor(theme, $variant);
-};
-var TableRow = withTheme(/*#__PURE__*/ styled("tr")({
-	name: "TableRow",
-	class: "t1ikcerv",
-	propsAsIs: false,
-	vars: {
-		"t1ikcerv-0": [_exp4()],
-		"t1ikcerv-1": [_exp5()],
-		"t1ikcerv-2": [_exp6()],
-		"t1ikcerv-3": [_exp7()],
-		"t1ikcerv-4": [_exp8()]
-	}
-}));
-var TableHeaderRow = withTheme(/*#__PURE__*/ styled("tr")({
-	name: "TableHeaderRow",
-	class: "tswwjja",
-	propsAsIs: false
-}));
-var _exp9 = () => ({ $density, $isExpandCell }) => {
-	if ($isExpandCell) return "4px 6px";
-	return `8px ${match($density).with("SMALL", () => "12px").with("MEDIUM", () => "16px").with("LARGE", () => "20px").with(void 0, () => "16px").exhaustive()}`;
-};
-var _exp0 = () => ({ $width }) => {
-	if ($width) return `0 0 ${$width}px`;
-	return "1 1 0";
-};
-var _exp1 = () => ({ $minWidth }) => {
-	if ($minWidth) return `${$minWidth}px`;
-	return "0";
-};
-var _exp10 = () => ({ $maxWidth }) => {
-	if ($maxWidth) return `${$maxWidth}px`;
-	return "none";
-};
-var _exp11 = () => ({ $align }) => match($align).with("LEFT", () => "left").with("CENTER", () => "center").with("RIGHT", () => "right").with(void 0, () => "left").exhaustive();
-var _exp12 = () => ({ theme }) => theme.color.border.primary;
-var _exp13 = () => ({ $variant, theme }) => getVariantBackgroundColor(theme, $variant);
-var _exp14 = () => ({ $align }) => match($align).with("LEFT", () => "flex-start").with("CENTER", () => "center").with("RIGHT", () => "flex-end").with(void 0, () => "flex-start").exhaustive();
-var _exp15 = () => ({ $isSortable }) => {
-	if ($isSortable) return "pointer";
-	return "default";
-};
-var _exp16 = () => ({ $pin }) => {
-	if ($pin) return 25;
-	return 20;
-};
-var _exp17 = () => ({ $pin, $pinnedOffset }) => {
-	if ($pin === "LEFT" && $pinnedOffset !== void 0) return `${$pinnedOffset}px`;
-	return "auto";
-};
-var _exp18 = () => ({ $pin, $pinnedOffset }) => {
-	if ($pin === "RIGHT" && $pinnedOffset !== void 0) return `${$pinnedOffset}px`;
-	return "auto";
-};
-var _exp19 = () => ({ $pin, theme }) => {
-	if ($pin === "LEFT") return `0.5px solid ${theme.color.border.primary}`;
-	return "none";
-};
-var _exp20 = () => ({ $pin, theme }) => {
-	if ($pin === "RIGHT") return `0.5px solid ${theme.color.border.primary}`;
-	return "none";
-};
-var TableHeaderCell = withTheme(/*#__PURE__*/ styled("th")({
-	name: "TableHeaderCell",
-	class: "t9wn1rd",
-	propsAsIs: false,
-	vars: {
-		"t9wn1rd-0": [_exp9()],
-		"t9wn1rd-1": [_exp0()],
-		"t9wn1rd-2": [_exp1()],
-		"t9wn1rd-3": [_exp10()],
-		"t9wn1rd-4": [_exp11()],
-		"t9wn1rd-5": [_exp12()],
-		"t9wn1rd-6": [_exp13()],
-		"t9wn1rd-7": [_exp14()],
-		"t9wn1rd-8": [_exp15()],
-		"t9wn1rd-9": [_exp16()],
-		"t9wn1rd-10": [_exp17()],
-		"t9wn1rd-11": [_exp18()],
-		"t9wn1rd-12": [_exp19()],
-		"t9wn1rd-13": [_exp20()]
-	}
-}));
-var _exp21 = () => ({ $density, $isExpandCell }) => {
-	if ($isExpandCell) return "4px 6px";
-	return `8px ${match($density).with("SMALL", () => "12px").with("MEDIUM", () => "16px").with("LARGE", () => "20px").with(void 0, () => "16px").exhaustive()}`;
-};
-var _exp22 = () => ({ theme }) => theme.color.text.primary;
-var _exp23 = () => ({ $width }) => {
-	if ($width) return `0 0 ${$width}px`;
-	return "1 1 0";
-};
-var _exp24 = () => ({ $minWidth }) => {
-	if ($minWidth) return `${$minWidth}px`;
-	return "0";
-};
-var _exp25 = () => ({ $maxWidth }) => {
-	if ($maxWidth) return `${$maxWidth}px`;
-	return "none";
-};
-var _exp26 = () => ({ $align }) => match($align).with("LEFT", () => "left").with("CENTER", () => "center").with("RIGHT", () => "right").with(void 0, () => "left").exhaustive();
-var _exp27 = () => ({ $align }) => match($align).with("LEFT", () => "flex-start").with("CENTER", () => "center").with("RIGHT", () => "flex-end").with(void 0, () => "flex-start").exhaustive();
-var _exp28 = () => ({ $pin, $variant, theme }) => {
-	if ($pin) return getVariantBackgroundColor(theme, $variant);
-	return "transparent";
-};
-var _exp29 = () => ({ $pin }) => {
-	if ($pin) return "sticky";
-	return "static";
-};
-var _exp30 = () => ({ $pin }) => {
-	if ($pin) return 5;
-	return "auto";
-};
-var _exp31 = () => ({ $pin, $pinnedOffset }) => {
-	if ($pin === "LEFT" && $pinnedOffset !== void 0) return `${$pinnedOffset}px`;
-	return "auto";
-};
-var _exp32 = () => ({ $pin, $pinnedOffset }) => {
-	if ($pin === "RIGHT" && $pinnedOffset !== void 0) return `${$pinnedOffset}px`;
-	return "auto";
-};
-var _exp33 = () => ({ $pin, theme }) => {
-	if ($pin === "LEFT") return `0.5px solid ${theme.color.border.primary}`;
-	return "none";
-};
-var _exp34 = () => ({ $pin, theme }) => {
-	if ($pin === "RIGHT") return `0.5px solid ${theme.color.border.primary}`;
-	return "none";
-};
-var TableDataCell = withTheme(/*#__PURE__*/ styled("td")({
-	name: "TableDataCell",
-	class: "thlukz9",
-	propsAsIs: false,
-	vars: {
-		"thlukz9-0": [_exp21()],
-		"thlukz9-1": [_exp22()],
-		"thlukz9-2": [_exp23()],
-		"thlukz9-3": [_exp24()],
-		"thlukz9-4": [_exp25()],
-		"thlukz9-5": [_exp26()],
-		"thlukz9-6": [_exp27()],
-		"thlukz9-7": [_exp28()],
-		"thlukz9-8": [_exp29()],
-		"thlukz9-9": [_exp30()],
-		"thlukz9-10": [_exp31()],
-		"thlukz9-11": [_exp32()],
-		"thlukz9-12": [_exp33()],
-		"thlukz9-13": [_exp34()]
-	}
-}));
-var HeaderContentWrapper = /*#__PURE__*/ styled("div")({
-	name: "HeaderContentWrapper",
-	class: "h1oppwyt",
-	propsAsIs: false
-});
-var SortIconWrapper = /*#__PURE__*/ styled("div")({
-	name: "SortIconWrapper",
-	class: "s1we9pi1",
-	propsAsIs: false
-});
-var EmptyContentWrapper = /*#__PURE__*/ styled("div")({
-	name: "EmptyContentWrapper",
-	class: "ezfy353",
-	propsAsIs: false
-});
-var _exp35 = () => ({ $density }) => match($density).with("SMALL", () => "32px").with("MEDIUM", () => "48px").with("LARGE", () => "56px").with(void 0, () => "48px").exhaustive();
-var _exp36 = () => ({ theme }) => theme.color.border.primary;
-var _exp37 = () => ({ $variant, theme }) => getVariantBackgroundColor(theme, $variant);
-var LoadingRowWrapper = withTheme(/*#__PURE__*/ styled("tr")({
-	name: "LoadingRowWrapper",
-	class: "l1pcw3m6",
-	propsAsIs: false,
-	vars: {
-		"l1pcw3m6-0": [_exp35()],
-		"l1pcw3m6-1": [_exp36()],
-		"l1pcw3m6-2": [_exp37()]
-	}
-}));
-var _exp38 = () => ({ $minWidth }) => `${$minWidth}px`;
-var ExpandedRow = /*#__PURE__*/ styled("tr")({
-	name: "ExpandedRow",
-	class: "eo1carc",
-	propsAsIs: false,
-	vars: { "eo1carc-0": [_exp38()] }
-});
-var _exp39 = () => ({ $variant, theme }) => getVariantBackgroundColor(theme, $variant);
-var _exp40 = () => ({ $isLastRow, theme }) => $isLastRow ? "none" : `0.5px solid ${theme.color.border.primary}`;
-var ExpandedRowCell = withTheme(/*#__PURE__*/ styled("td")({
-	name: "ExpandedRowCell",
-	class: "e8l9d05",
-	propsAsIs: false,
-	vars: {
-		"e8l9d05-0": [_exp39()],
-		"e8l9d05-1": [_exp40()]
-	}
-}));
-var _exp41 = () => ({ $width }) => $width !== void 0 ? `${$width}px` : "100%";
-var ExpandedViewport = /*#__PURE__*/ styled("div")({
-	name: "ExpandedViewport",
-	class: "e12m9dma",
-	propsAsIs: false,
-	vars: { "e12m9dma-0": [_exp41()] }
-});
-var _exp43 = () => ({ $variant, theme }) => getVariantBackgroundColor(theme, $variant);
-var _exp44 = () => ({ theme }) => theme.color.border.primary;
-var ExpandedGutter = withTheme(/*#__PURE__*/ styled("div")({
-	name: "ExpandedGutter",
-	class: "e1birhg7",
-	propsAsIs: false,
-	vars: {
-		"e1birhg7-0": [_exp43()],
-		"e1birhg7-1": [_exp44()]
-	}
-}));
-var _exp46 = () => ({ theme }) => theme.color.border.primary;
-var ExpandedBody = withTheme(/*#__PURE__*/ styled("div")({
-	name: "ExpandedBody",
-	class: "e2tyxoq",
-	propsAsIs: false,
-	vars: { "e2tyxoq-0": [_exp46()] }
-}));
-var ExpandedContent = /*#__PURE__*/ styled("div")({
-	name: "ExpandedContent",
-	class: "ew9y6zt",
-	propsAsIs: false
-});
 function InfiniteTable(props) {
-	const { columns, data, getRowId, height, width, fillWidth, fillHeight, density = "MEDIUM", variant = "PRIMARY", hasNextPage, isFetchingNextPage, fetchNextPage, enableRowSelection, enableMultiRowSelection, rowSelection, onRowSelectionChange, enableSorting = false, enableMultiSort = false, sorting, onSortingChange, manualSorting = false, isLoading = false, isError = false, loadingRowCount = 5, contentWhenEmpty, contentWhenError, noHeader = false, noLastRowBorder = false, noLastRowPadding = false, onRowClick, onRowDoubleClick, onRowExpand, onTableReady } = props;
+	const { columns, data, getRowId, height, width, fillWidth, fillHeight, density = TableDensity.MEDIUM, variant = TableVariant.PRIMARY, hasNextPage, isFetchingNextPage, fetchNextPage, enableRowSelection, enableMultiRowSelection = true, rowSelection, defaultRowSelection, onRowSelectionChange, onSelectedRowsChange, showSelectionColumn = false, selectionColumnPin = ColumnPin.LEFT, enableSelectAll, enableSelectionRange = true, selectAllAriaLabel = "Select all rows", getRowSelectAriaLabel, enableSorting = false, enableMultiSort = false, sorting, onSortingChange, manualSorting = false, isLoading = false, isError = false, error, loadingRowCount = 5, contentWhenEmpty, contentWhenError, noHeader = false, noLastRowBorder = false, noLastRowPadding = false, onRowClick, onRowDoubleClick, onRowActivate, onRowExpand, expandedRowIds, defaultExpandedRowIds, onExpandedChange, getRowCanExpand, enableMultiRowExpansion = true, showExpandColumn = true, expandColumnPin = ColumnPin.LEFT, enableColumnResizing = false, columnSizing, defaultColumnSizing, onColumnSizingChange, columnResizeMode = ColumnResizeMode.ON_CHANGE, ariaLabel, ariaLabelledBy, getRowAriaLabel, enableRowFocus, onTableReady } = props;
+	const instanceId = useId();
 	const scrollContainerRef = useRef(null);
-	const [expandedRowId, setExpandedRowId] = useState(null);
-	const [scrollContainerClientWidth, setScrollContainerClientWidth] = useState(null);
+	const headerRef = useRef(null);
+	const bodyRef = useRef(null);
+	const { width: viewportWidth, height: viewportHeight } = useElementClientSize(scrollContainerRef);
+	const { height: headerHeight } = useElementClientSize(headerRef);
+	const hasExpansion = onRowExpand !== void 0;
+	const hasExpandColumn = hasExpansion && showExpandColumn;
+	const isSelectable = showSelectionColumn || enableRowSelection !== void 0;
+	const resolvedEnableRowSelection = enableRowSelection ?? (showSelectionColumn ? true : void 0);
+	const canSelectAll = (enableSelectAll ?? enableMultiRowSelection) && enableMultiRowSelection;
+	const selection = useTableRowSelection({
+		rowSelection,
+		defaultRowSelection,
+		onRowSelectionChange,
+		enableMultiRowSelection,
+		enableSelectionRange,
+		onSelectedRowsChange
+	});
+	const expansion = useTableRowExpansion({
+		expandedRowIds,
+		defaultExpandedRowIds,
+		onExpandedChange,
+		enableMultiRowExpansion
+	});
+	const resize = useTableColumnResize({
+		columns,
+		enabled: enableColumnResizing,
+		columnSizing,
+		defaultColumnSizing,
+		onColumnSizingChange,
+		mode: columnResizeMode
+	});
+	const { canResizeColumn } = resize;
+	const rowsRef = useRef([]);
+	const { toggleRow, toggleAll, notifySelectedRows } = selection;
+	const toggleRowSelection = useCallback((row, isShiftKey) => {
+		toggleRow(row, rowsRef.current, isShiftKey);
+	}, [toggleRow]);
 	const resolvedColumns = useMemo(() => {
-		if (!onRowExpand) return columns;
-		return [{
+		if (!hasExpandColumn && !showSelectionColumn) return columns;
+		const syntheticColumns = [];
+		if (showSelectionColumn) syntheticColumns.push({
+			id: SELECT_COLUMN_ID,
+			size: 44,
+			minSize: 44,
+			maxSize: 44,
+			pin: selectionColumnPin,
+			align: ColumnAlign.CENTER,
+			enableResizing: false,
+			header: canSelectAll ? ({ table }) => {
+				const rows = table.getRowModel().rows;
+				const selectableRows = rows.filter((row) => row.getCanSelect());
+				const selectedCount = selectableRows.filter((row) => row.getIsSelected()).length;
+				return /* @__PURE__ */ jsx(TableSelectCell, {
+					isChecked: selectableRows.length > 0 && selectedCount === selectableRows.length,
+					isIndeterminate: selectedCount > 0 && selectedCount < selectableRows.length,
+					isDisabled: selectableRows.length === 0,
+					density,
+					ariaLabel: selectAllAriaLabel,
+					onChange: (isChecked) => toggleAll(rows, isChecked)
+				});
+			} : () => null,
+			cell: ({ row }) => /* @__PURE__ */ jsx(TableSelectCell, {
+				isChecked: row.getIsSelected(),
+				isDisabled: !row.getCanSelect(),
+				density,
+				ariaLabel: getRowSelectAriaLabel?.(row) ?? `Select row ${row.index + 1}`,
+				onChange: (_isChecked, isShiftKey) => toggleRowSelection(row, isShiftKey)
+			}),
+			cellLoading: () => null
+		});
+		if (hasExpandColumn) syntheticColumns.push({
 			id: EXPAND_COLUMN_ID,
+			size: 44,
+			minSize: 44,
+			maxSize: 44,
+			pin: expandColumnPin,
+			align: ColumnAlign.CENTER,
+			enableResizing: false,
 			header: () => null,
-			size: EXPAND_COLUMN_WIDTH,
-			minSize: EXPAND_COLUMN_WIDTH,
-			maxSize: EXPAND_COLUMN_WIDTH,
-			pin: "LEFT",
-			align: "CENTER",
 			cell: ({ row }) => {
-				const isExpanded = expandedRowId === row.id;
-				const buttonSize = TABLE_DENSITY_TO_BUTTON_SIZE_MAP[density];
-				return /* @__PURE__ */ jsx(Button, {
-					"aria-expanded": isExpanded,
-					"aria-label": isExpanded ? "Collapse row" : "Expand row",
-					icon: isExpanded ? CaretDownIcon : CaretRightIcon,
-					onClick: (event) => {
-						event.stopPropagation();
-						setExpandedRowId((currentRowId) => currentRowId === row.id ? null : row.id);
-					},
-					variant: ButtonVariant.TERTIARY,
-					size: buttonSize
+				if (!row.getCanExpand()) return null;
+				return /* @__PURE__ */ jsx(TableExpandCell, {
+					isExpanded: row.getIsExpanded(),
+					density,
+					expandedPanelId: `${instanceId}-expanded-${row.id}`,
+					onToggle: () => row.toggleExpanded()
 				});
 			},
 			cellLoading: () => null
-		}, ...columns];
+		});
+		return [...syntheticColumns, ...columns];
 	}, [
 		columns,
 		density,
-		expandedRowId,
-		onRowExpand
+		instanceId,
+		hasExpandColumn,
+		expandColumnPin,
+		showSelectionColumn,
+		selectionColumnPin,
+		canSelectAll,
+		selectAllAriaLabel,
+		getRowSelectAriaLabel,
+		toggleAll,
+		toggleRowSelection
 	]);
-	const pinnedOffsets = useMemo(() => {
-		const offsets = /* @__PURE__ */ new Map();
-		let leftOffset = 0;
-		let rightOffset = 0;
-		resolvedColumns.forEach((col) => {
-			if (col.pin === "LEFT") {
-				offsets.set(col.id, leftOffset);
-				leftOffset += col.size ?? 150;
-			}
-		});
-		[...resolvedColumns].reverse().forEach((col) => {
-			if (col.pin === "RIGHT") {
-				offsets.set(col.id, rightOffset);
-				rightOffset += col.size ?? 150;
-			}
-		});
-		return offsets;
-	}, [resolvedColumns]);
-	const totalColumnMinWidth = useMemo(() => resolvedColumns.reduce((sum, col) => sum + (col.size ?? col.minSize ?? 0), 0), [resolvedColumns]);
+	const { getColumnWidth, pinnedOffsets, rowMinWidth } = useTableColumnLayout({
+		columns: resolvedColumns,
+		columnSizing: resize.columnSizing
+	});
 	const table = useReactTable({
 		data,
 		columns: useMemo(() => resolvedColumns.map((col) => ({
@@ -405,12 +138,7 @@ function InfiniteTable(props) {
 			accessorFn: col.accessorFn,
 			header: ({ table }) => {
 				if (typeof col.header === "function") return col.header({ table });
-				return /* @__PURE__ */ jsx(HeaderContentWrapper, { children: /* @__PURE__ */ jsx(Text, {
-					variant: TextVariant.TERTIARY,
-					weight: TextWeight.MEDIUM,
-					size: TextSize.BODY_SM,
-					children: col.header ?? col.id
-				}) });
+				return col.header ?? col.id;
 			},
 			cell: (info) => {
 				if (col.cell) return col.cell({
@@ -418,11 +146,7 @@ function InfiniteTable(props) {
 					row: info.row
 				});
 				const value = info.getValue();
-				if (typeof value === "string") return /* @__PURE__ */ jsx(Text, {
-					size: TextSize.BODY_SM,
-					children: value
-				});
-				if (typeof value === "number" || typeof value === "boolean" || typeof value === "bigint") return /* @__PURE__ */ jsx(Text, {
+				if (typeof value === "string" || typeof value === "number" || typeof value === "boolean" || typeof value === "bigint") return /* @__PURE__ */ jsx(Text, {
 					size: TextSize.BODY_SM,
 					children: String(value)
 				});
@@ -434,217 +158,282 @@ function InfiniteTable(props) {
 			size: col.size,
 			minSize: col.minSize,
 			maxSize: col.maxSize,
-			enableSorting: col.enableSorting ?? false,
+			enableSorting: col.enableSorting ?? enableSorting,
 			sortDescFirst: col.sortDescFirst,
 			meta: {
 				pin: col.pin,
 				align: col.align,
-				cellLoading: col.cellLoading
+				cellLoading: col.cellLoading,
+				isCompact: col.id === "__expand__" || col.id === "__select__",
+				isResizable: canResizeColumn(col),
+				label: typeof col.header === "string" ? col.header : col.id
 			}
-		})), [resolvedColumns]),
-		getRowId: getRowId ? (row, index) => getRowId(row, index) : void 0,
+		})), [
+			resolvedColumns,
+			enableSorting,
+			canResizeColumn
+		]),
+		getRowId,
 		getCoreRowModel: getCoreRowModel(),
 		getSortedRowModel: enableSorting && !manualSorting ? getSortedRowModel() : void 0,
+		getExpandedRowModel: hasExpansion ? getExpandedRowModel() : void 0,
+		getRowCanExpand: hasExpansion ? (row) => getRowCanExpand?.(row) ?? true : () => false,
 		state: {
-			...sorting !== void 0 && { sorting },
-			...rowSelection !== void 0 && { rowSelection }
+			rowSelection: selection.rowSelection,
+			expanded: expansion.expanded,
+			columnSizing: resize.columnSizing,
+			...sorting !== void 0 && { sorting }
 		},
+		onRowSelectionChange: selection.onRowSelectionChange,
+		onExpandedChange: expansion.onExpandedChange,
+		onColumnSizingChange: resize.onColumnSizingChange,
 		...onSortingChange !== void 0 && { onSortingChange },
-		...onRowSelectionChange !== void 0 && { onRowSelectionChange },
-		enableRowSelection,
+		enableRowSelection: resolvedEnableRowSelection,
 		enableMultiRowSelection,
 		enableSorting,
 		enableMultiSort,
 		manualSorting
 	});
-	useEffect(() => {
-		onTableReady?.(table);
-	}, [table, onTableReady]);
 	const { rows } = table.getRowModel();
 	useEffect(() => {
-		if (!onRowExpand && expandedRowId !== null) setExpandedRowId(null);
-	}, [expandedRowId, onRowExpand]);
+		rowsRef.current = rows;
+	});
+	const onTableReadyRef = useRef(onTableReady);
 	useEffect(() => {
-		if (expandedRowId === null) return;
-		if (!rows.some((row) => row.id === expandedRowId)) setExpandedRowId(null);
-	}, [expandedRowId, rows]);
-	useLayoutEffect(() => {
-		const container = scrollContainerRef.current;
-		if (!container) return;
-		const measure = () => {
-			setScrollContainerClientWidth((currentWidth) => currentWidth === container.clientWidth ? currentWidth : container.clientWidth);
-		};
-		measure();
-		if (typeof ResizeObserver === "undefined") {
-			window.addEventListener("resize", measure);
-			return () => window.removeEventListener("resize", measure);
-		}
-		const resizeObserver = new ResizeObserver(measure);
-		resizeObserver.observe(container);
-		return () => resizeObserver.disconnect();
-	}, []);
+		onTableReadyRef.current = onTableReady;
+	});
 	useEffect(() => {
-		const container = scrollContainerRef.current;
-		if (!container || !fetchNextPage) return;
-		const onScroll = () => {
-			const { scrollHeight, scrollTop, clientHeight } = container;
-			if (scrollHeight - scrollTop - clientHeight < 500 && hasNextPage && !isFetchingNextPage) fetchNextPage();
-		};
-		container.addEventListener("scroll", onScroll);
-		return () => container.removeEventListener("scroll", onScroll);
+		onTableReadyRef.current?.(table);
+	}, [table]);
+	const selectedRowIds = selection.rowSelection;
+	const hasSelectedRowsListener = onSelectedRowsChange !== void 0;
+	useEffect(() => {
+		if (!hasSelectedRowsListener) return;
+		notifySelectedRows(rowsRef.current.filter((row) => row.getIsSelected()));
 	}, [
-		hasNextPage,
-		isFetchingNextPage,
-		fetchNextPage
+		selectedRowIds,
+		hasSelectedRowsListener,
+		notifySelectedRows
 	]);
+	const { pruneMissingRowIds } = expansion;
+	const rowIds = useMemo(() => rows.map((row) => row.id), [rows]);
 	useEffect(() => {
-		const container = scrollContainerRef.current;
-		if (!container) return;
-		let pendingScroll = {
-			deltaX: 0,
-			deltaY: 0
-		};
-		let rafId = null;
-		const applyScroll = () => {
-			if (pendingScroll.deltaY !== 0 || pendingScroll.deltaX !== 0) {
-				container.scrollTop += pendingScroll.deltaY;
-				container.scrollLeft += pendingScroll.deltaX;
-				pendingScroll = {
-					deltaX: 0,
-					deltaY: 0
-				};
-			}
-			rafId = null;
-		};
-		const queueWheelScroll = (deltaX, deltaY) => {
-			if (isFetchingNextPage && deltaY > 0) {
-				if (container.scrollHeight - container.scrollTop - container.clientHeight < 200) return false;
-			}
-			const canScrollY = deltaY > 0 && container.scrollTop < container.scrollHeight - container.clientHeight || deltaY < 0 && container.scrollTop > 0;
-			const canScrollX = deltaX > 0 && container.scrollLeft < container.scrollWidth - container.clientWidth || deltaX < 0 && container.scrollLeft > 0;
-			if (canScrollY || canScrollX) {
-				pendingScroll.deltaY += deltaY;
-				pendingScroll.deltaX += deltaX;
-				if (rafId === null) rafId = requestAnimationFrame(applyScroll);
-				return true;
+		pruneMissingRowIds(rowIds);
+	}, [rowIds, pruneMissingRowIds]);
+	const sentinelRef = useInfiniteScrollSentinel({
+		scrollRef: scrollContainerRef,
+		hasNextPage,
+		isFetchingNextPage,
+		fetchNextPage,
+		rowCount: rows.length
+	});
+	const isRowInteractive = Boolean(onRowClick || onRowActivate || showSelectionColumn);
+	const resolvedEnableRowFocus = enableRowFocus ?? isRowInteractive;
+	const keyboard = useTableKeyboardNavigation({
+		bodyRef,
+		rowCount: rows.length,
+		enabled: resolvedEnableRowFocus,
+		onActivate: (rowIndex, event) => {
+			const row = rowsRef.current[rowIndex];
+			if (!row) return;
+			if (onRowActivate) {
+				onRowActivate(row, event);
+				return;
 			}
-			return false;
-		};
-		const onWheel = (e) => {
-			queueWheelScroll(e.deltaX, e.deltaY);
-		};
-		container.addEventListener("wheel", onWheel, { passive: true });
-		return () => {
-			container.removeEventListener("wheel", onWheel);
-			if (rafId !== null) cancelAnimationFrame(rafId);
-		};
-	}, [isFetchingNextPage]);
-	const renderLoadingRows = () => {
-		return Array.from({ length: loadingRowCount }).map((_, rowIndex) => /* @__PURE__ */ jsx(LoadingRowWrapper, {
-			$density: density,
-			$variant: variant,
-			children: resolvedColumns.map((col) => /* @__PURE__ */ jsx(TableDataCell, {
-				$width: col.size,
-				$minWidth: col.minSize,
-				$maxWidth: col.maxSize,
-				$pin: col.pin,
-				$pinnedOffset: pinnedOffsets.get(col.id),
-				$align: col.align,
-				$density: density,
-				$variant: variant,
-				children: col.cellLoading ? col.cellLoading() : null
-			}, col.id))
-		}, `loading-${rowIndex}`));
-	};
-	const isEmpty = data.length === 0 && !isLoading;
-	const showLoading = isLoading && data.length === 0;
-	const showError = isError && data.length === 0;
-	return /* @__PURE__ */ jsxs(TableOuterContainer, {
+			onRowClick?.(row, event);
+		},
+		onToggleSelect: (rowIndex) => {
+			const row = rowsRef.current[rowIndex];
+			if (!row || !isSelectable) return;
+			toggleRowSelection(row, false);
+		}
+	});
+	const columnCount = resolvedColumns.length;
+	const headerRowCount = noHeader ? 0 : 1;
+	const renderCellsForColumn = useCallback((col) => ({
+		$width: getColumnWidth(col),
+		$minWidth: col.minSize,
+		$maxWidth: col.maxSize,
+		$pin: col.pin,
+		$pinnedOffset: pinnedOffsets.get(col.id),
+		$align: col.align,
+		$density: density,
+		$variant: variant,
+		$isCompact: col.id === "__expand__" || col.id === "__select__"
+	}), [
+		getColumnWidth,
+		pinnedOffsets,
+		density,
+		variant
+	]);
+	const renderLoadingRows = () => Array.from({ length: loadingRowCount }).map((_, rowIndex) => /* @__PURE__ */ jsx(TableLoadingRow, {
+		$density: density,
+		$variant: variant,
+		role: "row",
+		"aria-hidden": "true",
+		children: resolvedColumns.map((col) => /* @__PURE__ */ jsx(TableDataCell, {
+			...renderCellsForColumn(col),
+			role: "cell",
+			children: col.cellLoading ? col.cellLoading() : null
+		}, col.id))
+	}, `loading-${rowIndex}`));
+	const showLoading = isLoading && rows.length === 0;
+	const showError = isError && rows.length === 0;
+	const showEmpty = rows.length === 0 && !isLoading && !isError && Boolean(contentWhenEmpty);
+	const statusAvailableHeight = viewportHeight !== void 0 ? Math.max(0, viewportHeight - (headerHeight ?? 0)) : void 0;
+	return /* @__PURE__ */ jsx(TableOuterContainer, {
 		$width: width,
 		$height: height,
 		$fillWidth: fillWidth,
 		$fillHeight: fillHeight,
-		children: [/* @__PURE__ */ jsx(TableScrollContainer, {
+		children: /* @__PURE__ */ jsxs(TableScrollContainer, {
 			ref: scrollContainerRef,
 			$noLastRowPadding: noLastRowPadding,
-			children: /* @__PURE__ */ jsxs(StyledTable, { children: [!noHeader && /* @__PURE__ */ jsx(TableHead, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableHeaderRow, { children: headerGroup.headers.map((header) => {
-				const columnMeta = header.column.columnDef.meta;
-				const canSort = header.column.getCanSort();
-				return /* @__PURE__ */ jsx(TableHeaderCell, {
-					$width: header.column.columnDef.size,
-					$minWidth: header.column.columnDef.minSize,
-					$maxWidth: header.column.columnDef.maxSize,
-					$pin: columnMeta?.pin,
-					$pinnedOffset: pinnedOffsets.get(header.column.id),
-					$align: columnMeta?.align,
-					$isSortable: canSort,
-					$density: density,
-					$variant: variant,
-					$isExpandCell: header.column.id === EXPAND_COLUMN_ID,
-					onClick: canSort ? header.column.getToggleSortingHandler() : void 0,
-					children: /* @__PURE__ */ jsxs(HeaderContentWrapper, { children: [flexRender(header.column.columnDef.header, header.getContext()), canSort && /* @__PURE__ */ jsx(SortIconWrapper, { children: header.column.getIsSorted() === "asc" ? /* @__PURE__ */ jsx(Icon, {
-						component: SortAscendingIcon,
-						size: 12,
-						variant: IconVariant.TERTIARY
-					}) : header.column.getIsSorted() === "desc" ? /* @__PURE__ */ jsx(Icon, {
-						component: SortDescendingIcon,
-						size: 12,
-						variant: IconVariant.TERTIARY
-					}) : /* @__PURE__ */ jsx(Icon, {
-						component: CaretUpDownIcon,
-						size: 12,
-						variant: IconVariant.TERTIARY
-					}) })] })
-				}, header.id);
-			}) }, headerGroup.id)) }), /* @__PURE__ */ jsxs(TableBody, { children: [showLoading ? renderLoadingRows() : showError ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
-				colSpan: resolvedColumns.length,
-				children: typeof contentWhenError === "function" ? contentWhenError() : contentWhenError ?? /* @__PURE__ */ jsx(Text, {
-					variant: TextVariant.ERROR,
-					children: "Error loading data"
-				})
-			}) }) : rows.map((row, index) => {
-				const isSelected = row.getIsSelected();
-				const isExpanded = onRowExpand !== void 0 && row.id === expandedRowId;
-				const isLastRow = index === rows.length - 1;
-				return /* @__PURE__ */ jsxs(React.Fragment, { children: [/* @__PURE__ */ jsx(TableRow, {
-					$isClickable: !!onRowClick,
-					$isSelected: isSelected,
-					$density: density,
-					$variant: variant,
-					$isExpanded: isExpanded,
-					$isLastRow: noLastRowBorder && isLastRow && !isExpanded,
-					onClick: onRowClick ? (e) => onRowClick(row, e) : void 0,
-					onDoubleClick: onRowDoubleClick ? (e) => onRowDoubleClick(row, e) : void 0,
-					children: row.getVisibleCells().map((cell) => {
-						const columnMeta = cell.column.columnDef.meta;
-						return /* @__PURE__ */ jsx(TableDataCell, {
-							$width: cell.column.columnDef.size,
-							$minWidth: cell.column.columnDef.minSize,
-							$maxWidth: cell.column.columnDef.maxSize,
-							$pin: columnMeta?.pin,
-							$pinnedOffset: pinnedOffsets.get(cell.column.id),
-							$align: columnMeta?.align,
-							$density: density,
-							$variant: variant,
-							$isExpandCell: cell.column.id === EXPAND_COLUMN_ID,
-							children: flexRender(cell.column.columnDef.cell, cell.getContext())
-						}, cell.id);
-					})
-				}), isExpanded && onRowExpand && /* @__PURE__ */ jsx(ExpandedRow, {
-					$minWidth: totalColumnMinWidth,
-					children: /* @__PURE__ */ jsx(ExpandedRowCell, {
-						colSpan: resolvedColumns.length,
-						$variant: variant,
-						$isLastRow: noLastRowBorder && isLastRow,
-						children: /* @__PURE__ */ jsxs(ExpandedViewport, {
-							$width: scrollContainerClientWidth ?? void 0,
-							children: [/* @__PURE__ */ jsx(ExpandedGutter, { $variant: variant }), /* @__PURE__ */ jsx(ExpandedBody, { children: /* @__PURE__ */ jsx(ExpandedContent, { children: onRowExpand(row) }) })]
+			children: [/* @__PURE__ */ jsxs(StyledTable, {
+				$rowMinWidth: rowMinWidth,
+				role: isRowInteractive ? "grid" : "table",
+				"aria-label": ariaLabel,
+				"aria-labelledby": ariaLabelledBy,
+				"aria-rowcount": rows.length + headerRowCount,
+				"aria-colcount": columnCount,
+				"aria-multiselectable": isSelectable && enableMultiRowSelection && isRowInteractive ? true : void 0,
+				children: [!noHeader && /* @__PURE__ */ jsx(TableHead, {
+					ref: headerRef,
+					role: "rowgroup",
+					children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableHeaderRow, {
+						role: "row",
+						"aria-rowindex": 1,
+						children: headerGroup.headers.map((header, columnIndex) => {
+							const meta = header.column.columnDef.meta;
+							const canSort = header.column.getCanSort();
+							const sortDirection = header.column.getIsSorted();
+							const toggleSorting = header.column.getToggleSortingHandler();
+							const headerTemplate = header.column.columnDef.header;
+							const headerContent = typeof headerTemplate === "function" ? headerTemplate(header.getContext()) : headerTemplate;
+							return /* @__PURE__ */ jsx(TableHeaderCell, {
+								$width: getColumnWidth(resolvedColumns[columnIndex]),
+								$minWidth: header.column.columnDef.minSize,
+								$maxWidth: header.column.columnDef.maxSize,
+								$pin: meta?.pin,
+								$pinnedOffset: pinnedOffsets.get(header.column.id),
+								$align: meta?.align,
+								$isSortable: canSort,
+								$density: density,
+								$variant: variant,
+								$isCompact: meta?.isCompact,
+								role: "columnheader",
+								scope: "col",
+								"aria-colindex": columnIndex + 1,
+								"aria-label": resolvedColumns[columnIndex]?.headerAriaLabel,
+								"aria-sort": canSort ? sortDirection === "asc" ? "ascending" : sortDirection === "desc" ? "descending" : "none" : void 0,
+								tabIndex: canSort ? 0 : void 0,
+								onClick: canSort ? toggleSorting : void 0,
+								onKeyDown: canSort ? (event) => {
+									if (event.key !== "Enter" && event.key !== " ") return;
+									event.preventDefault();
+									toggleSorting?.(event);
+								} : void 0,
+								children: /* @__PURE__ */ jsx(TableHeaderCellContent, {
+									content: headerContent,
+									isSortable: canSort,
+									sortDirection,
+									resize: meta?.isResizable ? {
+										columnId: header.column.id,
+										columnLabel: meta.label ?? header.column.id,
+										isResizing: resize.resizingColumnId === header.column.id,
+										bounds: resize.getColumnResizeBounds(header.column.id),
+										onResizeStart: resize.startResize,
+										onResizeKeyDown: resize.resizeByKeyboard
+									} : void 0
+								})
+							}, header.id);
 						})
-					})
-				})] }, row.id);
-			}), isFetchingNextPage && renderLoadingRows()] })] })
-		}), isEmpty && contentWhenEmpty && /* @__PURE__ */ jsx(EmptyContentWrapper, { children: contentWhenEmpty })]
+					}, headerGroup.id))
+				}), /* @__PURE__ */ jsxs(TableBody, {
+					ref: bodyRef,
+					role: "rowgroup",
+					children: [
+						showLoading && renderLoadingRows(),
+						showError && /* @__PURE__ */ jsx(TableStatusRow, {
+							colSpan: columnCount,
+							viewportWidth,
+							availableHeight: statusAvailableHeight,
+							role: "alert",
+							children: typeof contentWhenError === "function" ? contentWhenError(error) : contentWhenError ?? /* @__PURE__ */ jsx(Text, {
+								variant: TextVariant.ERROR,
+								children: error?.message ?? "Error loading data"
+							})
+						}),
+						showEmpty && /* @__PURE__ */ jsx(TableStatusRow, {
+							colSpan: columnCount,
+							viewportWidth,
+							availableHeight: statusAvailableHeight,
+							role: "status",
+							children: contentWhenEmpty
+						}),
+						!showLoading && !showError && rows.map((row, index) => {
+							const isSelected = row.getIsSelected();
+							const isExpanded = hasExpansion && row.getIsExpanded();
+							const isLastRow = index === rows.length - 1;
+							const expandedPanelId = `${instanceId}-expanded-${row.id}`;
+							return /* @__PURE__ */ jsxs(React.Fragment, { children: [/* @__PURE__ */ jsx(TableRow, {
+								$isClickable: Boolean(onRowClick || onRowActivate),
+								$isSelected: isSelected,
+								$density: density,
+								$variant: variant,
+								$isExpanded: isExpanded,
+								$isLastRow: noLastRowBorder && isLastRow && !isExpanded,
+								role: "row",
+								"aria-rowindex": index + 1 + headerRowCount,
+								"aria-selected": isSelectable ? isSelected : void 0,
+								"aria-expanded": row.getCanExpand() ? isExpanded : void 0,
+								"aria-label": getRowAriaLabel?.(row),
+								tabIndex: keyboard.getRowTabIndex(index),
+								onFocus: resolvedEnableRowFocus ? () => keyboard.onRowFocus(index) : void 0,
+								onKeyDown: resolvedEnableRowFocus ? (event) => keyboard.onRowKeyDown(index, event) : void 0,
+								onClick: onRowClick || onRowActivate ? (event) => {
+									onRowClick?.(row, event);
+									onRowActivate?.(row, event);
+								} : void 0,
+								onDoubleClick: onRowDoubleClick ? (event) => onRowDoubleClick(row, event) : void 0,
+								["data-row-index"]: index,
+								children: row.getVisibleCells().map((cell, columnIndex) => {
+									const meta = cell.column.columnDef.meta;
+									return /* @__PURE__ */ jsx(TableDataCell, {
+										$width: getColumnWidth(resolvedColumns[columnIndex]),
+										$minWidth: cell.column.columnDef.minSize,
+										$maxWidth: cell.column.columnDef.maxSize,
+										$pin: meta?.pin,
+										$pinnedOffset: pinnedOffsets.get(cell.column.id),
+										$align: meta?.align,
+										$density: density,
+										$variant: variant,
+										$isCompact: meta?.isCompact,
+										role: isRowInteractive ? "gridcell" : "cell",
+										"aria-colindex": columnIndex + 1,
+										children: flexRender(cell.column.columnDef.cell, cell.getContext())
+									}, cell.id);
+								})
+							}), isExpanded && onRowExpand && /* @__PURE__ */ jsx(TableExpandedRow, {
+								panelId: expandedPanelId,
+								variant,
+								colSpan: columnCount,
+								rowMinWidth,
+								viewportWidth,
+								gutterWidth: hasExpandColumn ? 44 : 0,
+								isLastRow: noLastRowBorder && isLastRow,
+								children: onRowExpand(row)
+							})] }, row.id);
+						}),
+						isFetchingNextPage && renderLoadingRows()
+					]
+				})]
+			}), /* @__PURE__ */ jsx(InfiniteScrollSentinel, {
+				ref: sentinelRef,
+				"aria-hidden": "true"
+			})]
+		})
 	});
 }
 //#endregion
-export { ColumnAlign, ColumnPin, TableDensity, TableVariant, InfiniteTable as default, estimateColumnWidth };
+export { ColumnAlign, ColumnPin, ColumnResizeMode, TableDensity, TableVariant, InfiniteTable as default, estimateColumnWidth };