@bysages/solid 0.4.3 → 0.5.0

package/dist/components/table/index.mjs

@@ -1,29 +1,30 @@
-import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
-import { r as iconNode } from "../../icon-DTqmJCd5.mjs";
-import { t as useElementId } from "../../id-2ygNzPHF.mjs";
-import { n as useComponentMessages, t as formatComponentMessage } from "../../use-component-messages-C4SCVYjD.mjs";
+import { n as withSelfRoot } from "../../family-B5HtE0on.mjs";
+import { r as iconNode } from "../../icon-DQqYA2fO.mjs";
+import { t as useElementId } from "../../id-DGvz-2rQ.mjs";
+import { n as useComponentMessages, t as formatComponentMessage } from "../../use-component-messages-DS9ppb4C.mjs";
 import { Pagination } from "../pagination/index.mjs";
-import { t as Select$1 } from "../../select-DI7pFspF.mjs";
-import { addEvent, createComponent, delegateEvents, effect, insert, memo, readShallow, ref, setAttribute, setStyleProperty, spread, style, template } from "@solidjs/web";
+import { t as Select$1 } from "../../select-NaNlrYUT.mjs";
+import { addEventListener, createComponent, delegateEvents, effect, insert, memo, mergeProps, setAttribute, setStyleProperty, spread, style, template, use } from "solid-js/web";
 import { injectComponentStyle } from "@bysages/core/styling";
 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(`<input>`);
