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

package/src/Table.tsx

@@ -6,19 +6,20 @@
  */
 
 import {
-  type JSX,
   createContext,
   createEffect,
   createMemo,
+  createRenderEffect,
   createUniqueId,
   createSignal,
   onCleanup,
-  splitProps,
   untrack,
   useContext,
   For,
   Show,
+  createTrackedEffect,
 } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import {
   createTable,
   createTableColumnHeader,
@@ -34,6 +35,8 @@ import {
   mergeProps,
   type AriaTableProps,
   createTableColumnResize,
+  useLocale,
+  createStringFormatter,
 } from "@proyecto-viviana/solidaria";
 import {
   createTableState,
@@ -61,6 +64,7 @@ import {
   useRenderProps,
   filterDOMProps,
 } from "./utils";
+import { racIntlStrings } from "./intl";
 import { SharedElementTransition } from "./SharedElementTransition";
 import { type DragAndDropHooks } from "./useDragAndDrop";
 import { ButtonContext, type ButtonContextValue, type ButtonProps } from "./Button";
@@ -68,8 +72,10 @@ import {
   CollectionRendererContext,
   type CollectionRendererContextValue,
   useCollectionRenderer,
+  useCollectionRoot,
+  renderCollectionDropSlots,
 } from "./Collection";
-import { useVirtualizerContext } from "./Virtualizer";
+import { useVirtualizerContext, PersistedVirtualItem } from "./Virtualizer";
 import {
   type LinkDOMProps,
   type RouterOptions,
@@ -79,10 +85,13 @@ import {
 } from "./RouterProvider";
 import {
   getNormalizedDropTargetKey,
+  indexesOutsideRange,
   mergePersistedKeysIntoVirtualRange,
   useDndPersistedKeys,
   useRenderDropIndicator,
 } from "./DragAndDrop";
+import { createTreeDropTargetDelegate } from "./Tree";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 
 export interface TableRenderProps {
   /** Whether the table has focus. */
@@ -133,6 +142,37 @@ function resolveItemKey<T>(item: T, getKey: ((item: T) => Key) | undefined, inde
   return record.id ?? record.key ?? index;
 }
 
+type TableHostTag = "table" | "thead" | "tbody" | "tfoot" | "tr" | "th" | "td";
+
+/** RAC Table.tsx TableElementType / THead / TBody / row / cell: div when virtualized. */
+function TableHost(props: {
+  hostTag: TableHostTag;
+  virtualized?: boolean;
+  children?: JSX.Element;
+  [key: string]: unknown;
+}): JSX.Element {
+  const [local, rest] = splitProps(props, ["hostTag", "virtualized", "children"]);
+  if (local.virtualized) {
+    return <div {...rest}>{local.children}</div>;
+  }
+  switch (local.hostTag) {
+    case "table":
+      return <table {...rest}>{local.children}</table>;
+    case "thead":
+      return <thead {...rest}>{local.children}</thead>;
+    case "tbody":
+      return <tbody {...rest}>{local.children}</tbody>;
+    case "tfoot":
+      return <tfoot {...rest}>{local.children}</tfoot>;
+    case "tr":
+      return <tr {...rest}>{local.children}</tr>;
+    case "th":
+      return <th {...rest}>{local.children}</th>;
+    default:
+      return <td {...rest}>{local.children}</td>;
+  }
+}
+
 /**
  * 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.
@@ -505,6 +545,7 @@ interface TableContextValue<T extends object> {
   dragState?: unknown;
   dropState?: unknown;
   isVirtualized: boolean;
+  getScrollElement: () => HTMLElement | null;
 }
 
 export const TableContext = createContext<TableContextValue<object> | null>(null);
@@ -562,6 +603,7 @@ export function Table<T extends object>(props: TableProps<T>): JSX.Element {
     ],
   );
 
+  const locale = useLocale();
   const [ref, setRef] = createSignal<HTMLTableElement | null>(null);
   const normalizedColumns = createMemo(() => normalizeColumnDefinitions(stateProps.columns));
   const rowHeaderColumnKeys = createMemo(() => getRowHeaderColumnKeys(normalizedColumns()));
@@ -623,7 +665,7 @@ export function Table<T extends object>(props: TableProps<T>): JSX.Element {
         showSelectionCheckboxes: stateProps.showSelectionCheckboxes,
       }));
   const collection = () => state.collection;
-  const parentCollectionRenderer = useCollectionRenderer<T>();
+  const parentCollectionRenderer = useCollectionRenderer<unknown>();
 
   // Keep the hook's return object (do NOT destructure `gridProps`): the grid's
   // sort-description `aria-describedby` is emitted via a `createDescription`
@@ -705,37 +747,33 @@ export function Table<T extends object>(props: TableProps<T>): JSX.Element {
     const hooks = local.dragAndDropHooks;
     return Boolean(hooks?.useDraggableCollectionState && hooks.useDraggableCollection);
   });
-  const dragState = createMemo(() => {
-    if (!hasDraggableDnd()) return undefined;
-    return local.dragAndDropHooks?.useDraggableCollectionState?.({
-      items: stateProps.items,
-    });
-  });
-  const dropState = createMemo(() => {
-    if (!hasDroppableDnd()) return undefined;
-    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(() => {
+  const dragStateValue = hasDraggableDnd()
+    ? local.dragAndDropHooks?.useDraggableCollectionState?.({
+        items: stateProps.items,
+        collection: state.collection,
+        selectedKeys: state.selectedKeys,
+        isSelected: (key) => state.isSelected(key),
+      })
+    : undefined;
+  const dragState = () => dragStateValue;
+  const dropStateValue = hasDroppableDnd()
+    ? local.dragAndDropHooks?.useDroppableCollectionState?.({
+        get collection() {
+          return state.collection;
+        },
+      })
+    : undefined;
+  const dropState = () => dropStateValue;
+  if (local.dragAndDropHooks?.useDraggableCollection && dragStateValue) {
+    local.dragAndDropHooks.useDraggableCollection({}, dragStateValue, () => ref());
+  }
+  const droppableCollectionValue = (() => {
     if (!hasDroppableDnd()) return undefined;
     const hooks = local.dragAndDropHooks;
-    const activeDropState = dropState();
+    const activeDropState = dropStateValue;
     if (!hooks?.useDroppableCollection || !activeDropState) return undefined;
-    const resolveDirection = (): "ltr" | "rtl" => {
-      const el = ref();
-      if (el && typeof window !== "undefined" && typeof window.getComputedStyle === "function") {
-        const dir = window.getComputedStyle(el).direction;
-        if (dir === "rtl") return "rtl";
-      }
-      return typeof document !== "undefined" && document.dir === "rtl" ? "rtl" : "ltr";
-    };
-    const dropTargetDelegate =
+    const resolveDirection = (): "ltr" | "rtl" => locale().direction;
+    const baseDropTargetDelegate =
       hooks.dropTargetDelegate ??
       parentCollectionRenderer?.dropTargetDelegate ??
       (hooks.ListDropTargetDelegate
@@ -745,7 +783,19 @@ export function Table<T extends object>(props: TableProps<T>): JSX.Element {
             { layout: "grid", orientation: "vertical", direction: resolveDirection() },
           )
         : undefined);
-    if (!dropTargetDelegate) return undefined;
+    if (!baseDropTargetDelegate) return undefined;
+    const expandedKeys = state.expandedKeys;
+    const dropTargetDelegate = createTreeDropTargetDelegate(
+      baseDropTargetDelegate,
+      {
+        collection: state.collection,
+        expandedKeys:
+          expandedKeys === "all"
+            ? new Set(Array.from(state.collection, (node) => node.key))
+            : (expandedKeys ?? new Set()),
+      } as unknown as Parameters<typeof createTreeDropTargetDelegate>[1],
+      resolveDirection(),
+    );
     return hooks.useDroppableCollection(
       {
         dropTargetDelegate,
@@ -786,7 +836,8 @@ export function Table<T extends object>(props: TableProps<T>): JSX.Element {
       activeDropState,
       () => ref(),
     );
-  });
+  })();
+  const droppableCollection = () => droppableCollectionValue;
   const isRootDropTarget = createMemo(() => {
     return Boolean(dropState()?.target?.type === "root");
   });
@@ -826,6 +877,7 @@ export function Table<T extends object>(props: TableProps<T>): JSX.Element {
     get isVirtualized() {
       return ariaProps.isVirtualized ?? parentCollectionRenderer?.isVirtualized ?? false;
     },
+    getScrollElement: () => ref(),
   };
   const collectionRenderer = createMemo<CollectionRendererContextValue<unknown>>(() => ({
     ...parentCollectionRenderer,
@@ -858,27 +910,27 @@ export function Table<T extends object>(props: TableProps<T>): JSX.Element {
       ),
       class: renderProps.class(),
       style: renderProps.style(),
-      "data-focused": state.isFocused || undefined,
-      "data-focus-visible": isFocusVisible() || undefined,
-      "data-empty": stateProps.items.length === 0 || undefined,
-      "data-drop-target": isRootDropTarget() || undefined,
+      "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,
     }) as JSX.HTMLAttributes<HTMLTableElement>;
 
   return (
-    <TableContext.Provider value={contextValue as unknown as TableContextValue<object>}>
-      <TableStateContext.Provider
-        value={state as unknown as TableState<object, TableCollection<object>>}
-      >
-        <CollectionRendererContext.Provider value={collectionRenderer()}>
+    <TableContext value={contextValue as unknown as TableContextValue<object>}>
+      <TableStateContext value={state as unknown as TableState<object, TableCollection<object>>}>
+        <CollectionRendererContext value={collectionRenderer()}>
           {local.render ? (
             local.render({ ...tableProps(), children: tableChildren() }, renderValues())
           ) : (
-            <table {...tableProps()}>{tableChildren()}</table>
+            <TableHost hostTag="table" virtualized={contextValue.isVirtualized} {...tableProps()}>
+              {tableChildren()}
+            </TableHost>
           )}
-        </CollectionRendererContext.Provider>
-      </TableStateContext.Provider>
-    </TableContext.Provider>
+        </CollectionRendererContext>
+      </TableStateContext>
+    </TableContext>
   );
 }
 
@@ -947,26 +999,41 @@ export function TableHeader(props: TableHeaderProps): JSX.Element {
       class: renderProps.class(),
       style: renderProps.style(),
       "data-hovered": isHovered() || undefined,
-      children: <tr role="row">{local.children}</tr>,
+      children: (
+        <TableHost hostTag="tr" virtualized={context.isVirtualized} role="row">
+          {local.children}
+        </TableHost>
+      ),
     }) as JSX.HTMLAttributes<HTMLTableSectionElement>;
 
   return local.render ? (
     local.render(headerProps(), renderValues())
   ) : (
-    <thead
-      ref={(el) => assignRef(local.ref, el)}
+    <TableHost
+      hostTag="thead"
+      virtualized={context.isVirtualized}
+      ref={(el: HTMLElement) => assignRef(local.ref, el as HTMLTableSectionElement)}
       {...domProps}
       {...cleanRowGroupProps()}
       {...cleanHoverProps()}
       class={renderProps.class()}
       style={renderProps.style()}
-      data-hovered={isHovered() || undefined}
+      data-hovered={dataAttr(isHovered())}
     >
-      <tr role="row">{local.children}</tr>
-    </thead>
+      <TableHost hostTag="tr" virtualized={context.isVirtualized} role="row">
+        {local.children}
+      </TableHost>
+    </TableHost>
   );
 }
 
+const TableColumnDefinitionContext = createContext<{
+  key: Key;
+  width?: ColumnSize;
+  minWidth?: number;
+  maxWidth?: number;
+} | null>(null);
+
 /**
  * A column header in a table.
  */
@@ -1104,9 +1171,11 @@ export function TableColumn(props: TableColumnProps): JSX.Element {
     return { ...base, ...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: HTMLTableCellElement) => {
         setRef(el);
@@ -1116,38 +1185,42 @@ export function TableColumn(props: TableColumnProps): JSX.Element {
       ...mergeProps(cleanColumnHeaderProps(), cleanHoverProps(), cleanFocusProps()),
       class: renderProps.class(),
       style: columnStyle(),
-      "data-sortable": local.allowsSorting || undefined,
+      "data-sortable": dataAttr(!!local.allowsSorting),
       "data-sort-direction": sortDirection() || undefined,
-      "data-resizable": local.allowsResizing || undefined,
-      "data-resizing": isResizing() || undefined,
-      "data-hovered": isHovered() || undefined,
-      "data-focused": state.focusedKey === local.id || undefined,
-      "data-focus-visible": (isFocusVisible() && state.focusedKey === local.id) || undefined,
-      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,
     }) as JSX.ThHTMLAttributes<HTMLTableCellElement>;
 
-  return local.render ? (
-    local.render(columnProps(), renderValues())
-  ) : (
-    <th
-      ref={(el) => {
-        setRef(el);
-        assignRef(local.ref, el);
-      }}
-      {...domProps}
-      {...mergeProps(cleanColumnHeaderProps(), cleanHoverProps(), cleanFocusProps())}
-      class={renderProps.class()}
-      style={columnStyle()}
-      data-sortable={local.allowsSorting || undefined}
-      data-sort-direction={sortDirection() || undefined}
-      data-resizable={local.allowsResizing || undefined}
-      data-resizing={isResizing() || undefined}
-      data-hovered={isHovered() || undefined}
-      data-focused={state.focusedKey === local.id || undefined}
-      data-focus-visible={(isFocusVisible() && state.focusedKey === local.id) || undefined}
-    >
-      {columnChildren()}
-    </th>
+  const columnDefinition = {
+    key: local.id,
+    width: local.width ?? local.defaultWidth,
+    minWidth: local.minWidth,
+    maxWidth: local.maxWidth,
+  };
+
+  if (local.render) {
+    return (
+      <TableColumnDefinitionContext value={columnDefinition}>
+        {local.render({ ...columnAttrs(), children: columnChildren() }, renderValues())}
+      </TableColumnDefinitionContext>
+    );
+  }
+
+  // Children are JSX children of the host, not an eager `children` entry in the
+  // spread object: the DOM build claims the element's hydration key before it
+  // evaluates children, while `ssrElement` receives an already-built props
+  // object, so an eager entry would key the children ahead of the element on
+  // the server and the client would claim the wrong nodes.
+  return (
+    <TableColumnDefinitionContext value={columnDefinition}>
+      <TableHost hostTag="th" virtualized={context.isVirtualized} {...columnAttrs()}>
+        {columnChildren()}
+      </TableHost>
+    </TableColumnDefinitionContext>
   );
 }
 
@@ -1198,7 +1271,7 @@ export function TableBody<T extends object>(props: TableBodyProps<T>): JSX.Eleme
 
   const isEmpty = () => items().length === 0;
   const virtualizer = useVirtualizerContext();
-  const parentCollectionRenderer = useCollectionRenderer<T>();
+  const parentCollectionRenderer = useCollectionRenderer<unknown>();
   const rowNodes = createMemo(() =>
     Array.from(context.collection).filter((node) => node.type === "item"),
   );
@@ -1214,14 +1287,8 @@ export function TableBody<T extends object>(props: TableBodyProps<T>): JSX.Eleme
     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 as { target?: DropTarget | null } | undefined)?.target;
     const normalizedDropKey = getNormalizedDropTargetKey(dropTarget, context.collection);
-    const focusedKey = context.state.focusedKey;
-    const focusedIndex =
-      focusedKey != null ? rowNodes().findIndex((node) => node.key === focusedKey) : -1;
     const forceIncludeIndexes = [
       dropTarget?.type === "item"
         ? rowNodes().findIndex((node) => node.key === dropTarget.key)
@@ -1229,21 +1296,23 @@ export function TableBody<T extends object>(props: TableBodyProps<T>): JSX.Eleme
       normalizedDropKey != null
         ? rowNodes().findIndex((node) => node.key === normalizedDropKey)
         : -1,
-      dropTarget?.type === "item" ? -1 : focusedIndex,
     ].filter((index) => index >= 0);
-    return mergePersistedKeysIntoVirtualRange(
-      baseRange,
-      persistedIndexes,
-      rowCount,
-      virtualizer,
-      80,
-      {
-        forceIncludeIndexes,
-        forceIncludeMaxSpan: 320,
-      },
-    );
+    return mergePersistedKeysIntoVirtualRange(baseRange, [], rowCount, virtualizer, 80, {
+      forceIncludeIndexes,
+      forceIncludeMaxSpan: 320,
+    });
   });
-  createEffect(() => {
+  const persistedOutsideIndexes = createMemo(() => {
+    const range = virtualRange();
+    if (!range) return [] as number[];
+    const persistedIndexes = Array.from(persistedKeys())
+      .map((key) => rowNodes().findIndex((node) => node.key === key))
+      .filter((index) => index >= 0);
+    return indexesOutsideRange(range, persistedIndexes);
+  });
+  createTrackedEffect(() => {
+    const _s2Cleanups: Array<() => void> = [];
+
     if (!virtualizer || !parentCollectionRenderer?.isVirtualized) return;
     virtualizer.setDropTargetItemCountResolver(() => items().length);
     virtualizer.setDropTargetIndexResolver((key) => {
@@ -1258,11 +1327,15 @@ export function TableBody<T extends object>(props: TableBodyProps<T>): JSX.Eleme
         key: typeof node.key === "string" || typeof node.key === "number" ? node.key : undefined,
       };
     });
-    onCleanup(() => {
+    _s2Cleanups.push(() => {
       virtualizer.setDropTargetIndexResolver(undefined);
       virtualizer.setDropTargetItemCountResolver(undefined);
       virtualizer.setDropTargetResolver(undefined);
     });
+
+    return () => {
+      for (const c of _s2Cleanups) c();
+    };
   });
   const visibleItems = createMemo(() => {
     // Tree grid: render the flattened set of visible rows (top-level + expanded descendants)
@@ -1275,61 +1348,65 @@ export function TableBody<T extends object>(props: TableBodyProps<T>): JSX.Eleme
     return items().slice(range.start, range.end);
   });
   const spacerColSpan = () => context.columns.length + (context.showSelectionCheckboxes ? 1 : 0);
+  const CollectionRoot = useCollectionRoot();
+
+  const collectionRows = () => {
+    const rows = (
+      <For each={visibleItems()}>
+        {(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),
+          });
+        }}
+      </For>
+    );
+    if (!context.isVirtualized) return rows;
+    return (
+      <CollectionRoot
+        collection={virtualRange() ? items() : []}
+        scrollRef={() => context.getScrollElement()}
+        persistedKeys={persistedKeys()}
+      >
+        {rows}
+        <For each={persistedOutsideIndexes()}>
+          {(index) => (
+            <PersistedVirtualItem index={index}>
+              {renderCollectionDropSlots({
+                index,
+                lastIndex: rowNodes().length - 1,
+                renderDropIndicator: (i, position) =>
+                  parentCollectionRenderer?.renderDropIndicator?.(i, position),
+                children: local.children?.(items()[index]),
+              })}
+            </PersistedVirtualItem>
+          )}
+        </For>
+      </CollectionRoot>
+    );
+  };
 
   const bodyChildren = () => (
     <>
       <SharedElementTransition>
         <Show
           when={isEmpty() && local.renderEmptyState && !local.isLoading}
-          fallback={
-            <>
-              {virtualRange()?.offsetTop ? (
-                <tr role="presentation" aria-hidden="true" data-virtualizer-spacer="top">
-                  <td
-                    colSpan={spacerColSpan()}
-                    style={{ height: `${virtualRange()!.offsetTop}px`, padding: "0", border: "0" }}
-                  />
-                </tr>
-              ) : null}
-              <For each={visibleItems()}>
-                {(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 (
-                    <>
-                      {beforeIndicator()}
-                      {onIndicator()}
-                      {local.children?.(item)}
-                      {afterIndicator()}
-                    </>
-                  );
-                }}
-              </For>
-              {virtualRange()?.offsetBottom ? (
-                <tr role="presentation" aria-hidden="true" data-virtualizer-spacer="bottom">
-                  <td
-                    colSpan={spacerColSpan()}
-                    style={{
-                      height: `${virtualRange()!.offsetBottom}px`,
-                      padding: "0",
-                      border: "0",
-                    }}
-                  />
-                </tr>
-              ) : null}
-            </>
-          }
+          fallback={collectionRows()}
         >
-          <tr role="row" data-empty-state>
-            <th role="rowheader" colSpan={spacerColSpan()}>
+          <TableHost hostTag="tr" virtualized={context.isVirtualized} role="row" data-empty-state>
+            <TableHost
+              hostTag="th"
+              virtualized={context.isVirtualized}
+              role="rowheader"
+              colSpan={spacerColSpan()}
+            >
               {local.renderEmptyState?.()}
-            </th>
-          </tr>
+            </TableHost>
+          </TableHost>
         </Show>
       </SharedElementTransition>
       <Show when={local.hasMore && local.onLoadMore}>
@@ -1348,83 +1425,25 @@ export function TableBody<T extends object>(props: TableBodyProps<T>): JSX.Eleme
       ...cleanRowGroupProps(),
       class: renderProps.class(),
       style: renderProps.style(),
-      "data-empty": isEmpty() || undefined,
+      "data-empty": dataAttr(isEmpty()),
       children: bodyChildren(),
     }) as JSX.HTMLAttributes<HTMLTableSectionElement>;
 
   return local.render ? (
     local.render(bodyProps(), renderValues())
   ) : (
-    <tbody
-      ref={(el) => assignRef(local.ref, el)}
+    <TableHost
+      hostTag="tbody"
+      virtualized={context.isVirtualized}
+      ref={(el: HTMLElement) => assignRef(local.ref, el as HTMLTableSectionElement)}
       {...domProps}
       {...cleanRowGroupProps()}
       class={renderProps.class()}
       style={renderProps.style()}
-      data-empty={isEmpty() || undefined}
+      data-empty={dataAttr(isEmpty())}
     >
-      <SharedElementTransition>
-        <Show
-          when={isEmpty() && local.renderEmptyState && !local.isLoading}
-          fallback={
-            <>
-              {virtualRange()?.offsetTop ? (
-                <tr role="presentation" aria-hidden="true" data-virtualizer-spacer="top">
-                  <td
-                    colSpan={spacerColSpan()}
-                    style={{ height: `${virtualRange()!.offsetTop}px`, padding: "0", border: "0" }}
-                  />
-                </tr>
-              ) : null}
-              <For each={visibleItems()}>
-                {(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 (
-                    <>
-                      {beforeIndicator()}
-                      {onIndicator()}
-                      {local.children?.(item)}
-                      {afterIndicator()}
-                    </>
-                  );
-                }}
-              </For>
-              {virtualRange()?.offsetBottom ? (
-                <tr role="presentation" aria-hidden="true" data-virtualizer-spacer="bottom">
-                  <td
-                    colSpan={spacerColSpan()}
-                    style={{
-                      height: `${virtualRange()!.offsetBottom}px`,
-                      padding: "0",
-                      border: "0",
-                    }}
-                  />
-                </tr>
-              ) : null}
-            </>
-          }
-        >
-          <tr role="row" data-empty-state>
-            <th role="rowheader" colSpan={spacerColSpan()}>
-              {local.renderEmptyState?.()}
-            </th>
-          </tr>
-        </Show>
-      </SharedElementTransition>
-      <Show when={local.hasMore && local.onLoadMore}>
-        <TableLoadMoreItem
-          onLoadMore={local.onLoadMore!}
-          isLoading={local.isLoading}
-          colSpan={spacerColSpan()}
-        />
-      </Show>
-    </tbody>
+      {bodyChildren()}
+    </TableHost>
   );
 }
 
