@bysages/react 0.2.2 → 0.2.3

package/dist/components/table/index.mjs

@@ -0,0 +1,688 @@
+import { Pagination } from "../pagination/index.mjs";
+import { Select as Select$1 } from "../select/index.mjs";
+import { injectComponentStyle } from "@bysages/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useMemo, useReducer, useRef } from "react";
+import { createListCollection } from "@ark-ui/react/select";
+import { FlexRender, cellSpanningFeature, columnFilteringFeature, columnOrderingFeature, columnPinningFeature, columnSizingFeature, columnVisibilityFeature, createColumnHelper, createExpandedRowModel, createFilteredRowModel, createPaginatedRowModel, createSortedRowModel, filterFn_arrIncludes, filterFn_equals, filterFn_inDateRange, filterFn_inNumberRange, filterFn_includesString, filterFn_weakEquals, globalFilteringFeature, rowExpandingFeature, rowPaginationFeature, rowSelectionFeature, rowSortingFeature, sortFn_alphanumeric, sortFn_alphanumericCaseSensitive, sortFn_basic, sortFn_datetime, sortFn_text, sortFn_textCaseSensitive, tableFeatures, useTable } from "@tanstack/react-table";
+import { useVirtualizer } from "@tanstack/react-virtual";
+//#region src/components/table/index.tsx
+/** The pagination bar's arrows — thin chevrons for the row of seals. */
+function pageGlyph(direction) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		width: 14,
+		height: 14,
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", { d: direction === "start" ? "m15 18-6-6 6-6" : "m9 18 6-6-6-6" })
+	});
+}
+/** The page-size select's pointing chevron. */
+function chevronDownGlyph() {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		width: 14,
+		height: 14,
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2.5,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+	});
+}
+const SELECT_COL_ID = "__select";
+const SELECT_COL_WIDTH = 48;
+/** The list holding `id` and the index inside it, or null when absent. */
+function findNode(rows, id) {
+	for (let index = 0; index < rows.length; index++) {
+		const row = rows[index];
+		if (String(row.id) === id) return {
+			list: rows,
+			index
+		};
+		if (row.subRows) {
+			const hit = findNode(row.subRows, id);
+			if (hit) return hit;
+		}
+	}
+	return null;
+}
+/** True when `id` sits anywhere in the node's subtree — dropping a node
+* into its own descendants would orphan it. */
+function containsNode(node, id) {
+	return !!node.subRows?.some((child) => String(child.id) === id || containsNode(child, id));
+}
+/** Rebuild every array along the path to `id`, leaving sibling branches
+* untouched by reference (TanStack's memoization keeps their rows). */
+function removeById(rows, id) {
+	const next = [];
+	for (const row of rows) {
+		if (String(row.id) === id) continue;
+		next.push(row.subRows ? {
+			...row,
+			subRows: removeById(row.subRows, id)
+		} : row);
+	}
+	return next;
+}
+/** Rebuild the path to `id` and swap the node for `patch(node)`. */
+function replaceById(rows, id, patch) {
+	return rows.map((row) => {
+		if (String(row.id) === id) return patch(row);
+		return row.subRows ? {
+			...row,
+			subRows: replaceById(row.subRows, id, patch)
+		} : row;
+	});
+}
+/** Toggle one drop-indicator attribute without rewriting it every event. */
+function mark(el, attr, on) {
+	if (on) el.setAttribute(attr, "");
+	else el.removeAttribute(attr);
+}
+function ChevronGlyph() {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2.5,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": true,
+		children: /* @__PURE__ */ jsx("path", { d: "m9 6 6 6-6 6" })
+	});
+}
+/** React keeps `indeterminate` off the JSX types; the DOM property is the
+* only channel, so the checkbox owns its ref. */
+function SelectBox(props) {
+	const box = useRef(null);
+	useLayoutEffect(() => {
+		if (box.current) box.current.indeterminate = props.indeterminate;
+	});
+	return /* @__PURE__ */ jsx("input", {
+		ref: box,
+		type: "checkbox",
+		checked: props.checked,
+		"aria-label": props.label,
+		onChange: props.onToggle
+	});
+}
+function DataTable(rawProps) {
+	injectComponentStyle("table");
+	const props = rawProps;
+	const { selectable = false, sortable = true, filterable = false, showToolbar = true, tree = false, virtual: virtualProp = false, rowHeight = 40, paginated = false, pageSize = 10, pageSizeOptions = [
+		10,
+		20,
+		50
+	], globalFilterPlaceholder = "Filter rows", emptyText = "No rows", reorderable = false } = props;
+	const merge = props.merge;
+	const virtual = virtualProp && !merge;
+	const mergeMode = !virtualProp && !!merge;
+	/** Features follow the construction-time switches: sorting, selection,
+	* expansion, pinning, and spanning are always part of the one-stop
+	* shape; filtering and pagination ride their own render paths. Memoized
+	* so the feature registry stays stable across renders. */
+	const features = useMemo(() => tableFeatures({
+		rowSortingFeature,
+		sortedRowModel: createSortedRowModel(),
+		sortFns: {
+			alphanumeric: sortFn_alphanumeric,
+			alphanumericCaseSensitive: sortFn_alphanumericCaseSensitive,
+			basic: sortFn_basic,
+			datetime: sortFn_datetime,
+			text: sortFn_text,
+			textCaseSensitive: sortFn_textCaseSensitive
+		},
+		rowSelectionFeature,
+		rowExpandingFeature,
+		expandedRowModel: createExpandedRowModel(),
+		columnPinningFeature,
+		columnOrderingFeature,
+		columnSizingFeature,
+		columnVisibilityFeature,
+		cellSpanningFeature,
+		...filterable ? {
+			columnFilteringFeature,
+			globalFilteringFeature,
+			filteredRowModel: createFilteredRowModel(),
+			filterFns: {
+				arrIncludes: filterFn_arrIncludes,
+				equals: filterFn_equals,
+				includesString: filterFn_includesString,
+				inDateRange: filterFn_inDateRange,
+				inNumberRange: filterFn_inNumberRange,
+				weakEquals: filterFn_weakEquals
+			}
+		} : {},
+		...paginated ? {
+			rowPaginationFeature,
+			paginatedRowModel: createPaginatedRowModel()
+		} : {}
+	}), [filterable, paginated]);
+	const columns = useMemo(() => {
+		if (virtualProp && merge) console.warn("[DataTable] `virtual` and `merge` are mutually exclusive; merge wins.");
+		const mergeIds = new Set(merge ?? []);
+		const defId = (def) => def.id ?? ("accessorKey" in def ? String(def.accessorKey) : "");
+		const narrowed = props.columns.map((def) => mergeIds.has(defId(def)) ? {
+			...def,
+			spanRows: true
+		} : def);
+		if (selectable) narrowed.unshift({
+			id: SELECT_COL_ID,
+			size: SELECT_COL_WIDTH,
+			enableSorting: false,
+			header: () => "",
+			cell: () => ""
+		});
+		return narrowed;
+	}, [
+		props.columns,
+		merge,
+		selectable,
+		features
+	]);
+	const table = useTable({
+		features,
+		columns,
+		data: props.data,
+		enableSorting: sortable,
+		getRowId: (row) => String(row.id),
+		getSubRows: (row) => row.subRows,
+		autoResetExpanded: false,
+		initialState: {
+			...props.initialSorting ? { sorting: props.initialSorting } : {},
+			...paginated ? { pagination: {
+				pageIndex: 0,
+				pageSize
+			} } : {},
+			...props.pinStart || props.pinEnd ? { columnPinning: {
+				start: props.pinStart ?? [],
+				end: props.pinEnd ?? []
+			} } : {}
+		}
+	});
+	const viewport = useRef(null);
+	const rows = table.getRowModel().rows;
+	/** The declared row height is the density-scale baseline; the live
+	* scale comes off the document so the virtual window matches what CSS
+	* actually renders. It is read once and re-read only when the density
+	* or scene attribute moves — estimateSize runs on every scroll frame. */
+	let densityScale = 1;
+	const readDensityScale = () => {
+		const value = Number(getComputedStyle(document.documentElement).getPropertyValue("--bs-density-scale"));
+		densityScale = Number.isFinite(value) && value > 0 ? value : 1;
+	};
+	const virtualizer = useVirtualizer({
+		count: rows.length,
+		getScrollElement: () => viewport.current,
+		estimateSize: () => rowHeight * densityScale,
+		getItemKey: (index) => rows[index]?.id ?? index,
+		overscan: 8
+	});
+	const [, rerender] = useReducer((count) => count + 1, 0);
+	useEffect(() => {
+		if (!virtual) return;
+		readDensityScale();
+		const observer = new MutationObserver(rerender);
+		observer.observe(document.documentElement, {
+			attributes: true,
+			attributeFilter: ["data-density", "data-scene"]
+		});
+		return () => observer.disconnect();
+	}, [virtual]);
+	const virtualRows = virtualizer.getVirtualItems();
+	const totalSize = virtualizer.getTotalSize();
+	/** Column ids of the visible leaves, for pin-seam bookkeeping. */
+	const leafIds = table.getAllLeafColumns().map((c) => c.id);
+	const expandHostId = tree ? leafIds.find((id) => id !== SELECT_COL_ID) : void 0;
+	/** Track list for every grid in the table; explicit sizes pin to px,
+	* everything else flexes. */
+	const colsTemplate = table.getAllLeafColumns().map((column) => {
+		if (column.id === SELECT_COL_ID) return `${SELECT_COL_WIDTH}px`;
+		const def = props.columns.find((d) => d.id === column.id || "accessorKey" in d && String(d.accessorKey) === column.id);
+		return def?.size != null ? `${def.size}px` : def?.minSize != null ? `minmax(${def.minSize}px, 1fr)` : "1fr";
+	}).join(" ");
+	function pinAttrs(column) {
+		const pinned = column.getIsPinned();
+		const attrs = { "data-pinned": pinned || void 0 };
+		if (!pinned) return attrs;
+		const offset = pinned === "start" ? column.getStart("start") : column.getAfter("end");
+		const index = leafIds.indexOf(column.id);
+		const prev = index > 0 ? table.getColumn(leafIds[index - 1]) : void 0;
+		const next = index < leafIds.length - 1 ? table.getColumn(leafIds[index + 1]) : void 0;
+		attrs["data-last-pinned"] = pinned === "start" && next?.getIsPinned() !== "start" ? "" : void 0;
+		attrs["data-first-pinned"] = pinned === "end" && prev?.getIsPinned() !== "end" ? "" : void 0;
+		attrs.style = { "--pin-offset": `${offset}px` };
+		return attrs;
+	}
+	const drag = useRef({
+		col: null,
+		row: null,
+		lastColDrop: null,
+		lastRowDrop: null
+	});
+	function clearColDrop() {
+		const el = drag.current.lastColDrop;
+		if (el) {
+			el.removeAttribute("data-drop-before-col");
+			el.removeAttribute("data-drop-after-col");
+			drag.current.lastColDrop = null;
+		}
+	}
+	function clearRowDrop() {
+		const el = drag.current.lastRowDrop;
+		if (el) {
+			el.removeAttribute("data-drop-before");
+			el.removeAttribute("data-drop-inside");
+			el.removeAttribute("data-drop-after");
+			el.style.removeProperty("--bs-drop-indent");
+			drag.current.lastRowDrop = null;
+		}
+	}
+	function onColDragStart(e) {
+		drag.current.col = e.currentTarget.dataset.id;
+		e.dataTransfer.effectAllowed = "move";
+		e.dataTransfer.setData("text/plain", drag.current.col);
+		e.currentTarget.setAttribute("data-dragging", "");
+	}
+	/** Header cells answer drops on either side of their midpoint; pinned
+	* columns and the drag source themselves never light up. */
+	function onColDragOver(column, e) {
+		if (!drag.current.col || drag.current.col === column.id || column.getIsPinned()) return;
+		e.preventDefault();
+		e.dataTransfer.dropEffect = "move";
+		const el = e.currentTarget;
+		if (drag.current.lastColDrop !== el) clearColDrop();
+		const box = el.getBoundingClientRect();
+		const before = e.clientX < box.left + box.width / 2;
+		mark(el, "data-drop-before-col", before);
+		mark(el, "data-drop-after-col", !before);
+		drag.current.lastColDrop = el;
+	}
+	function onColDragLeave(e) {
+		if (e.currentTarget === drag.current.lastColDrop) clearColDrop();
+	}
+	function onColDrop(column, e) {
+		e.preventDefault();
+		if (!drag.current.col || drag.current.col === column.id) return;
+		const box = e.currentTarget.getBoundingClientRect();
+		const before = e.clientX < box.left + box.width / 2;
+		const moved = drag.current.col;
+		const state = table.atoms.columnOrder.get();
+		const order = (state.length ? [...state] : table.getAllLeafColumns().map((c) => c.id)).filter((id) => id !== moved);
+		const at = order.indexOf(column.id);
+		order.splice(before ? at : at + 1, 0, moved);
+		const selectAt = order.indexOf(SELECT_COL_ID);
+		if (selectAt > 0) {
+			order.splice(selectAt, 1);
+			order.unshift(SELECT_COL_ID);
+		}
+		table.setColumnOrder(order);
+		props.onColumnReorder?.(order);
+		clearColDrop();
+	}
+	function onColDragEnd(e) {
+		drag.current.col = null;
+		e.currentTarget.removeAttribute("data-dragging");
+		clearColDrop();
+	}
+	/** Row dragging rests while any view (sorting, filtering, pagination
+	* past the first page) stands between the display order and the data
+	* order — a drop there would lie about what it reordered. */
+	const rowDraggable = reorderable && !mergeMode && table.atoms.sorting.get().length === 0 && !(filterable && (table.atoms.columnFilters.get().length || table.atoms.globalFilter.get())) && !(paginated && table.atoms.pagination.get().pageIndex !== 0);
+	function onRowDragStart(row, e) {
+		drag.current.row = String(row.id);
+		e.dataTransfer.effectAllowed = "move";
+		e.dataTransfer.setData("text/plain", drag.current.row);
+		e.currentTarget.setAttribute("data-dragging", "");
+	}
+	/** Where a tree drop lands: the outer bands of the target row read as
+	* sibling slots (40% each, so the insertion line answers the hand
+	* everywhere and indents to the reference row's own depth — cross a
+	* boundary and the level flips from the row above's to the row
+	* below's); the narrow middle band reads as "make child". A node
+	* never drops into its own subtree. */
+	function rowZone(row, e) {
+		const box = e.currentTarget.getBoundingClientRect();
+		const pos = (e.clientY - box.top) / box.height;
+		return pos < .4 ? "before" : pos > .6 ? "after" : "inside";
+	}
+	function onRowDragOver(row, e) {
+		if (!drag.current.row || drag.current.row === String(row.id)) return;
+		const el = e.currentTarget;
+		let zone;
+		if (tree) {
+			const hit = findNode(props.data, drag.current.row);
+			const dragged = hit?.list[hit.index];
+			if (!dragged || containsNode(dragged, String(row.id))) return;
+			zone = rowZone(row, e);
+		} else {
+			const box = el.getBoundingClientRect();
+			zone = e.clientY - box.top < box.height / 2 ? "before" : "after";
+		}
+		e.preventDefault();
+		e.dataTransfer.dropEffect = "move";
+		if (drag.current.lastRowDrop !== el) clearRowDrop();
+		mark(el, "data-drop-before", zone === "before");
+		mark(el, "data-drop-inside", zone === "inside");
+		mark(el, "data-drop-after", zone === "after");
+		el.style.setProperty("--bs-drop-indent", String(tree ? row.depth : 0));
+		drag.current.lastRowDrop = el;
+	}
+	function onRowDragLeave(e) {
+		if (e.currentTarget === drag.current.lastRowDrop) clearRowDrop();
+	}
+	function onRowDrop(row, e) {
+		e.preventDefault();
+		if (!drag.current.row || drag.current.row === String(row.id)) return;
+		const box = e.currentTarget.getBoundingClientRect();
+		const targetId = String(row.id);
+		const movedId = drag.current.row;
+		if (tree) {
+			const zone = rowZone(row, e);
+			const hit = findNode(props.data, movedId);
+			const dragged = hit?.list[hit.index];
+			if (!dragged || containsNode(dragged, targetId)) return;
+			let next = removeById(props.data, movedId);
+			if (zone === "inside") next = replaceById(next, targetId, (node) => ({
+				...node,
+				subRows: [...node.subRows ?? [], dragged]
+			}));
+			else {
+				const slot = findNode(next, targetId);
+				if (!slot) return;
+				slot.list.splice(slot.index + (zone === "after" ? 1 : 0), 0, dragged);
+			}
+			props.onRowReorder?.(next);
+		} else {
+			const pos = (e.clientY - box.top) / box.height;
+			const data = props.data;
+			const from = data.findIndex((r) => String(r.id) === movedId);
+			const to = data.findIndex((r) => String(r.id) === targetId);
+			if (from < 0 || to < 0) return;
+			const next = [...data];
+			const [movedRow] = next.splice(from, 1);
+			const slot = to > from ? to - 1 : to;
+			next.splice(pos < .5 ? slot : slot + 1, 0, movedRow);
+			props.onRowReorder?.(next);
+		}
+		clearRowDrop();
+	}
+	function onRowDragEnd(e) {
+		drag.current.row = null;
+		e.currentTarget.removeAttribute("data-dragging");
+		clearRowDrop();
+	}
+	function renderCell(cell, row) {
+		const column = cell.column;
+		if (cell.getIsCovered()) return null;
+		const isExpandHost = column.id === expandHostId;
+		const pin = pinAttrs(column);
+		const style = { ...pin.style };
+		delete pin.style;
+		const rowSpan = cell.getRowSpan();
+		if (rowSpan > 1) style.gridRow = `span ${rowSpan}`;
+		const spanned = rowSpan > 1 ? { "data-spanned": "" } : {};
+		let content;
+		if (column.id === SELECT_COL_ID) content = /* @__PURE__ */ jsx(SelectBox, {
+			checked: row.getIsSelected(),
+			indeterminate: false,
+			onToggle: () => row.toggleSelected(!row.getIsSelected()),
+			label: "Select row"
+		});
+		else if (isExpandHost) content = /* @__PURE__ */ jsxs("div", {
+			"data-scope": "table",
+			"data-part": "cell-main",
+			style: { "--bs-table-depth": String(row.depth) },
+			children: [/* @__PURE__ */ jsx("button", {
+				type: "button",
+				"data-scope": "table",
+				"data-part": "expander",
+				"data-expanded": row.getIsExpanded() || void 0,
+				"data-leaf": !row.getCanExpand() || void 0,
+				"aria-label": row.getIsExpanded() ? "Collapse row" : "Expand row",
+				onClick: () => row.toggleExpanded(),
+				children: /* @__PURE__ */ jsx(ChevronGlyph, {})
+			}), /* @__PURE__ */ jsx(FlexRender, { cell })]
+		});
+		else content = /* @__PURE__ */ jsx(FlexRender, { cell });
+		return /* @__PURE__ */ jsx("div", {
+			role: "cell",
+			"data-scope": "table",
+			"data-part": "cell",
+			"data-numeric": column.columnDef.meta?.numeric ? "" : void 0,
+			...spanned,
+			...pin,
+			style,
+			children: content
+		}, column.id);
+	}
+	function renderHeaderCell(header) {
+		const column = header.column;
+		const sorted = column.getIsSorted();
+		const canSort = column.getCanSort();
+		const canFilter = filterable && column.getCanFilter();
+		const canDrag = !!reorderable && column.id !== SELECT_COL_ID && !column.getIsPinned();
+		return /* @__PURE__ */ jsxs("div", {
+			role: "columnheader",
+			"data-scope": "table",
+			"data-part": "header-cell",
+			"data-sortable": canSort || void 0,
+			"data-sort": sorted || void 0,
+			"data-numeric": column.columnDef.meta?.numeric ? "" : void 0,
+			"data-draggable": canDrag || void 0,
+			"data-id": column.id,
+			draggable: canDrag || void 0,
+			"aria-sort": sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : void 0,
+			...pinAttrs(column),
+			onClick: canSort ? () => column.toggleSorting() : void 0,
+			onDragStart: canDrag ? onColDragStart : void 0,
+			onDragOver: canDrag ? (e) => onColDragOver(column, e) : void 0,
+			onDragLeave: canDrag ? onColDragLeave : void 0,
+			onDrop: canDrag ? (e) => onColDrop(column, e) : void 0,
+			onDragEnd: canDrag ? onColDragEnd : void 0,
+			children: [header.isPlaceholder || header.column.columnDef.header === "" ? null : /* @__PURE__ */ jsx(FlexRender, { header }), canFilter ? /* @__PURE__ */ jsx("input", {
+				type: "text",
+				"data-scope": "table",
+				"data-part": "header-filter",
+				"aria-label": `Filter ${column.id}`,
+				value: column.getFilterValue() ?? "",
+				placeholder: "Filter",
+				draggable: false,
+				onClick: (e) => e.stopPropagation(),
+				onDragStart: (e) => e.stopPropagation(),
+				onInput: (e) => column.setFilterValue(e.target.value)
+			}) : null]
+		}, column.id);
+	}
+	function renderRow(row, virtualIndex) {
+		const style = {};
+		if (virtual) {
+			const item = virtualRows[virtualIndex];
+			style.position = "absolute";
+			style.insetInlineStart = "0";
+			style.inlineSize = "100%";
+			style.transform = `translateY(${item.start}px)`;
+			style.blockSize = `${item.size}px`;
+		}
+		return /* @__PURE__ */ jsx("div", {
+			role: "row",
+			"data-scope": "table",
+			"data-part": "row",
+			"data-selected": row.getIsSelected() || void 0,
+			draggable: rowDraggable || void 0,
+			onDragStart: rowDraggable ? (e) => onRowDragStart(row, e) : void 0,
+			onDragOver: rowDraggable ? (e) => onRowDragOver(row, e) : void 0,
+			onDragLeave: rowDraggable ? onRowDragLeave : void 0,
+			onDrop: rowDraggable ? (e) => onRowDrop(row, e) : void 0,
+			onDragEnd: rowDraggable ? onRowDragEnd : void 0,
+			style,
+			children: row.getVisibleCells().map((cell) => renderCell(cell, row))
+		}, row.id);
+	}
+	const header = /* @__PURE__ */ jsx("div", {
+		role: "rowgroup",
+		"data-scope": "table",
+		"data-part": "header",
+		children: table.getHeaderGroups().map((group) => /* @__PURE__ */ jsx("div", {
+			role: "row",
+			"data-scope": "table",
+			"data-part": "row",
+			children: group.headers.map((header) => {
+				const column = header.column;
+				if (column.id === SELECT_COL_ID) {
+					const all = table.getIsAllRowsSelected();
+					return /* @__PURE__ */ jsx("div", {
+						role: "columnheader",
+						"data-scope": "table",
+						"data-part": "header-cell",
+						...pinAttrs(column),
+						children: /* @__PURE__ */ jsx(SelectBox, {
+							checked: all,
+							indeterminate: table.getIsSomeRowsSelected() && !all,
+							onToggle: () => table.toggleAllRowsSelected(!all),
+							label: "Select all rows"
+						})
+					}, column.id);
+				}
+				return renderHeaderCell(header);
+			})
+		}, group.id))
+	});
+	const body = /* @__PURE__ */ jsxs("div", {
+		role: "rowgroup",
+		"data-scope": "table",
+		"data-part": "body",
+		"data-merge": mergeMode || void 0,
+		style: virtual ? {
+			position: "relative",
+			blockSize: `${totalSize}px`
+		} : void 0,
+		children: [virtual ? virtualRows.map((_, index) => renderRow(rows[index], index)) : rows.map((row) => renderRow(row, -1)), rows.length === 0 ? /* @__PURE__ */ jsx("div", {
+			"data-scope": "table",
+			"data-part": "empty",
+			children: emptyText
+		}) : null]
+	});
+	const hasFooters = table.getFooterGroups().some((group) => group.headers.some((header) => header.column.columnDef.footer));
+	const footer = props.stickyFooter && hasFooters ? /* @__PURE__ */ jsx("div", {
+		role: "rowgroup",
+		"data-scope": "table",
+		"data-part": "footer",
+		children: table.getFooterGroups().map((group) => /* @__PURE__ */ jsx("div", {
+			role: "row",
+			"data-scope": "table",
+			"data-part": "row",
+			children: group.headers.map((header) => /* @__PURE__ */ jsx("div", {
+				role: "columnheader",
+				"data-scope": "table",
+				"data-part": "footer-cell",
+				"data-numeric": header.column.columnDef.meta?.numeric ? "" : void 0,
+				...pinAttrs(header.column),
+				children: header.isPlaceholder ? null : /* @__PURE__ */ jsx(FlexRender, { footer: header })
+			}, header.column.id))
+		}, group.id))
+	}) : null;
+	/** The bar only exists when the pagination feature is registered; its
+	* state reads stay inside this branch. */
+	const paginationBar = paginated ? (() => {
+		const pagination = table.atoms.pagination.get();
+		const rowCount = table.getRowCount();
+		const sizeItems = createListCollection({ items: pageSizeOptions.map((size) => ({
+			label: `${size} / page`,
+			value: String(size)
+		})) });
+		const pageSize = /* @__PURE__ */ jsxs(Select$1.Root, {
+			collection: sizeItems,
+			value: [String(pagination.pageSize)],
+			onValueChange: (details) => table.setPageSize(Number(details.value[0])),
+			positioning: { placement: "top-start" },
+			children: [/* @__PURE__ */ jsx(Select$1.Control, { children: /* @__PURE__ */ jsxs(Select$1.Trigger, {
+				"aria-label": "Rows per page",
+				children: [/* @__PURE__ */ jsx(Select$1.ValueText, {}), /* @__PURE__ */ jsx(Select$1.Indicator, { children: chevronDownGlyph() })]
+			}) }), /* @__PURE__ */ jsx(Select$1.Positioner, { children: /* @__PURE__ */ jsx(Select$1.Content, { children: sizeItems.items.map((item) => /* @__PURE__ */ jsxs(Select$1.Item, {
+				item,
+				children: [/* @__PURE__ */ jsx(Select$1.ItemText, { children: item.label }), /* @__PURE__ */ jsx(Select$1.ItemIndicator, { children: "✓" })]
+			}, item.value)) }) })]
+		});
+		const pager = /* @__PURE__ */ jsxs(Pagination.Root, {
+			count: rowCount,
+			pageSize: pagination.pageSize,
+			page: pagination.pageIndex + 1,
+			onPageChange: (details) => table.setPageIndex(details.page - 1),
+			children: [
+				/* @__PURE__ */ jsx(Pagination.PrevTrigger, { children: pageGlyph("start") }),
+				/* @__PURE__ */ jsx(Pagination.Context, { children: (scope) => scope.pages.map((page, index) => page.type === "ellipsis" ? /* @__PURE__ */ jsx(Pagination.Ellipsis, { index }, `e${index}`) : /* @__PURE__ */ jsx(Pagination.Item, {
+					type: "page",
+					value: page.value,
+					children: String(page.value)
+				}, page.value)) }),
+				/* @__PURE__ */ jsx(Pagination.NextTrigger, { children: pageGlyph("end") })
+			]
+		});
+		return /* @__PURE__ */ jsxs("div", {
+			"data-scope": "table",
+			"data-part": "pagination",
+			children: [/* @__PURE__ */ jsxs("span", {
+				"data-scope": "table",
+				"data-part": "page-status",
+				children: [rowCount, " rows"]
+			}), /* @__PURE__ */ jsxs("div", {
+				"data-scope": "table",
+				"data-part": "page-nav",
+				children: [pageSize, pager]
+			})]
+		});
+	})() : null;
+	const toolbar = filterable && showToolbar ? /* @__PURE__ */ jsx("div", {
+		"data-scope": "table",
+		"data-part": "toolbar",
+		children: /* @__PURE__ */ jsx("input", {
+			type: "search",
+			"data-scope": "table",
+			"data-part": "global-filter",
+			"aria-label": "Filter all columns",
+			placeholder: globalFilterPlaceholder,
+			value: table.atoms.globalFilter.get() ?? "",
+			onInput: (e) => table.setGlobalFilter(e.target.value)
+		})
+	}) : null;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-scope": "table",
+		"data-part": "root",
+		"data-reorderable": reorderable || void 0,
+		style: {
+			"--bs-table-row-height": `calc(${rowHeight}px * var(--bs-density-scale, 1))`,
+			...props.style
+		},
+		children: [
+			toolbar,
+			/* @__PURE__ */ jsx("div", {
+				"data-scope": "table",
+				"data-part": "viewport",
+				ref: viewport,
+				children: /* @__PURE__ */ jsxs("div", {
+					role: "table",
+					"data-scope": "table",
+					"data-part": "table",
+					style: { "--bs-table-cols": colsTemplate },
+					children: [
+						header,
+						body,
+						footer
+					]
+				})
+			}),
+			paginationBar
+		]
+	});
+}
+//#endregion
+export { DataTable, FlexRender, createColumnHelper };