@galaxy-io/dls 1.2.6 → 1.3.0

package/dist/table/VirtualizedInfiniteTable.js

@@ -1,267 +1,66 @@
-import { withTheme } from "../theme/GalaxyTheme.js";
-import { getCssSizeValue } from "../utils/linaria.js";
-import Text, { TextSize, TextVariant, TextWeight } from "../text/Text.js";
-import { ColumnAlign, ColumnPin, TableDensity } from "./InfiniteTable.js";
-/* empty css                                   */
-import { styled } from "@linaria/react";
-import { match } from "ts-pattern";
-import React, { useEffect, useMemo, useRef } from "react";
+import Text, { TextVariant } from "../text/Text.js";
+import { ColumnAlign, ColumnPin, ColumnResizeMode, TableDensity, TableVariant } from "./types.js";
+import { createVirtualRow, getDensityRowHeightPx } from "./utils.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 React, { useCallback, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useVirtualizer } from "@tanstack/react-virtual";
 //#region src/table/VirtualizedInfiniteTable.tsx
-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: "t1y8ggf1",
-	propsAsIs: false,
-	vars: {
-		"t1y8ggf1-0": [_exp()],
-		"t1y8ggf1-1": [_exp2()]
-	}
-}));
-var _exp3 = () => ({ $noLastRowPadding }) => $noLastRowPadding ? "0" : "8px";
-var TableScrollContainer = /*#__PURE__*/ styled("div")({
-	name: "TableScrollContainer",
-	class: "t1c28u93",
-	propsAsIs: false,
-	vars: { "t1c28u93-0": [_exp3()] }
-});
-var StyledTable = /*#__PURE__*/ styled("table")({
-	name: "StyledTable",
-	class: "st2i0og",
-	propsAsIs: false
-});
-var TableHead = /*#__PURE__*/ styled("thead")({
-	name: "TableHead",
-	class: "t1w1rmks",
-	propsAsIs: false
-});
-var _exp4 = () => ({ $virtualHeight }) => `${$virtualHeight}px`;
-var TableBody = /*#__PURE__*/ styled("tbody")({
-	name: "TableBody",
-	class: "trwv5lb",
-	propsAsIs: false,
-	vars: { "trwv5lb-0": [_exp4()] }
-});
-var _exp5 = () => ({ $translateY }) => $translateY !== void 0 ? "absolute" : "static";
-var _exp6 = () => ({ $translateY }) => $translateY !== void 0 ? `translateY(${$translateY}px)` : "none";
-var _exp7 = () => ({ $rowHeight }) => $rowHeight !== void 0 ? `${$rowHeight}px` : "auto";
-var _exp8 = () => ({ $isLastRow, theme }) => $isLastRow ? "none" : `0.5px solid ${theme.color.border.primary}`;
-var _exp0 = () => ({ theme }) => theme.color.background.primary;
-var TableRow = withTheme(/*#__PURE__*/ styled("tr")({
-	name: "TableRow",
-	class: "tokkvsw",
-	propsAsIs: false,
-	vars: {
-		"tokkvsw-0": [_exp5()],
-		"tokkvsw-1": [_exp6()],
-		"tokkvsw-2": [_exp7()],
-		"tokkvsw-3": [_exp8()],
-		"tokkvsw-4": [_exp0()]
-	}
-}));
-var TableHeaderRow = withTheme(/*#__PURE__*/ styled("tr")({
-	name: "TableHeaderRow",
-	class: "t88dj0a",
-	propsAsIs: false
-}));
-var _exp1 = () => ({ $width }) => {
-	if ($width) return `0 0 ${$width}px`;
-	return "1 1 0";
-};
-var _exp10 = () => ({ $minWidth }) => {
-	if ($minWidth) return `${$minWidth}px`;
-	return "0";
-};
-var _exp11 = () => ({ $maxWidth }) => {
-	if ($maxWidth) return `${$maxWidth}px`;
-	return "none";
-};
-var _exp12 = () => ({ $align }) => match($align).with(ColumnAlign.LEFT, () => "left").with(ColumnAlign.CENTER, () => "center").with(ColumnAlign.RIGHT, () => "right").with(void 0, () => "left").exhaustive();
-var _exp13 = () => ({ theme }) => theme.color.border.primary;
-var _exp14 = () => ({ theme }) => theme.color.background.primary;
-var _exp15 = () => ({ $align }) => match($align).with(ColumnAlign.LEFT, () => "flex-start").with(ColumnAlign.CENTER, () => "center").with(ColumnAlign.RIGHT, () => "flex-end").with(void 0, () => "flex-start").exhaustive();
-var _exp16 = () => ({ $pin }) => {
-	if ($pin) return 25;
-	return 20;
-};
-var _exp17 = () => ({ $pin, $pinnedOffset }) => {
-	if ($pin === ColumnPin.LEFT && $pinnedOffset !== void 0) return `${$pinnedOffset}px`;
-	return "auto";
-};
-var _exp18 = () => ({ $pin, $pinnedOffset }) => {
-	if ($pin === ColumnPin.RIGHT && $pinnedOffset !== void 0) return `${$pinnedOffset}px`;
-	return "auto";
-};
-var _exp19 = () => ({ $pin, theme }) => {
-	if ($pin === ColumnPin.LEFT) return `0.5px solid ${theme.color.border.primary}`;
-	return "none";
-};
-var _exp20 = () => ({ $pin, theme }) => {
-	if ($pin === ColumnPin.RIGHT) return `0.5px solid ${theme.color.border.primary}`;
-	return "none";
-};
-var TableHeaderCell = withTheme(/*#__PURE__*/ styled("th")({
-	name: "TableHeaderCell",
-	class: "t1yes6uf",
-	propsAsIs: false,
-	vars: {
-		"t1yes6uf-0": [_exp1()],
-		"t1yes6uf-1": [_exp10()],
-		"t1yes6uf-2": [_exp11()],
-		"t1yes6uf-3": [_exp12()],
-		"t1yes6uf-4": [_exp13()],
-		"t1yes6uf-5": [_exp14()],
-		"t1yes6uf-6": [_exp15()],
-		"t1yes6uf-7": [_exp16()],
-		"t1yes6uf-8": [_exp17()],
-		"t1yes6uf-9": [_exp18()],
-		"t1yes6uf-10": [_exp19()],
-		"t1yes6uf-11": [_exp20()]
-	}
-}));
-var _exp21 = () => ({ theme }) => theme.color.text.primary;
-var _exp22 = () => ({ $width }) => {
-	if ($width) return `0 0 ${$width}px`;
-	return "1 1 0";
-};
-var _exp23 = () => ({ $minWidth }) => {
-	if ($minWidth) return `${$minWidth}px`;
-	return "0";
-};
-var _exp24 = () => ({ $maxWidth }) => {
-	if ($maxWidth) return `${$maxWidth}px`;
-	return "none";
-};
-var _exp25 = () => ({ $align }) => match($align).with(ColumnAlign.LEFT, () => "left").with(ColumnAlign.CENTER, () => "center").with(ColumnAlign.RIGHT, () => "right").with(void 0, () => "left").exhaustive();
-var _exp26 = () => ({ $align }) => match($align).with(ColumnAlign.LEFT, () => "flex-start").with(ColumnAlign.CENTER, () => "center").with(ColumnAlign.RIGHT, () => "flex-end").with(void 0, () => "flex-start").exhaustive();
-var _exp27 = () => ({ $pin, theme }) => {
-	if ($pin) return theme.color.background.primary;
-	return "transparent";
-};
-var _exp28 = () => ({ $pin }) => {
-	if ($pin) return "sticky";
-	return "static";
-};
-var _exp29 = () => ({ $pin }) => {
-	if ($pin) return 5;
-	return "auto";
-};
-var _exp30 = () => ({ $pin, $pinnedOffset }) => {
-	if ($pin === ColumnPin.LEFT && $pinnedOffset !== void 0) return `${$pinnedOffset}px`;
-	return "auto";
-};
-var _exp31 = () => ({ $pin, $pinnedOffset }) => {
-	if ($pin === ColumnPin.RIGHT && $pinnedOffset !== void 0) return `${$pinnedOffset}px`;
-	return "auto";
-};
-var _exp32 = () => ({ $pin, theme }) => {
-	if ($pin === ColumnPin.LEFT) return `0.5px solid ${theme.color.border.primary}`;
-	return "none";
-};
-var _exp33 = () => ({ $pin, theme }) => {
-	if ($pin === ColumnPin.RIGHT) return `0.5px solid ${theme.color.border.primary}`;
-	return "none";
-};
-var TableDataCell = withTheme(/*#__PURE__*/ styled("td")({
-	name: "TableDataCell",
-	class: "ttzb9kx",
-	propsAsIs: false,
-	vars: {
-		"ttzb9kx-0": [_exp21()],
-		"ttzb9kx-1": [_exp22()],
-		"ttzb9kx-2": [_exp23()],
-		"ttzb9kx-3": [_exp24()],
-		"ttzb9kx-4": [_exp25()],
-		"ttzb9kx-5": [_exp26()],
-		"ttzb9kx-6": [_exp27()],
-		"ttzb9kx-7": [_exp28()],
-		"ttzb9kx-8": [_exp29()],
-		"ttzb9kx-9": [_exp30()],
-		"ttzb9kx-10": [_exp31()],
-		"ttzb9kx-11": [_exp32()],
-		"ttzb9kx-12": [_exp33()]
-	}
-}));
-var HeaderContentWrapper = /*#__PURE__*/ styled("div")({
-	name: "HeaderContentWrapper",
-	class: "hu950cn",
-	propsAsIs: false
-});
-var EmptyContentWrapper = /*#__PURE__*/ styled("div")({
-	name: "EmptyContentWrapper",
-	class: "ey3ss0i",
-	propsAsIs: false
-});
-var _exp34 = () => ({ theme }) => theme.color.border.primary;
-var _exp35 = () => ({ theme }) => theme.color.background.primary;
-var LoadingRowWrapper = withTheme(/*#__PURE__*/ styled("tr")({
-	name: "LoadingRowWrapper",
-	class: "l1wwts9q",
-	propsAsIs: false,
-	vars: {
-		"l1wwts9q-0": [_exp34()],
-		"l1wwts9q-1": [_exp35()]
-	}
-}));
-function VirtualizedRowInner({ rowData, rowIndex, translateY, rowHeight, density, isLastRow, columns, pinnedOffsets }) {
+function VirtualizedRowInner({ rowData, rowIndex, translateY, rowHeight, density, variant, isLastRow, isClickable, columns, getColumnWidth, pinnedOffsets, onClick }) {
 	return /* @__PURE__ */ jsx(TableRow, {
 		$density: density,
+		$variant: variant,
 		$isLastRow: isLastRow,
+		$isClickable: isClickable,
 		$translateY: translateY,
 		$rowHeight: rowHeight,
-		children: columns.map((col) => /* @__PURE__ */ jsx(TableDataCell, {
-			$width: col.size,
+		role: "row",
+		"aria-rowindex": rowIndex + 2,
+		onClick: onClick ? (event) => onClick(rowIndex, event) : void 0,
+		children: columns.map((col, columnIndex) => /* @__PURE__ */ jsx(TableDataCell, {
+			$width: getColumnWidth(col),
 			$minWidth: col.minSize,
 			$maxWidth: col.maxSize,
 			$pin: col.pin,
 			$pinnedOffset: pinnedOffsets.get(col.id),
 			$align: col.align,
 			$density: density,
+			$variant: variant,
+			role: "cell",
+			"aria-colindex": columnIndex + 1,
 			children: rowData && col.cell ? col.cell({
-				value: void 0,
-				row: {
-					original: rowData,
-					index: rowIndex
-				}
+				value: col.accessorFn?.(rowData),
+				row: createVirtualRow(rowData, rowIndex)
 			}) : null
 		}, col.id))
 	});
 }
-var VirtualizedRow = React.memo(VirtualizedRowInner, (prev, next) => {
-	return prev.rowData === next.rowData && prev.translateY === next.translateY && prev.isLastRow === next.isLastRow && prev.columns === next.columns;
-});
+var VirtualizedRow = React.memo(VirtualizedRowInner);
 function VirtualizedInfiniteTable(props) {
-	const { columns, totalRowCount, getRowData, getRowId, height, width, fillWidth, fillHeight, density = TableDensity.MEDIUM, estimateRowHeight, overscan = 25, hasNextPage, isFetchingNextPage, fetchNextPage, isLoading = false, isError = false, loadingRowCount = 5, contentWhenEmpty, contentWhenError, noLastRowBorder = false, noLastRowPadding = false } = props;
+	const { columns, totalRowCount, getRowData, getRowId, height, width, fillWidth, fillHeight, density = TableDensity.MEDIUM, variant = TableVariant.PRIMARY, estimateRowHeight, overscan = 25, hasNextPage, isFetchingNextPage, fetchNextPage, isLoading = false, isError = false, error, loadingRowCount = 5, contentWhenEmpty, contentWhenError, noHeader = false, noLastRowBorder = false, noLastRowPadding = false, enableColumnResizing = false, columnSizing, defaultColumnSizing, onColumnSizingChange, columnResizeMode = ColumnResizeMode.ON_CHANGE, ariaLabel, ariaLabelledBy, onRowClick } = props;
 	const scrollContainerRef = useRef(null);
-	const pinnedOffsets = useMemo(() => {
-		const offsets = /* @__PURE__ */ new Map();
-		let leftOffset = 0;
-		let rightOffset = 0;
-		columns.forEach((col) => {
-			if (col.pin === ColumnPin.LEFT) {
-				offsets.set(col.id, leftOffset);
-				leftOffset += col.size ?? 150;
-			}
-		});
-		[...columns].reverse().forEach((col) => {
-			if (col.pin === ColumnPin.RIGHT) {
-				offsets.set(col.id, rightOffset);
-				rightOffset += col.size ?? 150;
-			}
-		});
-		return offsets;
-	}, [columns]);
-	const rowHeight = estimateRowHeight ?? match(density).with(TableDensity.SMALL, () => 32).with(TableDensity.MEDIUM, () => 48).with(TableDensity.LARGE, () => 56).exhaustive();
+	const headerRef = useRef(null);
+	const { width: viewportWidth, height: viewportHeight } = useElementClientSize(scrollContainerRef);
+	const { height: headerHeight } = useElementClientSize(headerRef);
+	const resize = useTableColumnResize({
+		columns,
+		enabled: enableColumnResizing,
+		columnSizing,
+		defaultColumnSizing,
+		onColumnSizingChange,
+		mode: columnResizeMode
+	});
+	const { getColumnWidth, pinnedOffsets, rowMinWidth } = useTableColumnLayout({
+		columns,
+		columnSizing: resize.columnSizing
+	});
+	const rowHeight = estimateRowHeight ?? getDensityRowHeightPx(density);
 	const virtualizer = useVirtualizer({
 		count: totalRowCount,
 		getScrollElement: () => scrollContainerRef.current,
@@ -269,91 +68,157 @@ function VirtualizedInfiniteTable(props) {
 		overscan
 	});
 	const virtualRows = virtualizer.getVirtualItems();
-	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, { passive: true });
-		return () => container.removeEventListener("scroll", onScroll);
-	}, [
+	const sentinelRef = useInfiniteScrollSentinel({
+		scrollRef: scrollContainerRef,
 		hasNextPage,
 		isFetchingNextPage,
-		fetchNextPage
-	]);
-	useEffect(() => {
-		const container = scrollContainerRef.current;
-		if (!container) return;
-		const onWheel = (e) => {
-			container.scrollTop += e.deltaY;
-			container.scrollLeft += e.deltaX;
-		};
-		container.addEventListener("wheel", onWheel, { passive: true });
-		return () => container.removeEventListener("wheel", onWheel);
-	}, []);
-	const renderLoadingRows = () => {
-		return Array.from({ length: loadingRowCount }).map((_, rowIndex) => /* @__PURE__ */ jsx(LoadingRowWrapper, { children: columns.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,
-			children: col.cellLoading ? col.cellLoading() : null
-		}, col.id)) }, `loading-${rowIndex}`));
-	};
-	const isEmpty = totalRowCount === 0 && !isLoading;
+		fetchNextPage,
+		rowCount: totalRowCount
+	});
+	const handleRowClick = useCallback((rowIndex, event) => {
+		const rowData = getRowData(rowIndex);
+		if (!rowData || !onRowClick) return;
+		onRowClick(createVirtualRow(rowData, rowIndex), event);
+	}, [getRowData, onRowClick]);
+	const renderLoadingCells = () => columns.map((col) => /* @__PURE__ */ jsx(TableDataCell, {
+		$width: getColumnWidth(col),
+		$minWidth: col.minSize,
+		$maxWidth: col.maxSize,
+		$pin: col.pin,
+		$pinnedOffset: pinnedOffsets.get(col.id),
+		$align: col.align,
+		$density: density,
+		$variant: variant,
+		role: "cell",
+		children: col.cellLoading ? col.cellLoading() : null
+	}, col.id));
+	/** Loading rows for the initial load: normal flow, no virtual offset. */
+	const renderLoadingRows = () => Array.from({ length: loadingRowCount }).map((_, rowIndex) => /* @__PURE__ */ jsx(TableLoadingRow, {
+		$density: density,
+		$variant: variant,
+		role: "row",
+		"aria-hidden": "true",
+		children: renderLoadingCells()
+	}, `loading-${rowIndex}`));
+	/**
+	* Loading rows appended while paging. The body is absolutely positioned once
+	* virtualization is active, so these have to be offset past the last row
+	* rather than left in normal flow.
+	*/
+	const renderTrailingLoadingRows = (startOffset) => Array.from({ length: loadingRowCount }).map((_, rowIndex) => /* @__PURE__ */ jsx(TableRow, {
+		$density: density,
+		$variant: variant,
+		$translateY: startOffset + rowIndex * rowHeight,
+		$rowHeight: rowHeight,
+		role: "row",
+		"aria-hidden": "true",
+		children: renderLoadingCells()
+	}, `loading-more-${rowIndex}`));
 	const showLoading = isLoading && totalRowCount === 0;
 	const showError = isError && totalRowCount === 0;
