@optimum-intelligence/opti-ui 0.7.2 → 0.7.3

package/dist/components/data-table/DataTableContent.js

@@ -4,6 +4,7 @@ import { Skeleton } from "../skeleton/Skeleton.js";
 import { Button } from "../button/Button.js";
 import { Checkbox } from "../choice/Choice.js";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../table/Table.js";
+import { useMediaQuery } from "../../utils/media.js";
 import { useDataTableContext } from "./context.js";
 import { EmptyState } from "../empty-state/EmptyState.js";
 import { DataTableRow, SizerRow, isTextEditor } from "./DataTableRow.js";
@@ -19,262 +20,241 @@ var ROW_ESTIMATE = {
 };
 /** The table itself, with its loading, empty and error states. */
 function DataTableContent(t0) {
-	const $ = c(158);
-	const { density: t1, striped, stickyHeader, layout: t2, maxHeight, virtualized: t3, onEndReached, empty, tableProps } = t0;
+	const $ = c(94);
+	const { density: t1, striped, stickyHeader, layout: t2, maxHeight, virtualized: t3, onEndReached, stickyFirstColumn: t4, empty, tableProps } = t0;
 	const density = t1 === void 0 ? "normal" : t1;
 	const layout = t2 === void 0 ? "stable" : t2;
 	const virtualized = t3 === void 0 ? false : t3;
+	const stickyFirstColumn = t4 === void 0 ? false : t4;
 	const table = useDataTableContext();
-	const { labels: text, visibleColumns: columns, loading, error } = table;
+	const { labels: text, loading, error } = table;
+	const columns = useMediaQuery("(max-width: 640px)") ? table.visibleColumns.filter(_temp) : table.visibleColumns;
 	const [anchor, setAnchor] = React.useState(null);
 	const reported = React.useRef(-1);
 	const virtual = virtualized !== false;
-	let t4;
+	let t5;
 	if ($[0] !== virtualized) {
-		t4 = typeof virtualized === "object" ? virtualized : {};
+		t5 = typeof virtualized === "object" ? virtualized : {};
 		$[0] = virtualized;
-		$[1] = t4;
-	} else t4 = $[1];
-	const { rowHeight, overscan: t5 } = t4;
-	const overscan = t5 === void 0 ? 8 : t5;
+		$[1] = t5;
+	} else t5 = $[1];
+	const { rowHeight, overscan: t6 } = t5;
+	const overscan = t6 === void 0 ? 8 : t6;
 	const height = maxHeight ?? (virtual ? "32rem" : void 0);
 	const scrolls = height !== void 0;
 	const stable = layout === "stable" || virtual;
 	const hasActions = Boolean(table.rowActions) || table.editable || table.deletable;
 	const placeholders = table.pending ? Math.min(table.paginated ? table.pageSize : 5, 10) : 0;
 	const noMatch = table.mode === "server" ? table.filtered : table.totalCount > 0;
-	let t6;
-	if ($[2] !== columns) {
-		t6 = columns.find(isTextEditor)?.id;
-		$[2] = columns;
-		$[3] = t6;
-	} else t6 = $[3];
-	const focused = t6;
+	const focused = columns.find(isTextEditor)?.id;
 	let t7;
-	if ($[4] !== error || $[5] !== table.pageRows) {
+	if ($[2] !== error || $[3] !== table.pageRows) {
 		t7 = error ? [] : table.pageRows;
-		$[4] = error;
-		$[5] = table.pageRows;
-		$[6] = t7;
-	} else t7 = $[6];
+		$[2] = error;
+		$[3] = table.pageRows;
+		$[4] = t7;
+	} else t7 = $[4];
 	const shown = t7;
 	const span = columns.length + Number(table.selectable) + Number(hasActions);
-	let t8;
-	if ($[7] !== columns || $[8] !== density || $[9] !== hasActions || $[10] !== table.selectable) {
-		t8 = [
-			density,
-			table.selectable,
-			hasActions,
-			...columns.map(_temp)
-		];
-		$[7] = columns;
-		$[8] = density;
-		$[9] = hasActions;
-		$[10] = table.selectable;
-		$[11] = t8;
-	} else t8 = $[11];
-	const columnKey = t8.join("|");
+	const columnKey = [
+		density,
+		table.selectable,
+		hasActions,
+		...columns.map(_temp2)
+	].join("|");
 	const { lock, measuring } = useColumnLock(anchor, stable, columnKey, shown.length > 0);