@@ -1461,7 +1480,9 @@ export function TableFooter<T extends object>(props: TableFooterProps<T>): JSX.E
   };
 
   return (
-    <tfoot
+    <TableHost
+      hostTag="tfoot"
+      virtualized={context.isVirtualized}
       {...domProps}
       {...cleanRowGroupProps()}
       class={renderProps.class()}
@@ -1473,14 +1494,16 @@ export function TableFooter<T extends object>(props: TableFooterProps<T>): JSX.E
       >
         <For each={items()}>{(item) => (local.children as (item: T) => JSX.Element)(item)}</For>
       </Show>
-    </tfoot>
+    </TableHost>
   );
 }
 
 export function TableLoadMoreItem(props: TableLoadMoreItemProps): JSX.Element {
-  let sentinelRef: HTMLDivElement | undefined;
+  const [sentinel, setSentinel] = createSignal<HTMLDivElement | undefined>();
   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;
@@ -1492,21 +1515,26 @@ export function TableLoadMoreItem(props: TableLoadMoreItemProps): JSX.Element {
     }
   };
 
-  createEffect(() => {
-    if (!sentinelRef || typeof IntersectionObserver !== "function") return;
-    const offset = props.scrollOffset ?? 1;
-    const margin = `0px 0px ${100 * offset}% 0px`;
-    const observer = new IntersectionObserver(
-      (entries) => {
-        if (entries[0]?.isIntersecting) {
-          void triggerLoadMore();
-        }
-      },
-      { rootMargin: margin },
-    );
-    observer.observe(sentinelRef);
-    return () => observer.disconnect();
-  });
+  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) {
+            void triggerLoadMore();
+          }
+        },
+        { rootMargin: margin },
+      );
+      observer.observe(current);
+      return () => observer.disconnect();
+    },
+  );
 
   const renderProps = useRenderProps(
     {
@@ -1522,30 +1550,70 @@ export function TableLoadMoreItem(props: TableLoadMoreItemProps): JSX.Element {
 
   return (
     <>
-      <tr style={{ position: "relative", width: 0, height: 0, overflow: "hidden" }} inert>
-        <td>
-          <div
-            ref={sentinelRef}
-            data-testid="loadMoreSentinel"
-            style={{ position: "absolute", height: "1px", width: "1px" }}
-          />
-        </td>
-      </tr>
-      <Show when={isLoading()}>
-        <tr
-          role="row"
-          tabIndex={0}
-          onFocus={() => {
-            void triggerLoadMore();
-          }}
-          class={renderProps.class()}
-          style={renderProps.style()}
-          data-loading
+      <Show
+        when={tableContext?.isVirtualized}
+        fallback={
+          <>
+            <tr style={{ position: "relative", width: 0, height: 0, overflow: "hidden" }} inert>
+              <td>
+                <div
+                  ref={setSentinel}
+                  data-testid="loadMoreSentinel"
+                  style={{ position: "absolute", height: "1px", width: "1px" }}
+                />
+              </td>
+            </tr>
+            <Show when={isLoading()}>
+              <tr
+                role="row"
+                tabindex={0}
+                onFocus={() => {
+                  void triggerLoadMore();
+                }}
+                class={renderProps.class()}
+                style={renderProps.style()}
+                data-loading
+              >
+                <td role="rowheader" colspan={props.colSpan ?? 1}>
+                  {renderProps.renderChildren()}
+                </td>
+              </tr>
+            </Show>
+          </>
+        }
+      >
+        <TableHost
+          hostTag="tr"
+          virtualized
+          style={{ position: "relative", width: 0, height: 0, overflow: "hidden" }}
+          inert
         >
-          <td role="rowheader" colSpan={props.colSpan ?? 1}>
-            {renderProps.renderChildren()}
-          </td>
-        </tr>
+          <TableHost hostTag="td" virtualized>
+            <div
+              ref={setSentinel}
+              data-testid="loadMoreSentinel"
+              style={{ position: "absolute", height: "1px", width: "1px" }}
+            />
+          </TableHost>
+        </TableHost>
+        <Show when={isLoading()}>
+          <TableHost
+            hostTag="tr"
+            virtualized
+            role="row"
+            tabindex={0}
+            onFocus={() => {
+              void triggerLoadMore();
+            }}
+            class={renderProps.class()}
+            style={renderProps.style()}
+            data-loading
+          >
+            <TableHost hostTag="td" virtualized role="rowheader" colSpan={props.colSpan ?? 1}>
+              {renderProps.renderChildren()}
+            </TableHost>
+          </TableHost>
+        </Show>
       </Show>
     </>
   );
@@ -1744,8 +1812,12 @@ export function TableRow<T extends object>(props: TableRowProps<T>): JSX.Element
   };
 
   const rowContextValue: TableRowContextValue = {
-    rowKey: rowKey(),
-    rowNode: rowNode(),
+    get rowKey() {
+      return rowKey();
+    },
+    get rowNode() {
+      return rowNode();
+    },
     get isRowDisabled() {
       return isDisabled();
     },
@@ -1760,7 +1832,11 @@ export function TableRow<T extends object>(props: TableRowProps<T>): JSX.Element
         registeredCellIds.push(cellId);
       }
 
-      return explicitId ?? tableContext.columns[index]?.key;
+      // Selection cells use `id="__selection__"` and never register. Map the
+      // remaining cells onto data columns so a live checkbox column cannot
+      // steal Name's index and drop `role=rowheader` after a collection rebuild.
+      const dataColumns = tableContext.columns.filter((column) => column.key !== "__selection__");
+      return explicitId ?? dataColumns[index]?.key;
     },
   };
   const dragButtonProps = createMemo<ButtonProps>(() => {
@@ -1834,8 +1910,8 @@ export function TableRow<T extends object>(props: TableRowProps<T>): JSX.Element
   };
 
   return (
-    <TableRowContext.Provider value={rowContextValue}>
-      <ButtonContext.Provider value={buttonContextValue}>
+    <TableRowContext value={rowContextValue}>
+      <ButtonContext value={buttonContextValue}>
         {(() => {
           // Build the row's children HERE — inside BOTH providers — so each cell instantiates under
           // this owner. TableCell/EditableCell read TableRowContext, and a slotted
@@ -1869,6 +1945,12 @@ export function TableRow<T extends object>(props: TableRowProps<T>): JSX.Element
               ref: (el: HTMLTableRowElement) => {
                 setRef(el);
                 assignRef(local.ref, el);
+                const dragRef = (
+                  draggableItem()?.dragProps as
+                    | { ref?: (el: HTMLTableRowElement) => void }
+                    | undefined
+                )?.ref;
+                if (typeof dragRef === "function") dragRef(el);
               },
               ...domProps,
               ...mergeProps(
@@ -1882,13 +1964,13 @@ export function TableRow<T extends object>(props: TableRowProps<T>): JSX.Element
               class: renderProps.class(),
               style: rowStyle(),
               "data-key": rowKey(),
-              "data-selected": isSelected() || undefined,
-              "data-focused": isFocused() || undefined,
-              "data-focus-visible": (isFocusVisible() && isFocused()) || undefined,
+              "data-selected": dataAttr(isSelected()),
+              "data-focused": dataAttr(isFocused()),
+              "data-focus-visible": dataAttr(isFocusVisible() && isFocused()),
               "data-focus-visible-within": dataAttr(isFocusWithin() && isGlobalFocusVisible()),
-              "data-pressed": isPressed() || undefined,
-              "data-hovered": isHovered() || undefined,
-              "data-disabled": isDisabled() || undefined,
+              "data-pressed": dataAttr(isPressed()),
+              "data-hovered": dataAttr(isHovered()),
+              "data-disabled": dataAttr(isDisabled()),
               "data-href": linkProps().href,
               "data-target": linkProps().target,
               "data-rel": linkProps().rel,
@@ -1900,10 +1982,10 @@ export function TableRow<T extends object>(props: TableRowProps<T>): JSX.Element
                     : undefined,
               "data-ping": linkProps().ping,
               "data-referrer-policy": linkProps().referrerPolicy,
-              "data-dragging": draggableItem()?.isDragging || undefined,
-              "data-drop-target": droppableItem()?.isDropTarget || undefined,
-              "data-expanded": (isTreeRow() && isExpanded()) || undefined,
-              "data-has-child-items": (isTreeRow() && hasChildItems()) || undefined,
+              "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() : undefined,
               children: rowChildrenContent,
             }) as JSX.HTMLAttributes<HTMLTableRowElement>;
@@ -1912,61 +1994,19 @@ export function TableRow<T extends object>(props: TableRowProps<T>): JSX.Element
             <Show
               when={local.render}
               fallback={
-                // Bind attributes individually on a STABLE <tr> (mirroring TableCell) so a
-                // render-props change updates attributes in place instead of recreating the element
-                // and its subtree.
-                <tr
-                  ref={(el: HTMLTableRowElement) => {
-                    setRef(el);
-                    assignRef(local.ref, el);
-                  }}
-                  {...domProps}
-                  {...mergeProps(
-                    cleanRowProps(),
-                    cleanHoverProps(),
-                    cleanFocusProps(),
-                    focusWithinProps as Record<string, unknown>,
-                    (draggableItem()?.dragProps as Record<string, unknown> | undefined) ?? {},
-                    (droppableItem()?.dropProps as Record<string, unknown> | undefined) ?? {},
-                  )}
-                  class={renderProps.class()}
-                  style={rowStyle()}
-                  data-key={rowKey()}
-                  data-selected={isSelected() || undefined}
-                  data-focused={isFocused() || undefined}
-                  data-focus-visible={(isFocusVisible() && isFocused()) || undefined}
-                  data-focus-visible-within={dataAttr(isFocusWithin() && isGlobalFocusVisible())}
-                  data-pressed={isPressed() || undefined}
-                  data-hovered={isHovered() || undefined}
-                  data-disabled={isDisabled() || undefined}
-                  data-href={linkProps().href}
-                  data-target={linkProps().target}
-                  data-rel={linkProps().rel}
-                  data-download={
-                    typeof linkProps().download === "string"
-                      ? linkProps().download
-                      : linkProps().download
-                        ? ""
-                        : undefined
-                  }
-                  data-ping={linkProps().ping}
-                  data-referrer-policy={linkProps().referrerPolicy}
-                  data-dragging={draggableItem()?.isDragging || undefined}
-                  data-drop-target={droppableItem()?.isDropTarget || undefined}
-                  data-expanded={(isTreeRow() && isExpanded()) || undefined}
-                  data-has-child-items={(isTreeRow() && hasChildItems()) || undefined}
-                  data-level={isTreeRow() ? rowLevel() : undefined}
-                >
-                  {rowChildrenContent}
-                </tr>
+                tableContext.isVirtualized ? (
+                  <div {...(tableRowProps() as unknown as JSX.HTMLAttributes<HTMLDivElement>)} />
+                ) : (
+                  <tr {...tableRowProps()} />
+                )
               }
             >
               {local.render!(tableRowProps(), renderValues())}
             </Show>
           );
         })()}
