@zerodep-dev/vue-tsx-pro-ui 0.0.0-stage → 0.1.0

package/dist/table/DataTableView.js

@@ -0,0 +1,963 @@
+import { clamp } from "../utils/data/number.js";
+import { useLang } from "../config/context.js";
+import { mergeAttrs, mergePartProps, mergeProps as mergeProps$1 } from "../utils/props.js";
+import { useRecipe } from "../config/styles.js";
+import { Icon } from "../base/Icon.js";
+import { useDelayedLoading } from "../utils/motion/delayed-loading.js";
+import { VisuallyHidden, visuallyHiddenStyles } from "../base/VisuallyHidden.js";
+import { disclosureStyles } from "../utils/style/transitions.js";
+import { ButtonBase } from "../base/ButtonBase.js";
+import { IconButton } from "../base/IconButton.js";
+import { ScrollArea } from "../layout/ScrollArea.js";
+import { plainText } from "../utils/data/text.js";
+import "../utils/style/shimmer.js";
+import { Skeleton } from "../feedback/Skeleton.js";
+import { Progress } from "../feedback/Progress.js";
+import { columnFilter, columnType, columnValue, headerLayout, isCellEditable, sameStickyOffsets, sortList, stickyOffsets, sumColumn, tableMinWidth } from "./columns.js";
+import { useColumnDisplay } from "./column-display.js";
+import { dataTableRecipe, dataTableStateStyles } from "./table-styles.js";
+import { Empty } from "../feedback/Empty.js";
+import { Checkbox } from "../input/Checkbox.js";
+import { useVirtualizer } from "../utils/virtual/use-virtualizer.js";
+import { gridFocus } from "../utils/dom/roving-focus.js";
+import { Radio, RadioGroupContext } from "../input/Radio.js";
+import { ColumnFilterButton, ColumnMenuButton } from "./ColumnHeaderActions.js";
+import { ColumnResizer } from "./ColumnResizer.js";
+import { Fragment, computed, createVNode, isVNode, mergeProps, ref, shallowRef, useId, watch } from "vue";
+import { _component, effect, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { ArrowDown, ArrowUp, ArrowUpDown, ChevronRight } from "@lucide/icons";
+//#region src/table/DataTableView.tsx
+/**
+* 表格的渲染层：DataTable、TreeDataTable 共用（同 Listbox 与 ListboxView 的分工）。只管画，状态（排序、选择、展开、列宽）由外层决定。
+*
+* - 结构：原生 table（读屏按表格念：第几行第几列、列标题）+ table-layout: fixed + colgroup 定列宽，
+*   外层是 ScrollArea（两个方向滚动，内容超出时视口可聚焦，键盘也能滚）。
+* - 虚拟滚动（useVirtualizer）：只渲染看得见的行，上下各一行占位撑出滚动高度（各列仍在同一张表里对齐）；
+*   行带 aria-rowindex，表格带 aria-rowcount，读屏知道总行数与当前位置。
+* - 分组表头（columnGroups）：相邻的几列上方共用一个标题，表头两行（th scope="colgroup"），没分组的列跨两行。
+* - 吸顶表头、固定列：position: sticky，固定列的偏移按列宽累加（逻辑方向，从右到左排版自动换边）；
+*   固定列的单元格继承行的底色，盖住滚过去的内容。
+* - 排序：可排序的列标题是按钮，th 带 aria-sort（多列排序时只在第一排序列上，其余列的次序写给读屏）；
+*   勾选列用 Checkbox（表头的全选有部分选中状态）。
+* - 表头筛选（列定义的 filter）与列菜单（columnMenu）：列标题结尾的小按钮（ColumnHeaderActions），状态在外层。
+* - 单元格导航（cellNavigation）：表格是 role="grid"，方向键在格之间走（gridFocus），只有一格能 Tab 进入；
+*   可编辑的格按 Enter / F2、双击或直接打字开始编辑，编辑器由外层给（renderEditor），校验错误标在格上（rowErrors）。
+* - 列宽：表头结束边的 ColumnResizer（拖动或 ← / →）调整；固定列偏移与最小宽度的计算在 columns.ts。
+* - 详情行（renderDetail）：多一列展开按钮（aria-expanded、aria-controls），展开的行下面多一行跨全部列的详情，
+*   内容让过勾选列与展开列、和第一个数据列对齐；
+*   详情在虚拟滚动里也算一行（测量真实高度），内容贴着视口的起始边，横向滚动时不跟着滚走。
+* - 加载：没有数据时显示骨架行；已有数据（刷新中）时表头下方显示一条进度条；表格带 aria-busy。没有数据时显示 Empty。
+*/
+/** 要渲染的一行：DataTable 是平铺的行，TreeDataTable 是展开后的树（带层级） */
+/** 行、单元格的部件属性：可以按行（与列）计算 */
+/** DataTableView 的属性；未声明的属性落到 table 上（aria-label 或 aria-labelledby 是表格的名称） */
+/** 一格的位置：行的 key 与列的 key */
+/** DataTable、TreeDataTable 的 handle 拿到的方法 */
+/** 行的色调：整行浅色底 */
+/** 勾选列里的勾选框由表格管理的属性 */
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+/** 勾选列的宽度（px） */
+var SELECT_WIDTH = 44;
+/** 详情列（展开按钮）的宽度（px） */
+var DETAIL_WIDTH = 40;
+/** 详情行的估计高度（px），渲染后以实际高度为准 */
+var DETAIL_HEIGHT = 160;
+/** 加载中至少、至多显示几行骨架：在这之间按表体到窗口底边的高度铺满 */
+var SKELETON_ROWS = {
+	min: 6,
+	max: 50
+};
+/** 各密度下行高的估计（px） */
+var ROW_HEIGHT = {
+	compact: 36,
+	standard: 44,
+	comfortable: 52
+};
+/** DataTable、TreeDataTable 的样式：行的色调（不透明的浅色底，悬停加深） */
+var dataTableRowToneStyles = css.create({
+	info: { backgroundColor: {
+		default: "_infoSoft",
+		":hover": "_infoSoftHover"
+	} },
+	success: { backgroundColor: {
+		default: "_successSoft",
+		":hover": "_successSoftHover"
+	} },
+	warning: { backgroundColor: {
+		default: "_warningSoft",
+		":hover": "_warningSoftHover"
+	} },
+	danger: { backgroundColor: {
+		default: "_dangerSoft",
+		":hover": "_dangerSoftHover"
+	} }
+});
+/** DataTable、TreeDataTable 的样式：width、minWidth、height、start、end、percent */
+var dataTableDynamicStyles = css.create({
+	width: (px) => ({ width: px }),
+	minWidth: (px) => ({ minWidth: px }),
+	height: (px) => ({ height: px }),
+	start: (px) => ({ insetInlineStart: px }),
+	end: (px) => ({ insetInlineEnd: px }),
+	indent: (px) => ({
+		marginInlineStart: px,
+		maxWidth: `calc(100cqi - ${px}px)`
+	}),
+	percent: (value) => ({ width: value })
+});
+/** 固定列单元格的样式：position: sticky 加上按列宽累加的偏移；挨着滚动列的那一列加一条竖线 */
+function stickyCellSx(column, offsets) {
+	if (column.sticky === "start") return [
+		dataTableStateStyles.sticky,
+		dataTableDynamicStyles.start(offsets.start.get(column.key)),
+		offsets.startEdge === column.key && dataTableStateStyles.stickyStartEdge
+	];
+	if (column.sticky === "end") return [
+		dataTableStateStyles.sticky,
+		dataTableDynamicStyles.end(offsets.end.get(column.key)),
+		offsets.endEdge === column.key && dataTableStateStyles.stickyEndEdge
+	];
+	return null;
+}
+/** 勾选列、详情列在有起始边固定列时也固定，偏移是它前面的列宽 */
+function leadingStickySx(sticky, offset) {
+	return sticky && [dataTableStateStyles.sticky, dataTableDynamicStyles.start(offset)];
+}
+/** 分组标题的固定：组里的列都固定在同一侧时跟着固定，偏移取最靠外的一列；含挨着滚动列的那一列时也画竖线 */
+function groupStickySx(columns, offsets) {
+	const side = columns[0]?.sticky;
+	if (!side || columns.some((column) => column.sticky !== side)) return null;
+	const [outer, inner] = side === "start" ? [columns[0], columns.at(-1)] : [columns.at(-1), columns[0]];
+	return side === "start" ? [
+		dataTableStateStyles.sticky,
+		dataTableDynamicStyles.start(offsets.start.get(outer.key)),
+		offsets.startEdge === inner.key && dataTableStateStyles.stickyStartEdge
+	] : [
+		dataTableStateStyles.sticky,
+		dataTableDynamicStyles.end(offsets.end.get(outer.key)),
+		offsets.endEdge === inner.key && dataTableStateStyles.stickyEndEdge
+	];
+}
+/** DataTableRow 的属性：一行要用到的全部数据；除了 row、index、selected，同一张表里各行都相同 */
+/**
+* 表格的一行：单独成组件，props 没变的行在表格重新渲染时直接跳过——
+* 滚动只挂载新进入视口的行，勾选一行只更新这一行（原来每次都重建全部可见行与其中的勾选框）
+*/
+var DataTableRow = /*#__PURE__*/ _component((_props, _ctx) => {
+	const row = readonlyProp(_props, "row");
+	const index = readonlyProp(_props, "index");
+	const selected = readonlyProp(_props, "selected");
+	const partial = readonlyProp(_props, "partial", false);
+	const selectable = readonlyProp(_props, "selectable", true);
+	const tone = readonlyProp(_props, "tone");
+	const active = readonlyProp(_props, "active", false);
+	const onRowClick = readonlyProp(_props, "onRowClick");
+	const selectionMode = readonlyProp(_props, "selectionMode");
+	const columns = readonlyProp(_props, "columns");
+	const density = readonlyProp(_props, "density");
+	const variant = readonlyProp(_props, "variant");
+	const striped = readonlyProp(_props, "striped");
+	const offsets = readonlyProp(_props, "offsets");
+	const headerRows = readonlyProp(_props, "headerRows", 1);
+	const position = readonlyProp(_props, "position", () => index.value);
+	const detailColumn = readonlyProp(_props, "detailColumn", false);
+	const expandable = readonlyProp(_props, "expandable", true);
+	const expanded = readonlyProp(_props, "expanded", false);
+	const detailId = readonlyProp(_props, "detailId");
+	const propsDetailToggleCell = readonlyProp(_props, "propsDetailToggleCell");
+	const propsDetailToggle = readonlyProp(_props, "propsDetailToggle");
+	const onToggleDetail = readonlyProp(_props, "onToggleDetail");
+	const leading = readonlyProp(_props, "leading");
+	const propsRow = readonlyProp(_props, "propsRow");
+	const propsCell = readonlyProp(_props, "propsCell");
+	const propsSelectCell = readonlyProp(_props, "propsSelectCell");
+	const propsSelectCheckbox = readonlyProp(_props, "propsSelectCheckbox");
+	const propsSelectRadio = readonlyProp(_props, "propsSelectRadio");
+	const propsLeading = readonlyProp(_props, "propsLeading");
+	const propsContent = readonlyProp(_props, "propsContent");
+	const measure = readonlyProp(_props, "measure");
+	const onToggle = readonlyProp(_props, "onToggle");
+	const cellNavigation = readonlyProp(_props, "cellNavigation", false);
+	const editingColumn = readonlyProp(_props, "editingColumn");
+	const renderEditor = readonlyProp(_props, "renderEditor");
+	const rowErrors = readonlyProp(_props, "rowErrors");
+	const onEditStart = readonlyProp(_props, "onEditStart");
+	const onEditKeydown = readonlyProp(_props, "onEditKeydown");
+	const lang = useLang();
+	const recipe = useRecipe(dataTableRecipe);
+	const s = computed(() => recipe({
+		density: density.value,
+		variant: variant.value,
+		striped: striped.value && index.value % 2 === 1
+	}));
+	/** 数据格的按键：编辑中交给外层；可编辑的格按 Enter / F2 开始编辑，打一个字直接替换 */
+	function onCellKeydown(event, column) {
+		const cell = {
+			row: row.value.key,
+			column: column.key
+		};
+		if (editingColumn.value === column.key) return onEditKeydown.value?.(event, cell);
+		if (event.target !== event.currentTarget || !isCellEditable(column, row.value.data)) return;
+		if (event.key === "Enter" || event.key === "F2") {
+			event.preventDefault();
+			onEditStart.value?.(cell);
+		} else if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			event.preventDefault();
+			onEditStart.value?.(cell, event.key);
+		}
+	}
+	return () => createVNode("tr", mergeProps(mergeAttrs({
+		...s.value.row,
+		sx: [
+			s.value.row.sx,
+			tone.value && dataTableRowToneStyles[tone.value],
+			selected.value && dataTableStateStyles.selected,
+			active.value && dataTableStateStyles.active,
+			onRowClick.value && dataTableStateStyles.clickable
+		]
+	}, typeof propsRow.value === "function" ? propsRow.value(row.value.data, index.value) : propsRow.value, {
+		ref: measure.value,
+		"aria-rowindex": position.value + headerRows.value + 1,
+		"aria-selected": selectionMode.value != null ? selected.value : void 0,
+		"aria-current": active.value ? "true" : void 0,
+		onClick: onRowClick.value ? (event) => {
+			if (event.target.closest("a, button, input, select, textarea, label")) return;
+			onRowClick.value(row.value.data, row.value.key);
+		} : void 0
+	}), {
+		"data-index": position.value,
+		"data-key": row.value.key,
+		"data-state": selected.value ? "selected" : void 0,
+		"data-tone": tone.value
+	}), [
+		selectionMode.value && createVNode("td", mergeAttrs({
+			...s.value.selectCell,
+			sx: [
+				s.value.cell.sx,
+				s.value.selectCell.sx,
+				offsets.value.start.size > 0 && dataTableStateStyles.stickySelect,
+				active.value && dataTableStateStyles.activeEdge
+			]
+		}, propsSelectCell.value), [selectionMode.value === "single" ? createVNode(Radio, mergeProps(mergePartProps(s.value.selectRadio, propsSelectRadio.value, {
+			disabled: !selectable.value,
+			"aria-label": lang.tableSelectRow(index.value + 1)
+		}), { "value": row.value.key }), null) : createVNode(Checkbox, mergePartProps({
+			...s.value.selectCheckbox,
+			"aria-label": lang.tableSelectRow(index.value + 1)
+		}, propsSelectCheckbox.value, {
+			_checked: selected.value,
+			indeterminate: partial.value,
+			disabled: !selectable.value,
+			onChange: () => onToggle.value?.(row.value.key)
+		}), null)]),
+		detailColumn.value && createVNode("td", mergeAttrs({
+			...s.value.detailToggleCell,
+			sx: [
+				s.value.cell.sx,
+				s.value.detailToggleCell.sx,
+				leadingStickySx(offsets.value.start.size > 0, selectionMode.value ? SELECT_WIDTH : 0),
+				active.value && !selectionMode.value && dataTableStateStyles.activeEdge
+			]
+		}, propsDetailToggleCell.value), [expandable.value && createVNode(IconButton, mergePartProps({
+			...s.value.detailToggle,
+			icon: ChevronRight,
+			size: "sm",
+			radius: "full",
+			"aria-label": lang.tableRowDetails(rowLabel(columns.value, row.value))
+		}, propsDetailToggle.value, {
+			"aria-expanded": expanded.value,
+			"aria-controls": expanded.value ? detailId.value : void 0,
+			propsIcon: mergeProps$1({
+				flipInRtl: true,
+				sx: disclosureStyles.icon
+			}, propsDetailToggle.value?.propsIcon, expanded.value ? { sx: dataTableStateStyles.chevronOpen } : void 0),
+			onClick: () => onToggleDetail.value?.(row.value.key)
+		}), null)]),
+		columns.value.map((column, position) => {
+			const editing = editingColumn.value === column.key;
+			const value = editing ? renderEditor.value?.(row.value.data, column) : column.cell ? column.cell(row.value.data, index.value) : String(columnValue(column, row.value.data) ?? "");
+			const error = cellNavigation.value ? rowErrors.value?.(row.value.data)?.[column.key] : void 0;
+			const editable = cellNavigation.value && isCellEditable(column, row.value.data);
+			return createVNode("td", mergeProps({ "key": column.key }, mergeAttrs({
+				...s.value.cell,
+				sx: [
+					s.value.cell.sx,
+					dataTableStateStyles[column.align ?? "start"],
+					column.wrap && dataTableStateStyles.wrap,
+					stickyCellSx(column, offsets.value),
+					active.value && position === 0 && !selectionMode.value && !detailColumn.value && dataTableStateStyles.activeEdge,
+					cellNavigation.value && dataTableStateStyles.gridCell,
+					editing && dataTableStateStyles.editingCell,
+					!!error && dataTableStateStyles.invalidCell
+				]
+			}, typeof propsCell.value === "function" ? propsCell.value(row.value.data, column) : propsCell.value, cellNavigation.value ? {
+				"data-column": column.key,
+				"aria-invalid": error ? "true" : void 0,
+				title: error,
+				"aria-description": error,
+				onKeydown: (event) => onCellKeydown(event, column),
+				onDblclick: editable ? () => onEditStart.value?.({
+					row: row.value.key,
+					column: column.key
+				}) : void 0
+			} : {})), [position === 0 && leading.value ? createVNode("div", mergeAttrs(s.value.leading, propsLeading.value), [leading.value(row.value, index.value), createVNode("div", mergeAttrs(s.value.content, propsContent.value), [value])]) : value]);
+		})
+	]);
+}, {
+	name: "DataTableRow",
+	props: [
+		"row",
+		"index",
+		"selected",
+		"partial",
+		"selectable",
+		"tone",
+		"active",
+		"onRowClick",
+		"selectionMode",
+		"columns",
+		"density",
+		"variant",
+		"striped",
+		"offsets",
+		"headerRows",
+		"position",
+		"detailColumn",
+		"expandable",
+		"expanded",
+		"detailId",
+		"propsDetailToggleCell",
+		"propsDetailToggle",
+		"onToggleDetail",
+		"leading",
+		"propsRow",
+		"propsCell",
+		"propsSelectCell",
+		"propsSelectCheckbox",
+		"propsSelectRadio",
+		"propsLeading",
+		"propsContent",
+		"measure",
+		"onToggle",
+		"cellNavigation",
+		"editingColumn",
+		"renderEditor",
+		"rowErrors",
+		"onEditStart",
+		"onEditKeydown"
+	]
+});
+/** 行的名称（展开按钮用）：第一列的文字，没有时用行的 key */
+function rowLabel(columns, row) {
+	const first = columns[0] ? columnValue(columns[0], row.data) : void 0;
+	return first != null && first !== "" ? String(first) : row.key;
+}
+/** DataTableDetailRow 的属性 */
+/** 展开的详情：一行一个跨全部列的单元格；单独成组件，滚动时没变的详情不必重渲 */
+var DataTableDetailRow = /*#__PURE__*/ _component((_props2, _ctx2) => {
+	const row = readonlyProp(_props2, "row");
+	const position = readonlyProp(_props2, "position");
+	const headerRows = readonlyProp(_props2, "headerRows");
+	const span = readonlyProp(_props2, "span");
+	const indent = readonlyProp(_props2, "indent");
+	const id = readonlyProp(_props2, "id");
+	const renderDetail = readonlyProp(_props2, "renderDetail");
+	const propsDetailRow = readonlyProp(_props2, "propsDetailRow");
+	const propsDetailCell = readonlyProp(_props2, "propsDetailCell");
+	const measure = readonlyProp(_props2, "measure");
+	const recipe = useRecipe(dataTableRecipe);
+	const s = computed(() => recipe());
+	return () => createVNode("tr", mergeProps(mergeAttrs(s.value.detailRow, propsDetailRow.value, {
+		ref: measure.value,
+		"aria-rowindex": position.value + headerRows.value + 1
+	}), {
+		"data-index": position.value,
+		"data-detail": ""
+	}), [createVNode("td", mergeAttrs({
+		...s.value.detailCell,
+		sx: [s.value.cell.sx, s.value.detailCell.sx]
+	}, propsDetailCell.value, {
+		id: id.value,
+		colspan: span.value
+	}), [createVNode("div", mergeAttrs({
+		...s.value.detailContent,
+		sx: [s.value.detailContent.sx, css.bind(dataTableDynamicStyles.indent, () => [indent.value], true)]
+	}), [renderDetail.value(row.value.data)])])]);
+}, {
+	name: "DataTableDetailRow",
+	props: [
+		"row",
+		"position",
+		"headerRows",
+		"span",
+		"indent",
+		"id",
+		"renderDetail",
+		"propsDetailRow",
+		"propsDetailCell",
+		"measure"
+	]
+});
+/** 表体里的一行：数据行，或某一行展开的详情 */
+/** 表格的渲染层：虚拟滚动的行、吸顶表头、固定列、排序、勾选、列宽调整、加载与空状态 */
+var DataTableView = /*#__PURE__*/ _component((_props3, _ctx3) => {
+	const rows = readonlyProp(_props3, "rows");
+	const columns = readonlyProp(_props3, "columns");
+	const sort = readonlyProp(_props3, "sort");
+	const onSortClick = readonlyProp(_props3, "onSortClick");
+	const filters = readonlyProp(_props3, "filters");
+	const onFilterChange = readonlyProp(_props3, "onFilterChange");
+	const filterOptionsOf = readonlyProp(_props3, "filterOptionsOf");
+	const columnMenu = readonlyProp(_props3, "columnMenu", false);
+	const onColumnAction = readonlyProp(_props3, "onColumnAction");
+	const cellNavigation = readonlyProp(_props3, "cellNavigation", false);
+	const editing = readonlyProp(_props3, "editing");
+	const renderEditor = readonlyProp(_props3, "renderEditor");
+	const rowErrors = readonlyProp(_props3, "rowErrors");
+	const onEditStart = readonlyProp(_props3, "onEditStart");
+	const onEditKeydown = readonlyProp(_props3, "onEditKeydown");
+	const selectionMode = readonlyProp(_props3, "selectionMode");
+	const selectedKeys = readonlyProp(_props3, "selectedKeys", () => []);
+	const partialKeys = readonlyProp(_props3, "partialKeys");
+	const onToggleRow = readonlyProp(_props3, "onToggleRow");
+	const onToggleAll = readonlyProp(_props3, "onToggleAll");
+	const widths = readonlyProp(_props3, "widths");
+	const onResize = readonlyProp(_props3, "onResize");
+	const resizable = readonlyProp(_props3, "resizable", false);
+	const loading = readonlyProp(_props3, "loading", false);
+	const empty = readonlyProp(_props3, "empty");
+	const leading = readonlyProp(_props3, "leading");
+	const density = readonlyProp(_props3, "density", "standard");
+	const variant = readonlyProp(_props3, "variant", "surface");
+	const striped = readonlyProp(_props3, "striped", false);
+	const estimateRowHeight = readonlyProp(_props3, "estimateRowHeight");
+	const onRangeChange = readonlyProp(_props3, "onRangeChange");
+	const handle = readonlyProp(_props3, "handle");
+	const rowTone = readonlyProp(_props3, "rowTone");
+	const activeKey = readonlyProp(_props3, "activeKey");
+	const onRowClick = readonlyProp(_props3, "onRowClick");
+	const isRowSelectable = readonlyProp(_props3, "isRowSelectable");
+	const hiddenColumns = readonlyProp(_props3, "hiddenColumns");
+	const summaryLabel = readonlyProp(_props3, "summaryLabel");
+	const columnGroups = readonlyProp(_props3, "columnGroups");
+	const renderDetail = readonlyProp(_props3, "renderDetail");
+	const hasDetail = readonlyProp(_props3, "hasDetail");
+	const expandedRows = readonlyProp(_props3, "expandedRows");
+	const onToggleDetail = readonlyProp(_props3, "onToggleDetail");
+	const flexible = readonlyProp(_props3, "flexible", false);
+	const propsRoot = readonlyProp(_props3, "propsRoot");
+	const propsRow = readonlyProp(_props3, "propsRow");
+	const propsCell = readonlyProp(_props3, "propsCell");
+	const propsHeaderCell = readonlyProp(_props3, "propsHeaderCell");
+	const propsGroupHeaderCell = readonlyProp(_props3, "propsGroupHeaderCell");
+	const propsEmpty = readonlyProp(_props3, "propsEmpty");
+	const propsSkeleton = readonlyProp(_props3, "propsSkeleton");
+	const propsSortButton = readonlyProp(_props3, "propsSortButton");
+	const propsResizer = readonlyProp(_props3, "propsResizer");
+	const propsSortLabel = readonlyProp(_props3, "propsSortLabel");
+	const propsHead = readonlyProp(_props3, "propsHead");
+	const propsHeadRow = readonlyProp(_props3, "propsHeadRow");
+	const propsSelectHeaderCell = readonlyProp(_props3, "propsSelectHeaderCell");
+	const propsSelectCell = readonlyProp(_props3, "propsSelectCell");
+	const propsSelectAll = readonlyProp(_props3, "propsSelectAll");
+	const propsSelectCheckbox = readonlyProp(_props3, "propsSelectCheckbox");
+	const propsSelectRadio = readonlyProp(_props3, "propsSelectRadio");
+	const propsLeading = readonlyProp(_props3, "propsLeading");
+	const propsContent = readonlyProp(_props3, "propsContent");
+	const propsProgress = readonlyProp(_props3, "propsProgress");
+	const propsEmptyCell = readonlyProp(_props3, "propsEmptyCell");
+	const propsFoot = readonlyProp(_props3, "propsFoot");
+	const propsSummaryCell = readonlyProp(_props3, "propsSummaryCell");
+	const propsDetailHeaderCell = readonlyProp(_props3, "propsDetailHeaderCell");
+	const propsDetailToggleCell = readonlyProp(_props3, "propsDetailToggleCell");
+	const propsDetailToggle = readonlyProp(_props3, "propsDetailToggle");
+	const propsDetailRow = readonlyProp(_props3, "propsDetailRow");
+	const propsDetailCell = readonlyProp(_props3, "propsDetailCell");
+	const rest = restProps(_props3, _ctx3, true);
+	const lang = useLang();
+	const columnDisplay = useColumnDisplay();
+	const recipe = useRecipe(dataTableRecipe);
+	const s = computed(() => recipe({
+		density: density.value,
+		variant: variant.value
+	}));
+	const indicator = useDelayedLoading(() => loading.value);
+	const selectedSet = computed(() => new Set(selectedKeys.value));
+	const partialSet = computed(() => new Set(partialKeys.value));
+	const radioName = useId();
+	RadioGroupContext.provide({
+		get value() {
+			return selectedKeys.value[0] ?? null;
+		},
+		name: radioName,
+		disabled: false,
+		readonly: false,
+		required: false,
+		invalid: false,
+		size: void 0,
+		tone: "accent",
+		select: (key) => onToggleRow.value?.(key)
+	});
+	const selectableRows = computed(() => isRowSelectable.value ? rows.value.filter((row) => isRowSelectable.value(row.data)) : rows.value);
+	const allSelected = computed(() => selectableRows.value.length > 0 && selectableRows.value.every((row) => selectedSet.value.has(row.key)));
+	const someSelected = computed(() => !allSelected.value && selectableRows.value.some((row) => selectedSet.value.has(row.key)));
+	const hidden = computed(() => new Set(hiddenColumns.value ?? []));
+	const visibleColumns = computed(() => hidden.value.size > 0 ? columns.value.filter((column) => !hidden.value.has(column.key)) : columns.value);
+	let viewport = shallowRef(null);
+	let body = shallowRef(null);
+	effect(() => body.value && cellNavigation.value ? gridFocus(body.value, {
+		rows: "tr[data-key]",
+		cells: "td[data-column]"
+	}) : void 0);
+	let head = shallowRef(null);
+	let foot = shallowRef(null);
+	let skeletonRows = ref(SKELETON_ROWS.min);
+	effect(() => {
+		if (!indicator.value || !body.value || rows.value.length > 0) return;
+		const rowHeight = body.value.firstElementChild?.offsetHeight || (estimateRowHeight.value ?? ROW_HEIGHT[density.value]);
+		const space = window.innerHeight - body.value.getBoundingClientRect().top;
+		skeletonRows.value = clamp(Math.ceil(space / rowHeight), SKELETON_ROWS.min, SKELETON_ROWS.max);
+	});
+	const detailIdPrefix = useId();
+	const detailId = (index) => `${detailIdPrefix}-detail-${index}`;
+	const expandedSet = computed(() => new Set(expandedRows.value ?? []));
+	/** 表体里的各行：展开了详情的行后面跟它的详情；没有展开的详情时为 null，直接用 rows */
+	const entries = computed(() => {
+		if (!renderDetail.value || expandedSet.value.size === 0) return null;
+		const list = [];
+		rows.value.forEach((row, index) => {
+			list.push({
+				row,
+				index,
+				detail: false
+			});
+			if (expandedSet.value.has(row.key) && (hasDetail.value?.(row.data) ?? true)) list.push({
+				row,
+				index,
+				detail: true
+			});
+		});
+		return list;
+	});
+	const entryAt = (position) => entries.value ? entries.value[position] : {
+		row: rows.value[position],
+		index: position,
+		detail: false
+	};
+	const virtual = useVirtualizer(() => {
+		const current = rows.value;
+		const list = entries.value;
+		const rowHeight = estimateRowHeight.value ?? ROW_HEIGHT[density.value];
+		return {
+			count: list?.length ?? current.length,
+			scrollElement: viewport.value,
+			list: body.value,
+			estimateSize: (position) => list?.[position]?.detail ? DETAIL_HEIGHT : rowHeight,
+			getItemKey: (position) => {
+				if (!list) return current[position].key;
+				const entry = list[position];
+				return entry.detail ? `${entry.row.key}\u0000detail` : entry.row.key;
+			},
+			overscan: 8,
+			onRangeChange: onRangeChange.value,
+			scrollPaddingStart: () => head.value?.offsetHeight ?? 0,
+			scrollPaddingEnd: () => foot.value?.offsetHeight ?? 0
+		};
+	});
+	const api = { scrollToRow(key, options) {
+		const position = entries.value ? entries.value.findIndex((entry) => !entry.detail && entry.row.key === key) : rows.value.findIndex((row) => row.key === key);
+		if (position < 0) return false;
+		virtual.scrollToIndex(position, options);
+		return true;
+	} };
+	watch(() => viewport.value, (element) => {
+		if (element) handle.value?.(api);
+	}, { flush: "post" });
+	const types = computed(() => visibleColumns.value.map((column) => columnType(column, function* () {
+		for (const row of rows.value) yield row.data;
+	}())).join("|"));
+	/** 补上默认对齐与格式化的列：没写 align、cell 的列按值类型来 */
+	const shown = computed(() => columnDisplay.columns(visibleColumns.value, types.value.split("|")));
+	const hasSummary = computed(() => visibleColumns.value.some((column) => column.summary != null));
+	const layout = computed(() => columnGroups.value?.length ? headerLayout(shown.value, columnGroups.value) : null);
+	const headerRows = computed(() => layout.value?.some((cell) => cell.kind === "group") ? 2 : 1);
+	const rowData = computed(() => rows.value.map((row) => row.data));
+	const sums = computed(() => hasSummary.value ? shown.value.map((column) => column.summary === "sum" ? sumColumn(column, rowData.value) : null) : []);
+	/** 合计行里一列的内容 */
+	function summaryOf(column, position) {
+		if (column.summary === "sum") {
+			const type = types.value.split("|")[position] ?? "number";
+			const total = sums.value[position];
+			return total == null ? column.empty ?? lang.emptyValue : columnDisplay.value(column, type, total);
+		}
+		if (column.summary) return column.summary(rowData.value);
+		return position === 0 ? summaryLabel.value ?? lang.tableSummary : null;
+	}
+	/** 列的宽度：调整过的、列定义里的，或者没有（与其他没写宽度的列平分） */
+	const widthOf = (column) => widths.value[column.key] ?? column.width;
+	const leadingWidth = () => (selectionMode.value ? SELECT_WIDTH : 0) + (renderDetail.value ? DETAIL_WIDTH : 0);
+	const bodyRowCount = () => entries.value?.length ?? rows.value.length;
+	let lastOffsets;
+	const offsets = computed(() => {
+		const next = stickyOffsets(shown.value, widthOf, leadingWidth());
+		if (lastOffsets && sameStickyOffsets(lastOffsets, next)) return lastOffsets;
+		return lastOffsets = next;
+	});
+	const minWidth = () => tableMinWidth(shown.value, widthOf, leadingWidth());
+	const sorts = computed(() => sortList(sort.value));
+	/** 列标题结尾的筛选按钮与列菜单 */
+	function renderHeaderActions(column, label, cell) {
+		const filter = columnFilter(column);
+		if (!filter && !columnMenu.value) return null;
+		const position = shown.value.findIndex((item) => item.key === column.key);
+		const neighbour = (step) => shown.value[position + step];
+		return createVNode(Fragment, null, [filter && createVNode(ColumnFilterButton, {
+			"label": label,
+			"options": filter.options === "text" ? "text" : filterOptionsOf.value?.(column) ?? [],
+			"values": filters.value?.[column.key] ?? [],
+			"onChange": (values) => onFilterChange.value?.(column.key, values)
+		}, null), columnMenu.value && createVNode(ColumnMenuButton, {
+			"label": label,
+			"sortable": !!column.sortable,
+			"sorted": sorts.value.find((item) => item.key === column.key)?.direction,
+			"pinned": column.sticky,
+			"canMove": {
+				backward: neighbour(-1)?.sticky === column.sticky,
+				forward: neighbour(1)?.sticky === column.sticky
+			},
+			"canHide": shown.value.length > 1,
+			"onAction": (action) => onColumnAction.value?.(column.key, action, cell()?.offsetWidth ?? 0)
+		}, null)]);
+	}
+	/** 一个列标题；rowspan 是没分组的列在两行表头里跨两行，divider 是与分组相邻的竖线 */
+	function renderHeaderCell(column, rowspan = 1, divider = false) {
+		let _slot;
+		const own = typeof propsHeaderCell.value === "function" ? propsHeaderCell.value(column) : propsHeaderCell.value;
+		const priority = sorts.value.findIndex((item) => item.key === column.key);
+		const sorted = priority >= 0 ? sorts.value[priority].direction : void 0;
+		const label = plainText(column.header) ?? column.key;
+		const canResize = column.resizable ?? resizable.value;
+		let cell = null;
+		const actions = renderHeaderActions(column, label, () => cell);
+		const content = column.sortable && createVNode(ButtonBase, mergePartProps(s.value.sortButton, propsSortButton.value, { onClick: (event) => onSortClick.value?.(column.key, event) }), { default: () => [
+			createVNode("span", mergeAttrs(s.value.sortLabel, propsSortLabel.value), [column.header]),
+			createVNode(Icon, mergePartProps({
+				...s.value.sortIcon,
+				icon: sorted === "ascending" ? ArrowUp : sorted === "descending" ? ArrowDown : ArrowUpDown,
+				sx: [s.value.sortIcon.sx, sorted && dataTableStateStyles.sortActive]
+			}), null),
+			sorts.value.length > 1 && priority >= 0 && createVNode(Fragment, null, [createVNode("span", mergeProps(mergeAttrs(s.value.sortPriority), { "aria-hidden": "true" }), [priority + 1]), priority > 0 && createVNode(VisuallyHidden, null, _isSlot(_slot = lang.tableSortPriority(priority + 1, sorted === "ascending" ? lang.tableSortAscending : lang.tableSortDescending)) ? _slot : { default: () => [_slot] })])
+		] }) || column.header;
+		return createVNode("th", mergeProps({ "key": column.key }, mergeAttrs({
+			...s.value.headerCell,
+			sx: [
+				s.value.headerCell.sx,
+				dataTableStateStyles[column.align ?? "start"],
+				stickyCellSx(column, offsets.value),
+				divider && dataTableStateStyles.groupDivider
+			]
+		}, own, {
+			ref: (element) => cell = element,
+			scope: "col",
+			rowspan: rowspan > 1 ? rowspan : void 0,
+			"aria-sort": column.sortable ? priority === 0 ? sorted : "none" : void 0
+		}), { "data-sticky": column.sticky }), [actions ? createVNode("div", mergeAttrs(s.value.headerContent), [createVNode("span", mergeAttrs({
+			...s.value.headerMain,
+			sx: [s.value.headerMain.sx, column.align === "end" && dataTableStateStyles.headerMainEnd]
+		}), [content]), actions]) : content, canResize && createVNode(ColumnResizer, mergePartProps({
+			label,
+			width: widthOf(column),
+			minWidth: column.minWidth,
+			onWidthChange: (width) => onResize.value?.(column.key, width)
+		}, propsResizer.value), null)]);
+	}
+	/** 一个分组标题：跨组里的几列 */
+	function renderGroupCell(group, members, key, divider) {
+		return createVNode("th", mergeProps({ "key": key }, mergeAttrs({
+			...s.value.groupHeaderCell,
+			sx: [
+				s.value.headerCell.sx,
+				s.value.groupHeaderCell.sx,
+				groupStickySx(members, offsets.value),
+				divider && dataTableStateStyles.groupDivider
+			]
+		}, typeof propsGroupHeaderCell.value === "function" ? propsGroupHeaderCell.value(group) : propsGroupHeaderCell.value, {
+			scope: "colgroup",
+			colspan: members.length
+		})), [group.header]);
+	}
+	/** 表头的列标题：一行；有分组时两行 */
+	function renderHeaderRows(selectHeader, detailHeader) {
+		const cells = layout.value;
+		if (!cells || headerRows.value === 1) return createVNode("tr", mergeAttrs(s.value.headRow, propsHeadRow.value, { "aria-rowindex": 1 }), [
+			selectHeader,
+			detailHeader,
+			shown.value.map((column) => renderHeaderCell(column))
+		]);
+		const nextToGroup = (position) => position > 0 && (cells[position].kind === "group" || cells[position - 1].kind === "group");
+		return [createVNode("tr", mergeProps({ "key": "groups" }, mergeAttrs(s.value.headRow, propsHeadRow.value, { "aria-rowindex": 1 })), [
+			selectHeader,
+			detailHeader,
+			cells.map((cell, position) => cell.kind === "group" ? renderGroupCell(cell.group, cell.columns, `${cell.group.key}-${position}`, nextToGroup(position)) : renderHeaderCell(cell.column, 2, nextToGroup(position)))
+		]), createVNode("tr", mergeProps({ "key": "columns" }, mergeAttrs(s.value.headRow, propsHeadRow.value, { "aria-rowindex": 2 })), [cells.flatMap((cell, position) => cell.kind === "group" ? cell.columns.map((column, index) => renderHeaderCell(column, 1, index === 0 && position > 0)) : [])])];
+	}
+	return () => {
+		const span = shown.value.length + (selectionMode.value ? 1 : 0) + (renderDetail.value ? 1 : 0);
+		const items = virtual.items;
+		const top = items[0]?.start ?? 0;
+		const bottom = items.length ? virtual.total - items.at(-1).end : 0;
+		return createVNode(ScrollArea, mergePartProps({
+			...s.value.root,
+			axis: "both",
+			sx: [s.value.root.sx, flexible.value && dataTableStateStyles.flexible]
+		}, propsRoot.value, { propsViewport: { ref: viewport } }), { default: () => [createVNode("table", mergeAttrs({
+			...s.value.table,
+			sx: [s.value.table.sx, css.bind(dataTableDynamicStyles.minWidth, () => [minWidth()], true)]
+		}, rest, {
+			"aria-rowcount": bodyRowCount() + headerRows.value + (hasSummary.value && rows.value.length > 0 ? 1 : 0),
+			"aria-busy": loading.value || void 0,
+			role: cellNavigation.value ? "grid" : void 0
+		}), [
+			createVNode("colgroup", null, [
+				selectionMode.value && createVNode("col", css.attrs(css.bind(dataTableDynamicStyles.width, () => [SELECT_WIDTH], true)), null),
+				renderDetail.value && createVNode("col", css.attrs(css.bind(dataTableDynamicStyles.width, () => [DETAIL_WIDTH], true)), null),
+				shown.value.map((column) => {
+					const width = widthOf(column);
+					return createVNode("col", mergeProps({ "key": column.key }, width != null ? css.attrs(css.bind(dataTableDynamicStyles.width, () => [width])) : {}), null);
+				})
+			]),
+			createVNode("thead", mergeAttrs(s.value.head, propsHead.value, { ref: head }), [renderHeaderRows(selectionMode.value && createVNode("th", mergeAttrs({
+				...s.value.selectHeaderCell,
+				sx: [
+					s.value.headerCell.sx,
+					s.value.selectHeaderCell.sx,
+					offsets.value.start.size > 0 && dataTableStateStyles.stickySelect
+				]
+			}, propsSelectHeaderCell.value, {
+				scope: "col",
+				rowspan: headerRows.value > 1 ? headerRows.value : void 0
+			}), [selectionMode.value === "single" && createVNode(VisuallyHidden, { "key": "__site0" }, {
+				default: () => [lang.tableSelectColumn],
+				$stable: true
+			}), selectionMode.value === "multiple" && createVNode(Checkbox, mergePartProps({
+				...s.value.selectAll,
+				"aria-label": lang.tableSelectAll
+			}, propsSelectAll.value, {
+				_checked: allSelected.value,
+				indeterminate: someSelected.value,
+				disabled: selectableRows.value.length === 0,
+				onChange: () => onToggleAll.value?.()
+			}), null)]), renderDetail.value && createVNode("th", mergeAttrs({
+				...s.value.detailHeaderCell,
+				sx: [
+					s.value.headerCell.sx,
+					s.value.detailHeaderCell.sx,
+					leadingStickySx(offsets.value.start.size > 0, selectionMode.value ? SELECT_WIDTH : 0)
+				]
+			}, propsDetailHeaderCell.value, {
+				scope: "col",
+				rowspan: headerRows.value > 1 ? headerRows.value : void 0
+			}), [createVNode("span", css.attrs(visuallyHiddenStyles.hidden), [lang.tableDetails])])), indicator.value && rows.value.length > 0 && createVNode("tr", { "aria-hidden": "true" }, [createVNode("td", mergeProps({ "colspan": span }, mergeAttrs(s.value.progressCell)), [createVNode("div", mergeAttrs(s.value.progress), [createVNode(Progress, mergePartProps({
+				size: "xs",
+				"aria-label": lang.loading
+			}, propsProgress.value), null)])])])]),
+			createVNode("tbody", mergeProps(mergeAttrs(s.value.body), { "ref": body }), [
+				rows.value.length === 0 && indicator.value && Array.from({ length: skeletonRows.value }, (_, index) => createVNode("tr", mergeProps({
+					"key": `skeleton-${index}`,
+					"aria-hidden": "true"
+				}, mergeAttrs(s.value.row)), [
+					selectionMode.value && createVNode("td", mergeAttrs(s.value.cell), null),
+					renderDetail.value && createVNode("td", mergeAttrs(s.value.cell), null),
+					shown.value.map((column, position) => createVNode("td", mergeProps({ "key": column.key }, mergeAttrs(s.value.cell)), [createVNode(Skeleton, mergePartProps({
+						...s.value.skeleton,
+						sx: [s.value.skeleton.sx, css.bind(dataTableDynamicStyles.percent, () => [`${90 - (index + position) % 4 * 15}%`])],
+						delay: index * 120
+					}, propsSkeleton.value), null)]))
+				])),
+				rows.value.length === 0 && !loading.value && createVNode("tr", null, [createVNode("td", mergeAttrs({
+					...s.value.emptyCell,
+					sx: [s.value.cell.sx, s.value.emptyCell.sx]
+				}, propsEmptyCell.value, { colspan: span }), [empty.value ?? createVNode(Empty, mergePartProps({
+					size: "sm",
+					title: lang.tableEmpty
+				}, propsEmpty.value), null)])]),
+				top > 0 && createVNode("tr", { "aria-hidden": "true" }, [createVNode("td", mergeProps({ "colspan": span }, mergeAttrs({
+					...s.value.spacer,
+					sx: [s.value.spacer.sx, css.bind(dataTableDynamicStyles.height, () => [top])]
+				})), null)]),
+				items.map((item) => {
+					const { row, index, detail } = entryAt(item.index);
+					if (detail && renderDetail.value) return createVNode(DataTableDetailRow, {
+						"key": item.key,
+						"row": row,
+						"position": item.index,
+						"headerRows": headerRows.value,
+						"span": span,
+						"indent": leadingWidth(),
+						"id": detailId(index),
+						"renderDetail": renderDetail.value,
+						"propsDetailRow": propsDetailRow.value,
+						"propsDetailCell": propsDetailCell.value,
+						"measure": virtual.measure
+					}, null);
+					return createVNode(DataTableRow, {
+						"key": row.key,
+						"row": row,
+						"index": index,
+						"position": item.index,
+						"detailColumn": renderDetail.value != null,
+						"expandable": hasDetail.value ? hasDetail.value(row.data) : true,
+						"expanded": expandedSet.value.has(row.key),
+						"detailId": detailId(index),
+						"propsDetailToggleCell": propsDetailToggleCell.value,
+						"propsDetailToggle": propsDetailToggle.value,
+						"onToggleDetail": onToggleDetail.value,
+						"selected": selectionMode.value != null && selectedSet.value.has(row.key),
+						"partial": partialSet.value.has(row.key),
+						"selectable": isRowSelectable.value ? isRowSelectable.value(row.data) : true,
+						"tone": rowTone.value?.(row.data),
+						"active": activeKey.value != null && activeKey.value === row.key,
+						"onRowClick": onRowClick.value,
+						"selectionMode": selectionMode.value,
+						"columns": shown.value,
+						"density": density.value,
+						"variant": variant.value,
+						"striped": striped.value,
+						"offsets": offsets.value,
+						"headerRows": headerRows.value,
+						"leading": leading.value,
+						"propsRow": propsRow.value,
+						"propsCell": propsCell.value,
+						"propsSelectCell": propsSelectCell.value,
+						"propsSelectCheckbox": propsSelectCheckbox.value,
+						"propsSelectRadio": propsSelectRadio.value,
+						"propsLeading": propsLeading.value,
+						"propsContent": propsContent.value,
+						"measure": virtual.measure,
+						"onToggle": onToggleRow.value,
+						"cellNavigation": cellNavigation.value,
+						"editingColumn": editing.value?.row === row.key ? editing.value.column : void 0,
+						"renderEditor": renderEditor.value,
+						"rowErrors": rowErrors.value,
+						"onEditStart": onEditStart.value,
+						"onEditKeydown": onEditKeydown.value
+					}, null);
+				}),
+				bottom > 0 && createVNode("tr", { "aria-hidden": "true" }, [createVNode("td", mergeProps({ "colspan": span }, mergeAttrs({
+					...s.value.spacer,
+					sx: [s.value.spacer.sx, css.bind(dataTableDynamicStyles.height, () => [bottom])]
+				})), null)])
+			]),
+			hasSummary.value && rows.value.length > 0 && createVNode("tfoot", mergeAttrs(s.value.foot, propsFoot.value, { ref: foot }), [createVNode("tr", { "aria-rowindex": bodyRowCount() + headerRows.value + 1 }, [
+				selectionMode.value && createVNode("td", mergeAttrs({
+					...s.value.summaryCell,
+					sx: [
+						s.value.cell.sx,
+						s.value.summaryCell.sx,
+						offsets.value.start.size > 0 && dataTableStateStyles.stickySelect
+					]
+				}), null),
+				renderDetail.value && createVNode("td", mergeAttrs({
+					...s.value.summaryCell,
+					sx: [
+						s.value.cell.sx,
+						s.value.summaryCell.sx,
+						leadingStickySx(offsets.value.start.size > 0, selectionMode.value ? SELECT_WIDTH : 0)
+					]
+				}), null),
+				shown.value.map((column, position) => createVNode("td", mergeProps({ "key": column.key }, mergeAttrs({
+					...s.value.summaryCell,
+					sx: [
+						s.value.cell.sx,
+						s.value.summaryCell.sx,
+						dataTableStateStyles[column.align ?? "start"],
+						stickyCellSx(column, offsets.value)
+					]
+				}, typeof propsSummaryCell.value === "function" ? propsSummaryCell.value(column) : propsSummaryCell.value)), [summaryOf(column, position)]))
+			])])
+		])] });
+	};
+}, {
+	props: [
+		"rows",
+		"columns",
+		"sort",
+		"onSortClick",
+		"filters",
+		"onFilterChange",
+		"filterOptionsOf",
+		"columnMenu",
+		"onColumnAction",
+		"cellNavigation",
+		"editing",
+		"renderEditor",
+		"rowErrors",
+		"onEditStart",
+		"onEditKeydown",
+		"selectionMode",
+		"selectedKeys",
+		"partialKeys",
+		"onToggleRow",
+		"onToggleAll",
+		"widths",
+		"onResize",
+		"resizable",
+		"loading",
+		"empty",
+		"leading",
+		"density",
+		"variant",
+		"striped",
+		"estimateRowHeight",
+		"onRangeChange",
+		"handle",
+		"rowTone",
+		"activeKey",
+		"onRowClick",
+		"isRowSelectable",
+		"hiddenColumns",
+		"summaryLabel",
+		"columnGroups",
+		"renderDetail",
+		"hasDetail",
+		"expandedRows",
+		"onToggleDetail",
+		"flexible",
+		"propsRoot",
+		"propsRow",
+		"propsCell",
+		"propsHeaderCell",
+		"propsGroupHeaderCell",
+		"propsEmpty",
+		"propsSkeleton",
+		"propsSortButton",
+		"propsResizer",
+		"propsSortLabel",
+		"propsHead",
+		"propsHeadRow",
+		"propsSelectHeaderCell",
+		"propsSelectCell",
+		"propsSelectAll",
+		"propsSelectCheckbox",
+		"propsSelectRadio",
+		"propsLeading",
+		"propsContent",
+		"propsProgress",
+		"propsEmptyCell",
+		"propsFoot",
+		"propsSummaryCell",
+		"propsDetailHeaderCell",
+		"propsDetailToggleCell",
+		"propsDetailToggle",
+		"propsDetailRow",
+		"propsDetailCell"
+	],
+	name: "DataTableView"
+});
+//#endregion
+export { DataTableDetailRow, DataTableRow, DataTableView, dataTableDynamicStyles, dataTableRowToneStyles, rowLabel };
+
+//# sourceMappingURL=DataTableView.js.map