@proyecto-viviana/solidaria-components 0.2.5 → 0.2.9

package/src/Table.tsx

@@ -8,8 +8,10 @@
 import {
   type JSX,
   createContext,
+  createEffect,
   createMemo,
   createSignal,
+  onCleanup,
   splitProps,
   useContext,
   For,
@@ -25,6 +27,7 @@ import {
   createTableSelectAllCheckbox,
   createFocusRing,
   createHover,
+  mergeProps,
   type AriaTableProps,
 } from '@proyecto-viviana/solidaria';
 import {
@@ -36,6 +39,7 @@ import {
   type SortDescriptor,
   type ColumnDefinition,
   type GridNode,
+  type DropTarget,
 } from '@proyecto-viviana/solid-stately';
 import {
   type RenderChildren,
@@ -45,6 +49,16 @@ import {
   useRenderProps,
   filterDOMProps,
 } from './utils';
+import { SharedElementTransition } from './SharedElementTransition';
+import { type DragAndDropHooks } from './useDragAndDrop';
+import { CollectionRendererContext, type CollectionRendererContextValue, useCollectionRenderer } from './Collection';
+import { useVirtualizerContext } from './Virtualizer';
+import {
+  getNormalizedDropTargetKey,
+  mergePersistedKeysIntoVirtualRange,
+  useDndPersistedKeys,
+  useRenderDropIndicator,
+} from './DragAndDrop';
 
 // ============================================
 // TYPES
@@ -94,6 +108,8 @@ export interface TableProps<T extends object> extends Omit<AriaTableProps, 'chil
   style?: StyleOrFunction<TableRenderProps>;
   /** A function to render when the table is empty. */
   renderEmptyState?: () => JSX.Element;
+  /** Drag and drop hooks from `useDragAndDrop`. */
+  dragAndDropHooks?: DragAndDropHooks<T>;
 }
 
 export interface TableHeaderRenderProps {
@@ -152,6 +168,12 @@ export interface TableBodyProps<T> extends SlotProps {
   style?: StyleOrFunction<TableBodyRenderProps>;
   /** A function to render when the body is empty. */
   renderEmptyState?: () => JSX.Element;
+  /** Whether there are more rows to load. */
+  hasMore?: boolean;
+  /** Whether additional rows are currently loading. */
+  isLoading?: boolean;
+  /** Called when the load more sentinel becomes visible. */
+  onLoadMore?: () => void | Promise<void>;
 }
 
 export interface TableRowRenderProps {
@@ -206,6 +228,15 @@ export interface TableCellProps extends SlotProps {
   style?: StyleOrFunction<TableCellRenderProps>;
 }
 
+export interface TableLoadMoreItemProps extends SlotProps {
+  onLoadMore: () => void | Promise<void>;
+  isLoading?: boolean;
+  colSpan?: number;
+  children?: JSX.Element;
+  class?: ClassNameOrFunction<{ isLoading: boolean }>;
+  style?: StyleOrFunction<{ isLoading: boolean }>;
+}
+
 // ============================================
 // CONTEXT
 // ============================================
@@ -217,10 +248,14 @@ interface TableContextValue<T extends object> {
   columns: ColumnDefinition<T>[];
   isDisabled: boolean;
   showSelectionCheckboxes: boolean;
+  dragAndDropHooks?: DragAndDropHooks<T>;
+  dragState?: unknown;
+  dropState?: unknown;
 }
 
 export const TableContext = createContext<TableContextValue<object> | null>(null);
 export const TableStateContext = createContext<TableState<object, TableCollection<object>> | null>(null);
+export const TableColumnResizeStateContext = createContext<null>(null);
 
 // Row-level context for cells
 interface TableRowContextValue {
@@ -241,7 +276,7 @@ export const TableRowContext = createContext<TableRowContextValue | null>(null);
 export function Table<T extends object>(props: TableProps<T>): JSX.Element {
   const [local, stateProps, ariaProps] = splitProps(
     props,
-    ['class', 'style', 'slot', 'renderEmptyState'],
+    ['class', 'style', 'slot', 'renderEmptyState', 'dragAndDropHooks'],
     [
       'items',
       'columns',
@@ -312,10 +347,10 @@ export function Table<T extends object>(props: TableProps<T>): JSX.Element {
     isEmpty: stateProps.items.length === 0,
   }));
 
-  // Resolve render props
+  // Resolve render props (class and style only — children rendered directly in JSX
+  // to avoid eager evaluation before context providers mount)
   const renderProps = useRenderProps(
     {
-      children: props.children,
       class: local.class,
       style: local.style,
       defaultClassName: 'solidaria-Table',
@@ -338,6 +373,98 @@ export function Table<T extends object>(props: TableProps<T>): JSX.Element {
     const { ref: _ref2, ...rest } = focusProps as Record<string, unknown>;
     return rest;
   };
+  const parentCollectionRenderer = useCollectionRenderer<T>();
+  const getItemNodes = createMemo(() => Array.from(state.collection).filter((node) => node.type === 'item'));
+  const getDropTargetByIndex = (index: number, position: 'before' | 'after' | 'on'): DropTarget | null => {
+    const node = getItemNodes()[index];
+    if (!node) return null;
+    return { type: 'item', key: node.key, dropPosition: position };
+  };
+  const hasDroppableDnd = createMemo(() => {
+    const hooks = local.dragAndDropHooks;
+    return Boolean(
+      hooks?.useDroppableCollectionState &&
+      hooks.useDroppableCollection &&
+      (hooks.dropTargetDelegate || parentCollectionRenderer?.dropTargetDelegate || hooks.ListDropTargetDelegate)
+    );
+  });
+  const hasDraggableDnd = createMemo(() => {
+    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(() => {
+    if (!hasDroppableDnd()) return undefined;
+    const hooks = local.dragAndDropHooks;
+    const activeDropState = dropState();
+    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 = hooks.dropTargetDelegate
+      ?? parentCollectionRenderer?.dropTargetDelegate
+      ?? (hooks.ListDropTargetDelegate
+        ? new hooks.ListDropTargetDelegate(
+          () => state.collection,
+          () => ref(),
+          { layout: 'grid', orientation: 'vertical', direction: resolveDirection() }
+        )
+        : undefined);
+    if (!dropTargetDelegate) return undefined;
+    return hooks.useDroppableCollection(
+      {
+        dropTargetDelegate,
+        keyboardDelegate: {
+          getFirstKey: () => state.collection.getFirstKey?.() ?? null,
+          getLastKey: () => state.collection.getLastKey?.() ?? null,
+          getKeyBelow: (key) => state.collection.getKeyAfter?.(key) ?? null,
+          getKeyAbove: (key) => state.collection.getKeyBefore?.(key) ?? null,
+          getKeyLeftOf: (key) =>
+            resolveDirection() === 'rtl'
+              ? state.collection.getKeyAfter?.(key) ?? null
+              : state.collection.getKeyBefore?.(key) ?? null,
+          getKeyRightOf: (key) =>
+            resolveDirection() === 'rtl'
+              ? state.collection.getKeyBefore?.(key) ?? null
+              : state.collection.getKeyAfter?.(key) ?? null,
+          getKeyPageBelow: (key) => state.collection.getKeyAfter?.(key) ?? null,
+          getKeyPageAbove: (key) => state.collection.getKeyBefore?.(key) ?? null,
+        },
+      },
+      activeDropState,
+      () => ref()
+    );
+  });
+  const isRootDropTarget = createMemo(() => {
+    return Boolean(dropState()?.target?.type === 'root');
+  });
+  const dndRenderDropIndicator = createMemo(() => useRenderDropIndicator(local.dragAndDropHooks, dropState()));
+  const dndDropIndicator = (index: number, position: 'before' | 'after' | 'on') => {
+    const target = getDropTargetByIndex(index, position);
+    if (!target || target.type !== 'item') return undefined;
+    return dndRenderDropIndicator()?.(target);
+  };
 
   const contextValue = createMemo<TableContextValue<T>>(() => ({
     state,
@@ -346,24 +473,41 @@ export function Table<T extends object>(props: TableProps<T>): JSX.Element {
     columns: stateProps.columns,
     isDisabled: false,
     showSelectionCheckboxes: stateProps.showSelectionCheckboxes ?? false,
+    dragAndDropHooks: local.dragAndDropHooks,
+    dragState: dragState(),
+    dropState: dropState(),
+  }));
+  const collectionRenderer = createMemo<CollectionRendererContextValue<unknown>>(() => ({
+    ...parentCollectionRenderer,
+    renderItem: (item) => item as JSX.Element,
+    renderDropIndicator: (index: number, position: 'before' | 'after' | 'on') =>
+      dndDropIndicator(index, position) ?? parentCollectionRenderer?.renderDropIndicator?.(index, position),
   }));
 
   return (
-    <TableContext.Provider value={contextValue() as TableContextValue<object>}>
+    <TableContext.Provider value={contextValue() as unknown as TableContextValue<object>}>
       <TableStateContext.Provider value={state as unknown as TableState<object, TableCollection<object>>}>
-        <table
-          ref={setRef}
-          {...domProps()}
-          {...cleanGridProps()}
-          {...cleanFocusProps()}
-          class={renderProps.class()}
-          style={renderProps.style()}
-          data-focused={state.isFocused || undefined}
-          data-focus-visible={isFocusVisible() || undefined}
-          data-empty={stateProps.items.length === 0 || undefined}
-        >
-          {renderProps.renderChildren()}
-        </table>
+        <CollectionRendererContext.Provider value={collectionRenderer()}>
+          <table
+            ref={setRef}
+            {...mergeProps(
+              domProps(),
+              cleanGridProps(),
+              cleanFocusProps(),
+              (droppableCollection()?.collectionProps as Record<string, unknown> | undefined) ?? {}
+            )}
+            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}
+          >
+            {typeof props.children === 'function'
+              ? props.children(renderValues())
+              : props.children}
+          </table>
+        </CollectionRendererContext.Provider>
       </TableStateContext.Provider>
     </TableContext.Provider>
   );
@@ -373,7 +517,7 @@ export function Table<T extends object>(props: TableProps<T>): JSX.Element {
  * A header row in a table containing column headers.
  */
 export function TableHeader(props: TableHeaderProps): JSX.Element {
-  const [local] = splitProps(props, ['class', 'style', 'slot']);
+  const [local, domProps] = splitProps(props, ['class', 'style', 'slot', 'children']);
 
   // Get context
   const context = useContext(TableContext);
@@ -404,8 +548,8 @@ export function TableHeader(props: TableHeaderProps): JSX.Element {
   };
 
   return (
-    <thead {...cleanRowGroupProps()} class={renderProps.class()} style={renderProps.style()}>
-      <tr role="row">{props.children}</tr>
+    <thead {...domProps} {...cleanRowGroupProps()} class={renderProps.class()} style={renderProps.style()}>
+      <tr role="row">{local.children}</tr>
     </thead>
   );
 }
@@ -414,7 +558,7 @@ export function TableHeader(props: TableHeaderProps): JSX.Element {
  * A column header in a table.
  */
 export function TableColumn(props: TableColumnProps): JSX.Element {
-  const [local] = splitProps(props, ['class', 'style', 'slot', 'id', 'allowsSorting']);
+  const [local, domProps] = splitProps(props, ['class', 'style', 'slot', 'id', 'allowsSorting', 'children']);
 
   // Get context
   const context = useContext(TableContext);
@@ -446,7 +590,7 @@ export function TableColumn(props: TableColumnProps): JSX.Element {
   });
 
   // Create column header aria props
-  const { columnHeaderProps } = createTableColumnHeader<object>(
+  const columnHeaderAria = createTableColumnHeader<object>(
     () => ({
       node: columnNode(),
       allowsSorting: local.allowsSorting,
@@ -481,10 +625,9 @@ export function TableColumn(props: TableColumnProps): JSX.Element {
     isHovered: isHovered(),
   }));
 
-  // Resolve render props
+  // Resolve render props (children rendered directly in JSX to avoid eager evaluation)
   const renderProps = useRenderProps(
     {
-      children: props.children,
       class: local.class,
       style: local.style,
       defaultClassName: 'solidaria-Table-column',
@@ -494,7 +637,7 @@ export function TableColumn(props: TableColumnProps): JSX.Element {
 
   // Remove ref from spread props
   const cleanColumnHeaderProps = () => {
-    const { ref: _ref1, ...rest } = columnHeaderProps as Record<string, unknown>;
+    const { ref: _ref1, ...rest } = columnHeaderAria.columnHeaderProps as Record<string, unknown>;
     return rest;
   };
   const cleanHoverProps = () => {
@@ -509,6 +652,7 @@ export function TableColumn(props: TableColumnProps): JSX.Element {
   return (
     <th
       ref={setRef}
+      {...domProps}
       {...cleanColumnHeaderProps()}
       {...cleanHoverProps()}
       {...cleanFocusProps()}
@@ -520,7 +664,9 @@ export function TableColumn(props: TableColumnProps): JSX.Element {
       data-focused={state.focusedKey === local.id || undefined}
       data-focus-visible={(isFocusVisible() && state.focusedKey === local.id) || undefined}
     >
-      {renderProps.renderChildren()}
+      {typeof local.children === 'function'
+        ? local.children(renderValues())
+        : local.children}
     </th>
   );
 }
@@ -529,7 +675,7 @@ export function TableColumn(props: TableColumnProps): JSX.Element {
  * The body of a table containing data rows.
  */
 export function TableBody<T extends object>(props: TableBodyProps<T>): JSX.Element {
-  const [local] = splitProps(props, ['items', 'class', 'style', 'slot', 'renderEmptyState']);
+  const [local, domProps] = splitProps(props, ['items', 'class', 'style', 'slot', 'renderEmptyState', 'hasMore', 'isLoading', 'onLoadMore', 'children']);
 
   // Get context
   const context = useContext(TableContext);
@@ -563,21 +709,173 @@ export function TableBody<T extends object>(props: TableBodyProps<T>): JSX.Eleme
   };
 
   const isEmpty = () => items().length === 0;
+  const virtualizer = useVirtualizerContext();
+  const parentCollectionRenderer = useCollectionRenderer<T>();
+  const rowNodes = createMemo(() => Array.from(context.collection).filter((node) => node.type === 'item'));
+  const persistedKeys = useDndPersistedKeys(
+    { focusedKey: () => context.state.focusedKey },
+    context.dragAndDropHooks,
+    context.dropState as { target?: DropTarget | null } | undefined,
+    context.collection
+  );
+  const virtualRange = createMemo(() => {
+    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) : -1,
+      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,
+    });
+  });
+  createEffect(() => {
+    if (!virtualizer || !parentCollectionRenderer?.isVirtualized) return;
+    virtualizer.setDropTargetItemCountResolver(() => items().length);
+    virtualizer.setDropTargetIndexResolver((key) => {
+      const index = rowNodes().findIndex((node) => node.key === key);
+      return index >= 0 ? index : null;
+    });
+    virtualizer.setDropTargetResolver((target) => {
+      const node = rowNodes()[target.index];
+      if (!node) return target;
+      return {
+        ...target,
+        key: typeof node.key === 'string' || typeof node.key === 'number' ? node.key : undefined,
+      };
+    });
+    onCleanup(() => {
+      virtualizer.setDropTargetIndexResolver(undefined);
+      virtualizer.setDropTargetItemCountResolver(undefined);
+      virtualizer.setDropTargetResolver(undefined);
+    });
+  });
+  const visibleItems = createMemo(() => {
+    const range = virtualRange();
+    if (!range) return items();
+    return items().slice(range.start, range.end);
+  });
+  const spacerColSpan = () => context.columns.length + (context.showSelectionCheckboxes ? 1 : 0);
 
   return (
-    <tbody {...cleanRowGroupProps()} class={renderProps.class()} style={renderProps.style()}>
-      <Show when={isEmpty() && local.renderEmptyState} fallback={<For each={items()}>{(item) => props.children?.(item)}</For>}>
+    <tbody {...domProps} {...cleanRowGroupProps()} class={renderProps.class()} style={renderProps.style()}>
+      <SharedElementTransition>
+      <Show when={isEmpty() && local.renderEmptyState} 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}
+        </>
+      }>
         {local.renderEmptyState?.()}
       </Show>
+      </SharedElementTransition>
+      <Show when={local.hasMore && local.onLoadMore}>
+        <TableLoadMoreItem
+          onLoadMore={local.onLoadMore!}
+          isLoading={local.isLoading}
+          colSpan={spacerColSpan()}
+        />
+      </Show>
     </tbody>
   );
 }
 
+export function TableLoadMoreItem(props: TableLoadMoreItemProps): JSX.Element {
+  let ref: HTMLTableRowElement | undefined;
+  const [isPending, setIsPending] = createSignal(false);
+  const isLoading = () => !!props.isLoading || isPending();
+
+  const triggerLoadMore = async () => {
+    if (isLoading()) return;
+    setIsPending(true);
+    try {
+      await props.onLoadMore();
+    } finally {
+      setIsPending(false);
+    }
+  };
+
+  createEffect(() => {
+    if (!ref || typeof IntersectionObserver !== 'function') return;
+    const observer = new IntersectionObserver((entries) => {
+      if (entries[0]?.isIntersecting) {
+        void triggerLoadMore();
+      }
+    });
+    observer.observe(ref);
+    return () => observer.disconnect();
+  });
+
+  const renderProps = useRenderProps(
+    {
+      children: props.children ?? (() => (isLoading() ? 'Loading more...' : 'Load more')),
+      class: props.class,
+      style: props.style,
+      defaultClassName: 'solidaria-Table-loadMore',
+    },
+    () => ({ isLoading: isLoading() })
+  );
+
+  return (
+    <tr
+      ref={ref}
+      role="row"
+      tabIndex={0}
+      onFocus={() => {
+        void triggerLoadMore();
+      }}
+      class={renderProps.class()}
+      style={renderProps.style()}
+      data-loading={isLoading() || undefined}
+    >
+      <td colSpan={props.colSpan ?? 1}>{renderProps.renderChildren()}</td>
+    </tr>
+  );
+}
+
 /**
  * A row in a table.
  */
 export function TableRow<T extends object>(props: TableRowProps<T>): JSX.Element {
-  const [local] = splitProps(props, ['class', 'style', 'slot', 'id', 'item', 'onAction']);
+  const [local, domProps] = splitProps(props, ['class', 'style', 'slot', 'id', 'item', 'onAction', 'children']);
 
   // Get context
   const context = useContext(TableContext);
@@ -585,6 +883,7 @@ export function TableRow<T extends object>(props: TableRowProps<T>): JSX.Element
     throw new Error('TableRow must be used within a Table');
   }
   const { state, collection } = context;
+  const tableContext = context as unknown as TableContextValue<T>;
 
   // Create ref signal
   const [ref, setRef] = createSignal<HTMLTableRowElement | null>(null);
@@ -609,7 +908,7 @@ export function TableRow<T extends object>(props: TableRowProps<T>): JSX.Element
   });
 
   // Create row aria props
-  const { rowProps, isSelected, isDisabled, isPressed } = createTableRow<object>(
+  const rowAria = createTableRow<object>(
     () => ({
       node: rowNode(),
       onAction: local.onAction,
@@ -617,11 +916,14 @@ export function TableRow<T extends object>(props: TableRowProps<T>): JSX.Element
     () => state as TableState<object, TableCollection<object>>,
     ref
   );
+  const isSelected = () => rowAria.isSelected;
+  const isDisabled = () => rowAria.isDisabled;
+  const isPressed = () => rowAria.isPressed;
 
   // Create hover
   const { isHovered, hoverProps } = createHover({
     get isDisabled() {
-      return isDisabled;
+      return isDisabled();
     },
   });
 
@@ -630,21 +932,39 @@ export function TableRow<T extends object>(props: TableRowProps<T>): JSX.Element
 
   // Check if focused
   const isFocused = createMemo(() => state.focusedKey === local.id);
+  const draggableItem = createMemo(() => {
+    if (!tableContext.dragAndDropHooks?.useDraggableItem || !tableContext.dragState) return undefined;
+    return tableContext.dragAndDropHooks.useDraggableItem(
+      {
+        key: local.id as string | number,
+      },
+      tableContext.dragState as Parameters<NonNullable<DragAndDropHooks<T>['useDraggableItem']>>[1]
+    );
+  });
+  const droppableItem = createMemo(() => {
+    if (!tableContext.dragAndDropHooks?.useDroppableItem || !tableContext.dropState) return undefined;
+    return tableContext.dragAndDropHooks.useDroppableItem(
+      {
+        key: local.id as string | number,
+      },
+      tableContext.dropState as Parameters<NonNullable<DragAndDropHooks<T>['useDroppableItem']>>[1],
+      () => ref()
+    );
+  });
 
   // Render props values
   const renderValues = createMemo<TableRowRenderProps>(() => ({
-    isSelected,
+    isSelected: isSelected(),
     isFocused: isFocused(),
     isFocusVisible: isFocusVisible() && isFocused(),
-    isPressed,
+    isPressed: isPressed(),
     isHovered: isHovered(),
-    isDisabled,
+    isDisabled: isDisabled(),
   }));
 
-  // Resolve render props
+  // Resolve render props (children rendered directly in JSX to avoid eager evaluation)
   const renderProps = useRenderProps(
     {
-      children: props.children,
       class: local.class,
       style: local.style,
       defaultClassName: 'solidaria-Table-row',
@@ -654,7 +974,7 @@ export function TableRow<T extends object>(props: TableRowProps<T>): JSX.Element
 
   // Remove ref from spread props
   const cleanRowProps = () => {
-    const { ref: _ref1, ...rest } = rowProps as Record<string, unknown>;
+    const { ref: _ref1, ...rest } = rowAria.rowProps as Record<string, unknown>;
     return rest;
   };
   const cleanHoverProps = () => {
@@ -675,19 +995,28 @@ export function TableRow<T extends object>(props: TableRowProps<T>): JSX.Element
     <TableRowContext.Provider value={rowContextValue}>
       <tr
         ref={setRef}
-        {...cleanRowProps()}
-        {...cleanHoverProps()}
-        {...cleanFocusProps()}
+        {...domProps}
+        {...mergeProps(
+          cleanRowProps(),
+          cleanHoverProps(),
+          cleanFocusProps(),
+          (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-selected={isSelected() || undefined}
         data-focused={isFocused() || undefined}
         data-focus-visible={(isFocusVisible() && isFocused()) || undefined}
-        data-pressed={isPressed || undefined}
+        data-pressed={isPressed() || undefined}
         data-hovered={isHovered() || undefined}
-        data-disabled={isDisabled || undefined}
+        data-disabled={isDisabled() || undefined}
+        data-dragging={draggableItem()?.isDragging || undefined}
+        data-drop-target={droppableItem()?.isDropTarget || undefined}
       >
-        {renderProps.renderChildren()}
+        {typeof local.children === 'function'
+          ? local.children(renderValues())
+          : local.children}
       </tr>
     </TableRowContext.Provider>
   );
@@ -697,7 +1026,7 @@ export function TableRow<T extends object>(props: TableRowProps<T>): JSX.Element
  * A cell in a table row.
  */
 export function TableCell(props: TableCellProps): JSX.Element {
-  const [local] = splitProps(props, ['class', 'style', 'slot', 'id']);
+  const [local, domProps] = splitProps(props, ['class', 'style', 'slot', 'id', 'children']);
 
   // Get context
   const tableContext = useContext(TableContext);
@@ -740,13 +1069,14 @@ export function TableCell(props: TableCellProps): JSX.Element {
   });
 
   // Create cell aria props
-  const { gridCellProps, isPressed } = createTableCell<object>(
+  const cellAria = createTableCell<object>(
     () => ({
       node: cellNode(),
     }),
     () => state as TableState<object, TableCollection<object>>,
     ref
   );
+  const isPressed = () => cellAria.isPressed;
 
   // Create hover
   const { isHovered, hoverProps } = createHover({
@@ -763,14 +1093,13 @@ export function TableCell(props: TableCellProps): JSX.Element {
   const renderValues = createMemo<TableCellRenderProps>(() => ({
     isFocused: isFocused(),
     isFocusVisible: isFocusVisible() && isFocused(),
-    isPressed,
+    isPressed: isPressed(),
     isHovered: isHovered(),
   }));
 
-  // Resolve render props
+  // Resolve render props (children rendered directly in JSX to avoid eager evaluation)
   const renderProps = useRenderProps(
     {
-      children: props.children,
       class: local.class,
       style: local.style,
       defaultClassName: 'solidaria-Table-cell',
@@ -780,7 +1109,7 @@ export function TableCell(props: TableCellProps): JSX.Element {
 
   // Remove ref from spread props
   const cleanCellProps = () => {
-    const { ref: _ref1, ...rest } = gridCellProps as Record<string, unknown>;
+    const { ref: _ref1, ...rest } = cellAria.gridCellProps as Record<string, unknown>;
     return rest;
   };
   const cleanHoverProps = () => {
@@ -795,6 +1124,7 @@ export function TableCell(props: TableCellProps): JSX.Element {
   return (
     <td
       ref={setRef}
+      {...domProps}
       {...cleanCellProps()}
       {...cleanHoverProps()}
       {...cleanFocusProps()}
@@ -802,10 +1132,12 @@ export function TableCell(props: TableCellProps): JSX.Element {
       style={renderProps.style()}
       data-focused={isFocused() || undefined}
       data-focus-visible={(isFocusVisible() && isFocused()) || undefined}
-      data-pressed={isPressed || undefined}
+      data-pressed={isPressed() || undefined}
       data-hovered={isHovered() || undefined}
     >
-      {renderProps.renderChildren()}
+      {typeof local.children === 'function'
+        ? local.children(renderValues())
+        : local.children}
     </td>
   );
 }
@@ -821,12 +1153,12 @@ export function TableSelectionCheckbox(props: { rowKey: Key }): JSX.Element {
 
   const { state } = context;
 
-  const { checkboxProps } = createTableSelectionCheckbox<object>(
+  const selectionCheckboxAria = createTableSelectionCheckbox<object>(
     () => ({ key: props.rowKey }),
     () => state as TableState<object, TableCollection<object>>
   );
 
-  return <input {...checkboxProps} />;
+  return <input {...selectionCheckboxAria.checkboxProps} />;
 }
 
 /**
@@ -840,18 +1172,46 @@ export function TableSelectAllCheckbox(): JSX.Element {
 
   const { state } = context;
 
-  const { checkboxProps } = createTableSelectAllCheckbox<object>(
+  const selectAllCheckboxAria = createTableSelectAllCheckbox<object>(
     () => state as TableState<object, TableCollection<object>>
   );
 
-  return <input {...checkboxProps} />;
+  return <input {...selectAllCheckboxAria.checkboxProps} />;
 }
 
 // Attach components as static properties
 Table.Header = TableHeader;
 Table.Column = TableColumn;
 Table.Body = TableBody;
+Table.LoadMoreItem = TableLoadMoreItem;
 Table.Row = TableRow;
 Table.Cell = TableCell;
 Table.SelectionCheckbox = TableSelectionCheckbox;
 Table.SelectAllCheckbox = TableSelectAllCheckbox;
+
+export interface ColumnResizerProps extends SlotProps {
+  class?: string;
+  style?: JSX.CSSProperties;
+}
+
+export function ColumnResizer(props: ColumnResizerProps): JSX.Element {
+  return <div role="separator" class={props.class ?? 'solidaria-Table-columnResizer'} style={props.style} />;
+}
+
+export interface ResizableTableContainerProps extends SlotProps {
+  children?: JSX.Element;
+  class?: string;
+  style?: JSX.CSSProperties;
+}
+
+export function ResizableTableContainer(props: ResizableTableContainerProps): JSX.Element {
+  return (
+    <div class={props.class ?? 'solidaria-ResizableTableContainer'} style={props.style}>
+      {props.children}
+    </div>
+  );
+}
+
+export function useTableOptions() {
+  return useContext(TableContext);
+}