-      </ButtonContext.Provider>
-    </TableRowContext.Provider>
+      </ButtonContext>
+    </TableRowContext>
   );
 }
 
@@ -2004,15 +2044,28 @@ export function TableCell(props: TableCellProps): JSX.Element {
 
   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;
+      const isRowHeader = collection.rowHeaderColumnKeys.has(key);
+      return {
+        type: isRowHeader ? ("rowheader" as const) : ("cell" as const),
+        key: cellKey,
+        value: rowNode.value,
+        textValue: "",
+        level: 1,
+        index: 0,
+        parentKey: rowKey,
+        hasChildNodes: false,
+        childNodes: [],
+      } as GridNode<unknown>;
     }
 
     return {
       type: "cell" as const,
-      key: key ?? `${rowKey}-cell`,
+      key: `${rowKey}-cell`,
       value: rowNode.value,
       textValue: "",
       level: 1,
@@ -2093,9 +2146,11 @@ export function TableCell(props: TableCellProps): JSX.Element {
     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: HTMLTableCellElement) => {
         setRef(el);
@@ -2107,44 +2162,28 @@ export function TableCell(props: TableCellProps): JSX.Element {
       class: renderProps.class(),
       style: renderProps.style(),
       "data-key": cellNode().key,
-      "data-focused": isFocused() || undefined,
-      "data-focus-visible": (isFocusVisible() && isFocused()) || undefined,
+      "data-focused": dataAttr(isFocused()),
+      "data-focus-visible": dataAttr(isFocusVisible() && isFocused()),
       "data-column-index": cellColumnIndex(),
-      "data-pressed": isPressed() || undefined,
-      "data-hovered": isHovered() || undefined,
-      "data-tree-column": isTreeColumn() || undefined,
-      "data-expanded": (isTreeGridCell() && cellIsExpanded()) || undefined,
-      "data-has-child-items": (isTreeGridCell() && cellHasChildItems()) || undefined,
+      "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() : undefined,
-      children: cellChildren(),
     }) as JSX.TdHTMLAttributes<HTMLTableCellElement>;
 
-  return local.render ? (
-    local.render(tableCellProps(), renderValues())
-  ) : (
-    <td
-      ref={(el) => {
-        setRef(el);
-        assignRef(local.ref, el);
-      }}
-      {...domProps}
-      {...mergeProps(cleanCellProps(), cleanHoverProps(), cleanFocusProps())}
-      colSpan={local.colSpan}
-      class={renderProps.class()}
-      style={renderProps.style()}
-      data-key={cellNode().key}
-      data-focused={isFocused() || undefined}
-      data-focus-visible={(isFocusVisible() && isFocused()) || undefined}
-      data-column-index={cellColumnIndex()}
-      data-pressed={isPressed() || undefined}
-      data-hovered={isHovered() || undefined}
-      data-tree-column={isTreeColumn() || undefined}
-      data-expanded={(isTreeGridCell() && cellIsExpanded()) || undefined}
-      data-has-child-items={(isTreeGridCell() && cellHasChildItems()) || undefined}
-      data-level={isTreeGridCell() ? cellLevel() : undefined}
-    >
+  if (local.render) {
+    return local.render({ ...cellAttrs(), children: cellChildren() }, renderValues());
+  }
+
+  // JSX children, not an eager `children` entry in the spread object — see
+  // TableColumn: the element's hydration key must precede its children on
+  // both the server and the client.
+  return (
+    <TableHost hostTag="td" virtualized={tableContext.isVirtualized} {...cellAttrs()}>
       {cellChildren()}
-    </td>
+    </TableHost>
   );
 }
 
@@ -2178,7 +2217,7 @@ export function TableSelectionCheckbox(props: TableSelectionCheckboxProps): JSX.
       {...selectionCheckboxAria.checkboxProps}
       class={props.class}
       style={props.style}
-      tabIndex={props.excludeFromTabOrder ? -1 : selectionCheckboxAria.checkboxProps.tabIndex}
+      tabindex={-1}
       aria-label={props["aria-label"] ?? selectionCheckboxAria.checkboxProps["aria-label"]}
       onClick={(event) => event.stopPropagation()}
       onKeyDown={(event) => event.stopPropagation()}
@@ -2210,16 +2249,29 @@ export function TableSelectAllCheckbox(props: TableSelectAllCheckboxProps = {}):
     () => state as TableState<object, TableCollection<object>>,
   );
 
