@proyecto-viviana/solidaria-components 0.5.0 → 0.7.0-rc.0

package/dist/Table.js

@@ -2,12 +2,15 @@ import { dataAttr, filterDOMProps, useRenderProps } from "./utils.js";
 import { ButtonContext } from "./Button.js";
 import { SharedElementTransition } from "./SharedElementTransition.js";
 import { useLinkProps, useRouter } from "./RouterProvider.js";
-import { CollectionRendererContext, useCollectionRenderer } from "./Collection.js";
-import { r as useVirtualizerContext } from "./Virtualizer2.js";
-import { getNormalizedDropTargetKey, mergePersistedKeysIntoVirtualRange, useDndPersistedKeys, useRenderDropIndicator } from "./DragAndDrop.js";
-import { className, createComponent, effect, getNextElement, getNextMarker, insert, memo, mergeProps, runHydrationEvents, setAttribute, setStyleProperty, spread, style, template, use } from "solid-js/web";
-import { For, Show, createContext, createEffect, createMemo, createSignal, createUniqueId, onCleanup, splitProps, untrack, useContext } from "solid-js";
-import { createFocusRing, createHover, createTable, createTableCell, createTableColumnHeader, createTableColumnResize, createTableRow, createTableRowGroup, createTableSelectAllCheckbox, createTableSelectionCheckbox, getTableData, isFocusVisible, mergeProps as mergeProps$2 } from "@proyecto-viviana/solidaria";
+import { t as racIntlStrings } from "./intl.js";
+import { CollectionRendererContext, renderCollectionDropSlots, useCollectionRenderer, useCollectionRoot } from "./Collection.js";
+import { o as useVirtualizerContext, t as PersistedVirtualItem } from "./Virtualizer2.js";
+import { getNormalizedDropTargetKey, indexesOutsideRange, mergePersistedKeysIntoVirtualRange, useDndPersistedKeys, useRenderDropIndicator } from "./DragAndDrop.js";
+import { createTreeDropTargetDelegate } from "./Tree.js";
+import { className, createComponent, effect, getNextElement, getNextMarker, insert, memo, mergeProps, readShallow, ref, runHydrationEvents, scope, setAttribute, spread, style, template } from "@solidjs/web";
+import { For, Show, createContext, createEffect, createMemo, createRenderEffect, createSignal, createTrackedEffect, createUniqueId, untrack, useContext } from "solid-js";
+import { createFocusRing, createHover, createStringFormatter, createTable, createTableCell, createTableColumnHeader, createTableColumnResize, createTableRow, createTableRowGroup, createTableSelectAllCheckbox, createTableSelectionCheckbox, getTableData, isFocusVisible, mergeProps as mergeProps$1, useLocale } from "@proyecto-viviana/solidaria";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 import { createTableCollection, createTableColumnResizeState, createTableState, createTreeGridState } from "@proyecto-viviana/solid-stately";
 //#region src/Table.tsx
 /**
@@ -16,8 +19,21 @@ import { createTableCollection, createTableColumnResizeState, createTableState,
 * A pre-wired headless table that combines state + aria hooks.
 * Based on react-aria-components/src/Table.tsx
 */