-	const t9 = ROW_ESTIMATE[density];
-	const t10 = typeof maxHeight === "number" ? maxHeight : 512;
-	let t11;
-	if ($[12] !== density || $[13] !== overscan || $[14] !== rowHeight || $[15] !== shown.length || $[16] !== t10 || $[17] !== t9 || $[18] !== virtual) {
-		t11 = {
+	const t8 = ROW_ESTIMATE[density];
+	const t9 = typeof maxHeight === "number" ? maxHeight : 512;
+	let t10;
+	if ($[5] !== density || $[6] !== overscan || $[7] !== rowHeight || $[8] !== shown.length || $[9] !== t8 || $[10] !== t9 || $[11] !== virtual) {
+		t10 = {
 			enabled: virtual,
 			count: shown.length,
 			rowHeight,
 			overscan,
-			estimate: t9,
-			viewport: t10,
+			estimate: t8,
+			viewport: t9,
 			key: density
 		};
-		$[12] = density;
-		$[13] = overscan;
-		$[14] = rowHeight;
-		$[15] = shown.length;
-		$[16] = t10;
-		$[17] = t9;
-		$[18] = virtual;
-		$[19] = t11;
-	} else t11 = $[19];
-	const rows = useVirtualRows(anchor, t11);
-	let t12;
-	if ($[20] !== rows.end || $[21] !== rows.start || $[22] !== shown || $[23] !== virtual) {
-		t12 = virtual ? shown.slice(rows.start, rows.end) : shown;
-		$[20] = rows.end;
-		$[21] = rows.start;
-		$[22] = shown;
-		$[23] = virtual;
-		$[24] = t12;
-	} else t12 = $[24];
-	const rendered = t12;
+		$[5] = density;
+		$[6] = overscan;
+		$[7] = rowHeight;
+		$[8] = shown.length;
+		$[9] = t8;
+		$[10] = t9;
+		$[11] = virtual;
+		$[12] = t10;
+	} else t10 = $[12];
+	const rows = useVirtualRows(anchor, t10);
+	let t11;
+	if ($[13] !== rows.end || $[14] !== rows.start || $[15] !== shown || $[16] !== virtual) {
+		t11 = virtual ? shown.slice(rows.start, rows.end) : shown;
+		$[13] = rows.end;
+		$[14] = rows.start;
+		$[15] = shown;
+		$[16] = virtual;
+		$[17] = t11;
+	} else t11 = $[17];
+	const rendered = t11;
 	const sizers = measuring && table.allRows.length > rendered.length ? pickSizerRows(table.allRows, columns) : [];
 	const holdsPage = stable && table.paginated && !scrolls;
 	const pageHeight = usePageHeight(anchor, holdsPage, shown.length === table.pageSize, `${density}|${table.pageSize}`);
 	const shortPage = table.page > 1 && shown.length > 0 && shown.length < table.pageSize;
-	let t13;
-	if ($[25] !== density || $[26] !== loading || $[27] !== onEndReached || $[28] !== scrolls || $[29] !== shown.length) {
-		t13 = (wrapper) => {
+	let t12;
+	if ($[18] !== density || $[19] !== loading || $[20] !== onEndReached || $[21] !== scrolls || $[22] !== shown.length) {
+		t12 = (wrapper) => {
 			if (!onEndReached || !scrolls || loading || !shown.length || reported.current === shown.length) return;
 			if (wrapper.scrollHeight - wrapper.scrollTop - wrapper.clientHeight > 4 * ROW_ESTIMATE[density]) return;
 			reported.current = shown.length;
 			onEndReached();
 		};
-		$[25] = density;
-		$[26] = loading;
-		$[27] = onEndReached;
-		$[28] = scrolls;
-		$[29] = shown.length;
-		$[30] = t13;
-	} else t13 = $[30];
-	const reportEnd = t13;
-	const t14 = table.page;
-	const t15 = table.search;
-	const t16 = table.sort?.id;
-	const t17 = table.sort?.direction;
+		$[18] = density;
+		$[19] = loading;
+		$[20] = onEndReached;
+		$[21] = scrolls;
+		$[22] = shown.length;
+		$[23] = t12;
+	} else t12 = $[23];
+	const reportEnd = t12;
+	const t13 = table.page;
+	const t14 = table.search;
+	const t15 = table.sort?.id;
+	const t16 = table.sort?.direction;
+	let t17;
+	if ($[24] !== table.filterValues) {
+		t17 = JSON.stringify(table.filterValues);
+		$[24] = table.filterValues;
+		$[25] = t17;
+	} else t17 = $[25];
 	let t18;
-	if ($[31] !== table.filterValues) {
-		t18 = JSON.stringify(table.filterValues);
-		$[31] = table.filterValues;
-		$[32] = t18;
-	} else t18 = $[32];
-	let t19;
-	if ($[33] !== t16 || $[34] !== t17 || $[35] !== t18 || $[36] !== table.page || $[37] !== table.search) {
-		t19 = [
+	if ($[26] !== t15 || $[27] !== t16 || $[28] !== t17 || $[29] !== table.page || $[30] !== table.search) {
+		t18 = [
+			t13,
 			t14,
 			t15,
 			t16,
-			t17,
-			t18
+			t17
 		];
-		$[33] = t16;
-		$[34] = t17;
-		$[35] = t18;
-		$[36] = table.page;
-		$[37] = table.search;
-		$[38] = t19;
-	} else t19 = $[38];
-	const view = t19.join("|");
-	let t20;
-	if ($[39] !== anchor || $[40] !== scrolls) {
-		t20 = () => {
+		$[26] = t15;
+		$[27] = t16;
+		$[28] = t17;
+		$[29] = table.page;
+		$[30] = table.search;
+		$[31] = t18;
+	} else t18 = $[31];
+	const view = t18.join("|");
+	let t19;
+	if ($[32] !== anchor || $[33] !== scrolls) {
+		t19 = () => {
 			if (scrolls) anchor?.closest("table")?.parentElement?.scrollTo({ top: 0 });
 		};
-		$[39] = anchor;
-		$[40] = scrolls;
-		$[41] = t20;
-	} else t20 = $[41];
-	let t21;
-	if ($[42] !== anchor || $[43] !== scrolls || $[44] !== view) {
-		t21 = [
+		$[32] = anchor;
+		$[33] = scrolls;
+		$[34] = t19;
+	} else t19 = $[34];
+	let t20;
+	if ($[35] !== anchor || $[36] !== scrolls || $[37] !== view) {
+		t20 = [
 			anchor,
 			scrolls,
 			view
 		];
-		$[42] = anchor;
-		$[43] = scrolls;
-		$[44] = view;
-		$[45] = t21;
-	} else t21 = $[45];
-	React.useEffect(t20, t21);
-	let t22;
-	if ($[46] !== anchor || $[47] !== reportEnd) {
-		t22 = () => {
+		$[35] = anchor;
+		$[36] = scrolls;
+		$[37] = view;
+		$[38] = t20;
+	} else t20 = $[38];
+	React.useEffect(t19, t20);
+	let t21;
+	if ($[39] !== anchor || $[40] !== reportEnd) {
+		t21 = () => {
 			const wrapper_0 = anchor?.closest("table")?.parentElement;
 			if (wrapper_0) reportEnd(wrapper_0);
 		};
-		$[46] = anchor;
-		$[47] = reportEnd;
-		$[48] = t22;
-	} else t22 = $[48];
-	React.useEffect(t22);
-	const T0 = Table;
-	const t23 = stickyHeader ?? scrolls;
-	const t24 = loading || void 0;
-	const t25 = virtual ? shown.length + 1 : void 0;
-	const t26 = stable ? "stable" : void 0;
-	const t27 = lock ? "" : void 0;
-	const t28 = virtual ? "" : void 0;
-	let t29;
-	if ($[49] !== lock || $[50] !== tableProps?.style) {
-		t29 = lock ? {
+		$[39] = anchor;
+		$[40] = reportEnd;
+		$[41] = t21;
+	} else t21 = $[41];
+	React.useEffect(t21);
+	let t22;
+	if ($[42] !== lock || $[43] !== tableProps?.style) {
+		t22 = lock ? {
 			width: lock.table,
 			minWidth: "100%",
 			...tableProps?.style
 		} : tableProps?.style;
-		$[49] = lock;
-		$[50] = tableProps?.style;
-		$[51] = t29;
-	} else t29 = $[51];
-	const t30 = tableProps?.wrapperProps;
-	const t31 = scrolls && "oui-data-table__scroll";
-	const t32 = tableProps?.wrapperProps?.className;
-	let t33;
-	if ($[52] !== t31 || $[53] !== t32) {
-		t33 = cx(t31, t32);
-		$[52] = t31;
-		$[53] = t32;
-		$[54] = t33;
-	} else t33 = $[54];
-	const t34 = holdsPage && shortPage ? pageHeight : void 0;
-	const t35 = tableProps?.wrapperProps?.style;
-	let t36;
-	if ($[55] !== height || $[56] !== t34 || $[57] !== t35) {
-		t36 = {
+		$[42] = lock;
+		$[43] = tableProps?.style;
+		$[44] = t22;
+	} else t22 = $[44];
+	const t23 = tableProps?.wrapperProps;
+	const t24 = scrolls && "oui-data-table__scroll";
+	const t25 = tableProps?.wrapperProps?.className;
+	let t26;
+	if ($[45] !== t24 || $[46] !== t25) {
+		t26 = cx(t24, t25);
+		$[45] = t24;
+		$[46] = t25;
+		$[47] = t26;
+	} else t26 = $[47];
+	const t27 = holdsPage && shortPage ? pageHeight : void 0;
+	const t28 = tableProps?.wrapperProps?.style;
+	let t29;
+	if ($[48] !== height || $[49] !== t27 || $[50] !== t28) {
+		t29 = {
 			maxHeight: height,
-			minHeight: t34,
-			...t35
+			minHeight: t27,
+			...t28
 		};
-		$[55] = height;
-		$[56] = t34;
-		$[57] = t35;
-		$[58] = t36;
-	} else t36 = $[58];
-	let t37;
-	if ($[59] !== reportEnd || $[60] !== rows || $[61] !== tableProps?.wrapperProps) {
-		t37 = (event) => {
+		$[48] = height;
+		$[49] = t27;
+		$[50] = t28;
+		$[51] = t29;
+	} else t29 = $[51];
+	let t30;
+	if ($[52] !== reportEnd || $[53] !== rows || $[54] !== tableProps?.wrapperProps) {
+		t30 = (event) => {
 			tableProps?.wrapperProps?.onScroll?.(event);
 			rows.onScroll(event);
 			reportEnd(event.currentTarget);
 		};
-		$[59] = reportEnd;
-		$[60] = rows;
-		$[61] = tableProps?.wrapperProps;
-		$[62] = t37;
-	} else t37 = $[62];
-	let t38;
-	if ($[63] !== t30 || $[64] !== t33 || $[65] !== t36 || $[66] !== t37) {
-		t38 = {
-			...t30,
-			className: t33,
-			style: t36,
-			onScroll: t37
+		$[52] = reportEnd;
+		$[53] = rows;
+		$[54] = tableProps?.wrapperProps;
+		$[55] = t30;
+	} else t30 = $[55];
+	let t31;
+	if ($[56] !== t23 || $[57] !== t26 || $[58] !== t29 || $[59] !== t30) {
+		t31 = {
+			...t23,
+			className: t26,
+			style: t29,
+			onScroll: t30
 		};
-		$[63] = t30;
-		$[64] = t33;
-		$[65] = t36;
-		$[66] = t37;
-		$[67] = t38;
-	} else t38 = $[67];
-	let t39;
-	if ($[68] !== lock?.widths) {
-		t39 = lock?.widths.map(_temp2);
-		$[68] = lock?.widths;
-		$[69] = t39;
-	} else t39 = $[69];
-	let t40;
-	if ($[70] !== t39) {
-		t40 = /* @__PURE__ */ jsx("colgroup", {
+		$[56] = t23;
+		$[57] = t26;
+		$[58] = t29;
+		$[59] = t30;
+		$[60] = t31;
+	} else t31 = $[60];
+	let t32;
+	if ($[61] !== lock?.widths) {
+		t32 = lock?.widths.map(_temp3);
+		$[61] = lock?.widths;
+		$[62] = t32;
+	} else t32 = $[62];
+	let t33;
+	if ($[63] !== t32) {
+		t33 = /* @__PURE__ */ jsx("colgroup", {
 			ref: setAnchor,
-			children: t39
+			children: t32
 		});
-		$[70] = t39;
-		$[71] = t40;
-	} else t40 = $[71];
-	const t41 = virtual ? 1 : void 0;
-	let t42;
-	if ($[72] !== table || $[73] !== text) {
-		t42 = table.selectable && /* @__PURE__ */ jsx(TableHead, {
+		$[63] = t32;
+		$[64] = t33;
+	} else t33 = $[64];
+	let t34;
+	if ($[65] !== table || $[66] !== text) {
+		t34 = table.selectable && /* @__PURE__ */ jsx(TableHead, {
 			className: "oui-data-table__check",
 			children: /* @__PURE__ */ jsx(Checkbox, {
 				size: "sm",
@@ -285,66 +265,43 @@ function DataTableContent(t0) {
 				onCheckedChange: (checked) => table.toggleAll(checked)
 			})
 		});
-		$[72] = table;
-		$[73] = text;
-		$[74] = t42;
-	} else t42 = $[74];
-	let t43;
-	if ($[75] !== columns || $[76] !== lock || $[77] !== table) {
-		let t44;
-		if ($[79] !== lock || $[80] !== table) {
-			t44 = (column) => /* @__PURE__ */ jsx(TableHead, {
-				align: column.align ?? (column.numeric ? "end" : "start"),
-				style: !lock && (column.width !== void 0 || column.minWidth !== void 0) ? {
-					width: column.width,
-					minWidth: column.minWidth
-				} : void 0,
-				sort: table.isSortable(column) ? table.sort?.id === column.id ? table.sort.direction : false : void 0,
-				onSort: () => table.toggleSort(column.id),
-				children: column.header
-			}, column.id);
-			$[79] = lock;
-			$[80] = table;
-			$[81] = t44;
-		} else t44 = $[81];
-		t43 = columns.map(t44);
-		$[75] = columns;
-		$[76] = lock;
-		$[77] = table;
-		$[78] = t43;
-	} else t43 = $[78];
-	let t44;
-	if ($[82] !== hasActions || $[83] !== text) {
-		t44 = hasActions && /* @__PURE__ */ jsx(TableHead, {
+		$[65] = table;
+		$[66] = text;
+		$[67] = t34;
+	} else t34 = $[67];
+	let t35;
+	if ($[68] !== lock || $[69] !== table) {
+		t35 = (column_0) => /* @__PURE__ */ jsx(TableHead, {
+			align: column_0.align ?? (column_0.numeric ? "end" : "start"),
+			style: !lock && (column_0.width !== void 0 || column_0.minWidth !== void 0) ? {
+				width: column_0.width,
+				minWidth: column_0.minWidth
+			} : void 0,
+			"data-nowrap": column_0.nowrap || void 0,
+			sort: table.isSortable(column_0) ? table.sort?.id === column_0.id ? table.sort.direction : false : void 0,
+			onSort: () => table.toggleSort(column_0.id),
+			children: column_0.header
+		}, column_0.id);
+		$[68] = lock;
+		$[69] = table;
+		$[70] = t35;
+	} else t35 = $[70];
+	let t36;
+	if ($[71] !== hasActions || $[72] !== text) {
+		t36 = hasActions && /* @__PURE__ */ jsx(TableHead, {
 			className: "oui-data-table__row-actions",
 			children: /* @__PURE__ */ jsx("span", {
 				className: "oui-visually-hidden",
 				children: text.actions
 			})
 		});
-		$[82] = hasActions;
-		$[83] = text;
-		$[84] = t44;
-	} else t44 = $[84];
-	let t45;
-	if ($[85] !== t41 || $[86] !== t42 || $[87] !== t43 || $[88] !== t44) {
-		t45 = /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, {
-			"aria-rowindex": t41,
-			children: [
-				t42,
-				t43,
-				t44
-			]
-		}) });
-		$[85] = t41;
-		$[86] = t42;
-		$[87] = t43;
-		$[88] = t44;
-		$[89] = t45;
-	} else t45 = $[89];
-	let t46;
-	if ($[90] !== rows.before || $[91] !== span) {
-		t46 = rows.before > 0 && /* @__PURE__ */ jsx("tbody", {
+		$[71] = hasActions;
+		$[72] = text;
+		$[73] = t36;
+	} else t36 = $[73];
+	let t37;
+	if ($[74] !== rows.before || $[75] !== span) {
+		t37 = rows.before > 0 && /* @__PURE__ */ jsx("tbody", {
 			className: "oui-data-table__spacer",
 			"aria-hidden": true,
 			children: /* @__PURE__ */ jsx("tr", {
@@ -352,84 +309,44 @@ function DataTableContent(t0) {
 				children: /* @__PURE__ */ jsx("td", { colSpan: span })
 			})
 		});
-		$[90] = rows.before;
-		$[91] = span;
-		$[92] = t46;
-	} else t46 = $[92];
-	let t47;
-	if ($[93] !== columns || $[94] !== hasActions || $[95] !== placeholders || $[96] !== table.selectable) {
-		let t48;
-		if ($[98] !== columns || $[99] !== hasActions || $[100] !== table.selectable) {
-			t48 = (_, index_0) => /* @__PURE__ */ jsxs(TableRow, {
-				"aria-hidden": true,
-				children: [
-					table.selectable && /* @__PURE__ */ jsx(TableCell, { className: "oui-data-table__check" }),
-					columns.map((column_0, position) => /* @__PURE__ */ jsx(TableCell, {
-						align: column_0.align,
-						numeric: column_0.numeric,
-						children: /* @__PURE__ */ jsx(Skeleton, {
-							className: "oui-data-table__skeleton",
-							width: `${45 + (index_0 * 3 + position * 5) % 7 * 8}%`
-						})
-					}, column_0.id)),
-					hasActions && /* @__PURE__ */ jsx(TableCell, { className: "oui-data-table__row-actions" })
-				]
-			}, index_0);
-			$[98] = columns;
-			$[99] = hasActions;
-			$[100] = table.selectable;
-			$[101] = t48;
-		} else t48 = $[101];
-		t47 = Array.from({ length: placeholders }, t48);
-		$[93] = columns;
-		$[94] = hasActions;
-		$[95] = placeholders;
-		$[96] = table.selectable;
-		$[97] = t47;
-	} else t47 = $[97];
-	let t48;
-	if ($[102] !== columns || $[103] !== focused || $[104] !== hasActions || $[105] !== rendered || $[106] !== rows.rowHeight || $[107] !== rows.start || $[108] !== table || $[109] !== virtual) {
-		let t49;
-		if ($[111] !== columns || $[112] !== focused || $[113] !== hasActions || $[114] !== rows.rowHeight || $[115] !== rows.start || $[116] !== table || $[117] !== virtual) {
-			t49 = (entry, index_1) => /* @__PURE__ */ jsx(DataTableRow, {
-				table,
-				entry,
-				columns,
-				hasActions,
-				focused,
-				index: virtual ? rows.start + index_1 : void 0,
-				height: rows.rowHeight
-			}, entry.id);
-			$[111] = columns;
-			$[112] = focused;
-			$[113] = hasActions;
-			$[114] = rows.rowHeight;
-			$[115] = rows.start;
-			$[116] = table;
-			$[117] = virtual;
-			$[118] = t49;
-		} else t49 = $[118];
-		t48 = rendered.map(t49);
-		$[102] = columns;
-		$[103] = focused;
-		$[104] = hasActions;
-		$[105] = rendered;
-		$[106] = rows.rowHeight;
-		$[107] = rows.start;
-		$[108] = table;
-		$[109] = virtual;
-		$[110] = t48;
-	} else t48 = $[110];
-	let t49;
-	if ($[119] !== t47 || $[120] !== t48) {
-		t49 = /* @__PURE__ */ jsxs(TableBody, { children: [t47, t48] });
-		$[119] = t47;
-		$[120] = t48;
-		$[121] = t49;
-	} else t49 = $[121];
-	let t50;
-	if ($[122] !== rows.after || $[123] !== span) {
-		t50 = rows.after > 0 && /* @__PURE__ */ jsx("tbody", {
+		$[74] = rows.before;
+		$[75] = span;
+		$[76] = t37;
+	} else t37 = $[76];
+	const t38 = Array.from({ length: placeholders }, (_, index_0) => /* @__PURE__ */ jsxs(TableRow, {
+		"aria-hidden": true,
+		children: [
+			table.selectable && /* @__PURE__ */ jsx(TableCell, { className: "oui-data-table__check" }),
+			columns.map((column_1, position) => /* @__PURE__ */ jsx(TableCell, {
+				align: column_1.align,
+				numeric: column_1.numeric,
+				children: /* @__PURE__ */ jsx(Skeleton, {
+					className: "oui-data-table__skeleton",
+					width: `${45 + (index_0 * 3 + position * 5) % 7 * 8}%`
+				})
+			}, column_1.id)),
+			hasActions && /* @__PURE__ */ jsx(TableCell, { className: "oui-data-table__row-actions" })
+		]
+	}, index_0));
+	const t39 = rendered.map((entry, index_1) => /* @__PURE__ */ jsx(DataTableRow, {
+		table,
+		entry,
+		columns,
+		hasActions,
+		focused,
+		index: virtual ? rows.start + index_1 : void 0,
+		height: rows.rowHeight
+	}, entry.id));
+	let t40;
+	if ($[77] !== t38 || $[78] !== t39) {
+		t40 = /* @__PURE__ */ jsxs(TableBody, { children: [t38, t39] });
+		$[77] = t38;
+		$[78] = t39;
+		$[79] = t40;
+	} else t40 = $[79];
+	let t41;
+	if ($[80] !== rows.after || $[81] !== span) {
+		t41 = rows.after > 0 && /* @__PURE__ */ jsx("tbody", {
 			className: "oui-data-table__spacer",
 			"aria-hidden": true,
 			children: /* @__PURE__ */ jsx("tr", {
@@ -437,67 +354,13 @@ function DataTableContent(t0) {
 				children: /* @__PURE__ */ jsx("td", { colSpan: span })
 			})
 		});
-		$[122] = rows.after;
-		$[123] = span;
-		$[124] = t50;
-	} else t50 = $[124];
-	const t51 = sizers.length > 0 && /* @__PURE__ */ jsx("tbody", {
-		className: "oui-data-table__sizer",
-		"aria-hidden": true,
-		inert: true,
-		children: sizers.map((entry_0) => /* @__PURE__ */ jsx(SizerRow, {
-			table,
-			entry: entry_0,
-			columns,
-			hasActions
-		}, entry_0.id))
-	});
-	let t52;
-	if ($[125] !== T0 || $[126] !== density || $[127] !== striped || $[128] !== t23 || $[129] !== t24 || $[130] !== t25 || $[131] !== t26 || $[132] !== t27 || $[133] !== t28 || $[134] !== t29 || $[135] !== t38 || $[136] !== t40 || $[137] !== t45 || $[138] !== t46 || $[139] !== t49 || $[140] !== t50 || $[141] !== t51 || $[142] !== tableProps) {
-		t52 = /* @__PURE__ */ jsxs(T0, {
-			density,
-			striped,
-			stickyHeader: t23,
-			"aria-busy": t24,
-			"aria-rowcount": t25,
-			...tableProps,
-			"data-layout": t26,
-			"data-locked": t27,
-			"data-virtualized": t28,
-			style: t29,
-			wrapperProps: t38,
-			children: [
-				t40,
-				t45,
-				t46,
-				t49,
-				t50,
-				t51
-			]
-		});
-		$[125] = T0;
-		$[126] = density;
-		$[127] = striped;
-		$[128] = t23;
-		$[129] = t24;
-		$[130] = t25;
-		$[131] = t26;
-		$[132] = t27;
-		$[133] = t28;
-		$[134] = t29;
-		$[135] = t38;
-		$[136] = t40;
-		$[137] = t45;
-		$[138] = t46;
-		$[139] = t49;
-		$[140] = t50;
-		$[141] = t51;
-		$[142] = tableProps;
-		$[143] = t52;
-	} else t52 = $[143];
-	let t53;
-	if ($[144] !== empty || $[145] !== error || $[146] !== loading || $[147] !== noMatch || $[148] !== table.activeFilterCount || $[149] !== table.filtered || $[150] !== table.onRetry || $[151] !== table.reset || $[152] !== table.rows || $[153] !== text) {
-		t53 = error ? /* @__PURE__ */ jsx(EmptyState, {
+		$[80] = rows.after;
+		$[81] = span;
+		$[82] = t41;
+	} else t41 = $[82];
+	let t42;
+	if ($[83] !== empty || $[84] !== error || $[85] !== loading || $[86] !== noMatch || $[87] !== table.activeFilterCount || $[88] !== table.filtered || $[89] !== table.onRetry || $[90] !== table.reset || $[91] !== table.rows || $[92] !== text) {
+		t42 = error ? /* @__PURE__ */ jsx(EmptyState, {
 			role: "alert",
 			title: text.errorTitle,
 			description: error,
@@ -517,33 +380,67 @@ function DataTableContent(t0) {
 				children: table.activeFilterCount ? text.clearFilters : text.clearSearch
 			}) : void 0
 		}));
-		$[144] = empty;
-		$[145] = error;
-		$[146] = loading;
-		$[147] = noMatch;
-		$[148] = table.activeFilterCount;
-		$[149] = table.filtered;
-		$[150] = table.onRetry;
-		$[151] = table.reset;
-		$[152] = table.rows;
-		$[153] = text;
-		$[154] = t53;
-	} else t53 = $[154];
-	let t54;
-	if ($[155] !== t52 || $[156] !== t53) {
-		t54 = /* @__PURE__ */ jsxs(Fragment, { children: [t52, t53] });
-		$[155] = t52;
-		$[156] = t53;
-		$[157] = t54;
-	} else t54 = $[157];
-	return t54;
+		$[83] = empty;
+		$[84] = error;
+		$[85] = loading;
+		$[86] = noMatch;
+		$[87] = table.activeFilterCount;
+		$[88] = table.filtered;
+		$[89] = table.onRetry;
+		$[90] = table.reset;
+		$[91] = table.rows;
+		$[92] = text;
+		$[93] = t42;
+	} else t42 = $[93];
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Table, {
+		density,
+		striped,
+		stickyHeader: stickyHeader ?? scrolls,
+		"aria-busy": loading || void 0,
+		"aria-rowcount": virtual ? shown.length + 1 : void 0,
+		...tableProps,
+		"data-layout": stable ? "stable" : void 0,
+		"data-locked": lock ? "" : void 0,
+		"data-virtualized": virtual ? "" : void 0,
+		"data-sticky-column": stickyFirstColumn || void 0,
+		style: t22,
+		wrapperProps: t31,
+		children: [
+			t33,
+			/* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, {
+				"aria-rowindex": virtual ? 1 : void 0,
+				children: [
+					t34,
+					columns.map(t35),
+					t36
+				]
+			}) }),
+			t37,
+			t40,
+			t41,
+			sizers.length > 0 && /* @__PURE__ */ jsx("tbody", {
+				className: "oui-data-table__sizer",
+				"aria-hidden": true,
+				inert: true,
+				children: sizers.map((entry_0) => /* @__PURE__ */ jsx(SizerRow, {
+					table,
+					entry: entry_0,
+					columns,
+					hasActions
+				}, entry_0.id))
+			})
+		]
+	}), t42] });
 }
-function _temp2(width, index) {
+function _temp3(width, index) {
 	return /* @__PURE__ */ jsx("col", { style: { width } }, index);
 }
-function _temp(c) {
+function _temp2(c) {
 	return `${c.id}:${c.width ?? ""}:${c.minWidth ?? ""}`;
 }
+function _temp(column) {
+	return column.priority !== "low";
+}
 //#endregion
 export { DataTableContent };