@proyecto-viviana/solidaria-components 0.3.1 → 0.4.0

package/src/Table.tsx

@@ -14,6 +14,7 @@ import {
   createSignal,
   onCleanup,
   splitProps,
+  untrack,
   useContext,
   For,
   Show,
@@ -36,6 +37,7 @@ import {
 } from "@proyecto-viviana/solidaria";
 import {
   createTableState,
+  createTreeGridState,
   createTableCollection,
   createTableColumnResizeState,
   type TableState,
@@ -44,6 +46,7 @@ import {
   type Key,
   type SortDescriptor,
   type ColumnDefinition,
+  type RowDefinition,
   type ColumnSize,
   type GridNode,
   type DropTarget,
@@ -59,7 +62,7 @@ import {
 } from "./utils";
 import { SharedElementTransition } from "./SharedElementTransition";
 import { type DragAndDropHooks } from "./useDragAndDrop";
-import { ButtonContext, type ButtonProps } from "./Button";
+import { ButtonContext, type ButtonContextValue, type ButtonProps } from "./Button";
 import {
   CollectionRendererContext,
   type CollectionRendererContextValue,
@@ -122,6 +125,35 @@ function normalizeColumnDefinitions<T>(
   });
 }
 
+/** Resolves a stable, unique key for a tree-grid item (keys must be unique across levels). */
+function resolveItemKey<T>(item: T, getKey: ((item: T) => Key) | undefined, index: number): Key {
+  if (getKey) return getKey(item);
+  const record = item as { id?: Key; key?: Key };
+  return record.id ?? record.key ?? index;
+}
+
+/**
+ * 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.
+ */
+function toTreeRowDefinitions<T>(
+  items: Iterable<T>,
+  getKey: ((item: T) => Key) | undefined,
+  getChildItems: ((item: T) => Iterable<T> | undefined) | undefined,
+): RowDefinition<T>[] {
+  return Array.from(items).map((item, index) => {
+    const childItems = getChildItems?.(item);
+    const childRows = childItems
+      ? toTreeRowDefinitions(childItems, getKey, getChildItems)
+      : undefined;
+    return {
+      key: resolveItemKey(item, getKey, index),
+      value: item,
+      childRows: childRows && childRows.length > 0 ? childRows : undefined,
+    };
+  });
+}
+
 function getRowHeaderColumnKeys<T>(columns: (ColumnDefinition<T> & { id?: Key })[]): Set<Key> {
   const keys = new Set<Key>();
 
@@ -192,6 +224,18 @@ export interface TableProps<T extends object> extends Omit<AriaTableProps, "chil
   ) => JSX.Element;
   /** Drag and drop hooks from `useDragAndDrop`. */
   dragAndDropHooks?: DragAndDropHooks<T>;
+  /**
+   * Derives the child rows of an item, turning the flat `items` into a tree grid
+   * (expandable rows). Providing this — or any `UNSTABLE_*expandedKeys` prop — switches the
+   * table into tree-grid mode. Mirrors `@react-aria/table`'s `UNSTABLE_` tree-grid feature.
+   */
+  UNSTABLE_childItems?: (item: T) => Iterable<T> | undefined;
+  /** The currently expanded row keys (controlled). Tree grid only. */
+  UNSTABLE_expandedKeys?: "all" | Iterable<Key>;
+  /** The initial expanded row keys (uncontrolled). Tree grid only. */
+  UNSTABLE_defaultExpandedKeys?: "all" | Iterable<Key>;
+  /** Handler called when rows are expanded or collapsed. Tree grid only. */
+  UNSTABLE_onExpandedChange?: (keys: Set<Key>) => void;
 }
 
 export interface TableHeaderRenderProps {
@@ -324,6 +368,21 @@ export interface TableRowRenderProps {
   isHovered: boolean;
   /** Whether the row is disabled. */
   isDisabled: boolean;
+  /**
+   * Whether the row is expanded (tree grid only; `false` for a flat table).
+   * @selector [data-expanded]
+   */
+  isExpanded: boolean;
+  /**
+   * Whether the row has child rows (tree grid only; `false` for a flat table).
+   * @selector [data-has-child-items]
+   */
+  hasChildItems: boolean;
+  /**
+   * The 1-based nesting depth of the row within the table (1 for a flat table).
+   * @selector [data-level]
+   */
+  level: number;
 }
 
 export interface TableRowProps<T> extends SlotProps {
@@ -380,6 +439,27 @@ export interface TableCellRenderProps {
   isPressed: boolean;
   /** Whether the cell is hovered. */
   isHovered: boolean;
+  /**
+   * Whether the cell is in the tree column — the one that renders the expand/collapse
+   * chevron and nesting indentation (tree grid only; `false` for a flat table).
+   * @selector [data-tree-column]
+   */
+  isTreeColumn: boolean;
+  /**
+   * Whether the cell's row is expanded (tree grid only; `false` for a flat table).
+   * @selector [data-expanded]
+   */
+  isExpanded: boolean;
+  /**
+   * Whether the cell's row has child rows (tree grid only; `false` for a flat table).
+   * @selector [data-has-child-items]
+   */
+  hasChildItems: boolean;
+  /**
+   * The 1-based nesting depth of the cell's row within the table (1 for a flat table).
+   * @selector [data-level]
+   */
+  level: number;
 }
 
 export interface TableCellProps extends SlotProps {
@@ -472,6 +552,10 @@ export function Table<T extends object>(props: TableProps<T>): JSX.Element {
       "sortDescriptor",
       "onSortChange",
       "showSelectionCheckboxes",
+      "UNSTABLE_childItems",
+      "UNSTABLE_expandedKeys",
+      "UNSTABLE_defaultExpandedKeys",
+      "UNSTABLE_onExpandedChange",
     ],
   );
 
@@ -479,31 +563,63 @@ export function Table<T extends object>(props: TableProps<T>): JSX.Element {
   const normalizedColumns = createMemo(() => normalizeColumnDefinitions(stateProps.columns));
   const rowHeaderColumnKeys = createMemo(() => getRowHeaderColumnKeys(normalizedColumns()));
 
-  const collection = createMemo(() =>
-    createTableCollection<T>({
-      columns: normalizedColumns(),
-      rows: stateProps.items,
-      getKey: stateProps.getKey,
-      getTextValue: stateProps.getTextValue as
-        | ((item: T, column: ColumnDefinition<T>) => string)
-        | undefined,
-      showSelectionCheckboxes: stateProps.showSelectionCheckboxes ?? false,
-      rowHeaderColumnKeys: rowHeaderColumnKeys().size > 0 ? rowHeaderColumnKeys() : undefined,
-    }),
-  );
-
-  const state = createTableState<T, TableCollection<T>>(() => ({
-    collection: collection(),
-    disabledKeys: stateProps.disabledKeys,
-    selectionMode: stateProps.selectionMode,
-    selectionBehavior: stateProps.selectionBehavior,
-    selectedKeys: stateProps.selectedKeys,
-    defaultSelectedKeys: stateProps.defaultSelectedKeys,
-    onSelectionChange: stateProps.onSelectionChange,
-    sortDescriptor: stateProps.sortDescriptor,
-    onSortChange: stateProps.onSortChange,
-    showSelectionCheckboxes: stateProps.showSelectionCheckboxes,
-  }));
+  // Tree-grid mode is selected structurally by the presence of any expansion prop. Like
+  // controlled-vs-uncontrolled, this is a one-time decision, not a reactive toggle.
+  const isTreeGrid =
+    stateProps.UNSTABLE_childItems !== undefined ||
+    stateProps.UNSTABLE_expandedKeys !== undefined ||
+    stateProps.UNSTABLE_defaultExpandedKeys !== undefined ||
+    stateProps.UNSTABLE_onExpandedChange !== undefined;
+
+  const getTextValue = () =>
+    stateProps.getTextValue as ((item: T, column: ColumnDefinition<T>) => string) | undefined;
+
+  const state: TableState<T, TableCollection<T>> = isTreeGrid
+    ? createTreeGridState<T, TableCollection<T>>(() => ({
+        columns: normalizedColumns(),
+        rows: toTreeRowDefinitions(
+          stateProps.items,
+          stateProps.getKey,
+          stateProps.UNSTABLE_childItems,
+        ),
+        getKey: stateProps.getKey,
+        getTextValue: getTextValue(),
+        showSelectionCheckboxes: stateProps.showSelectionCheckboxes ?? false,
+        rowHeaderColumnKeys: rowHeaderColumnKeys().size > 0 ? rowHeaderColumnKeys() : undefined,
+        disabledKeys: stateProps.disabledKeys,
+        disabledBehavior: stateProps.disabledBehavior,
+        selectionMode: stateProps.selectionMode,
+        selectionBehavior: stateProps.selectionBehavior,
+        selectedKeys: stateProps.selectedKeys,
+        defaultSelectedKeys: stateProps.defaultSelectedKeys,
+        onSelectionChange: stateProps.onSelectionChange,
+        sortDescriptor: stateProps.sortDescriptor,
+        onSortChange: stateProps.onSortChange,
+        UNSTABLE_expandedKeys: stateProps.UNSTABLE_expandedKeys,
+        UNSTABLE_defaultExpandedKeys: stateProps.UNSTABLE_defaultExpandedKeys,
+        UNSTABLE_onExpandedChange: stateProps.UNSTABLE_onExpandedChange,
+      }))
+    : createTableState<T, TableCollection<T>>(() => ({
+        collection: createTableCollection<T>({
+          columns: normalizedColumns(),
+          rows: stateProps.items,
+          getKey: stateProps.getKey,
+          getTextValue: getTextValue(),
+          showSelectionCheckboxes: stateProps.showSelectionCheckboxes ?? false,
+          rowHeaderColumnKeys: rowHeaderColumnKeys().size > 0 ? rowHeaderColumnKeys() : undefined,
+        }),
+        disabledKeys: stateProps.disabledKeys,
+        disabledBehavior: stateProps.disabledBehavior,
+        selectionMode: stateProps.selectionMode,
+        selectionBehavior: stateProps.selectionBehavior,
+        selectedKeys: stateProps.selectedKeys,
+        defaultSelectedKeys: stateProps.defaultSelectedKeys,
+        onSelectionChange: stateProps.onSelectionChange,
+        sortDescriptor: stateProps.sortDescriptor,
+        onSortChange: stateProps.onSortChange,
+        showSelectionCheckboxes: stateProps.showSelectionCheckboxes,
+      }));
+  const collection = () => state.collection;
   const parentCollectionRenderer = useCollectionRenderer<T>();
 
   const { gridProps } = createTable<T>(
@@ -707,8 +823,16 @@ export function Table<T extends object>(props: TableProps<T>): JSX.Element {
       dndDropIndicator(index, position) ??
       parentCollectionRenderer?.renderDropIndicator?.(index, position),
   }));
+  // The root children function builds the structural `<TableHeader>`/`<TableBody>`
+  // subtree once. React re-invokes it on every render and reconciles the result, so
+  // reading focus-dependent render values (isFocused/isFocusVisible) there is cheap.
+  // Solid has no reconciliation: re-invoking recreates the entire thead/tbody subtree,
+  // which detaches the DOM-focused row and drops keyboard focus (Space/Enter never reach
+  // the row). So invoke it with an untracked snapshot of the render values — the insert
+  // below stays stable across focus changes while children still see current values at
+  // creation. Render values for collection structure are not reactive in practice.
   const tableChildren = () =>
-    typeof props.children === "function" ? props.children(renderValues()) : props.children;
+    typeof props.children === "function" ? props.children(untrack(renderValues)) : props.children;
   const tableProps = () =>
     ({
       ref: (el: HTMLTableElement) => {
@@ -728,7 +852,6 @@ export function Table<T extends object>(props: TableProps<T>): JSX.Element {
       "data-empty": stateProps.items.length === 0 || undefined,
       "data-drop-target": isRootDropTarget() || undefined,
       slot: local.slot,
-      children: tableChildren(),
     }) as JSX.HTMLAttributes<HTMLTableElement>;
 
   return (
@@ -737,7 +860,11 @@ export function Table<T extends object>(props: TableProps<T>): JSX.Element {
         value={state as unknown as TableState<object, TableCollection<object>>}
       >
         <CollectionRendererContext.Provider value={collectionRenderer()}>
-          {local.render ? local.render(tableProps(), renderValues()) : <table {...tableProps()} />}
+          {local.render ? (
+            local.render({ ...tableProps(), children: tableChildren() }, renderValues())
+          ) : (
+            <table {...tableProps()}>{tableChildren()}</table>
+          )}
         </CollectionRendererContext.Provider>
       </TableStateContext.Provider>
     </TableContext.Provider>
@@ -1071,6 +1198,8 @@ export function TableBody<T extends object>(props: TableBodyProps<T>): JSX.Eleme
     context.collection,
   );
   const virtualRange = createMemo(() => {
+    // Tree grids render every visible (flattened) row; virtual windowing is a follow-up.
+    if (context.state.treeColumn != null) return null;
     if (!virtualizer || !parentCollectionRenderer?.isVirtualized) return null;
     const rowCount = items().length;
     const baseRange = virtualizer.getVisibleRange(rowCount);
@@ -1125,6 +1254,11 @@ export function TableBody<T extends object>(props: TableBodyProps<T>): JSX.Eleme
     });
   });
   const visibleItems = createMemo(() => {
+    // Tree grid: render the flattened set of visible rows (top-level + expanded descendants)
+    // the collection materialises in document order, so the render fn runs once per visible row.
+    if (context.state.treeColumn != null) {
+      return rowNodes().map((node) => node.value as T);
+    }
     const range = virtualRange();
     if (!range) return items();
     return items().slice(range.start, range.end);
@@ -1435,7 +1569,7 @@ export function TableRow<T extends object>(props: TableRowProps<T>): JSX.Element
   if (!context) {
     throw new Error("TableRow must be used within a Table");
   }
-  const { state, collection } = context;
+  const { state } = context;
   const tableContext = context as unknown as TableContextValue<T>;
   const registeredCellIds: string[] = [];
   const generatedId = createUniqueId();
@@ -1454,8 +1588,10 @@ export function TableRow<T extends object>(props: TableRowProps<T>): JSX.Element
 
   const [ref, setRef] = createSignal<HTMLTableRowElement | null>(null);
 
+  // Read through `state.collection` (not the destructured snapshot) so the node tracks
+  // collection rebuilds — e.g. a tree-grid row staying mounted across an expand/collapse.
   const rowNode = createMemo(() => {
-    const node = collection.getItem(rowKey());
+    const node = state.collection.getItem(rowKey());
     if (!node) {
       return {
         type: "item" as const,
@@ -1492,7 +1628,12 @@ export function TableRow<T extends object>(props: TableRowProps<T>): JSX.Element
   const isPressed = () => rowAria.isPressed;
   const isInteractive = () => {
     const tableData = getTableData(state as TableState<object, TableCollection<object>>);
-    return state.selectionMode !== "none" || !!tableData?.actions.onRowAction || !!local.onAction;
+    return (
+      state.selectionMode !== "none" ||
+      !!tableData?.actions.onRowAction ||
+      !!local.onAction ||
+      !!local.href
+    );
   };
 
   const { isHovered, hoverProps } = createHover({
@@ -1549,6 +1690,13 @@ export function TableRow<T extends object>(props: TableRowProps<T>): JSX.Element
     );
   });
 
+  // Tree-grid (expandable rows): nesting depth, child presence and expansion. These are
+  // inert for a flat table (level 1, no children, not expanded).
+  const isTreeRow = () => state.treeColumn != null;
+  const rowLevel = () => rowNode().level + 1;
+  const hasChildItems = () => rowAria.hasChildRows;
+  const isExpanded = () => rowAria.isExpanded;
+
   const renderValues = createMemo<TableRowRenderProps>(() => ({
     isSelected: isSelected(),
     isFocused: isFocused(),
@@ -1556,6 +1704,9 @@ export function TableRow<T extends object>(props: TableRowProps<T>): JSX.Element
     isPressed: isPressed(),
     isHovered: isHovered(),
     isDisabled: isDisabled(),
+    isExpanded: isExpanded(),
+    hasChildItems: hasChildItems(),
+    level: rowLevel(),
   }));
 
   // Resolve render props (children rendered directly in JSX to avoid eager evaluation)
@@ -1610,73 +1761,197 @@ export function TableRow<T extends object>(props: TableRowProps<T>): JSX.Element
       },
     };
   });
-  const buttonContextValue = createMemo(() => ({
+  // A STABLE context object: its identity never changes, so the surrounding ButtonContext.Provider
+  // never tears down and recreates the row's children. The slots are getters, so a slotted
+  // <Button slot="drag"|"chevron"> reads the current drag/expand props each time it is (re)created —
+  // e.g. when the tree column recreates the chevron on expand/collapse.
+  const buttonContextValue: ButtonContextValue = {
     slots: {
       default: {},
-      drag: dragButtonProps(),
+      get drag() {
+        return dragButtonProps();
+      },
+      // Tree-grid expand/collapse chevron; the slotted <Button slot="chevron"> picks these up.
+      // The aria hook yields DOM button attributes, merged onto the Button as passthrough props.
+      get chevron() {
+        return rowAria.expandButtonProps as unknown as ButtonProps;
+      },
     },
-  }));
+  };
 
-  const rowChildren = () => (
-    <ButtonContext.Provider value={buttonContextValue()}>
-      {typeof local.children === "function" ? (
-        local.columns ? (
-          <For each={local.columns}>
-            {(column) =>
-              (local.children as (column: TableColumnDefinition<T>) => JSX.Element)(column)
-            }
-          </For>
-        ) : (
-          (local.children as (renderProps: TableRowRenderProps) => JSX.Element)(renderValues())
-        )
-      ) : (
-        local.children
-      )}
-    </ButtonContext.Provider>
-  );
-  const tableRowProps = () =>
-    ({
-      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: renderProps.style(),
-      "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,
-      children: rowChildren(),
-    }) as JSX.HTMLAttributes<HTMLTableRowElement>;
+  // Render props handed to the row's children as a STABLE getter proxy: reading a getter stays
+  // fine-grained reactive at the point of use, without forcing the children to be re-derived (and
+  // therefore disposed + recreated) whenever an unrelated render prop flips.
+  const childRenderProps: TableRowRenderProps = {
+    get isSelected() {
+      return isSelected();
+    },
+    get isFocused() {
+      return isFocused();
+    },
+    get isFocusVisible() {
+      return isFocusVisible() && isFocused();
+    },
+    get isPressed() {
+      return isPressed();
+    },
+    get isHovered() {
+      return isHovered();
+    },
+    get isDisabled() {
+      return isDisabled();
+    },
+    get isExpanded() {
+      return isExpanded();
+    },
+    get hasChildItems() {
+      return hasChildItems();
+    },
+    get level() {
+      return rowLevel();
+    },
+  };
+
+  // Tree-grid rows carry their nesting depth as a CSS var so the tree column can indent.
+  const rowStyle = () => {
+    const base = renderProps.style();
+    if (!isTreeRow()) return base;
+    return { ...(base ?? {}), "--table-row-level": rowLevel() } as JSX.CSSProperties;
+  };
 
   return (
     <TableRowContext.Provider value={rowContextValue}>
-      {local.render ? local.render(tableRowProps(), renderValues()) : <tr {...tableRowProps()} />}
+      <ButtonContext.Provider 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
+          // <Button slot="drag"|"chevron"> reads ButtonContext; in Solid useContext binds at the
+          // owner active when the component executes, so the children must be created inside the
+          // providers, not merely wrapped by them afterwards. They are built EXACTLY ONCE: a press
+          // or focus bubbling up from interactive cell content (e.g. an EditableCell's edit button)
+          // flips the row's render-props signals, and re-deriving the children on every such change
+          // would dispose and recreate the subtree, destroying the in-flight press. Cells claim
+          // their column by render order (see getCellColumnKey), so reset the registry once before
+          // this single pass.
+          registeredCellIds.length = 0;
+          const rowChildrenContent =
+            typeof local.children === "function" ? (
+              local.columns ? (
+                <For each={local.columns}>
+                  {(column) =>
+                    (local.children as (column: TableColumnDefinition<T>) => JSX.Element)(column)
+                  }
+                </For>
+              ) : (
+                (local.children as (renderProps: TableRowRenderProps) => JSX.Element)(
+                  childRenderProps,
+                )
+              )
+            ) : (
+              local.children
+            );
+          const tableRowProps = () =>
+            ({
+              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,
+              children: rowChildrenContent,
+            }) as JSX.HTMLAttributes<HTMLTableRowElement>;
+
+          return (
+            <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>
+              }
+            >
+              {local.render!(tableRowProps(), renderValues())}
+            </Show>
+          );
+        })()}
+      </ButtonContext.Provider>
     </TableRowContext.Provider>
   );
 }