-var _tmpl$ = /*#__PURE__*/ template(`<table>`), _tmpl$2 = /*#__PURE__*/ template(`<tr role=row>`), _tmpl$3 = /*#__PURE__*/ template(`<thead><tr role=row>`), _tmpl$4 = /*#__PURE__*/ template(`<th>`), _tmpl$5 = /*#__PURE__*/ template(`<tr role=row data-empty-state><th role=rowheader>`), _tmpl$6 = /*#__PURE__*/ template(`<tr role=presentation aria-hidden=true data-virtualizer-spacer=top><td style=padding:0;border:0>`), _tmpl$7 = /*#__PURE__*/ template(`<tr role=presentation aria-hidden=true data-virtualizer-spacer=bottom><td style=padding:0;border:0>`), _tmpl$8 = /*#__PURE__*/ template(`<tbody><!$><!/><!$><!/>`), _tmpl$9 = /*#__PURE__*/ template(`<tfoot>`), _tmpl$0 = /*#__PURE__*/ template(`<div role=progressbar aria-label=loading>`), _tmpl$1 = /*#__PURE__*/ template(`<tr inert style=position:relative;width:0;height:0;overflow:hidden><td><div data-testid=loadMoreSentinel style=position:absolute;height:1px;width:1px>`), _tmpl$10 = /*#__PURE__*/ template(`<tr role=row tabindex=0 data-loading><td role=rowheader>`), _tmpl$11 = /*#__PURE__*/ template(`<tr>`), _tmpl$12 = /*#__PURE__*/ template(`<td>`), _tmpl$13 = /*#__PURE__*/ template(`<input>`), _tmpl$14 = /*#__PURE__*/ template(`<div><!$><!/><!$><!/>`), _tmpl$15 = /*#__PURE__*/ template(`<div>`);
-function assignRef(ref, el) {
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<table>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<thead>`);
+var _tmpl$4 = /* @__PURE__ */ template(`<tbody>`);
+var _tmpl$5 = /* @__PURE__ */ template(`<tfoot>`);
+var _tmpl$6 = /* @__PURE__ */ template(`<tr>`);
+var _tmpl$7 = /* @__PURE__ */ template(`<th>`);
+var _tmpl$8 = /* @__PURE__ */ template(`<td>`);
+var _tmpl$9 = /* @__PURE__ */ template(`<div role=progressbar aria-label=loading>`);
+var _tmpl$10 = /* @__PURE__ */ template(`<div data-testid=loadMoreSentinel style=position:absolute;height:1px;width:1px>`);
+var _tmpl$11 = /* @__PURE__ */ template(`<tr inert style=position:relative;width:0;height:0;overflow:hidden><td><div data-testid=loadMoreSentinel style=position:absolute;height:1px;width:1px>`);
+var _tmpl$12 = /* @__PURE__ */ template(`<tr role=row tabindex=0 data-loading><td role=rowheader>`);
+var _tmpl$13 = /* @__PURE__ */ template(`<input>`);
+var _tmpl$14 = /* @__PURE__ */ template(`<div><!$><!/><!$><!/>`);
+function assignRef$1(ref, el) {
 	if (!ref) return;
 	if (typeof ref === "function") ref(el);
 	else ref.current = el;
@@ -40,6 +56,81 @@ function resolveItemKey(item, getKey, index) {
 	const record = item;
 	return record.id ?? record.key ?? index;
 }
+/** RAC Table.tsx TableElementType / THead / TBody / row / cell: div when virtualized. */
+function TableHost(props) {
+	const [local, rest] = splitProps(props, [
+		"hostTag",
+		"virtualized",
+		"children"
+	]);
+	if (local.virtualized) {
+		var _el$ = getNextElement(_tmpl$);
+		spread(_el$, rest, true);
+		insert(_el$, scope(() => {
+			return local.children;
+		}));
+		runHydrationEvents();
+		return _el$;
+	}
+	switch (local.hostTag) {
+		case "table":
+			var _el$2 = getNextElement(_tmpl$2);
+			spread(_el$2, rest, true);
+			insert(_el$2, scope(() => {
+				return local.children;
+			}));
+			runHydrationEvents();
+			return _el$2;
+		case "thead":
+			var _el$3 = getNextElement(_tmpl$3);
+			spread(_el$3, rest, true);
+			insert(_el$3, scope(() => {
+				return local.children;
+			}));
+			runHydrationEvents();
+			return _el$3;
+		case "tbody":
+			var _el$4 = getNextElement(_tmpl$4);
+			spread(_el$4, rest, true);
+			insert(_el$4, scope(() => {
+				return local.children;
+			}));
+			runHydrationEvents();
+			return _el$4;
+		case "tfoot":
+			var _el$5 = getNextElement(_tmpl$5);
+			spread(_el$5, rest, true);
+			insert(_el$5, scope(() => {
+				return local.children;
+			}));
+			runHydrationEvents();
+			return _el$5;
+		case "tr":
+			var _el$6 = getNextElement(_tmpl$6);
+			spread(_el$6, rest, true);
+			insert(_el$6, scope(() => {
+				return local.children;
+			}));
+			runHydrationEvents();
+			return _el$6;
+		case "th":
+			var _el$7 = getNextElement(_tmpl$7);
+			spread(_el$7, rest, true);
+			insert(_el$7, scope(() => {
+				return local.children;
+			}));
+			runHydrationEvents();
+			return _el$7;
+		default:
+			var _el$8 = getNextElement(_tmpl$8);
+			spread(_el$8, rest, true);
+			insert(_el$8, scope(() => {
+				return local.children;
+			}));
+			runHydrationEvents();
+			return _el$8;
+	}
+}
 /**
 * Turns the flat `items` into nested {@link RowDefinition}s by recursively expanding each
 * item's children via `getChildItems`. The result feeds the tree-grid collection.
@@ -102,6 +193,7 @@ function Table(props) {
 		"UNSTABLE_defaultExpandedKeys",
 		"UNSTABLE_onExpandedChange"
 	]);
+	const locale = useLocale();
 	const [ref, setRef] = createSignal(null);
 	const normalizedColumns = createMemo(() => normalizeColumnDefinitions(stateProps.columns));
 	const rowHeaderColumnKeys = createMemo(() => getRowHeaderColumnKeys(normalizedColumns()));
@@ -197,43 +289,38 @@ function Table(props) {
 		const hooks = local.dragAndDropHooks;
 		return Boolean(hooks?.useDroppableCollectionState && hooks.useDroppableCollection && (hooks.dropTargetDelegate || parentCollectionRenderer?.dropTargetDelegate || hooks.ListDropTargetDelegate));
 	});
-	const hasDraggableDnd = createMemo(() => {
+	const dragStateValue = createMemo(() => {
 		const hooks = local.dragAndDropHooks;
 		return Boolean(hooks?.useDraggableCollectionState && hooks.useDraggableCollection);
-	});
-	const dragState = createMemo(() => {
-		if (!hasDraggableDnd()) return void 0;
-		return local.dragAndDropHooks?.useDraggableCollectionState?.({ items: stateProps.items });
-	});
-	const dropState = createMemo(() => {
+	})() ? local.dragAndDropHooks?.useDraggableCollectionState?.({
+		items: stateProps.items,
+		collection: state.collection,
+		selectedKeys: state.selectedKeys,
+		isSelected: (key) => state.isSelected(key)
+	}) : void 0;
+	const dragState = () => dragStateValue;
+	const dropStateValue = hasDroppableDnd() ? local.dragAndDropHooks?.useDroppableCollectionState?.({ get collection() {
+		return state.collection;
+	} }) : void 0;
+	const dropState = () => dropStateValue;
+	if (local.dragAndDropHooks?.useDraggableCollection && dragStateValue) local.dragAndDropHooks.useDraggableCollection({}, dragStateValue, () => ref());
+	const droppableCollectionValue = (() => {
 		if (!hasDroppableDnd()) return void 0;
-		return local.dragAndDropHooks?.useDroppableCollectionState?.({});
-	});
-	createEffect(() => {
-		if (!hasDraggableDnd()) return;
 		const hooks = local.dragAndDropHooks;
-		const activeDragState = dragState();
-		if (!hooks?.useDraggableCollection || !activeDragState) return;
-		hooks.useDraggableCollection({}, activeDragState, () => ref());
-	});
-	const droppableCollection = createMemo(() => {
-		if (!hasDroppableDnd()) return void 0;
-		const hooks = local.dragAndDropHooks;
-		const activeDropState = dropState();
+		const activeDropState = dropStateValue;
 		if (!hooks?.useDroppableCollection || !activeDropState) return void 0;
-		const resolveDirection = () => {
-			const el = ref();
-			if (el && typeof window !== "undefined" && typeof window.getComputedStyle === "function") {
-				if (window.getComputedStyle(el).direction === "rtl") return "rtl";
-			}
-			return typeof document !== "undefined" && document.dir === "rtl" ? "rtl" : "ltr";
-		};
-		const dropTargetDelegate = hooks.dropTargetDelegate ?? parentCollectionRenderer?.dropTargetDelegate ?? (hooks.ListDropTargetDelegate ? new hooks.ListDropTargetDelegate(() => state.collection, () => ref(), {
+		const resolveDirection = () => locale().direction;
+		const baseDropTargetDelegate = hooks.dropTargetDelegate ?? parentCollectionRenderer?.dropTargetDelegate ?? (hooks.ListDropTargetDelegate ? new hooks.ListDropTargetDelegate(() => state.collection, () => ref(), {
 			layout: "grid",
 			orientation: "vertical",
 			direction: resolveDirection()
 		}) : void 0);
-		if (!dropTargetDelegate) return void 0;
+		if (!baseDropTargetDelegate) return void 0;
+		const expandedKeys = state.expandedKeys;
+		const dropTargetDelegate = createTreeDropTargetDelegate(baseDropTargetDelegate, {
+			collection: state.collection,
+			expandedKeys: expandedKeys === "all" ? new Set(Array.from(state.collection, (node) => node.key)) : expandedKeys ?? /* @__PURE__ */ new Set()
+		}, resolveDirection());
 		return hooks.useDroppableCollection({
 			dropTargetDelegate,
 			keyboardDelegate: {
@@ -259,7 +346,8 @@ function Table(props) {
 			},
 			setFocusedKey: (key) => state.setFocusedKey(key)
 		}, activeDropState, () => ref());
-	});
+	})();
+	const droppableCollection = () => droppableCollectionValue;
 	const isRootDropTarget = createMemo(() => {
 		return Boolean(dropState()?.target?.type === "root");
 	});
@@ -295,7 +383,8 @@ function Table(props) {
 		},
 		get isVirtualized() {
 			return ariaProps.isVirtualized ?? parentCollectionRenderer?.isVirtualized ?? false;
-		}
+		},
+		getScrollElement: () => ref()
 	};
 	const collectionRenderer = createMemo(() => ({
 		...parentCollectionRenderer,
@@ -306,38 +395,41 @@ function Table(props) {
 	const tableProps = () => ({
 		ref: (el) => {
 			setRef(el);
-			assignRef(local.ref, el);
+			assignRef$1(local.ref, el);
 		},
-		...mergeProps$2(domProps(), cleanGridProps(), cleanFocusProps(), droppableCollection()?.collectionProps ?? {}),
+		...mergeProps$1(domProps(), cleanGridProps(), cleanFocusProps(), droppableCollection()?.collectionProps ?? {}),
 		class: renderProps.class(),
 		style: renderProps.style(),
-		"data-focused": state.isFocused || void 0,
-		"data-focus-visible": isFocusVisible() || void 0,
-		"data-empty": stateProps.items.length === 0 || void 0,
-		"data-drop-target": isRootDropTarget() || void 0,
+		"data-focused": dataAttr(state.isFocused),
+		"data-focus-visible": dataAttr(isFocusVisible()),
+		"data-empty": dataAttr(stateProps.items.length === 0),
+		"data-drop-target": dataAttr(isRootDropTarget()),
 		slot: local.slot
 	});
-	return createComponent(TableContext.Provider, {
+	return createComponent(TableContext, {
 		value: contextValue,
 		get children() {
-			return createComponent(TableStateContext.Provider, {
+			return createComponent(TableStateContext, {
 				value: state,
 				get children() {
-					return createComponent(CollectionRendererContext.Provider, {
+					return createComponent(CollectionRendererContext, {
 						get value() {
 							return collectionRenderer();
 						},
 						get children() {
-							return memo(() => !!local.render)() ? local.render({
+							return memo(() => {
+								return !!local.render;
+							})() ? local.render({
 								...tableProps(),
 								children: tableChildren()
-							}, renderValues()) : (() => {
-								var _el$ = getNextElement(_tmpl$);
-								spread(_el$, mergeProps(tableProps), false, true);
-								insert(_el$, tableChildren);
-								runHydrationEvents();
-								return _el$;
-							})();
+							}, renderValues()) : createComponent(TableHost, mergeProps({
+								hostTag: "table",
+								get virtualized() {
+									return contextValue.isVirtualized;
+								}
+							}, tableProps, { get children() {
+								return tableChildren();
+							} }));
 						}
 					});
 				}
@@ -357,7 +449,8 @@ function TableHeader(props) {
 		"children",
 		"ref"
 	]);
-	if (!useContext(TableContext)) throw new Error("TableHeader must be used within a Table");
+	const context = useContext(TableContext);
+	if (!context) throw new Error("TableHeader must be used within a Table");
 	const { rowGroupProps } = createTableRowGroup(() => ({ type: "thead" }));
 	const { isHovered, hoverProps } = createHover({
 		isDisabled: false,
@@ -389,38 +482,55 @@ function TableHeader(props) {
 		return rest;
 	};
 	const headerProps = () => ({
-		ref: (el) => assignRef(local.ref, el),
+		ref: (el) => assignRef$1(local.ref, el),
 		...domProps,
 		...cleanRowGroupProps(),
 		...cleanHoverProps(),
 		class: renderProps.class(),
 		style: renderProps.style(),
 		"data-hovered": isHovered() || void 0,
-		children: (() => {
-			var _el$2 = getNextElement(_tmpl$2);
-			insert(_el$2, () => local.children);
-			return _el$2;
-		})()
-	});
-	return local.render ? local.render(headerProps(), renderValues()) : (() => {
-		var _el$3 = getNextElement(_tmpl$3), _el$4 = _el$3.firstChild;
-		use((el) => assignRef(local.ref, el), _el$3);
-		spread(_el$3, mergeProps(domProps, cleanRowGroupProps, cleanHoverProps, {
-			get ["class"]() {
-				return renderProps.class();
-			},
-			get style() {
-				return renderProps.style();
+		children: createComponent(TableHost, {
+			hostTag: "tr",
+			get virtualized() {
+				return context.isVirtualized;
 			},
-			get ["data-hovered"]() {
-				return isHovered() || void 0;
+			role: "row",
+			get children() {
+				return local.children;
 			}
-		}), false, true);
-		insert(_el$4, () => local.children);
-		runHydrationEvents();
-		return _el$3;
-	})();
+		})
+	});
+	return local.render ? local.render(headerProps(), renderValues()) : createComponent(TableHost, mergeProps({
+		hostTag: "thead",
+		get virtualized() {
+			return context.isVirtualized;
+		},
+		ref: (el) => assignRef$1(local.ref, el)
+	}, domProps, cleanRowGroupProps, cleanHoverProps, {
+		get "class"() {
+			return renderProps.class();
+		},
+		get style() {
+			return renderProps.style();
+		},
+		get "data-hovered"() {
+			return dataAttr(isHovered());
+		},
+		get children() {
+			return createComponent(TableHost, {
+				hostTag: "tr",
+				get virtualized() {
+					return context.isVirtualized;
+				},
+				role: "row",
+				get children() {
+					return local.children;
+				}
+			});
+		}
+	}));
 }
+const TableColumnDefinitionContext = createContext(null);
 /**
 * A column header in a table.
 */
@@ -535,64 +645,56 @@ function TableColumn(props) {
 			...widthStyle
 		};
 	});
-	const columnChildren = () => typeof local.children === "function" ? local.children(renderValues()) : local.children;
-	const columnProps = () => ({
+	const columnChildren = () => {
+		const rawChildren = local.children;
+		return typeof rawChildren === "function" ? rawChildren(renderValues()) : rawChildren;
+	};
+	const columnAttrs = () => ({
 		ref: (el) => {
 			setRef(el);
-			assignRef(local.ref, el);
+			assignRef$1(local.ref, el);
 		},
 		...domProps,
-		...mergeProps$2(cleanColumnHeaderProps(), cleanHoverProps(), cleanFocusProps()),
+		...mergeProps$1(cleanColumnHeaderProps(), cleanHoverProps(), cleanFocusProps()),
 		class: renderProps.class(),
 		style: columnStyle(),
-		"data-sortable": local.allowsSorting || void 0,
+		"data-sortable": dataAttr(!!local.allowsSorting),
 		"data-sort-direction": sortDirection() || void 0,
-		"data-resizable": local.allowsResizing || void 0,
-		"data-resizing": isResizing() || void 0,
-		"data-hovered": isHovered() || void 0,
-		"data-focused": state.focusedKey === local.id || void 0,
-		"data-focus-visible": isFocusVisible() && state.focusedKey === local.id || void 0,
-		children: columnChildren()
+		"data-resizable": dataAttr(!!local.allowsResizing),
+		"data-resizing": dataAttr(isResizing()),
+		"data-hovered": dataAttr(isHovered()),
+		"data-focused": dataAttr(state.focusedKey === local.id),
+		"data-focus-visible": dataAttr(isFocusVisible() && state.focusedKey === local.id),
+		"data-key": local.id
+	});
+	const columnDefinition = {
+		key: local.id,
+		width: local.width ?? local.defaultWidth,
+		minWidth: local.minWidth,
+		maxWidth: local.maxWidth
+	};
+	if (local.render) return createComponent(TableColumnDefinitionContext, {
+		value: columnDefinition,
+		get children() {
+			return local.render({
+				...columnAttrs(),
+				children: columnChildren()
+			}, renderValues());
+		}
+	});
+	return createComponent(TableColumnDefinitionContext, {
+		value: columnDefinition,
+		get children() {
+			return createComponent(TableHost, mergeProps({
+				hostTag: "th",
+				get virtualized() {
+					return context.isVirtualized;
+				}
+			}, columnAttrs, { get children() {
+				return columnChildren();
+			} }));
+		}
 	});
-	return local.render ? local.render(columnProps(), renderValues()) : (() => {
-		var _el$5 = getNextElement(_tmpl$4);
-		use((el) => {
-			setRef(el);
-			assignRef(local.ref, el);
-		}, _el$5);
-		spread(_el$5, mergeProps(domProps, () => mergeProps$2(cleanColumnHeaderProps(), cleanHoverProps(), cleanFocusProps()), {
-			get ["class"]() {
-				return renderProps.class();
-			},
-			get style() {
-				return columnStyle();
-			},
-			get ["data-sortable"]() {
-				return local.allowsSorting || void 0;
-			},
-			get ["data-sort-direction"]() {
-				return sortDirection() || void 0;
-			},
-			get ["data-resizable"]() {
-				return local.allowsResizing || void 0;
-			},
-			get ["data-resizing"]() {
-				return isResizing() || void 0;
-			},
-			get ["data-hovered"]() {
-				return isHovered() || void 0;
-			},
-			get ["data-focused"]() {
-				return state.focusedKey === local.id || void 0;
-			},
-			get ["data-focus-visible"]() {
-				return memo(() => !!isFocusVisible())() && state.focusedKey === local.id || void 0;
-			}
-		}), false, true);
-		insert(_el$5, columnChildren);
-		runHydrationEvents();
-		return _el$5;
-	})();
 }
 /**
 * The body of a table containing data rows.
@@ -635,21 +737,22 @@ function TableBody(props) {
 		if (!virtualizer || !parentCollectionRenderer?.isVirtualized) return null;
 		const rowCount = items().length;
 		const baseRange = virtualizer.getVisibleRange(rowCount);
-		const persistedIndexes = Array.from(persistedKeys()).map((key) => rowNodes().findIndex((node) => node.key === key)).filter((index) => index >= 0);
 		const dropTarget = context.dropState?.target;
 		const normalizedDropKey = getNormalizedDropTargetKey(dropTarget, context.collection);
-		const focusedKey = context.state.focusedKey;
-		const focusedIndex = focusedKey != null ? rowNodes().findIndex((node) => node.key === focusedKey) : -1;
-		return mergePersistedKeysIntoVirtualRange(baseRange, persistedIndexes, rowCount, virtualizer, 80, {
-			forceIncludeIndexes: [
-				dropTarget?.type === "item" ? rowNodes().findIndex((node) => node.key === dropTarget.key) : -1,
-				normalizedDropKey != null ? rowNodes().findIndex((node) => node.key === normalizedDropKey) : -1,
-				dropTarget?.type === "item" ? -1 : focusedIndex
-			].filter((index) => index >= 0),
+		const forceIncludeIndexes = [dropTarget?.type === "item" ? rowNodes().findIndex((node) => node.key === dropTarget.key) : -1, normalizedDropKey != null ? rowNodes().findIndex((node) => node.key === normalizedDropKey) : -1].filter((index) => index >= 0);
+		return mergePersistedKeysIntoVirtualRange(baseRange, [], rowCount, virtualizer, 80, {
+			forceIncludeIndexes,
 			forceIncludeMaxSpan: 320
 		});
 	});
-	createEffect(() => {
+	const persistedOutsideIndexes = createMemo(() => {
+		const range = virtualRange();
+		if (!range) return [];
+		const persistedIndexes = Array.from(persistedKeys()).map((key) => rowNodes().findIndex((node) => node.key === key)).filter((index) => index >= 0);
+		return indexesOutsideRange(range, persistedIndexes);
+	});
+	createTrackedEffect(() => {
+		const _s2Cleanups = [];
 		if (!virtualizer || !parentCollectionRenderer?.isVirtualized) return;
 		virtualizer.setDropTargetItemCountResolver(() => items().length);
 		virtualizer.setDropTargetIndexResolver((key) => {
@@ -664,11 +767,14 @@ function TableBody(props) {
 				key: typeof node.key === "string" || typeof node.key === "number" ? node.key : void 0
 			};
 		});
-		onCleanup(() => {
+		_s2Cleanups.push(() => {
 			virtualizer.setDropTargetIndexResolver(void 0);
 			virtualizer.setDropTargetItemCountResolver(void 0);
 			virtualizer.setDropTargetResolver(void 0);
 		});
+		return () => {
+			for (const c of _s2Cleanups) c();
+		};
 	});
 	const visibleItems = createMemo(() => {
 		if (context.state.treeColumn != null) return rowNodes().map((node) => node.value);
@@ -677,68 +783,94 @@ function TableBody(props) {
 		return items().slice(range.start, range.end);
 	});
 	const spacerColSpan = () => context.columns.length + (context.showSelectionCheckboxes ? 1 : 0);
+	const CollectionRoot = useCollectionRoot();
+	const collectionRows = () => {
+		const rows = createComponent(For, {
+			get each() {
+				return visibleItems();
+			},
+			children: (item, index) => {
+				const itemIndex = () => (virtualRange()?.start ?? 0) + index();
+				return renderCollectionDropSlots({
+					index: itemIndex(),
+					lastIndex: rowNodes().length - 1,
+					renderDropIndicator: (i, position) => parentCollectionRenderer?.renderDropIndicator?.(i, position),
+					children: local.children?.(item)
+				});
+			}
+		});
+		if (!context.isVirtualized) return rows;
+		return createComponent(CollectionRoot, {
+			get collection() {
+				return memo(() => {
+					return !!virtualRange();
+				})() ? items() : [];
+			},
+			scrollRef: () => context.getScrollElement(),
+			get persistedKeys() {
+				return persistedKeys();
+			},
+			get children() {
+				return [rows, createComponent(For, {
+					get each() {
+						return persistedOutsideIndexes();
+					},
+					children: (index) => createComponent(PersistedVirtualItem, {
+						index,
+						get children() {
+							return renderCollectionDropSlots({
+								index,
+								lastIndex: rowNodes().length - 1,
+								renderDropIndicator: (i, position) => parentCollectionRenderer?.renderDropIndicator?.(i, position),
+								children: local.children?.(items()[index])
+							});
+						}
+					})
+				})];
+			}
+		});
+	};
 	const bodyChildren = () => [createComponent(SharedElementTransition, { get children() {
 		return createComponent(Show, {
 			get when() {
-				return memo(() => !!(isEmpty() && local.renderEmptyState))() && !local.isLoading;
+				return memo(() => {
+					return !!(isEmpty() && local.renderEmptyState);
+				})() ? !local.isLoading : isEmpty() && local.renderEmptyState;
 			},
 			get fallback() {
-				return [
-					memo(() => memo(() => !!virtualRange()?.offsetTop)() ? (() => {
-						var _el$8 = getNextElement(_tmpl$6), _el$9 = _el$8.firstChild;
-						effect((_p$) => {
-							var _v$ = spacerColSpan(), _v$2 = `${virtualRange().offsetTop}px`;
-							_v$ !== _p$.e && setAttribute(_el$9, "colspan", _p$.e = _v$);
-							_v$2 !== _p$.t && setStyleProperty(_el$9, "height", _p$.t = _v$2);
-							return _p$;
-						}, {
-							e: void 0,
-							t: void 0
-						});
-						return _el$8;
-					})() : null),
-					createComponent(For, {
-						get each() {
-							return visibleItems();
-						},
-						children: (item, index) => {
-							const itemIndex = () => (virtualRange()?.start ?? 0) + index();
-							const beforeIndicator = () => parentCollectionRenderer?.renderDropIndicator?.(itemIndex(), "before");
-							const onIndicator = () => parentCollectionRenderer?.renderDropIndicator?.(itemIndex(), "on");
-							const afterIndicator = () => parentCollectionRenderer?.renderDropIndicator?.(itemIndex(), "after");
-							return [
-								memo(beforeIndicator),
-								memo(onIndicator),
-								memo(() => local.children?.(item)),
-								memo(afterIndicator)
-							];
-						}
-					}),
-					memo(() => memo(() => !!virtualRange()?.offsetBottom)() ? (() => {
-						var _el$0 = getNextElement(_tmpl$7), _el$1 = _el$0.firstChild;
-						effect((_p$) => {
-							var _v$3 = spacerColSpan(), _v$4 = `${virtualRange().offsetBottom}px`;
-							_v$3 !== _p$.e && setAttribute(_el$1, "colspan", _p$.e = _v$3);
-							_v$4 !== _p$.t && setStyleProperty(_el$1, "height", _p$.t = _v$4);
-							return _p$;
-						}, {
-							e: void 0,
-							t: void 0
-						});
-						return _el$0;
-					})() : null)
-				];
+				return collectionRows();
 			},
 			get children() {
-				var _el$6 = getNextElement(_tmpl$5), _el$7 = _el$6.firstChild;
-				insert(_el$7, () => local.renderEmptyState?.());
-				effect(() => setAttribute(_el$7, "colspan", spacerColSpan()));
-				return _el$6;
+				return createComponent(TableHost, {
+					hostTag: "tr",
+					get virtualized() {
+						return context.isVirtualized;
+					},
+					role: "row",
+					"data-empty-state": true,
+					get children() {
+						return createComponent(TableHost, {
+							hostTag: "th",
+							get virtualized() {
+								return context.isVirtualized;
+							},
+							role: "rowheader",
+							get colSpan() {
+								return spacerColSpan();
+							},
+							get children() {
+								return local.renderEmptyState?.();
+							}
+						});
+					}
+				});
 			}
 		});
 	} }), createComponent(Show, {
 		get when() {
-			return memo(() => !!local.hasMore)() && local.onLoadMore;
+			return memo(() => {
+				return !!local.hasMore;
+			})() ? local.onLoadMore : local.hasMore;
 		},
 		get children() {
 			return createComponent(TableLoadMoreItem, {
@@ -755,109 +887,34 @@ function TableBody(props) {
 		}
 	})];
 	const bodyProps = () => ({
-		ref: (el) => assignRef(local.ref, el),
+		ref: (el) => assignRef$1(local.ref, el),
 		...domProps,
 		...cleanRowGroupProps(),
 		class: renderProps.class(),
 		style: renderProps.style(),
-		"data-empty": isEmpty() || void 0,
+		"data-empty": dataAttr(isEmpty()),
 		children: bodyChildren()
 	});
-	return local.render ? local.render(bodyProps(), renderValues()) : (() => {
-		var _el$10 = getNextElement(_tmpl$8), _el$13 = _el$10.firstChild, [_el$14, _co$] = getNextMarker(_el$13.nextSibling), _el$15 = _el$14.nextSibling, [_el$16, _co$2] = getNextMarker(_el$15.nextSibling);
-		use((el) => assignRef(local.ref, el), _el$10);
-		spread(_el$10, mergeProps(domProps, cleanRowGroupProps, {
-			get ["class"]() {
-				return renderProps.class();
-			},
-			get style() {
-				return renderProps.style();
-			},
-			get ["data-empty"]() {
-				return isEmpty() || void 0;
-			}
-		}), false, true);
-		insert(_el$10, createComponent(SharedElementTransition, { get children() {
-			return createComponent(Show, {
-				get when() {
-					return memo(() => !!(isEmpty() && local.renderEmptyState))() && !local.isLoading;
-				},
-				get fallback() {
-					return [
-						memo(() => memo(() => !!virtualRange()?.offsetTop)() ? (() => {
-							var _el$17 = getNextElement(_tmpl$6), _el$18 = _el$17.firstChild;
-							effect((_p$) => {
-								var _v$5 = spacerColSpan(), _v$6 = `${virtualRange().offsetTop}px`;
-								_v$5 !== _p$.e && setAttribute(_el$18, "colspan", _p$.e = _v$5);
-								_v$6 !== _p$.t && setStyleProperty(_el$18, "height", _p$.t = _v$6);
-								return _p$;
-							}, {
-								e: void 0,
-								t: void 0
-							});
-							return _el$17;
-						})() : null),
-						createComponent(For, {
-							get each() {
-								return visibleItems();
-							},
-							children: (item, index) => {
-								const itemIndex = () => (virtualRange()?.start ?? 0) + index();
-								const beforeIndicator = () => parentCollectionRenderer?.renderDropIndicator?.(itemIndex(), "before");
-								const onIndicator = () => parentCollectionRenderer?.renderDropIndicator?.(itemIndex(), "on");
-								const afterIndicator = () => parentCollectionRenderer?.renderDropIndicator?.(itemIndex(), "after");
-								return [
-									memo(beforeIndicator),
-									memo(onIndicator),
-									memo(() => local.children?.(item)),
-									memo(afterIndicator)
-								];
-							}
-						}),
-						memo(() => memo(() => !!virtualRange()?.offsetBottom)() ? (() => {
-							var _el$19 = getNextElement(_tmpl$7), _el$20 = _el$19.firstChild;
-							effect((_p$) => {
-								var _v$7 = spacerColSpan(), _v$8 = `${virtualRange().offsetBottom}px`;
-								_v$7 !== _p$.e && setAttribute(_el$20, "colspan", _p$.e = _v$7);
-								_v$8 !== _p$.t && setStyleProperty(_el$20, "height", _p$.t = _v$8);
-								return _p$;
-							}, {
-								e: void 0,
-								t: void 0
-							});
-							return _el$19;
-						})() : null)
-					];
-				},
-				get children() {
-					var _el$11 = getNextElement(_tmpl$5), _el$12 = _el$11.firstChild;
-					insert(_el$12, () => local.renderEmptyState?.());
-					effect(() => setAttribute(_el$12, "colspan", spacerColSpan()));
-					return _el$11;
-				}
-			});
-		} }), _el$14, _co$);
-		insert(_el$10, createComponent(Show, {
-			get when() {
-				return memo(() => !!local.hasMore)() && local.onLoadMore;
-			},
-			get children() {
-				return createComponent(TableLoadMoreItem, {
-					get onLoadMore() {
-						return local.onLoadMore;
-					},
-					get isLoading() {
-						return local.isLoading;
-					},
-					get colSpan() {
-						return spacerColSpan();
-					}
-				});
-			}
-		}), _el$16, _co$2);
-		runHydrationEvents();
-		return _el$10;
-	})();
+	return local.render ? local.render(bodyProps(), renderValues()) : createComponent(TableHost, mergeProps({
+		hostTag: "tbody",
+		get virtualized() {
+			return context.isVirtualized;
+		},
+		ref: (el) => assignRef$1(local.ref, el)
+	}, domProps, cleanRowGroupProps, {
+		get "class"() {
+			return renderProps.class();
+		},
+		get style() {
+			return renderProps.style();
+		},
+		get "data-empty"() {
+			return dataAttr(isEmpty());
+		},
+		get children() {
+			return bodyChildren();
+		}
+	}));
 }
 /**
 * The footer of a table containing summary rows.
@@ -870,7 +927,8 @@ function TableFooter(props) {
 		"slot",
 		"children"
 	]);
-	if (!useContext(TableContext)) throw new Error("TableFooter must be used within a Table");
+	const context = useContext(TableContext);
+	if (!context) throw new Error("TableFooter must be used within a Table");
 	const { rowGroupProps } = createTableRowGroup(() => ({ type: "tfoot" }));
 	const items = createMemo(() => local.items ?? []);
 	const renderValues = createMemo(() => ({ isEmpty: items().length === 0 }));
@@ -883,40 +941,46 @@ function TableFooter(props) {
 		const { ref: _ref, ...rest } = rowGroupProps;
 		return rest;
 	};
-	return (() => {
-		var _el$21 = getNextElement(_tmpl$9);
-		spread(_el$21, mergeProps(domProps, cleanRowGroupProps, {
-			get ["class"]() {
-				return renderProps.class();
-			},
-			get style() {
-				return renderProps.style();
-			}
-		}), false, true);
-		insert(_el$21, createComponent(Show, {
-			get when() {
-				return memo(() => !!local.items)() && typeof local.children === "function";
-			},
-			get fallback() {
-				return local.children;
-			},
-			get children() {
-				return createComponent(For, {
-					get each() {
-						return items();
-					},
-					children: (item) => local.children(item)
-				});
-			}
-		}));
-		runHydrationEvents();
-		return _el$21;
-	})();
+	return createComponent(TableHost, mergeProps({
+		hostTag: "tfoot",
+		get virtualized() {
+			return context.isVirtualized;
+		}
+	}, domProps, cleanRowGroupProps, {
+		get "class"() {
+			return renderProps.class();
+		},
+		get style() {
+			return renderProps.style();
+		},
+		get children() {
+			return createComponent(Show, {
+				get when() {
+					return memo(() => {
+						return !!local.items;
+					})() ? typeof local.children === "function" : local.items;
+				},
+				get fallback() {
+					return local.children;
+				},
+				get children() {
+					return createComponent(For, {
+						get each() {
+							return items();
+						},
+						children: (item) => local.children(item)
+					});
+				}
+			});
+		}
+	}));
 }
 function TableLoadMoreItem(props) {
-	let sentinelRef;
+	const [sentinel, setSentinel] = createSignal();
 	const [isPending, setIsPending] = createSignal(false);
+	const scrollOffsetValue = createMemo(() => props.scrollOffset ?? 1);
 	const isLoading = () => !!props.isLoading || isPending();
+	const tableContext = useContext(TableContext);
 	const triggerLoadMore = async () => {
 		if (isPending()) return;
 		setIsPending(true);
@@ -926,50 +990,126 @@ function TableLoadMoreItem(props) {
 			setIsPending(false);
 		}
 	};
-	createEffect(() => {
-		if (!sentinelRef || typeof IntersectionObserver !== "function") return;
-		const margin = `0px 0px ${100 * (props.scrollOffset ?? 1)}% 0px`;
+	createEffect(() => ({
+		current: sentinel(),
+		scrollOffset: scrollOffsetValue()
+	}), ({ current, scrollOffset }) => {
+		if (!current || typeof IntersectionObserver !== "function") return;
+		const margin = `0px 0px ${100 * scrollOffset}% 0px`;
 		const observer = new IntersectionObserver((entries) => {
 			if (entries[0]?.isIntersecting) triggerLoadMore();
 		}, { rootMargin: margin });
-		observer.observe(sentinelRef);
+		observer.observe(current);
 		return () => observer.disconnect();
 	});
 	const renderProps = useRenderProps({
-		children: props.children ?? (() => isLoading() ? getNextElement(_tmpl$0) : null),
+		children: props.children ?? (() => isLoading() ? getNextElement(_tmpl$9) : null),
 		class: props.class,
 		style: props.style,
 		defaultClassName: "solidaria-Table-loadMore"
 	}, () => ({ isLoading: isLoading() }));
-	return [(() => {
-		var _el$23 = getNextElement(_tmpl$1), _el$25 = _el$23.firstChild.firstChild;
-		var _ref$ = sentinelRef;
-		typeof _ref$ === "function" ? use(_ref$, _el$25) : sentinelRef = _el$25;
-		return _el$23;
-	})(), createComponent(Show, {
+	return createComponent(Show, {
 		get when() {
-			return isLoading();
+			return tableContext?.isVirtualized;
+		},
+		get fallback() {
+			return [(() => {
+				var _el$11 = getNextElement(_tmpl$11);
+				var _el$13 = _el$11.firstChild.firstChild;
+				ref(() => {
+					return setSentinel;
+				}, _el$13);
+				return _el$11;
+			})(), createComponent(Show, {
+				get when() {
+					return isLoading();
+				},
+				get children() {
+					var _el$14 = getNextElement(_tmpl$12);
+					var _el$15 = _el$14.firstChild;
+					_el$14.addEventListener("focus", () => {
+						triggerLoadMore();
+					});
+					insert(_el$15, scope(() => {
+						return renderProps.renderChildren();
+					}));
+					effect(() => {
+						return {
+							e: readShallow(renderProps.class()),
+							t: readShallow(renderProps.style()),
+							a: props.colSpan ?? 1
+						};
+					}, ({ e, t, a }, _p$) => {
+						className(_el$14, e, _p$?.e);
+						style(_el$14, t, _p$?.t);
+						a !== _p$?.a && setAttribute(_el$15, "colspan", a);
+					});
+					return _el$14;
+				}
+			})];
 		},
 		get children() {
-			var _el$26 = getNextElement(_tmpl$10), _el$27 = _el$26.firstChild;
-			_el$26.addEventListener("focus", () => {
-				triggerLoadMore();
-			});
-			insert(_el$27, () => renderProps.renderChildren());
-			effect((_p$) => {
-				var _v$9 = renderProps.class(), _v$0 = renderProps.style(), _v$1 = props.colSpan ?? 1;
-				_v$9 !== _p$.e && className(_el$26, _p$.e = _v$9);
-				_p$.t = style(_el$26, _v$0, _p$.t);
-				_v$1 !== _p$.a && setAttribute(_el$27, "colspan", _p$.a = _v$1);
-				return _p$;
-			}, {
-				e: void 0,
-				t: void 0,
-				a: void 0
-			});
-			return _el$26;
+			return [createComponent(TableHost, {
+				hostTag: "tr",
+				virtualized: true,
+				style: {
+					position: "relative",
+					width: 0,
+					height: 0,
+					overflow: "hidden"
+				},
+				inert: true,
+				get children() {
+					return createComponent(TableHost, {
+						hostTag: "td",
+						virtualized: true,
+						get children() {
+							var _el$10 = getNextElement(_tmpl$10);
+							ref(() => {
+								return setSentinel;
+							}, _el$10);
+							return _el$10;
+						}
+					});
+				}
+			}), createComponent(Show, {
+				get when() {
+					return isLoading();
+				},
+				get children() {
+					return createComponent(TableHost, {
+						hostTag: "tr",
+						virtualized: true,
+						role: "row",
+						tabindex: 0,
+						onFocus: () => {
+							triggerLoadMore();
+						},
+						get "class"() {
+							return renderProps.class();
+						},
+						get style() {
+							return renderProps.style();
+						},
+						"data-loading": true,
+						get children() {
+							return createComponent(TableHost, {
+								hostTag: "td",
+								virtualized: true,
+								role: "rowheader",
+								get colSpan() {
+									return props.colSpan ?? 1;
+								},
+								get children() {
+									return renderProps.renderChildren();
+								}
+							});
+						}
+					});
+				}
+			})];
 		}
-	})];
+	});
 }
 /**
 * A row in a table.
@@ -1116,8 +1256,12 @@ function TableRow(props) {
 		return rest;
 	};
 	const rowContextValue = {
-		rowKey: rowKey(),
-		rowNode: rowNode(),
+		get rowKey() {
+			return rowKey();
+		},
+		get rowNode() {
+			return rowNode();
+		},
 		get isRowDisabled() {
 			return isDisabled();
 		},
@@ -1128,7 +1272,8 @@ function TableRow(props) {
 				index = registeredCellIds.length;
 				registeredCellIds.push(cellId);
 			}
-			return explicitId ?? tableContext.columns[index]?.key;
+			const dataColumns = tableContext.columns.filter((column) => column.key !== "__selection__");
+			return explicitId ?? dataColumns[index]?.key;
 		}
 	};
 	const dragButtonProps = createMemo(() => {
@@ -1189,10 +1334,10 @@ function TableRow(props) {
 			"--table-row-level": rowLevel()
 		};
 	};
-	return createComponent(TableRowContext.Provider, {
+	return createComponent(TableRowContext, {
 		value: rowContextValue,
 		get children() {
-			return createComponent(ButtonContext.Provider, {
+			return createComponent(ButtonContext, {
 				value: buttonContextValue,
 				get children() {
 					return (() => {
@@ -1206,30 +1351,32 @@ function TableRow(props) {
 						const tableRowProps = () => ({
 							ref: (el) => {
 								setRef(el);
-								assignRef(local.ref, el);
+								assignRef$1(local.ref, el);
+								const dragRef = (draggableItem()?.dragProps)?.ref;
+								if (typeof dragRef === "function") dragRef(el);
 							},
 							...domProps,
-							...mergeProps$2(cleanRowProps(), cleanHoverProps(), cleanFocusProps(), focusWithinProps, draggableItem()?.dragProps ?? {}, droppableItem()?.dropProps ?? {}),
+							...mergeProps$1(cleanRowProps(), cleanHoverProps(), cleanFocusProps(), focusWithinProps, draggableItem()?.dragProps ?? {}, droppableItem()?.dropProps ?? {}),
 							class: renderProps.class(),
 							style: rowStyle(),
 							"data-key": rowKey(),
-							"data-selected": isSelected() || void 0,
-							"data-focused": isFocused() || void 0,
-							"data-focus-visible": isFocusVisible$1() && isFocused() || void 0,
+							"data-selected": dataAttr(isSelected()),
+							"data-focused": dataAttr(isFocused()),
+							"data-focus-visible": dataAttr(isFocusVisible$1() && isFocused()),
 							"data-focus-visible-within": dataAttr(isFocusWithin() && isFocusVisible()),
-							"data-pressed": isPressed() || void 0,
-							"data-hovered": isHovered() || void 0,
-							"data-disabled": isDisabled() || void 0,
+							"data-pressed": dataAttr(isPressed()),
+							"data-hovered": dataAttr(isHovered()),
+							"data-disabled": dataAttr(isDisabled()),
 							"data-href": linkProps().href,
 							"data-target": linkProps().target,
 							"data-rel": linkProps().rel,
 							"data-download": typeof linkProps().download === "string" ? linkProps().download : linkProps().download ? "" : void 0,
 							"data-ping": linkProps().ping,
 							"data-referrer-policy": linkProps().referrerPolicy,
-							"data-dragging": draggableItem()?.isDragging || void 0,
-							"data-drop-target": droppableItem()?.isDropTarget || void 0,
-							"data-expanded": isTreeRow() && isExpanded() || void 0,
-							"data-has-child-items": isTreeRow() && hasChildItems() || void 0,
+							"data-dragging": dataAttr(!!draggableItem()?.isDragging),
+							"data-drop-target": dataAttr(!!droppableItem()?.isDropTarget),
+							"data-expanded": dataAttr(isTreeRow() && isExpanded()),
+							"data-has-child-items": dataAttr(isTreeRow() && hasChildItems()),
 							"data-level": isTreeRow() ? rowLevel() : void 0,
 							children: rowChildrenContent
 						});
@@ -1238,80 +1385,20 @@ function TableRow(props) {
 								return local.render;
 							},
 							get fallback() {
-								return (() => {
-									var _el$28 = getNextElement(_tmpl$11);
-									use((el) => {
-										setRef(el);
-										assignRef(local.ref, el);
-									}, _el$28);
-									spread(_el$28, mergeProps(domProps, () => mergeProps$2(cleanRowProps(), cleanHoverProps(), cleanFocusProps(), focusWithinProps, draggableItem()?.dragProps ?? {}, droppableItem()?.dropProps ?? {}), {
-										get ["class"]() {
-											return renderProps.class();
-										},
-										get style() {
-											return rowStyle();
-										},
-										get ["data-key"]() {
-											return rowKey();
-										},
-										get ["data-selected"]() {
-											return isSelected() || void 0;
-										},
-										get ["data-focused"]() {
-											return isFocused() || void 0;
-										},
-										get ["data-focus-visible"]() {
-											return memo(() => !!isFocusVisible$1())() && isFocused() || void 0;
-										},
-										get ["data-focus-visible-within"]() {
-											return dataAttr(isFocusWithin() && isFocusVisible());
-										},
-										get ["data-pressed"]() {
-											return isPressed() || void 0;
-										},
-										get ["data-hovered"]() {
-											return isHovered() || void 0;
-										},
-										get ["data-disabled"]() {
-											return isDisabled() || void 0;
-										},
-										get ["data-href"]() {
-											return linkProps().href;
-										},
-										get ["data-target"]() {
-											return linkProps().target;
-										},
-										get ["data-rel"]() {
-											return linkProps().rel;
-										},
-										get ["data-download"]() {
-											return memo(() => typeof linkProps().download === "string")() ? linkProps().download : linkProps().download ? "" : void 0;
-										},
-										get ["data-ping"]() {
-											return linkProps().ping;
-										},
-										get ["data-referrer-policy"]() {
-											return linkProps().referrerPolicy;
-										},
-										get ["data-dragging"]() {
-											return draggableItem()?.isDragging || void 0;
-										},
-										get ["data-drop-target"]() {
-											return droppableItem()?.isDropTarget || void 0;
-										},
-										get ["data-expanded"]() {
-											return memo(() => !!isTreeRow())() && isExpanded() || void 0;
-										},
-										get ["data-has-child-items"]() {
-											return memo(() => !!isTreeRow())() && hasChildItems() || void 0;
-										},
-										get ["data-level"]() {
-											return memo(() => !!isTreeRow())() ? rowLevel() : void 0;
-										}
-									}), false, true);
-									insert(_el$28, rowChildrenContent);
+								return memo(() => {
+									return !!tableContext.isVirtualized;
+								})() ? (() => {
+									var _el$16 = getNextElement(_tmpl$);
+									spread(_el$16, () => {
+										return tableRowProps();
+									}, false);
+									runHydrationEvents();
+									return _el$16;
+								})() : (() => {
+									var _el$17 = getNextElement(_tmpl$6);
+									spread(_el$17, tableRowProps, false);
 									runHydrationEvents();
-									return _el$28;
+									return _el$17;
 								})();
 							},
 							get children() {
@@ -1349,14 +1436,26 @@ function TableCell(props) {
 	const columnKey = createMemo(() => rowContext.getCellColumnKey(cellId, local.id));
 	const cellNode = createMemo(() => {
 		const key = columnKey();
+		const collection = state.collection;
 		if (key != null) {
 			const cellKey = `${rowKey}-${key}`;
-			const node = state.collection.getItem(cellKey);
+			const node = collection.getItem(cellKey);
 			if (node) return node;
+			return {
+				type: collection.rowHeaderColumnKeys.has(key) ? "rowheader" : "cell",
+				key: cellKey,
+				value: rowNode.value,
+				textValue: "",
+				level: 1,
+				index: 0,
+				parentKey: rowKey,
+				hasChildNodes: false,
+				childNodes: []
+			};
 		}
 		return {
 			type: "cell",
-			key: key ?? `${rowKey}-cell`,
+			key: `${rowKey}-cell`,
 			value: rowNode.value,
 			textValue: "",
 			level: 1,
@@ -1414,80 +1513,43 @@ function TableCell(props) {
 		const { ref: _ref3, ...rest } = focusProps;
 		return rest;
 	};
-	const cellChildren = () => typeof local.children === "function" ? local.children(renderValues()) : local.children;
-	const tableCellProps = () => ({
+	const cellChildren = () => {
+		const rawChildren = local.children;
+		return typeof rawChildren === "function" ? rawChildren(renderValues()) : rawChildren;
+	};
+	const cellAttrs = () => ({
 		ref: (el) => {
 			setRef(el);
-			assignRef(local.ref, el);
+			assignRef$1(local.ref, el);
 		},
 		...domProps,
-		...mergeProps$2(cleanCellProps(), cleanHoverProps(), cleanFocusProps()),
+		...mergeProps$1(cleanCellProps(), cleanHoverProps(), cleanFocusProps()),
 		colSpan: local.colSpan,
 		class: renderProps.class(),
 		style: renderProps.style(),
 		"data-key": cellNode().key,
-		"data-focused": isFocused() || void 0,
-		"data-focus-visible": isFocusVisible() && isFocused() || void 0,
+		"data-focused": dataAttr(isFocused()),
+		"data-focus-visible": dataAttr(isFocusVisible() && isFocused()),
 		"data-column-index": cellColumnIndex(),
-		"data-pressed": isPressed() || void 0,
-		"data-hovered": isHovered() || void 0,
-		"data-tree-column": isTreeColumn() || void 0,
-		"data-expanded": isTreeGridCell() && cellIsExpanded() || void 0,
-		"data-has-child-items": isTreeGridCell() && cellHasChildItems() || void 0,
-		"data-level": isTreeGridCell() ? cellLevel() : void 0,
-		children: cellChildren()
+		"data-pressed": dataAttr(isPressed()),
+		"data-hovered": dataAttr(isHovered()),
+		"data-tree-column": dataAttr(isTreeColumn()),
+		"data-expanded": dataAttr(isTreeGridCell() && cellIsExpanded()),
+		"data-has-child-items": dataAttr(isTreeGridCell() && cellHasChildItems()),
+		"data-level": isTreeGridCell() ? cellLevel() : void 0
 	});
-	return local.render ? local.render(tableCellProps(), renderValues()) : (() => {
-		var _el$29 = getNextElement(_tmpl$12);
-		use((el) => {
-			setRef(el);
-			assignRef(local.ref, el);
-		}, _el$29);
-		spread(_el$29, mergeProps(domProps, () => mergeProps$2(cleanCellProps(), cleanHoverProps(), cleanFocusProps()), {
-			get colSpan() {
-				return local.colSpan;
-			},
-			get ["class"]() {
-				return renderProps.class();
-			},
-			get style() {
-				return renderProps.style();
-			},
-			get ["data-key"]() {
-				return cellNode().key;
-			},
-			get ["data-focused"]() {
-				return isFocused() || void 0;
-			},
-			get ["data-focus-visible"]() {
-				return memo(() => !!isFocusVisible())() && isFocused() || void 0;
-			},
-			get ["data-column-index"]() {
-				return cellColumnIndex();
-			},
-			get ["data-pressed"]() {
-				return isPressed() || void 0;
-			},
-			get ["data-hovered"]() {
-				return isHovered() || void 0;
-			},
-			get ["data-tree-column"]() {
-				return isTreeColumn() || void 0;
-			},
-			get ["data-expanded"]() {
-				return memo(() => !!isTreeGridCell())() && cellIsExpanded() || void 0;
-			},
-			get ["data-has-child-items"]() {
-				return memo(() => !!isTreeGridCell())() && cellHasChildItems() || void 0;
-			},
-			get ["data-level"]() {
-				return memo(() => !!isTreeGridCell())() ? cellLevel() : void 0;
-			}
-		}), false, true);
-		insert(_el$29, cellChildren);
-		runHydrationEvents();
-		return _el$29;
-	})();
+	if (local.render) return local.render({
+		...cellAttrs(),
+		children: cellChildren()
+	}, renderValues());
+	return createComponent(TableHost, mergeProps({
+		hostTag: "td",
+		get virtualized() {
+			return tableContext.isVirtualized;
+		}
+	}, cellAttrs, { get children() {
+		return cellChildren();
+	} }));
 }
 /**
 * A checkbox cell for row selection.
@@ -1501,30 +1563,28 @@ function TableSelectionCheckbox(props) {
 		key: props.rowKey,
 		isRowDisabled: rowContext?.isRowDisabled
 	}), () => state);
-	return (() => {
-		var _el$30 = getNextElement(_tmpl$13);
-		spread(_el$30, mergeProps(() => selectionCheckboxAria.checkboxProps, {
-			get ["class"]() {
-				return props.class;
-			},
-			get style() {
-				return props.style;
-			},
-			get tabIndex() {
-				return memo(() => !!props.excludeFromTabOrder)() ? -1 : selectionCheckboxAria.checkboxProps.tabIndex;
-			},
-			get ["aria-label"]() {
-				return props["aria-label"] ?? selectionCheckboxAria.checkboxProps["aria-label"];
-			},
-			"onClick": (event) => event.stopPropagation(),
-			"onKeyDown": (event) => event.stopPropagation(),
-			"onKeyUp": (event) => event.stopPropagation(),
-			"onPointerDown": (event) => event.stopPropagation(),
-			"onPointerUp": (event) => event.stopPropagation()
-		}), false, false);
-		runHydrationEvents();
-		return _el$30;
-	})();
+	var _el$18 = getNextElement(_tmpl$13);
+	spread(_el$18, [() => {
+		return selectionCheckboxAria.checkboxProps;
+	}, {
+		get "class"() {
+			return props.class;
+		},
+		get style() {
+			return props.style;
+		},
+		tabindex: -1,
+		get "aria-label"() {
+			return props["aria-label"] ?? selectionCheckboxAria.checkboxProps["aria-label"];
+		},
+		onClick: (event) => event.stopPropagation(),
+		onKeyDown: (event) => event.stopPropagation(),
+		onKeyUp: (event) => event.stopPropagation(),
+		onPointerDown: (event) => event.stopPropagation(),
+		onPointerUp: (event) => event.stopPropagation()
+	}], false);
+	runHydrationEvents();
+	return _el$18;
 }
 /**
 * A checkbox for select-all functionality.
@@ -1534,28 +1594,35 @@ function TableSelectAllCheckbox(props = {}) {
 	if (!context) throw new Error("TableSelectAllCheckbox must be used within a Table");
 	const { state } = context;
 	const selectAllCheckboxAria = createTableSelectAllCheckbox(() => state);
-	let inputRef;
-	createEffect(() => {
-		if (inputRef) inputRef.indeterminate = selectAllCheckboxAria.isIndeterminate;
+	const [inputEl, setInputEl] = createSignal(null);
+	const applyIndeterminate = (input) => {
+		if (input) input.indeterminate = selectAllCheckboxAria.isIndeterminate;
+	};
+	createRenderEffect(() => [selectAllCheckboxAria.checkboxProps.checked, inputEl()], ([, input]) => {
+		applyIndeterminate(input);
 	});
-	return (() => {
-		var _el$31 = getNextElement(_tmpl$13);
-		var _ref$2 = inputRef;
-		typeof _ref$2 === "function" ? use(_ref$2, _el$31) : inputRef = _el$31;
-		spread(_el$31, mergeProps(() => selectAllCheckboxAria.checkboxProps, {
-			get ["class"]() {
-				return props.class;
-			},
-			get style() {
-				return props.style;
-			},
-			get ["aria-label"]() {
-				return props["aria-label"] ?? selectAllCheckboxAria.checkboxProps["aria-label"];
-			}
-		}), false, false);
-		runHydrationEvents();
-		return _el$31;
-	})();
+	var _el$19 = getNextElement(_tmpl$13);
+	ref(() => {
+		return (el) => {
+			setInputEl(el);
+			applyIndeterminate(el);
+		};
+	}, _el$19);
+	spread(_el$19, [() => {
+		return selectAllCheckboxAria.checkboxProps;
+	}, {
+		get "class"() {
+			return props.class;
+		},
+		get style() {
+			return props.style;
+		},
+		get "aria-label"() {
+			return props["aria-label"] ?? selectAllCheckboxAria.checkboxProps["aria-label"];
+		}
+	}], false);
+	runHydrationEvents();
+	return _el$19;
 }
 Table.Header = TableHeader;
 Table.Column = TableColumn;
@@ -1578,8 +1645,15 @@ function ColumnResizer(props) {
 		"slot",
 		"children"
 	]);
+	const stringFormatter = createStringFormatter(racIntlStrings, "react-aria-components");
 	const registerColumn = useContext(ResizableTableRegisterContext);
-	if (registerColumn) registerColumn(local.column.key, { key: local.column.key });
+	const columnDef = useContext(TableColumnDefinitionContext);
+	if (registerColumn) registerColumn(local.column.key, {
+		key: local.column.key,
+		width: columnDef?.width,
+		minWidth: columnDef?.minWidth,
+		maxWidth: columnDef?.maxWidth
+	});
 	const resizeCtx = useContext(TableColumnResizeStateContext);
 	const hasResizeContext = !!resizeCtx;
 	const noopResizeState = {
@@ -1604,7 +1678,7 @@ function ColumnResizer(props) {
 	const [isFocused, setIsFocused] = createSignal(false);
 	const columnResize = createTableColumnResize(() => ({
 		column: local.column,
-		"aria-label": local["aria-label"] ?? "Resizer",
+		"aria-label": local["aria-label"] ?? stringFormatter().format("tableResizer"),
 		isDisabled: local.isDisabled,
 		onResizeStart: (widths) => {
 			resizeCtx?.getCallbacks?.().onResizeStart?.(widths);
@@ -1634,41 +1708,56 @@ function ColumnResizer(props) {
 		const { ref: _ref, ...rest } = hoverProps;
 		return rest;
 	};
-	return (() => {
-		var _el$32 = getNextElement(_tmpl$14), _el$34 = _el$32.firstChild, [_el$35, _co$3] = getNextMarker(_el$34.nextSibling), _el$36 = _el$35.nextSibling, [_el$37, _co$4] = getNextMarker(_el$36.nextSibling);
-		spread(_el$32, mergeProps(domProps, () => columnResize.resizerProps, cleanHoverProps, {
-			get ["class"]() {
+	var _el$20 = getNextElement(_tmpl$14);
+	var _el$22 = _el$20.firstChild;
+	var [_el$23, _el$24] = getNextMarker(_el$22.nextSibling);
+	var _el$25 = _el$23.nextSibling;
+	var [_el$26, _el$27] = getNextMarker(_el$25.nextSibling);
+	spread(_el$20, [
+		domProps,
+		() => {
+			return columnResize.resizerProps;
+		},
+		cleanHoverProps,
+		{
+			get "class"() {
 				return renderProps.class();
 			},
 			get style() {
 				return renderProps.style();
 			},
-			get ["data-hovered"]() {
-				return isHovered() || void 0;
+			get "data-hovered"() {
+				return dataAttr(isHovered());
 			},
-			get ["data-resizing"]() {
-				return columnResize.isResizing() || void 0;
-			}
-		}), false, true);
-		insert(_el$32, createComponent(Show, {
-			when: hasResizeContext,
-			get children() {
-				var _el$33 = getNextElement(_tmpl$13);
-				spread(_el$33, mergeProps(() => columnResize.inputProps, {
-					"onFocus": () => setIsFocused(true),
-					"onBlur": () => setIsFocused(false)
-				}), false, false);
-				runHydrationEvents();
-				return _el$33;
+			get "data-resizing"() {
+				return dataAttr(columnResize.isResizing());
 			}
-		}), _el$35, _co$3);
-		insert(_el$32, (() => {
-			var _c$ = memo(() => typeof local.children === "function");
-			return () => _c$() ? local.children(renderValues()) : local.children;
-		})(), _el$37, _co$4);
-		runHydrationEvents();
-		return _el$32;
-	})();
+		}
+	], true);
+	insert(_el$20, createComponent(Show, {
+		when: hasResizeContext,
+		get children() {
+			var _el$21 = getNextElement(_tmpl$13);
+			spread(_el$21, [() => {
+				return columnResize.inputProps;
+			}, {
+				onFocus: () => setIsFocused(true),
+				onBlur: () => setIsFocused(false)
+			}], false);
+			runHydrationEvents();
+			return _el$21;
+		}
+	}), _el$23, _el$24);
+	insert(_el$20, scope((() => {
+		var _c$ = memo(() => {
+			return typeof local.children === "function";
+		});
+		return () => {
+			return _c$() ? local.children(renderValues()) : local.children;
+		};
+	})()), _el$26, _el$27);
+	runHydrationEvents();
+	return _el$20;
 }
 function ResizableTableContainer(props) {
 	const [local, domProps] = splitProps(props, [
@@ -1683,7 +1772,8 @@ function ResizableTableContainer(props) {
 	]);
 	const [containerRef, setContainerRef] = createSignal(null);
 	const [tableWidth, setTableWidth] = createSignal(0);
-	createEffect(() => {
+	createTrackedEffect(() => {
+		const _s2Cleanups = [];
 		const el = containerRef();
 		if (!el) return;
 		setTableWidth(el.clientWidth);
@@ -1692,10 +1782,13 @@ function ResizableTableContainer(props) {
 				for (const entry of entries) setTableWidth(entry.contentRect.width);
 			});
 			observer.observe(el);
-			onCleanup(() => observer.disconnect());
+			_s2Cleanups.push(() => observer.disconnect());
 		}
+		return () => {
+			for (const c of _s2Cleanups) c();
+		};
 	});
-	const [autoColumns, setAutoColumns] = createSignal(/* @__PURE__ */ new Map());
+	const [autoColumns, setAutoColumns] = createSignal(/* @__PURE__ */ new Map(), { ownedWrite: true });
 	const registerColumn = (key, def) => {
 		setAutoColumns((prev) => {
 			const next = new Map(prev);
@@ -1727,16 +1820,18 @@ function ResizableTableContainer(props) {
 			onResizeEnd: local.onResizeEnd
 		})
 	};
-	return createComponent(ResizableTableRegisterContext.Provider, {
+	return createComponent(ResizableTableRegisterContext, {
 		value: registerColumn,
 		get children() {
-			return createComponent(TableColumnResizeStateContext.Provider, {
+			return createComponent(TableColumnResizeStateContext, {
 				value: contextValue,
 				get children() {
-					var _el$38 = getNextElement(_tmpl$15);
-					use(setContainerRef, _el$38);
-					spread(_el$38, mergeProps(domProps, {
-						get ["class"]() {
+					var _el$28 = getNextElement(_tmpl$);
+					ref(() => {
+						return setContainerRef;
+					}, _el$28);
+					spread(_el$28, [domProps, {
+						get "class"() {
 							return local.class ?? "solidaria-ResizableTableContainer";
 						},
 						get style() {
@@ -1746,10 +1841,12 @@ function ResizableTableContainer(props) {
 								...local.style
 							};
 						}
-					}), false, true);
-					insert(_el$38, () => local.children);
+					}], true);
+					insert(_el$28, scope(() => {
+						return local.children;
+					}));
 					runHydrationEvents();
-					return _el$38;
+					return _el$28;
 				}
 			});
 		}