-	return /* @__PURE__ */ jsxs(TableOuterContainer, {
+	const showEmpty = totalRowCount === 0 && !isLoading && !isError && Boolean(contentWhenEmpty);
+	const showRows = !showLoading && !showError && !showEmpty;
+	const statusAvailableHeight = viewportHeight !== void 0 ? Math.max(0, viewportHeight - (headerHeight ?? 0)) : void 0;
+	const virtualTotalSize = virtualizer.getTotalSize();
+	const trailingLoadingHeight = isFetchingNextPage ? loadingRowCount * rowHeight : 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: [/* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsx(TableHeaderRow, { children: columns.map((col) => /* @__PURE__ */ jsx(TableHeaderCell, {
-				$width: col.size,
-				$minWidth: col.minSize,
-				$maxWidth: col.maxSize,
-				$pin: col.pin,
-				$pinnedOffset: pinnedOffsets.get(col.id),
-				$align: col.align,
-				children: /* @__PURE__ */ jsx(HeaderContentWrapper, { children: typeof col.header === "function" ? col.header({ table: null }) : /* @__PURE__ */ jsx(Text, {
-					variant: TextVariant.TERTIARY,
-					weight: TextWeight.MEDIUM,
-					size: TextSize.BODY_SM,
-					children: col.header ?? col.id
-				}) })
-			}, col.id)) }) }), /* @__PURE__ */ jsxs(TableBody, {
-				$virtualHeight: virtualizer.getTotalSize(),
-				children: [showLoading ? renderLoadingRows() : showError ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
-					colSpan: columns.length,
-					children: typeof contentWhenError === "function" ? contentWhenError() : contentWhenError ?? /* @__PURE__ */ jsx(Text, {
-						variant: TextVariant.ERROR,
-						children: "Error loading data"
+			children: [/* @__PURE__ */ jsxs(StyledTable, {
+				$rowMinWidth: rowMinWidth,
+				role: "table",
+				"aria-label": ariaLabel,
+				"aria-labelledby": ariaLabelledBy,
+				"aria-rowcount": totalRowCount + (noHeader ? 0 : 1),
+				"aria-colcount": columns.length,
+				children: [!noHeader && /* @__PURE__ */ jsx(TableHead, {
+					ref: headerRef,
+					role: "rowgroup",
+					children: /* @__PURE__ */ jsx(TableHeaderRow, {
+						role: "row",
+						"aria-rowindex": 1,
+						children: columns.map((col, columnIndex) => /* @__PURE__ */ jsx(TableHeaderCell, {
+							$width: getColumnWidth(col),
+							$minWidth: col.minSize,
+							$maxWidth: col.maxSize,
+							$pin: col.pin,
+							$pinnedOffset: pinnedOffsets.get(col.id),
+							$align: col.align,
+							$density: density,
+							$variant: variant,
+							role: "columnheader",
+							scope: "col",
+							"aria-colindex": columnIndex + 1,
+							"aria-label": col.headerAriaLabel,
+							children: /* @__PURE__ */ jsx(TableHeaderCellContent, {
+								content: typeof col.header === "function" ? col.header({ table: null }) : col.header ?? col.id,
+								isSortable: false,
+								sortDirection: false,
+								resize: resize.canResizeColumn(col) ? {
+									columnId: col.id,
+									columnLabel: typeof col.header === "string" ? col.header : col.id,
+									isResizing: resize.resizingColumnId === col.id,
+									bounds: resize.getColumnResizeBounds(col.id),
+									onResizeStart: resize.startResize,
+									onResizeKeyDown: resize.resizeByKeyboard
+								} : void 0
+							})
+						}, col.id))
 					})
-				}) }) : virtualRows.map((virtualRow) => {
-					const rowData = getRowData(virtualRow.index);
-					const rowId = rowData && getRowId ? getRowId(rowData, virtualRow.index) : String(virtualRow.index);
-					return /* @__PURE__ */ jsx(VirtualizedRow, {
-						rowData,
-						rowIndex: virtualRow.index,
-						translateY: virtualRow.start,
-						rowHeight,
-						density,
-						isLastRow: noLastRowBorder && virtualRow.index === totalRowCount - 1,
-						columns,
-						pinnedOffsets
-					}, rowId);
-				}), isFetchingNextPage && renderLoadingRows()]
-			})] })
-		}), isEmpty && contentWhenEmpty && /* @__PURE__ */ jsx(EmptyContentWrapper, { children: contentWhenEmpty })]
+				}), /* @__PURE__ */ jsxs(TableBody, {
+					role: "rowgroup",
+					$virtualHeight: showRows ? virtualTotalSize + trailingLoadingHeight : void 0,
+					children: [
+						showLoading && renderLoadingRows(),
+						showError && /* @__PURE__ */ jsx(TableStatusRow, {
+							colSpan: columns.length,
+							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: columns.length,
+							viewportWidth,
+							availableHeight: statusAvailableHeight,
+							role: "status",
+							children: contentWhenEmpty
+						}),
+						showRows && virtualRows.map((virtualRow) => {
+							const rowData = getRowData(virtualRow.index);
+							const rowId = rowData && getRowId ? getRowId(rowData, virtualRow.index) : String(virtualRow.index);
+							return /* @__PURE__ */ jsx(VirtualizedRow, {
+								rowData,
+								rowIndex: virtualRow.index,
+								translateY: virtualRow.start,
+								rowHeight,
+								density,
+								variant,
+								isLastRow: noLastRowBorder && virtualRow.index === totalRowCount - 1,
+								isClickable: Boolean(onRowClick),
+								columns,
+								getColumnWidth,
+								pinnedOffsets,
+								onClick: onRowClick ? handleRowClick : void 0
+							}, rowId);
+						}),
+						isFetchingNextPage && (showRows ? renderTrailingLoadingRows(virtualTotalSize) : null)
+					]
+				})]
+			}), /* @__PURE__ */ jsx(InfiniteScrollSentinel, {
+				ref: sentinelRef,
+				"aria-hidden": "true"
+			})]
+		})
 	});
 }
 //#endregion
-export { ColumnAlign, ColumnPin, TableDensity, VirtualizedInfiniteTable as default };
+export { ColumnAlign, ColumnPin, ColumnResizeMode, TableDensity, TableVariant, VirtualizedInfiniteTable as default };