@@ -1706,7 +1981,7 @@ export function TableCell(props: TableCellProps): JSX.Element {
     throw new Error("TableCell must be used within a Table");
   }
 
-  const { state, collection } = tableContext;
+  const { state } = tableContext;
   const { rowKey, rowNode } = rowContext;
 
   const [ref, setRef] = createSignal<HTMLTableCellElement | null>(null);
@@ -1717,7 +1992,7 @@ export function TableCell(props: TableCellProps): JSX.Element {
     const key = columnKey();
     if (key != null) {
       const cellKey = `${rowKey}-${key}`;
-      const node = collection.getItem(cellKey);
+      const node = state.collection.getItem(cellKey);
       if (node) return node;
     }
 
@@ -1737,9 +2012,21 @@ export function TableCell(props: TableCellProps): JSX.Element {
     const key = columnKey();
     if (key == null) return undefined;
     const cellKey = `${rowKey}-${key}`;
-    return collection.getItem(cellKey) ? (cellNode().index ?? 0) : undefined;
+    return state.collection.getItem(cellKey) ? (cellNode().index ?? 0) : undefined;
   });
 
+  // Tree-grid (expandable rows): the cell mirrors its row's nesting/expansion and flags the
+  // tree column (the one that renders the chevron + indentation). Inert for a flat table.
+  const isTreeGridCell = () => state.treeColumn != null;
+  const parentRowNode = createMemo(() => state.collection.getItem(rowKey));
+  const cellLevel = () => (parentRowNode()?.level ?? rowNode.level ?? 0) + 1;
+  const cellHasChildItems = () => parentRowNode()?.isExpandable ?? false;
+  const cellIsExpanded = () => {
+    if (!isTreeGridCell() || !cellHasChildItems()) return false;
+    return state.expandedKeys === "all" || state.expandedKeys.has(rowKey);
+  };
+  const isTreeColumn = () => isTreeGridCell() && columnKey() === state.treeColumn;
+
   const cellAria = createTableCell<object>(
     () => ({
       node: cellNode(),
@@ -1763,6 +2050,10 @@ export function TableCell(props: TableCellProps): JSX.Element {
     columnIndex: cellColumnIndex() ?? 0,
     isPressed: isPressed(),
     isHovered: isHovered(),
+    isTreeColumn: isTreeColumn(),
+    isExpanded: cellIsExpanded(),
+    hasChildItems: cellHasChildItems(),
+    level: cellLevel(),
   }));
 
   // Resolve render props (children rendered directly in JSX to avoid eager evaluation)
@@ -1801,11 +2092,16 @@ export function TableCell(props: TableCellProps): JSX.Element {
       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,
       children: cellChildren(),
     }) as JSX.TdHTMLAttributes<HTMLTableCellElement>;
 
@@ -1822,11 +2118,16 @@ export function TableCell(props: TableCellProps): JSX.Element {
       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}
     >
       {cellChildren()}
     </td>
@@ -1864,6 +2165,11 @@ export function TableSelectionCheckbox(props: TableSelectionCheckboxProps): JSX.
       style={props.style}
       tabIndex={props.excludeFromTabOrder ? -1 : selectionCheckboxAria.checkboxProps.tabIndex}
       aria-label={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()}
     />
   );
 }
@@ -1889,8 +2195,16 @@ export function TableSelectAllCheckbox(props: TableSelectAllCheckboxProps = {}):
     () => state as TableState<object, TableCollection<object>>,
   );
 
+  let inputRef: HTMLInputElement | undefined;
+  createEffect(() => {
+    if (inputRef) {
+      inputRef.indeterminate = selectAllCheckboxAria.isIndeterminate;
+    }
+  });
+
   return (
     <input
+      ref={inputRef}
       {...selectAllCheckboxAria.checkboxProps}
       class={props.class}
       style={props.style}