-var _tmpl$2 = /* @__PURE__ */ template(`<div data-scope=table data-part=cell-main><button type=button data-scope=table data-part=expander>`);
-var _tmpl$3 = /* @__PURE__ */ template(`<div>`);
-var _tmpl$4 = /* @__PURE__ */ template(`<div role=row data-scope=table data-part=row>`);
-var _tmpl$5 = /* @__PURE__ */ template(`<div><!><!>`);
-var _tmpl$6 = /* @__PURE__ */ template(`<button type=button data-scope=table data-part=header-sort>`);
-var _tmpl$7 = /* @__PURE__ */ template(`<input type=text data-scope=table data-part=header-filter>`);
-var _tmpl$8 = /* @__PURE__ */ template(`<div data-scope=table data-part=root><div data-scope=table data-part=viewport tabindex=0><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$9 = /* @__PURE__ */ template(`<div data-scope=table data-part=toolbar><input type=search data-scope=table data-part=global-filter>`);
-var _tmpl$10 = /* @__PURE__ */ template(`<div><input>`);
-var _tmpl$11 = /* @__PURE__ */ template(`<div data-scope=table data-part=empty>`);
-var _tmpl$12 = /* @__PURE__ */ template(`<div role=rowgroup data-scope=table data-part=footer>`);
-var _tmpl$13 = /* @__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><!><!>`);
+// src/components/table/index.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<input type=checkbox>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<div data-scope=table data-part=cell-main><button type=button data-scope=table data-part=expander>`);
+var _tmpl$3 = /*#__PURE__*/ template(`<div role=cell data-scope=table data-part=cell>`);
+var _tmpl$4 = /*#__PURE__*/ template(`<div role=row data-scope=table data-part=row>`);
+var _tmpl$5 = /*#__PURE__*/ template(`<div role=columnheader data-scope=table data-part=header-cell>`);
+var _tmpl$6 = /*#__PURE__*/ template(`<button type=button data-scope=table data-part=header-sort>`);
+var _tmpl$7 = /*#__PURE__*/ template(`<input type=text data-scope=table data-part=header-filter>`);
+var _tmpl$8 = /*#__PURE__*/ template(`<div data-scope=table data-part=root><div data-scope=table data-part=viewport tabindex=0><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>`);
+var _tmpl$9 = /*#__PURE__*/ template(`<div data-scope=table data-part=toolbar><input type=search data-scope=table data-part=global-filter>`);
+var _tmpl$0 = /*#__PURE__*/ template(`<div role=columnheader data-scope=table data-part=header-cell><input type=checkbox>`);
+var _tmpl$1 = /*#__PURE__*/ template(`<div data-scope=table data-part=empty>`);
+var _tmpl$10 = /*#__PURE__*/ template(`<div role=rowgroup data-scope=table data-part=footer>`);
+var _tmpl$11 = /*#__PURE__*/ template(`<div role=cell data-scope=table data-part=footer-cell>`);
+var _tmpl$12 = /*#__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 pageIcon(direction) {
 	return direction === "start" ? iconNode("chevron-left", {
@@ -429,61 +430,46 @@ const DataTable = withSelfRoot(function DataTable(props) {
 		let content;
 		if (column.id === SELECT_COL_ID) content = (() => {
 			var _el$ = _tmpl$();
-			spread(_el$, [
-				{
-					type: "checkbox",
-					get checked() {
-						return row.getIsSelected();
-					}
+			spread(_el$, mergeProps({ get checked() {
+				return row.getIsSelected();
+			} }, { indeterminate: false }, {
+				get ["aria-label"]() {
+					return messages().table.selectRow;
 				},
-				{ indeterminate: false },
-				{
-					get "aria-label"() {
-						return messages().table.selectRow;
-					},
-					onchange: () => row.toggleSelected(!row.getIsSelected())
-				}
-			], false);
+				"onchange": () => row.toggleSelected(!row.getIsSelected())
+			}), false, false);
 			return _el$;
 		})();
 		else if (isExpandHost) content = (() => {
-			var _el$2 = _tmpl$2();
-			var _el$3 = _el$2.firstChild;
-			_el$3._$$click = () => row.toggleExpanded();
+			var _el$2 = _tmpl$2(), _el$3 = _el$2.firstChild;
+			_el$3.$$click = () => row.toggleExpanded();
 			insert(_el$3, chevronIcon);
 			insert(_el$2, createComponent(FlexRender, { cell }), null);
-			effect(() => {
-				return {
-					e: String(row.depth),
-					t: row.getIsExpanded() || void 0,
-					a: !row.getCanExpand() || void 0,
-					o: row.getIsExpanded() ? messages().table.collapseRow : messages().table.expandRow
-				};
-			}, ({ e, t, a, o }, _p$) => {
-				e !== _p$?.e && setStyleProperty(_el$2, "--bs-table-depth", e);
-				t !== _p$?.t && setAttribute(_el$3, "data-expanded", t);
-				a !== _p$?.a && setAttribute(_el$3, "data-leaf", a);
-				o !== _p$?.o && setAttribute(_el$3, "aria-label", o);
+			effect((_p$) => {
+				var _v$ = String(row.depth), _v$2 = row.getIsExpanded() || void 0, _v$3 = !row.getCanExpand() || void 0, _v$4 = row.getIsExpanded() ? messages().table.collapseRow : messages().table.expandRow;
+				_v$ !== _p$.e && setStyleProperty(_el$2, "--bs-table-depth", _p$.e = _v$);
+				_v$2 !== _p$.t && setAttribute(_el$3, "data-expanded", _p$.t = _v$2);
+				_v$3 !== _p$.a && setAttribute(_el$3, "data-leaf", _p$.a = _v$3);
+				_v$4 !== _p$.o && setAttribute(_el$3, "aria-label", _p$.o = _v$4);
+				return _p$;
+			}, {
+				e: void 0,
+				t: void 0,
+				a: void 0,
+				o: void 0
 			});
 			return _el$2;
 		})();
 		else content = createComponent(FlexRender, { cell });
-		var _el$4 = _tmpl$3();
-		spread(_el$4, [
-			{
-				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$4, content);
-		return _el$4;
+		return (() => {
+			var _el$4 = _tmpl$3();
+			setAttribute(_el$4, "data-spanned", rowSpan > 1 ? "" : void 0);
+			spread(_el$4, mergeProps({ get ["data-numeric"]() {
+				return column.columnDef.meta?.numeric ? "" : void 0;
+			} }, pin, { "style": style }), false, true);
+			insert(_el$4, content);
+			return _el$4;
+		})();
 	}
 	function renderRow(row, virtualItem) {
 		const style$1 = virtualItem ? {
@@ -491,29 +477,31 @@ const DataTable = withSelfRoot(function DataTable(props) {
 			"--bs-table-virtual-row-size": `${virtualItem.size}px`
 		} : {};
 		const draggable = rowDraggable();
-		var _el$5 = _tmpl$4();
-		addEvent(_el$5, "dragend", draggable ? onRowDragEnd : void 0);
-		addEvent(_el$5, "drop", draggable ? (e) => onRowDrop(row, e) : void 0);
-		addEvent(_el$5, "dragleave", draggable ? onRowDragLeave : void 0);
-		addEvent(_el$5, "dragover", draggable ? (e) => onRowDragOver(row, e) : void 0);
-		addEvent(_el$5, "dragstart", draggable ? (e) => onRowDragStart(row, e) : void 0);
-		setAttribute(_el$5, "draggable", draggable || void 0);
-		insert(_el$5, 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$5, "data-selected", e);
-			style(_el$5, t, _p$?.t);
-		});
-		return _el$5;
+		return (() => {
+			var _el$5 = _tmpl$4();
+			addEventListener(_el$5, "dragend", draggable ? onRowDragEnd : void 0);
+			addEventListener(_el$5, "drop", draggable ? (e) => onRowDrop(row, e) : void 0);
+			addEventListener(_el$5, "dragleave", draggable ? onRowDragLeave : void 0);
+			addEventListener(_el$5, "dragover", draggable ? (e) => onRowDragOver(row, e) : void 0);
+			addEventListener(_el$5, "dragstart", draggable ? (e) => onRowDragStart(row, e) : void 0);
+			setAttribute(_el$5, "draggable", draggable || void 0);
+			insert(_el$5, createComponent(For, {
+				get each() {
+					return row.getVisibleCells();
+				},
+				children: (cell) => renderCell(cell, row)
+			}));
+			effect((_p$) => {
+				var _v$5 = row.getIsSelected() || void 0, _v$6 = style$1;
+				_v$5 !== _p$.e && setAttribute(_el$5, "data-selected", _p$.e = _v$5);
+				_p$.t = style(_el$5, _v$6, _p$.t);
+				return _p$;
+			}, {
+				e: void 0,
+				t: void 0
+			});
+			return _el$5;
+		})();
 	}
 	function renderHeaderCell(header) {
 		const column = header.column;
@@ -521,154 +509,111 @@ const DataTable = withSelfRoot(function DataTable(props) {
 		const canSort = column.getCanSort();
 		const canFilter = props.filterable && column.getCanFilter();
 		const canDrag = !!props.reorderable && column.id !== SELECT_COL_ID && !column.getIsPinned();
-		var _el$6 = _tmpl$5();
-		var _el$7 = _el$6.firstChild;
-		var _el$8 = _el$7.nextSibling;
-		spread(_el$6, [
-			{
-				role: "columnheader",
-				"data-scope": "table",
-				"data-part": "header-cell",
-				"data-sortable": canSort || void 0,
-				"data-sort": sorted || void 0,
-				get "data-numeric"() {
+		return (() => {
+			var _el$6 = _tmpl$5();
+			setAttribute(_el$6, "data-sortable", canSort || void 0);
+			setAttribute(_el$6, "data-sort", sorted || void 0);
+			setAttribute(_el$6, "data-draggable", canDrag || void 0);
+			setAttribute(_el$6, "draggable", canDrag || void 0);
+			setAttribute(_el$6, "aria-sort", sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : void 0);
+			spread(_el$6, mergeProps({
+				get ["data-numeric"]() {
 					return column.columnDef.meta?.numeric ? "" : void 0;
 				},
-				"data-draggable": canDrag || void 0,
-				get "data-id"() {
+				get ["data-id"]() {
 					return column.id;
-				},
-				draggable: canDrag || void 0,
-				"aria-sort": sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : void 0
-			},
-			() => {
-				return pinAttrs(column);
-			},
-			{
-				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$6, (() => {
-			var _c$ = memo(() => {
-				return !!(header.isPlaceholder || header.column.columnDef.header === "");
-			});
-			return () => {
-				return _c$() ? null : canSort ? (() => {
-					var _el$9 = _tmpl$6();
-					_el$9._$$click = () => column.toggleSorting();
-					insert(_el$9, createComponent(FlexRender, { header }));
-					return _el$9;
+				}
+			}, () => pinAttrs(column), {
+				"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
+			}), false, true);
+			insert(_el$6, (() => {
+				var _c$ = memo(() => !!(header.isPlaceholder || header.column.columnDef.header === ""));
+				return () => _c$() ? null : canSort ? (() => {
+					var _el$7 = _tmpl$6();
+					_el$7.$$click = () => column.toggleSorting();
+					insert(_el$7, createComponent(FlexRender, { header }));
+					return _el$7;
 				})() : createComponent(FlexRender, { header });
-			};
-		})(), _el$7);
-		insert(_el$6, canFilter ? (() => {
-			var _el$10 = _tmpl$7();
-			_el$10._$$input = (e) => column.setFilterValue(e.target.value);
-			_el$10.addEventListener("dragstart", (e) => e.stopPropagation());
-			effect(() => {
-				return {
-					e: formatComponentMessage(messages().table.filterColumn, { name: column.id }),
-					t: column.getFilterValue() ?? "",
-					a: messages().command.filter
-				};
-			}, ({ e, t, a }, _p$) => {
-				e !== _p$?.e && setAttribute(_el$10, "aria-label", e);
-				_el$10.value = t ?? "";
-				a !== _p$?.a && setAttribute(_el$10, "placeholder", a);
-			});
-			return _el$10;
-		})() : null, _el$8);
-		return _el$6;
+			})(), null);
+			insert(_el$6, canFilter ? (() => {
+				var _el$8 = _tmpl$7();
+				_el$8.$$input = (e) => column.setFilterValue(e.target.value);
+				_el$8.addEventListener("dragstart", (e) => e.stopPropagation());
+				setAttribute(_el$8, "draggable", false);
+				effect((_p$) => {
+					var _v$7 = formatComponentMessage(messages().table.filterColumn, { name: column.id }), _v$8 = messages().command.filter;
+					_v$7 !== _p$.e && setAttribute(_el$8, "aria-label", _p$.e = _v$7);
+					_v$8 !== _p$.t && setAttribute(_el$8, "placeholder", _p$.t = _v$8);
+					return _p$;
+				}, {
+					e: void 0,
+					t: void 0
+				});
+				effect(() => _el$8.value = column.getFilterValue() ?? "");
+				return _el$8;
+			})() : null, null);
+			return _el$6;
+		})();
 	}
-	var _el$11 = _tmpl$8();
-	var _el$12 = _el$11.firstChild;
-	var _el$13 = _el$12.firstChild;
-	var _el$14 = _el$13.firstChild;
-	var _el$15 = _el$14.nextSibling;
-	var _el$16 = _el$15.firstChild;
-	var _el$17 = _el$16.nextSibling;
-	var _el$18 = _el$12.nextSibling;
-	insert(_el$11, (() => {
-		var _c$2 = memo(() => {
-			return !!(props.filterable && (props.showToolbar ?? true));
-		});
-		return () => {
-			return _c$2() ? (() => {
-				var _el$19 = _tmpl$9();
-				var _el$20 = _el$19.firstChild;
-				_el$20._$$input = (e) => table.setGlobalFilter(e.target.value);
-				effect(() => {
-					return {
-						e: messages().table.filterAll,
-						t: props.globalFilterPlaceholder,
-						a: table.atoms.globalFilter.get() ?? ""
-					};
-				}, ({ e, t, a }, _p$) => {
-					e !== _p$?.e && setAttribute(_el$20, "aria-label", e);
-					t !== _p$?.t && setAttribute(_el$20, "placeholder", t);
-					_el$20.value = a ?? "";
+	return (() => {
+		var _el$9 = _tmpl$8(), _el$0 = _el$9.firstChild, _el$1 = _el$0.firstChild, _el$10 = _el$1.firstChild, _el$11 = _el$10.nextSibling;
+		insert(_el$9, (() => {
+			var _c$2 = memo(() => !!(props.filterable && (props.showToolbar ?? true)));
+			return () => _c$2() ? (() => {
+				var _el$12 = _tmpl$9(), _el$13 = _el$12.firstChild;
+				_el$13.$$input = (e) => table.setGlobalFilter(e.target.value);
+				effect((_p$) => {
+					var _v$14 = messages().table.filterAll, _v$15 = props.globalFilterPlaceholder;
+					_v$14 !== _p$.e && setAttribute(_el$13, "aria-label", _p$.e = _v$14);
+					_v$15 !== _p$.t && setAttribute(_el$13, "placeholder", _p$.t = _v$15);
+					return _p$;
+				}, {
+					e: void 0,
+					t: void 0
 				});
-				return _el$19;
+				effect(() => _el$13.value = table.atoms.globalFilter.get() ?? "");
+				return _el$12;
 			})() : null;
-		};
-	})(), _el$12);
-	ref(() => {
-		return setViewport;
-	}, _el$12);
-	insert(_el$14, createComponent(For, {
-		get each() {
-			return table.getHeaderGroups();
-		},
-		children: (group) => (() => {
-			var _el$21 = _tmpl$4();
-			insert(_el$21, 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$22 = _tmpl$10();
-					var _el$23 = _el$22.firstChild;
-					spread(_el$22, [{
-						role: "columnheader",
-						"data-scope": "table",
-						"data-part": "header-cell"
-					}, () => {
-						return pinAttrs(column);
-					}], true);
-					spread(_el$23, [
-						{
-							type: "checkbox",
-							checked: all
-						},
-						() => {
-							return { indeterminate: table.getIsSomeRowsSelected() && !all };
-						},
-						{
-							get "aria-label"() {
-								return messages().table.selectAllRows;
-							},
-							onchange: () => table.toggleAllRowsSelected(!all)
-						}
-					], false);
-					return _el$22;
-				}
-			}));
-			return _el$21;
-		})()
-	}));
-	insert(_el$15, (() => {
-		var _c$3 = memo(() => {
-			return !!virtual();
-		});
-		return () => {
-			return _c$3() ? createComponent(For, {
+		})(), _el$0);
+		use(setViewport, _el$0);
+		insert(_el$10, createComponent(For, {
+			get each() {
+				return table.getHeaderGroups();
+			},
+			children: (group) => (() => {
+				var _el$14 = _tmpl$4();
+				insert(_el$14, 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();
+						return (() => {
+							var _el$15 = _tmpl$0(), _el$16 = _el$15.firstChild;
+							spread(_el$15, mergeProps(() => pinAttrs(column)), false, true);
+							_el$16.checked = all;
+							spread(_el$16, mergeProps(() => ({ indeterminate: table.getIsSomeRowsSelected() && !all }), {
+								get ["aria-label"]() {
+									return messages().table.selectAllRows;
+								},
+								"onchange": () => table.toggleAllRowsSelected(!all)
+							}), false, false);
+							return _el$15;
+						})();
+					}
+				}));
+				return _el$14;
+			})()
+		}));
+		insert(_el$11, (() => {
+			var _c$3 = memo(() => !!virtual());
+			return () => _c$3() ? createComponent(For, {
 				get each() {
 					return virtualRows();
 				},
@@ -679,84 +624,53 @@ const DataTable = withSelfRoot(function DataTable(props) {
 				},
 				children: (row) => renderRow(row)
 			});
-		};
-	})(), _el$16);
-	insert(_el$15, (() => {
-		var _c$4 = memo(() => {
-			return rows().length === 0;
-		});
-		return () => {
-			return _c$4() ? (() => {
-				var _el$24 = _tmpl$11();
-				insert(_el$24, () => {
-					return props.emptyText ?? messages().table.empty;
-				});
-				return _el$24;
+		})(), null);
+		insert(_el$11, (() => {
+			var _c$4 = memo(() => rows().length === 0);
+			return () => _c$4() ? (() => {
+				var _el$17 = _tmpl$1();
+				insert(_el$17, () => props.emptyText ?? messages().table.empty);
+				return _el$17;
 			})() : null;
-		};
-	})(), _el$17);
-	insert(_el$13, (() => {
-		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$25 = _tmpl$12();
-				insert(_el$25, createComponent(For, {
+		})(), null);
+		insert(_el$1, (() => {
+			var _c$5 = memo(() => !!(props.stickyFooter && table.getFooterGroups().some((group) => group.headers.some((header) => header.column.columnDef.footer))));
+			return () => _c$5() ? (() => {
+				var _el$18 = _tmpl$10();
+				insert(_el$18, createComponent(For, {
 					get each() {
 						return table.getFooterGroups();
 					},
 					children: (group) => (() => {
-						var _el$26 = _tmpl$4();
-						insert(_el$26, createComponent(For, {
+						var _el$19 = _tmpl$4();
+						insert(_el$19, createComponent(For, {
 							get each() {
 								return group.headers;
 							},
 							children: (header) => (() => {
-								var _el$27 = _tmpl$3();
-								spread(_el$27, [{
-									role: "cell",
-									"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$27, (() => {
-									var _c$7 = memo(() => {
-										return !!header.isPlaceholder;
-									});
-									return () => {
-										return _c$7() ? null : createComponent(FlexRender, { footer: header });
-									};
+								var _el$20 = _tmpl$11();
+								spread(_el$20, mergeProps({ get ["data-numeric"]() {
+									return header.column.columnDef.meta?.numeric ? "" : void 0;
+								} }, () => pinAttrs(header.column)), false, true);
+								insert(_el$20, (() => {
+									var _c$7 = memo(() => !!header.isPlaceholder);
+									return () => _c$7() ? null : createComponent(FlexRender, { footer: header });
 								})());
-								return _el$27;
+								return _el$20;
 							})()
 						}));
-						return _el$26;
+						return _el$19;
 					})()
 				}));
-				return _el$25;
+				return _el$18;
 			})() : null;
-		};
-	})(), null);
-	insert(_el$11, (() => {
-		var _c$6 = memo(() => {
-			return !!props.paginated;
-		});
-		return () => {
-			return _c$6() ? (() => {
-				var _el$28 = _tmpl$13();
-				var _el$29 = _el$28.firstChild;
-				var _el$30 = _el$29.nextSibling;
-				var _el$31 = _el$30.firstChild;
-				var _el$32 = _el$31.nextSibling;
-				insert(_el$29, () => {
-					return formatComponentMessage(messages().table.rowsCount, { count: table.getRowCount() });
-				});
-				insert(_el$30, createComponent(Select$1.Root, {
+		})(), null);
+		insert(_el$9, (() => {
+			var _c$6 = memo(() => !!props.paginated);
+			return () => _c$6() ? (() => {
+				var _el$21 = _tmpl$12(), _el$22 = _el$21.firstChild, _el$23 = _el$22.nextSibling;
+				insert(_el$22, () => formatComponentMessage(messages().table.rowsCount, { count: table.getRowCount() }));
+				insert(_el$23, createComponent(Select$1.Root, {
 					get id() {
 						return id();
 					},
@@ -778,7 +692,7 @@ const DataTable = withSelfRoot(function DataTable(props) {
 					get children() {
 						return [createComponent(Select$1.Control, { get children() {
 							return createComponent(Select$1.Trigger, {
-								get "aria-label"() {
+								get ["aria-label"]() {
 									return messages().table.rowsPerPage;
 								},
 								get children() {
@@ -817,8 +731,8 @@ const DataTable = withSelfRoot(function DataTable(props) {
 							} });
 						} })];
 					}
-				}), _el$31);
-				insert(_el$30, createComponent(Pagination.Root, {
+				}), null);
+				insert(_el$23, createComponent(Pagination.Root, {
 					get id() {
 						return `${id()}-pagination`;
 					},
@@ -858,32 +772,31 @@ const DataTable = withSelfRoot(function DataTable(props) {
 							} })
 						];
 					}
-				}), _el$32);
-				return _el$28;
+				}), null);
+				return _el$21;
 			})() : null;
-		};
-	})(), _el$18);
-	effect(() => {
-		return {
-			e: props.reorderable || void 0,
-			t: props.striped || void 0,
-			a: `calc(${baseRowHeight()}px * var(--bs-density-scale, 1))`,
-			o: colsTemplate(),
-			i: mergeMode() || void 0,
-			n: virtual() || void 0,
-			s: readShallow(virtual() ? { "--bs-table-virtual-total": `${totalSize()}px` } : void 0)
-		};
-	}, ({ e, t, a, o, i, n, s }, _p$) => {
-		e !== _p$?.e && setAttribute(_el$11, "data-reorderable", e);
-		t !== _p$?.t && setAttribute(_el$11, "data-striped", t);
-		a !== _p$?.a && setStyleProperty(_el$11, "--bs-table-row-height", a);
-		o !== _p$?.o && setStyleProperty(_el$13, "--bs-table-cols", o);
-		i !== _p$?.i && setAttribute(_el$15, "data-merge", i);
-		n !== _p$?.n && setAttribute(_el$15, "data-virtual", n);
-		style(_el$15, s, _p$?.s);
-	});
-	return _el$11;
+		})(), null);
+		effect((_p$) => {
+			var _v$9 = props.reorderable || void 0, _v$0 = props.striped || void 0, _v$1 = `calc(${baseRowHeight()}px * var(--bs-density-scale, 1))`, _v$10 = colsTemplate(), _v$11 = mergeMode() || void 0, _v$12 = virtual() || void 0, _v$13 = virtual() ? { "--bs-table-virtual-total": `${totalSize()}px` } : void 0;
+			_v$9 !== _p$.e && setAttribute(_el$9, "data-reorderable", _p$.e = _v$9);
+			_v$0 !== _p$.t && setAttribute(_el$9, "data-striped", _p$.t = _v$0);
+			_v$1 !== _p$.a && setStyleProperty(_el$9, "--bs-table-row-height", _p$.a = _v$1);
+			_v$10 !== _p$.o && setStyleProperty(_el$1, "--bs-table-cols", _p$.o = _v$10);
+			_v$11 !== _p$.i && setAttribute(_el$11, "data-merge", _p$.i = _v$11);
+			_v$12 !== _p$.n && setAttribute(_el$11, "data-virtual", _p$.n = _v$12);
+			_p$.s = style(_el$11, _v$13, _p$.s);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0,
+			o: void 0,
+			i: void 0,
+			n: void 0,
+			s: void 0
+		});
+		return _el$9;
+	})();
 });
 delegateEvents(["click", "input"]);
-//#endregion
 export { DataTable, FlexRender, createColumnHelper };