@bysages/solid 0.2.2 → 0.3.0

package/dist/components/table/index.mjs

@@ -0,0 +1,837 @@
+import { Pagination } from "../pagination/index.mjs";
+import { t as Select$1 } from "../../select-CHaXbzLX.mjs";
+import { injectComponentStyle } from "@bysages/core";
+import { addEvent, createComponent, delegateEvents, effect, insert, memo, readShallow, ref, setAttribute, setStyleProperty, spread, style, template } from "@solidjs/web";
+import { For, createMemo, createSignal, onCleanup, onMount } from "solid-js";
+import { createListCollection } from "@ark-ui/solid/select";
+import { FlexRender, cellSpanningFeature, columnFilteringFeature, columnOrderingFeature, columnPinningFeature, columnSizingFeature, columnVisibilityFeature, createColumnHelper, createExpandedRowModel, createFilteredRowModel, createPaginatedRowModel, createSortedRowModel, createTable, 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 } from "@tanstack/solid-table";
+import { createVirtualizer } from "@tanstack/solid-virtual";
+//#region src/components/table/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<svg viewBox="0 0 24 24"width=14 height=14 fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<svg viewBox="0 0 24 24"width=14 height=14 fill=none stroke=currentColor stroke-width=2.5 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="m6 9 6 6 6-6">`);
+var _tmpl$3 = /* @__PURE__ */ template(`<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2.5 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="m9 6 6 6-6 6">`);
+var _tmpl$4 = /* @__PURE__ */ template(`<input>`);
+var _tmpl$5 = /* @__PURE__ */ template(`<div data-scope=table data-part=cell-main><button type=button data-scope=table data-part=expander>`);
+var _tmpl$6 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$7 = /* @__PURE__ */ template(`<div role=row data-scope=table data-part=row>`);
+var _tmpl$8 = /* @__PURE__ */ template(`<div><!><!>`);
+var _tmpl$9 = /* @__PURE__ */ template(`<input type=text data-scope=table data-part=header-filter placeholder=Filter>`);
+var _tmpl$10 = /* @__PURE__ */ template(`<div data-scope=table data-part=root><div data-scope=table data-part=viewport><div role=table data-scope=table data-part=table><div role=rowgroup data-scope=table data-part=header></div><div role=rowgroup data-scope=table data-part=body><!><!></div></div></div><!>`);
+var _tmpl$11 = /* @__PURE__ */ template(`<div data-scope=table data-part=toolbar><input type=search data-scope=table data-part=global-filter aria-label="Filter all columns">`);
+var _tmpl$12 = /* @__PURE__ */ template(`<div><input>`);
+var _tmpl$13 = /* @__PURE__ */ template(`<div data-scope=table data-part=empty>`);
+var _tmpl$14 = /* @__PURE__ */ template(`<div role=rowgroup data-scope=table data-part=footer>`);
+var _tmpl$15 = /* @__PURE__ */ template(`<div data-scope=table data-part=pagination><span data-scope=table data-part=page-status></span><div data-scope=table data-part=page-nav><!><!>`);
+/** The pagination bar's arrows — thin chevrons for the row of seals. */
+function pageGlyph(direction) {
+	var _el$ = _tmpl$();
+	var _el$2 = _el$.firstChild;
+	setAttribute(_el$2, "d", direction === "start" ? "m15 18-6-6 6-6" : "m9 18 6-6-6-6");
+	return _el$;
+}
+/** The page-size select's pointing chevron. */
+function chevronDownGlyph() {
+	return _tmpl$2();
+}
+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);
+}
+const chevronGlyph = _tmpl$3();
+function DataTable(props) {
+	injectComponentStyle("table");
+	if (props.virtual && props.merge) console.warn("[DataTable] `virtual` and `merge` are mutually exclusive; merge wins.");
+	/** 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. */
+	const features = 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,
+		...props.filterable ? {
+			columnFilteringFeature,
+			globalFilteringFeature,
+			filteredRowModel: createFilteredRowModel(),
+			filterFns: {
+				arrIncludes: filterFn_arrIncludes,
+				equals: filterFn_equals,
+				includesString: filterFn_includesString,
+				inDateRange: filterFn_inDateRange,
+				inNumberRange: filterFn_inNumberRange,
+				weakEquals: filterFn_weakEquals
+			}
+		} : {},
+		...props.paginated ? {
+			rowPaginationFeature,
+			paginatedRowModel: createPaginatedRowModel()
+		} : {}
+	});
+	const mergeIds = new Set(props.merge ?? []);
+	const defId = (def) => def.id ?? ("accessorKey" in def ? String(def.accessorKey) : "");
+	const columns = props.columns.map((def) => mergeIds.has(defId(def)) ? {
+		...def,
+		spanRows: true
+	} : def);
+	if (props.selectable) columns.unshift({
+		id: SELECT_COL_ID,
+		size: SELECT_COL_WIDTH,
+		enableSorting: false,
+		header: () => "",
+		cell: () => ""
+	});
+	const table = createTable({
+		features,
+		columns,
+		get data() {
+			return props.data;
+		},
+		enableSorting: props.sortable !== false,
+		getRowId: (row) => String(row.id),
+		getSubRows: (row) => row.subRows,
+		autoResetExpanded: false,
+		initialState: {
+			...props.initialSorting ? { sorting: props.initialSorting } : {},
+			...props.paginated ? { pagination: {
+				pageIndex: 0,
+				pageSize: props.pageSize ?? 10
+			} } : {},
+			...props.pinStart || props.pinEnd ? { columnPinning: {
+				start: props.pinStart ?? [],
+				end: props.pinEnd ?? []
+			} } : {}
+		}
+	});
+	const [viewport, setViewport] = createSignal(null);
+	const rows = createMemo(() => 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. */
+	const baseRowHeight = () => props.rowHeight ?? 40;
+	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 = createVirtualizer({
+		get count() {
+			return rows().length;
+		},
+		getScrollElement: () => viewport(),
+		estimateSize: () => baseRowHeight() * densityScale,
+		getItemKey: (index) => rows()[index]?.id ?? index,
+		overscan: 8
+	});
+	onMount(() => {
+		if (typeof MutationObserver === "undefined") return;
+		readDensityScale();
+		const densityObserver = new MutationObserver(() => {
+			readDensityScale();
+			virtualizer.measure();
+		});
+		densityObserver.observe(document.documentElement, {
+			attributes: true,
+			attributeFilter: ["data-density", "data-scene"]
+		});
+		onCleanup(() => densityObserver.disconnect());
+	});
+	const virtual = () => props.virtual && !props.merge;
+	const mergeMode = () => !props.virtual && !!props.merge;
+	/** Column ids of the visible leaves, for pin-seam bookkeeping. */
+	const leafIds = createMemo(() => table.getAllLeafColumns().map((c) => c.id));
+	const expandHostId = createMemo(() => {
+		const id = leafIds().find((id) => id !== SELECT_COL_ID);
+		return props.tree ? id : void 0;
+	});
+	/** Track list for every grid in the table; explicit sizes pin to px,
+	* everything else flexes. */
+	const colsTemplate = createMemo(() => 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(" "));
+	/** Inline placement for pinned cells plus the seam attributes the
+	* stylesheet reads. */
+	function pinAttrs(column) {
+		const pinned = column.getIsPinned();
+		if (!pinned) return { "data-pinned": void 0 };
+		const offset = pinned === "start" ? column.getStart("start") : column.getAfter("end");
+		const siblings = leafIds();
+		const index = siblings.indexOf(column.id);
+		const prev = index > 0 ? table.getColumn(siblings[index - 1]) : void 0;
+		const next = index < siblings.length - 1 ? table.getColumn(siblings[index + 1]) : void 0;
+		return {
+			"data-pinned": pinned,
+			"data-last-pinned": pinned === "start" && next?.getIsPinned() !== "start" ? "" : void 0,
+			"data-first-pinned": pinned === "end" && prev?.getIsPinned() !== "end" ? "" : void 0,
+			style: { "--pin-offset": `${offset}px` }
+		};
+	}
+	let dragColId = null;
+	let dragRowId = null;
+	let lastColDrop = null;
+	let lastRowDrop = null;
+	function clearColDrop() {
+		if (lastColDrop) {
+			lastColDrop.removeAttribute("data-drop-before-col");
+			lastColDrop.removeAttribute("data-drop-after-col");
+			lastColDrop = null;
+		}
+	}
+	function clearRowDrop() {
+		if (lastRowDrop) {
+			lastRowDrop.removeAttribute("data-drop-before");
+			lastRowDrop.removeAttribute("data-drop-inside");
+			lastRowDrop.removeAttribute("data-drop-after");
+			lastRowDrop.style.removeProperty("--bs-drop-indent");
+			lastRowDrop = null;
+		}
+	}
+	function onColDragStart(e) {
+		dragColId = e.currentTarget.dataset.id;
+		e.dataTransfer.effectAllowed = "move";
+		e.dataTransfer.setData("text/plain", dragColId);
+		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 (!dragColId || dragColId === column.id || column.getIsPinned()) return;
+		e.preventDefault();
+		e.dataTransfer.dropEffect = "move";
+		const el = e.currentTarget;
+		if (lastColDrop !== el) clearColDrop();
+		const before = e.clientX < el.getBoundingClientRect().left + el.getBoundingClientRect().width / 2;
+		mark(el, "data-drop-before-col", before);
+		mark(el, "data-drop-after-col", !before);
+		lastColDrop = el;
+	}
+	function onColDragLeave(e) {
+		if (e.currentTarget === lastColDrop) clearColDrop();
+	}
+	function onColDrop(column, e) {
+		e.preventDefault();
+		if (!dragColId || dragColId === column.id) return;
+		const el = e.currentTarget;
+		const before = e.clientX < el.getBoundingClientRect().left + el.getBoundingClientRect().width / 2;
+		const state = table.atoms.columnOrder.get();
+		const order = (state.length ? [...state] : table.getAllLeafColumns().map((c) => c.id)).filter((id) => id !== dragColId);
+		const at = order.indexOf(column.id);
+		order.splice(before ? at : at + 1, 0, dragColId);
+		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) {
+		dragColId = 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 = createMemo(() => {
+		if (!props.reorderable || mergeMode()) return false;
+		if (table.atoms.sorting.get().length) return false;
+		if (props.filterable && (table.atoms.columnFilters.get().length || table.atoms.globalFilter.get())) return false;
+		if (props.paginated && table.atoms.pagination.get().pageIndex !== 0) return false;
+		return true;
+	});
+	function onRowDragStart(row, e) {
+		dragRowId = String(row.id);
+		e.dataTransfer.effectAllowed = "move";
+		e.dataTransfer.setData("text/plain", dragRowId);
+		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 (!dragRowId || dragRowId === String(row.id)) return;
+		const el = e.currentTarget;
+		let zone;
+		if (props.tree) {
+			const hit = findNode(props.data, dragRowId);
+			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 (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(props.tree ? row.depth : 0));
+		lastRowDrop = el;
+	}
+	function onRowDragLeave(e) {
+		if (e.currentTarget === lastRowDrop) clearRowDrop();
+	}
+	function onRowDrop(row, e) {
+		e.preventDefault();
+		if (!dragRowId || dragRowId === String(row.id)) return;
+		const box = e.currentTarget.getBoundingClientRect();
+		const targetId = String(row.id);
+		if (props.tree) {
+			const zone = rowZone(row, e);
+			const hit = findNode(props.data, dragRowId);
+			const dragged = hit?.list[hit.index];
+			if (!dragged || containsNode(dragged, targetId)) return;
+			let next = removeById(props.data, dragRowId);
+			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 from = props.data.findIndex((r) => String(r.id) === dragRowId);
+			const to = props.data.findIndex((r) => String(r.id) === targetId);
+			if (from < 0 || to < 0) return;
+			const next = [...props.data];
+			const [moved] = next.splice(from, 1);
+			const slot = to > from ? to - 1 : to;
+			next.splice(pos < .5 ? slot : slot + 1, 0, moved);
+			props.onRowReorder?.(next);
+		}
+		clearRowDrop();
+	}
+	function onRowDragEnd(e) {
+		dragRowId = 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 pinStyle = pin.style ?? {};
+		delete pin.style;
+		const rowSpan = cell.getRowSpan();
+		const style = {
+			...pinStyle,
+			...rowSpan > 1 ? { "grid-row": `span ${rowSpan}` } : {}
+		};
+		let content;
+		if (column.id === SELECT_COL_ID) content = (() => {
+			var _el$5 = _tmpl$4();
+			spread(_el$5, [
+				{
+					type: "checkbox",
+					get checked() {
+						return row.getIsSelected();
+					}
+				},
+				{ indeterminate: false },
+				{
+					"aria-label": "Select row",
+					onchange: () => row.toggleSelected(!row.getIsSelected())
+				}
+			], false);
+			return _el$5;
+		})();
+		else if (isExpandHost) content = (() => {
+			var _el$6 = _tmpl$5();
+			var _el$7 = _el$6.firstChild;
+			_el$7._$$click = () => row.toggleExpanded();
+			insert(_el$7, chevronGlyph);
+			insert(_el$6, createComponent(FlexRender, { cell }), null);
+			effect(() => {
+				return {
+					e: String(row.depth),
+					t: row.getIsExpanded() || void 0,
+					a: !row.getCanExpand() || void 0,
+					o: row.getIsExpanded() ? "Collapse row" : "Expand row"
+				};
+			}, ({ e, t, a, o }, _p$) => {
+				e !== _p$?.e && setStyleProperty(_el$6, "--bs-table-depth", e);
+				t !== _p$?.t && setAttribute(_el$7, "data-expanded", t);
+				a !== _p$?.a && setAttribute(_el$7, "data-leaf", a);
+				o !== _p$?.o && setAttribute(_el$7, "aria-label", o);
+			});
+			return _el$6;
+		})();
+		else content = createComponent(FlexRender, { cell });
+		var _el$8 = _tmpl$6();
+		spread(_el$8, [
+			{
+				role: "cell",
+				"data-scope": "table",
+				"data-part": "cell",
+				get "data-numeric"() {
+					return column.columnDef.meta?.numeric ? "" : void 0;
+				},
+				"data-spanned": rowSpan > 1 ? "" : void 0
+			},
+			pin,
+			{ style }
+		], true);
+		insert(_el$8, content);
+		return _el$8;
+	}
+	function renderRow(row, virtualItem) {
+		const style$1 = virtualItem ? {
+			position: "absolute",
+			"inset-inline-start": "0",
+			"inline-size": "100%",
+			transform: `translateY(${virtualItem.start}px)`,
+			"block-size": `${virtualItem.size}px`
+		} : {};
+		const draggable = rowDraggable();
+		var _el$9 = _tmpl$7();
+		addEvent(_el$9, "dragend", draggable ? onRowDragEnd : void 0);
+		addEvent(_el$9, "drop", draggable ? (e) => onRowDrop(row, e) : void 0);
+		addEvent(_el$9, "dragleave", draggable ? onRowDragLeave : void 0);
+		addEvent(_el$9, "dragover", draggable ? (e) => onRowDragOver(row, e) : void 0);
+		addEvent(_el$9, "dragstart", draggable ? (e) => onRowDragStart(row, e) : void 0);
+		setAttribute(_el$9, "draggable", draggable || void 0);
+		insert(_el$9, createComponent(For, {
+			get each() {
+				return row.getVisibleCells();
+			},
+			children: (cell) => renderCell(cell, row)
+		}));
+		effect(() => {
+			return {
+				e: row.getIsSelected() || void 0,
+				t: readShallow(style$1)
+			};
+		}, ({ e, t }, _p$) => {
+			e !== _p$?.e && setAttribute(_el$9, "data-selected", e);
+			style(_el$9, t, _p$?.t);
+		});
+		return _el$9;
+	}
+	function renderHeaderCell(header) {
+		const column = header.column;
+		const sorted = column.getIsSorted();
+		const canSort = column.getCanSort();
+		const canFilter = props.filterable && column.getCanFilter();
+		const canDrag = !!props.reorderable && column.id !== SELECT_COL_ID && !column.getIsPinned();
+		var _el$10 = _tmpl$8();
+		var _el$11 = _el$10.firstChild;
+		var _el$12 = _el$11.nextSibling;
+		spread(_el$10, [
+			{
+				role: "columnheader",
+				"data-scope": "table",
+				"data-part": "header-cell",
+				"data-sortable": canSort || void 0,
+				"data-sort": sorted || void 0,
+				get "data-numeric"() {
+					return column.columnDef.meta?.numeric ? "" : void 0;
+				},
+				"data-draggable": canDrag || void 0,
+				get "data-id"() {
+					return column.id;
+				},
+				draggable: canDrag || void 0,
+				"aria-sort": sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : void 0
+			},
+			() => {
+				return 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
+			}
+		], true);
+		insert(_el$10, (() => {
+			var _c$ = memo(() => {
+				return !!(header.isPlaceholder || header.column.columnDef.header === "");
+			});
+			return () => {
+				return _c$() ? null : createComponent(FlexRender, { header });
+			};
+		})(), _el$11);
+		insert(_el$10, canFilter ? (() => {
+			var _el$13 = _tmpl$9();
+			_el$13._$$input = (e) => column.setFilterValue(e.target.value);
+			_el$13.addEventListener("dragstart", (e) => e.stopPropagation());
+			_el$13._$$click = (e) => e.stopPropagation();
+			effect(() => {
+				return {
+					e: `Filter ${column.id}`,
+					t: column.getFilterValue() ?? ""
+				};
+			}, ({ e, t }, _p$) => {
+				e !== _p$?.e && setAttribute(_el$13, "aria-label", e);
+				_el$13.value = t ?? "";
+			});
+			return _el$13;
+		})() : null, _el$12);
+		return _el$10;
+	}
+	var _el$14 = _tmpl$10();
+	var _el$15 = _el$14.firstChild;
+	var _el$16 = _el$15.firstChild;
+	var _el$17 = _el$16.firstChild;
+	var _el$18 = _el$17.nextSibling;
+	var _el$19 = _el$18.firstChild;
+	var _el$20 = _el$19.nextSibling;
+	var _el$21 = _el$15.nextSibling;
+	insert(_el$14, (() => {
+		var _c$2 = memo(() => {
+			return !!(props.filterable && (props.showToolbar ?? true));
+		});
+		return () => {
+			return _c$2() ? (() => {
+				var _el$22 = _tmpl$11();
+				var _el$23 = _el$22.firstChild;
+				_el$23._$$input = (e) => table.setGlobalFilter(e.target.value);
+				effect(() => {
+					return {
+						e: props.globalFilterPlaceholder,
+						t: table.atoms.globalFilter.get() ?? ""
+					};
+				}, ({ e, t }, _p$) => {
+					e !== _p$?.e && setAttribute(_el$23, "placeholder", e);
+					_el$23.value = t ?? "";
+				});
+				return _el$22;
+			})() : null;
+		};
+	})(), _el$15);
+	ref(() => {
+		return setViewport;
+	}, _el$15);
+	insert(_el$17, createComponent(For, {
+		get each() {
+			return table.getHeaderGroups();
+		},
+		children: (group) => (() => {
+			var _el$24 = _tmpl$7();
+			insert(_el$24, createComponent(For, {
+				get each() {
+					return group.headers;
+				},
+				children: (header) => {
+					const column = header.column;
+					if (column.id !== SELECT_COL_ID) return renderHeaderCell(header);
+					const all = table.getIsAllRowsSelected();
+					var _el$25 = _tmpl$12();
+					var _el$26 = _el$25.firstChild;
+					spread(_el$25, [{
+						role: "columnheader",
+						"data-scope": "table",
+						"data-part": "header-cell"
+					}, () => {
+						return pinAttrs(column);
+					}], true);
+					spread(_el$26, [
+						{
+							type: "checkbox",
+							checked: all
+						},
+						() => {
+							return { indeterminate: table.getIsSomeRowsSelected() && !all };
+						},
+						{
+							"aria-label": "Select all rows",
+							onchange: () => table.toggleAllRowsSelected(!all)
+						}
+					], false);
+					return _el$25;
+				}
+			}));
+			return _el$24;
+		})()
+	}));
+	insert(_el$18, (() => {
+		var _c$3 = memo(() => {
+			return !!virtual();
+		});
+		return () => {
+			return _c$3() ? createComponent(For, {
+				get each() {
+					return virtualizer.getVirtualItems();
+				},
+				children: (item) => renderRow(rows()[item.index], item)
+			}) : createComponent(For, {
+				get each() {
+					return rows();
+				},
+				children: (row) => renderRow(row)
+			});
+		};
+	})(), _el$19);
+	insert(_el$18, (() => {
+		var _c$4 = memo(() => {
+			return rows().length === 0;
+		});
+		return () => {
+			return _c$4() ? (() => {
+				var _el$27 = _tmpl$13();
+				insert(_el$27, () => {
+					return props.emptyText;
+				});
+				return _el$27;
+			})() : null;
+		};
+	})(), _el$20);
+	insert(_el$16, (() => {
+		var _c$5 = memo(() => {
+			return !!(props.stickyFooter && table.getFooterGroups().some((group) => group.headers.some((header) => header.column.columnDef.footer)));
+		});
+		return () => {
+			return _c$5() ? (() => {
+				var _el$28 = _tmpl$14();
+				insert(_el$28, createComponent(For, {
+					get each() {
+						return table.getFooterGroups();
+					},
+					children: (group) => (() => {
+						var _el$29 = _tmpl$7();
+						insert(_el$29, createComponent(For, {
+							get each() {
+								return group.headers;
+							},
+							children: (header) => (() => {
+								var _el$30 = _tmpl$6();
+								spread(_el$30, [{
+									role: "columnheader",
+									"data-scope": "table",
+									"data-part": "footer-cell",
+									get "data-numeric"() {
+										return header.column.columnDef.meta?.numeric ? "" : void 0;
+									}
+								}, () => {
+									return pinAttrs(header.column);
+								}], true);
+								insert(_el$30, (() => {
+									var _c$7 = memo(() => {
+										return !!header.isPlaceholder;
+									});
+									return () => {
+										return _c$7() ? null : createComponent(FlexRender, { footer: header });
+									};
+								})());
+								return _el$30;
+							})()
+						}));
+						return _el$29;
+					})()
+				}));
+				return _el$28;
+			})() : null;
+		};
+	})(), null);
+	insert(_el$14, (() => {
+		var _c$6 = memo(() => {
+			return !!props.paginated;
+		});
+		return () => {
+			return _c$6() ? (() => {
+				var _el$31 = _tmpl$15();
+				var _el$32 = _el$31.firstChild;
+				var _el$33 = _el$32.nextSibling;
+				var _el$34 = _el$33.firstChild;
+				var _el$35 = _el$34.nextSibling;
+				insert(_el$32, () => {
+					return `${table.getRowCount()} rows`;
+				});
+				insert(_el$33, createComponent(Select$1.Root, {
+					get collection() {
+						return createListCollection({ items: (props.pageSizeOptions ?? [
+							10,
+							20,
+							50
+						]).map((size) => ({
+							label: `${size} / page`,
+							value: String(size)
+						})) });
+					},
+					get value() {
+						return [String(table.atoms.pagination.get().pageSize)];
+					},
+					onValueChange: (details) => table.setPageSize(Number(details.value[0])),
+					positioning: { placement: "top-start" },
+					get children() {
+						return [createComponent(Select$1.Control, { get children() {
+							return createComponent(Select$1.Trigger, {
+								"aria-label": "Rows per page",
+								get children() {
+									return [createComponent(Select$1.ValueText, {}), createComponent(Select$1.Indicator, { get children() {
+										return chevronDownGlyph();
+									} })];
+								}
+							});
+						} }), createComponent(Select$1.Positioner, { get children() {
+							return createComponent(Select$1.Content, { get children() {
+								return createComponent(For, {
+									get each() {
+										return (props.pageSizeOptions ?? [
+											10,
+											20,
+											50
+										]).map((size) => ({
+											label: `${size} / page`,
+											value: String(size)
+										}));
+									},
+									children: (item) => createComponent(Select$1.Item, {
+										item,
+										get children() {
+											return [createComponent(Select$1.ItemText, { get children() {
+												return item.label;
+											} }), createComponent(Select$1.ItemIndicator, { children: "✓" })];
+										}
+									})
+								});
+							} });
+						} })];
+					}
+				}), _el$34);
+				insert(_el$33, createComponent(Pagination.Root, {
+					get count() {
+						return table.getRowCount();
+					},
+					get pageSize() {
+						return table.atoms.pagination.get().pageSize;
+					},
+					get page() {
+						return table.atoms.pagination.get().pageIndex + 1;
+					},
+					onPageChange: (details) => table.setPageIndex(details.page - 1),
+					get children() {
+						return [
+							createComponent(Pagination.PrevTrigger, { get children() {
+								return pageGlyph("start");
+							} }),
+							createComponent(Pagination.Context, { children: (scope) => createComponent(For, {
+								get each() {
+									return scope().pages;
+								},
+								children: (page, index) => page.type === "ellipsis" ? createComponent(Pagination.Ellipsis, { get index() {
+									return index();
+								} }) : createComponent(Pagination.Item, {
+									type: "page",
+									get value() {
+										return page.value;
+									},
+									get children() {
+										return String(page.value);
+									}
+								})
+							}) }),
+							createComponent(Pagination.NextTrigger, { get children() {
+								return pageGlyph("end");
+							} })
+						];
+					}
+				}), _el$35);
+				return _el$31;
+			})() : null;
+		};
+	})(), _el$21);
+	effect(() => {
+		return {
+			e: props.reorderable || void 0,
+			t: `calc(${baseRowHeight()}px * var(--bs-density-scale, 1))`,
+			a: colsTemplate(),
+			o: mergeMode() || void 0,
+			i: readShallow(virtual() ? {
+				position: "relative",
+				"block-size": `${virtualizer.getTotalSize()}px`
+			} : void 0)
+		};
+	}, ({ e, t, a, o, i }, _p$) => {
+		e !== _p$?.e && setAttribute(_el$14, "data-reorderable", e);
+		t !== _p$?.t && setStyleProperty(_el$14, "--bs-table-row-height", t);
+		a !== _p$?.a && setStyleProperty(_el$16, "--bs-table-cols", a);
+		o !== _p$?.o && setAttribute(_el$18, "data-merge", o);
+		style(_el$18, i, _p$?.i);
+	});
+	return _el$14;
+}
+delegateEvents(["click", "input"]);
+//#endregion
+export { DataTable, FlexRender, createColumnHelper };