-  let inputRef: HTMLInputElement | undefined;
-  createEffect(() => {
-    if (inputRef) {
-      inputRef.indeterminate = selectAllCheckboxAria.isIndeterminate;
+  const [inputEl, setInputEl] = createSignal<HTMLInputElement | null>(null);
+
+  // Chromium clears the `indeterminate` IDL whenever `checked` is written.
+  // Re-apply after that write so mixed Select All stays mixed in the AX tree.
+  const applyIndeterminate = (input: HTMLInputElement | null) => {
+    if (input) {
+      input.indeterminate = selectAllCheckboxAria.isIndeterminate;
     }
-  });
+  };
+
+  createRenderEffect(
+    () => [selectAllCheckboxAria.checkboxProps.checked, inputEl()] as const,
+    ([, input]) => {
+      applyIndeterminate(input);
+    },
+  );
 
   return (
     <input
-      ref={inputRef}
+      ref={(el) => {
+        setInputEl(el);
+        applyIndeterminate(el);
+      }}
       {...selectAllCheckboxAria.checkboxProps}
       class={props.class}
       style={props.style}
@@ -2283,10 +2335,18 @@ export function ColumnResizer(props: ColumnResizerProps): JSX.Element {
     "children",
   ]);
 
+  const stringFormatter = createStringFormatter(racIntlStrings, "react-aria-components");
+
   // Register this column with the ResizableTableContainer (auto-collect columns)
   const registerColumn = useContext(ResizableTableRegisterContext);
+  const columnDef = useContext(TableColumnDefinitionContext);
   if (registerColumn) {
-    registerColumn(local.column.key, { key: local.column.key });
+    registerColumn(local.column.key, {
+      key: local.column.key,
+      width: columnDef?.width,
+      minWidth: columnDef?.minWidth,
+      maxWidth: columnDef?.maxWidth,
+    });
   }
 
   const resizeCtx = useContext(TableColumnResizeStateContext);
@@ -2319,7 +2379,7 @@ export function ColumnResizer(props: ColumnResizerProps): JSX.Element {
   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);
@@ -2365,8 +2425,8 @@ export function ColumnResizer(props: ColumnResizerProps): JSX.Element {
       {...cleanHoverProps()}
       class={renderProps.class()}
       style={renderProps.style()}
-      data-hovered={isHovered() || undefined}
-      data-resizing={columnResize.isResizing() || undefined}
+      data-hovered={dataAttr(isHovered())}
+      data-resizing={dataAttr(columnResize.isResizing())}
     >
       <Show when={hasResizeContext}>
         <input
@@ -2415,7 +2475,9 @@ export function ResizableTableContainer(props: ResizableTableContainerProps): JS
   const [tableWidth, setTableWidth] = createSignal(0);
 
   // Track container width via ResizeObserver
-  createEffect(() => {
+  createTrackedEffect(() => {
+    const _s2Cleanups: Array<() => void> = [];
+
     const el = containerRef();
     if (!el) return;
 
@@ -2429,14 +2491,18 @@ export function ResizableTableContainer(props: ResizableTableContainerProps): JS
         }
       });
       observer.observe(el);
-      onCleanup(() => observer.disconnect());
+      _s2Cleanups.push(() => observer.disconnect());
     }
+
+    return () => {
+      for (const c of _s2Cleanups) c();
+    };
   });
 
   // Auto-collected columns from ColumnResizer children
   const [autoColumns, setAutoColumns] = createSignal<
     Map<Key, { key: Key; width?: ColumnSize; minWidth?: number; maxWidth?: number }>
-  >(new Map());
+  >(new Map(), { ownedWrite: true });
 
   const registerColumn = (
     key: Key,
@@ -2483,8 +2549,8 @@ export function ResizableTableContainer(props: ResizableTableContainerProps): JS
   };
 
   return (
-    <ResizableTableRegisterContext.Provider value={registerColumn}>
-      <TableColumnResizeStateContext.Provider value={contextValue}>
+    <ResizableTableRegisterContext value={registerColumn}>
+      <TableColumnResizeStateContext value={contextValue}>
         <div
           ref={setContainerRef}
           {...domProps}
@@ -2493,8 +2559,8 @@ export function ResizableTableContainer(props: ResizableTableContainerProps): JS
         >
           {local.children}
         </div>
-      </TableColumnResizeStateContext.Provider>
-    </ResizableTableRegisterContext.Provider>
+      </TableColumnResizeStateContext>
+    </ResizableTableRegisterContext>
   );
 }