@varialkit/table 0.1.0

package/src/Table.tsx

@@ -0,0 +1,1380 @@
+import React from 'react';
+import {
+  flexRender,
+  getCoreRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
+import type {
+  TableDensity,
+  TableGridType,
+  TableLayoutMode,
+  TableProps,
+} from './Table.types';
+import { Icon } from '@solara/icons';
+import { Menu, MenuDropdown, MenuRow, MenuSeparator, MenuSubhead } from '@solara/menu';
+import { Button } from '@solara/button';
+import { Dropdown } from '@solara/dropdown';
+import './Table.scss';
+
+export function Table<TData>({
+  data,
+  columns,
+  tableOptions,
+  getRowId,
+  className,
+  tableClassName,
+  headerClassName,
+  bodyClassName,
+  headerActions,
+  enableColumnControls = false,
+  columnControlsLabel = 'Table settings',
+  actionMenuSurfaceStyle,
+  densityOptions = ['compact', 'standard', 'spacious'],
+  layoutModeOptions = ['list', 'grid'],
+  gridTypeOptions = ['grid', 'masonry'],
+  onDensityChange,
+  enableLayoutToggle = false,
+  onLayoutModeChange,
+  layoutMode = 'list',
+  rowClassName,
+  cellClassName,
+  headerCellClassName,
+  renderHeaderCell,
+  renderCell,
+  renderGridCell,
+  gridCellRenderers,
+  gridColumnConfig,
+  gridVisibleColumnIds,
+  onGridVisibleColumnIdsChange,
+  renderGridRow,
+  renderRow,
+  renderBody,
+  emptyState,
+  onRowClick,
+  stickyHeader = false,
+  transparentSticky = false,
+  transparentBackground = false,
+  showHeader = true,
+  density = 'standard',
+  wrapperProps,
+  tableProps,
+  getRowProps,
+  getCellProps,
+  getHeaderProps,
+  enableSorting = false,
+  showPagination = false,
+  paginationLabels,
+  paginationPageSizes = [5, 10, 20, 50],
+  gridMinColumnWidth = 260,
+  gridType = 'grid',
+  onGridTypeChange,
+  gridSpacing,
+}: TableProps<TData>) {
+  const resolveSurfaceStyle = (value: string | null | undefined) => {
+    if (
+      value === 'solid' ||
+      value === 'translucent' ||
+      value === 'glass'
+    ) {
+      return value;
+    }
+    return undefined;
+  };
+
+  // Action menu renders in a portal, so we resolve surface style explicitly.
+  // This keeps translucent/glass treatment stable even when the table is hosted
+  // in shells that don't rely purely on root descendant CSS selectors.
+  const resolvedActionMenuSurfaceStyle =
+    actionMenuSurfaceStyle ??
+    (typeof document !== 'undefined'
+      ? resolveSurfaceStyle(
+          document.documentElement.getAttribute('data-surface-menu') ??
+            document.documentElement.getAttribute('data-surface-default')
+        )
+      : undefined);
+
+  // Allow the menu to drive density when the parent doesn't provide a handler.
+  const [menuDensity, setMenuDensity] = React.useState<TableDensity | null>(null);
+  // Allow the menu to drive layout when the parent doesn't provide a handler.
+  const [menuLayoutMode, setMenuLayoutMode] =
+    React.useState<TableLayoutMode | null>(null);
+  // Allow the menu to drive grid type when the parent doesn't provide a handler.
+  const [menuGridType, setMenuGridType] =
+    React.useState<TableGridType | null>(null);
+  // Grid-only field visibility state. Kept separate so list mode remains pure TanStack.
+  const [menuGridVisibleColumnIds, setMenuGridVisibleColumnIds] =
+    React.useState<string[] | null>(null);
+  const headerScrollRef = React.useRef<HTMLDivElement | null>(null);
+  const bodyLeftScrollRef = React.useRef<HTMLDivElement | null>(null);
+  const bodyCenterScrollRef = React.useRef<HTMLDivElement | null>(null);
+  const bodyRightScrollRef = React.useRef<HTMLDivElement | null>(null);
+  const normalizedLayoutModeOptions = React.useMemo<TableLayoutMode[]>(() => {
+    // Keep layout options predictable: valid ids only, stable order, no duplicates.
+    const options = layoutModeOptions.filter(
+      (option, index, source): option is TableLayoutMode =>
+        (option === 'list' || option === 'grid') && source.indexOf(option) === index
+    );
+    return options.length > 0 ? options : ['list'];
+  }, [layoutModeOptions]);
+  const normalizedGridTypeOptions = React.useMemo<TableGridType[]>(() => {
+    // Keep grid type options predictable: valid ids only, stable order, no duplicates.
+    const options = gridTypeOptions.filter(
+      (option, index, source): option is TableGridType =>
+        (option === 'grid' || option === 'masonry') &&
+        source.indexOf(option) === index
+    );
+    return options.length > 0 ? options : ['grid'];
+  }, [gridTypeOptions]);
+  // Density is shared by list + grid presentation (row/cell padding, grid spacing, typography).
+  // If controlled, always reflect the prop; otherwise use menu selection.
+  const resolvedDensity = onDensityChange ? density : menuDensity ?? density;
+  // If layout is controlled, always reflect the prop; otherwise use menu selection.
+  // Then clamp to allowed layout options so list-only surfaces cannot drift into grid mode.
+  const requestedLayoutMode = onLayoutModeChange
+    ? layoutMode
+    : menuLayoutMode ?? layoutMode;
+  // Clamp external/default values to available options so config mistakes fail safely.
+  const resolvedLayoutMode = normalizedLayoutModeOptions.includes(requestedLayoutMode)
+    ? requestedLayoutMode
+    : normalizedLayoutModeOptions[0];
+  // Grid type is only relevant in grid layout and follows the same controlled/uncontrolled pattern.
+  const requestedGridType = onGridTypeChange ? gridType : menuGridType ?? gridType;
+  const resolvedGridType = normalizedGridTypeOptions.includes(requestedGridType)
+    ? requestedGridType
+    : normalizedGridTypeOptions[0];
+  const hasListViewOption = normalizedLayoutModeOptions.includes('list');
+  const hasGridLayoutOption = normalizedLayoutModeOptions.includes('grid');
+  const hasStandardGridViewOption =
+    hasGridLayoutOption && normalizedGridTypeOptions.includes('grid');
+  const hasMasonryGridViewOption =
+    hasGridLayoutOption && normalizedGridTypeOptions.includes('masonry');
+  const availableViewOptionCount =
+    Number(hasListViewOption) +
+    Number(hasStandardGridViewOption) +
+    Number(hasMasonryGridViewOption);
+  const hasViewToggleMenu = enableLayoutToggle && availableViewOptionCount > 1;
+  // Menu appears when any built-in capability needs it.
+  const hasBuiltInMenu = enableColumnControls || hasViewToggleMenu;
+  // Compose TanStack options while preserving user overrides.
+  const resolvedTableOptions = {
+    data,
+    columns,
+    getRowId,
+    // Ensure we always have a core row model unless the caller overrides it.
+    getCoreRowModel: tableOptions?.getCoreRowModel ?? getCoreRowModel(),
+    // Provide a default sorted row model when sorting is enabled.
+    ...(enableSorting && !tableOptions?.getSortedRowModel
+      ? { getSortedRowModel: getSortedRowModel() }
+      : {}),
+    ...tableOptions,
+  };
+
+  const table = useReactTable(resolvedTableOptions);
+  const rows = table.getRowModel().rows;
+  const paginationState = table.getState().pagination;
+  const pageIndex = paginationState?.pageIndex ?? 0;
+  const pageSize = paginationState?.pageSize ?? 10;
+  const pageCount = table.getPageCount();
+  const canPreviousPage = table.getCanPreviousPage();
+  const canNextPage = table.getCanNextPage();
+
+  const resolvedPaginationLabels = {
+    pageLabel: 'Page',
+    rowsLabel: 'Rows',
+    prevLabel: 'Prev',
+    nextLabel: 'Next',
+    ...paginationLabels,
+  };
+
+  const baseClass = 'solara-table';
+  const densityClass = `solara-table--density-${resolvedDensity}`;
+  const layoutClass = `solara-table--layout-${resolvedLayoutMode}`;
+  const stickyHeaderClass = stickyHeader ? 'solara-table--sticky-header' : '';
+
+  const transparentStickyClass = transparentSticky
+    ? 'solara-table--transparent-sticky'
+    : '';
+  const transparentBackgroundClass = transparentBackground
+    ? 'solara-table--transparent-background'
+    : '';
+
+  const resolvedTableClassName = ['solara-table__table', tableClassName]
+    .filter(Boolean)
+    .join(' ');
+
+  const resolvedHeaderClassName = ['solara-table__head', headerClassName]
+    .filter(Boolean)
+    .join(' ');
+
+  const resolvedBodyClassName = ['solara-table__body', bodyClassName]
+    .filter(Boolean)
+    .join(' ');
+  const toCssLength = (value: number | string | undefined) =>
+    typeof value === 'number' ? `${value}px` : value;
+  const setGridStyleVar = (
+    style: React.CSSProperties,
+    variableName: string,
+    value: string | undefined
+  ) => {
+    if (!value) return;
+    // CSS custom properties are string-indexed in React style objects.
+    (style as Record<string, string>)[variableName] = value;
+  };
+
+  // Keep array equality checks local and cheap for render-time/state-sync guards.
+  const areColumnIdsEqual = (left: string[], right: string[]) => {
+    if (left.length !== right.length) return false;
+    for (let index = 0; index < left.length; index += 1) {
+      if (left[index] !== right[index]) return false;
+    }
+    return true;
+  };
+
+  const visibleColumns = table.getVisibleLeafColumns();
+  const visibleColumnIds = visibleColumns.map((column) => column.id);
+  const visibleColumnIdSet = new Set(visibleColumnIds);
+  // Signatures let effects depend on value-stable keys instead of array identity.
+  const visibleColumnIdsSignature = visibleColumnIds.join('|');
+
+  // Build grid defaults from currently TanStack-visible columns.
+  // This preserves list/grid parity by default while allowing grid-specific hidden defaults.
+  const defaultGridVisibleColumnIds = React.useMemo(
+    () =>
+      visibleColumns
+        // `hiddenByDefault` only affects grid overlay defaults.
+        // It does not modify TanStack's base visibility state.
+        .filter((column) => !gridColumnConfig?.[column.id]?.hiddenByDefault)
+        .map((column) => column.id),
+    [visibleColumns, gridColumnConfig]
+  );
+  const defaultGridVisibleColumnIdsSignature =
+    defaultGridVisibleColumnIds.join('|');
+
+  const resolvedGridVisibleColumnIdsRaw = onGridVisibleColumnIdsChange
+    ? gridVisibleColumnIds ?? defaultGridVisibleColumnIds
+    : menuGridVisibleColumnIds ?? defaultGridVisibleColumnIds;
+
+  // Keep grid visible ids bounded to columns currently visible in TanStack.
+  // Grid visibility is an overlay; TanStack remains the canonical source of actual column presence.
+  const resolvedGridVisibleColumnIds = resolvedGridVisibleColumnIdsRaw.filter(
+    (columnId) => visibleColumnIdSet.has(columnId)
+  );
+  const resolvedGridVisibleColumnIdSet = new Set(resolvedGridVisibleColumnIds);
+
+  React.useEffect(() => {
+    if (onGridVisibleColumnIdsChange) return;
+    // Preserve user grid field toggles while pruning removed columns and seeding new defaults.
+    // This prevents stale ids after visibility/order/schema changes.
+    // Relationship note:
+    // - TanStack visibility changes can remove ids from the grid overlay.
+    // - Newly visible TanStack columns should re-enter overlay defaults when applicable.
+    setMenuGridVisibleColumnIds((previous) => {
+      if (!previous) return previous;
+      const currentVisibleSet = new Set(visibleColumnIds);
+      const next = previous.filter((columnId) => currentVisibleSet.has(columnId));
+      const nextSet = new Set(next);
+      defaultGridVisibleColumnIds.forEach((columnId) => {
+        if (!nextSet.has(columnId)) next.push(columnId);
+      });
+      // Performance/stability guard: avoid state writes when values did not change.
+      // This prevents render loops from identity-only array changes.
+      return areColumnIdsEqual(previous, next) ? previous : next;
+    });
+  }, [
+    onGridVisibleColumnIdsChange,
+    visibleColumnIdsSignature,
+    defaultGridVisibleColumnIdsSignature,
+  ]);
+  const getPinnedSide = (
+    column: (typeof visibleColumns)[number]
+  ): 'left' | 'right' | false => {
+    const pin = column.getIsPinned?.();
+    if (pin === 'left' || pin === 'right') return pin;
+    return false;
+  };
+  const leftColumns = visibleColumns.filter(
+    (column) => getPinnedSide(column) === 'left'
+  );
+  const rightColumns = visibleColumns.filter(
+    (column) => getPinnedSide(column) === 'right'
+  );
+  const centerColumns = visibleColumns.filter(
+    (column) => !getPinnedSide(column)
+  );
+  const hasPinnedColumns = leftColumns.length > 0 || rightColumns.length > 0;
+
+  // Use a split layout when transparency would otherwise reveal content beneath
+  // sticky headers or pinned columns (separate header/body or left/center/right panes).
+  // This avoids "underlap" without painting a background.
+  const useSplitStickyLayout =
+    transparentSticky && (stickyHeader || hasPinnedColumns);
+  const splitStickyClass = useSplitStickyLayout
+    ? 'solara-table--split-sticky'
+    : '';
+
+  const wrapperClassName = [
+    baseClass,
+    densityClass,
+    layoutClass,
+    stickyHeaderClass,
+    transparentStickyClass,
+    transparentBackgroundClass,
+    splitStickyClass,
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+
+  // Built-in action menu (column controls + density + optional layout switching).
+  // This is intentionally internal so we can evolve it without changing the public API.
+  const renderColumnControls = () => {
+    if (!hasBuiltInMenu) return null;
+
+    // One column control surface, with behavior bound to the active layout.
+    // - list: toggle TanStack visibility
+    // - grid: toggle grid-visible overlay
+    const isGridLayout = resolvedLayoutMode === 'grid';
+    const allColumns = table.getAllLeafColumns();
+    // Grid-only visibility is a second layer on top of TanStack visibility.
+    // In grid mode we only expose columns TanStack currently considers visible.
+    const columnsForMenu = isGridLayout ? visibleColumns : allColumns;
+    const order = table.getState().columnOrder;
+    // If no explicit order is set, derive the natural column order from TanStack.
+    const orderedIds =
+      order.length > 0 ? order : allColumns.map((column) => column.id);
+
+    const setGridVisibleColumns = (nextIds: string[]) => {
+      // Grid field visibility is intentionally independent from TanStack column visibility
+      // so list mode and grid mode can have different defaults, presets, and user toggles.
+      // We always clamp to TanStack-visible ids to maintain single source-of-truth boundaries.
+      const nextVisibleIds = nextIds.filter((columnId) =>
+        visibleColumnIdSet.has(columnId)
+      );
+      // Guard no-op updates to avoid unnecessary renders/callback cascades.
+      if (areColumnIdsEqual(nextVisibleIds, resolvedGridVisibleColumnIds)) return;
+      if (onGridVisibleColumnIdsChange) {
+        onGridVisibleColumnIdsChange(nextVisibleIds);
+      } else {
+        setMenuGridVisibleColumnIds(nextVisibleIds);
+      }
+    };
+
+    // Move a column one slot left/right while keeping the rest stable.
+    const moveColumn = (columnId: string, direction: 'left' | 'right') => {
+      const currentIndex = orderedIds.indexOf(columnId);
+      if (currentIndex === -1) return;
+      const nextIndex = direction === 'left' ? currentIndex - 1 : currentIndex + 1;
+      if (nextIndex < 0 || nextIndex >= orderedIds.length) return;
+
+      const nextOrder = [...orderedIds];
+      const [moved] = nextOrder.splice(currentIndex, 1);
+      nextOrder.splice(nextIndex, 0, moved);
+      // TanStack owns canonical order state; this keeps list rendering + menu aligned.
+      table.setColumnOrder(nextOrder);
+    };
+
+    return (
+      <MenuDropdown
+        align="end"
+        trigger={(state) => (
+          <button
+            type="button"
+            aria-label={columnControlsLabel}
+            {...state.getTriggerProps({
+              className: 'solara-table__header-action-button',
+            })}
+          >
+            <Icon name="gear_filled_16" size={16} aria-hidden />
+          </button>
+        )}
+      >
+        <Menu surfaceStyle={resolvedActionMenuSurfaceStyle}>
+          {enableColumnControls ? (
+            <>
+              <MenuSubhead>Columns</MenuSubhead>
+              <MenuRow
+                data-menu-keep-open="true"
+                onClick={() => {
+                  // In grid layout, "show all" means all currently TanStack-visible columns
+                  // become visible in grid cards (without mutating TanStack visibility).
+                  if (isGridLayout) {
+                    setGridVisibleColumns(visibleColumnIds);
+                    return;
+                  }
+                  // Prefer the TanStack helper when available.
+                  if (table.toggleAllColumnsVisible) {
+                    table.toggleAllColumnsVisible(true);
+                    return;
+                  }
+                  allColumns.forEach((column) => {
+                    if (column.getCanHide?.() === false) return;
+                    column.toggleVisibility(true);
+                  });
+                }}
+              >
+                Show all columns
+              </MenuRow>
+              <MenuRow
+                data-menu-keep-open="true"
+                onClick={() => {
+                  // In grid layout, "hide all" collapses the card fields only.
+                  if (isGridLayout) {
+                    setGridVisibleColumns([]);
+                    return;
+                  }
+                  // Hide everything that is allowed to be hidden.
+                  if (table.toggleAllColumnsVisible) {
+                    table.toggleAllColumnsVisible(false);
+                    return;
+                  }
+                  allColumns.forEach((column) => {
+                    if (column.getCanHide?.() === false) return;
+                    column.toggleVisibility(false);
+                  });
+                }}
+              >
+                Hide all columns
+              </MenuRow>
+              <MenuSeparator />
+              {columnsForMenu.map((column) => {
+                // One shared column section: the UI is stable, behavior switches by layout.
+                const isVisible = isGridLayout
+                  ? resolvedGridVisibleColumnIdSet.has(column.id)
+                  : column.getIsVisible();
+                const canHide = isGridLayout
+                  ? true
+                  : (column.getCanHide?.() ?? true);
+                const isPinned = Boolean(column.getIsPinned?.());
+                const columnLabel =
+                  typeof column.columnDef.header === 'string'
+                    ? column.columnDef.header
+                    : column.id;
+                const currentIndex = orderedIds.indexOf(column.id);
+                // Avoid reordering pinned columns to prevent conflicting UX.
+                // Reordering stays list-only because grid does not rely on TanStack column order
+                // for card section semantics (media/detail composition controls this instead).
+                const canMoveLeft = currentIndex > 0 && !isPinned;
+                const canMoveRight =
+                  currentIndex !== -1 &&
+                  currentIndex < orderedIds.length - 1 &&
+                  !isPinned;
+
+                return (
+                  <div
+                    key={column.id}
+                    className={[
+                      'solara-menu-row',
+                      'solara-table__menu-row',
+                      isGridLayout ? 'solara-table__menu-row--simple' : null,
+                    ]
+                      .filter(Boolean)
+                      .join(' ')}
+                    role="presentation"
+                    data-menu-keep-open="true"
+                  >
+                    <button
+                      type="button"
+                      className="solara-table__menu-toggle"
+                      disabled={!canHide}
+                      onClick={() => {
+                        if (!canHide) return;
+                        if (isGridLayout) {
+                          const nextSet = new Set(resolvedGridVisibleColumnIds);
+                          if (isVisible) nextSet.delete(column.id);
+                          else nextSet.add(column.id);
+                          setGridVisibleColumns(Array.from(nextSet));
+                          return;
+                        }
+                        column.toggleVisibility(!isVisible);
+                      }}
+                    >
+                      <span className="solara-table__menu-toggle-label">
+                        {columnLabel}
+                      </span>
+                      <span
+                        className={
+                          isVisible
+                            ? 'solara-table__menu-visibility'
+                            : 'solara-table__menu-visibility solara-table__menu-visibility--hidden'
+                        }
+                        aria-hidden
+                      >
+                        {isVisible ? 'On' : 'Off'}
+                      </span>
+                    </button>
+                    {!isGridLayout ? (
+                      <div className="solara-table__menu-row-actions">
+                        <button
+                          type="button"
+                          data-menu-keep-open="true"
+                          className="solara-table__menu-icon-button"
+                          aria-label={`Move ${columnLabel} left`}
+                          disabled={!canMoveLeft}
+                          onClick={(event) => {
+                            event.stopPropagation();
+                            moveColumn(column.id, 'left');
+                          }}
+                        >
+                          <Icon name="arrow_chevron_left_16" size={16} aria-hidden />
+                        </button>
+                        <button
+                          type="button"
+                          data-menu-keep-open="true"
+                          className="solara-table__menu-icon-button"
+                          aria-label={`Move ${columnLabel} right`}
+                          disabled={!canMoveRight}
+                          onClick={(event) => {
+                            event.stopPropagation();
+                            moveColumn(column.id, 'right');
+                          }}
+                        >
+                          <Icon name="arrow_chevron_right_16" size={16} aria-hidden />
+                        </button>
+                      </div>
+                    ) : null}
+                  </div>
+                );
+              })}
+              {!isGridLayout ? (
+                <>
+                  <MenuSeparator />
+                  <MenuRow
+                    data-menu-keep-open="true"
+                    // Reset to the natural column order stored in TanStack.
+                    onClick={() => table.resetColumnOrder?.()}
+                  >
+                    Reset column order
+                  </MenuRow>
+                </>
+              ) : null}
+            </>
+          ) : null}
+          {enableColumnControls && densityOptions.length > 0 ? (
+            <>
+              <MenuSeparator />
+              <MenuSubhead>Density</MenuSubhead>
+              {densityOptions.map((option) => (
+                <MenuRow
+                  key={option}
+                  data-menu-keep-open="true"
+                  isActive={resolvedDensity === option}
+                  onClick={() => {
+                    if (onDensityChange) {
+                      onDensityChange(option);
+                    } else {
+                      setMenuDensity(option);
+                    }
+                  }}
+                >
+                  {option}
+                </MenuRow>
+              ))}
+            </>
+          ) : null}
+          {hasViewToggleMenu ? (
+            <>
+              <MenuSeparator />
+              <MenuSubhead>View</MenuSubhead>
+              {hasListViewOption ? (
+                <MenuRow
+                  key="view-list"
+                  data-menu-keep-open="true"
+                  isActive={resolvedLayoutMode === 'list'}
+                  onClick={() => {
+                    if (onLayoutModeChange) {
+                      onLayoutModeChange('list');
+                    } else {
+                      setMenuLayoutMode('list');
+                    }
+                  }}
+                >
+                  List
+                </MenuRow>
+              ) : null}
+              {hasStandardGridViewOption ? (
+                <MenuRow
+                  key="view-grid-standard"
+                  data-menu-keep-open="true"
+                  isActive={
+                    resolvedLayoutMode === 'grid' && resolvedGridType === 'grid'
+                  }
+                  onClick={() => {
+                    if (onLayoutModeChange) {
+                      onLayoutModeChange('grid');
+                    } else {
+                      setMenuLayoutMode('grid');
+                    }
+                    if (onGridTypeChange) {
+                      onGridTypeChange('grid');
+                    } else {
+                      setMenuGridType('grid');
+                    }
+                  }}
+                >
+                  Standard grid
+                </MenuRow>
+              ) : null}
+              {hasMasonryGridViewOption ? (
+                <MenuRow
+                  key="view-grid-masonry"
+                  data-menu-keep-open="true"
+                  isActive={
+                    resolvedLayoutMode === 'grid' && resolvedGridType === 'masonry'
+                  }
+                  onClick={() => {
+                    if (onLayoutModeChange) {
+                      onLayoutModeChange('grid');
+                    } else {
+                      setMenuLayoutMode('grid');
+                    }
+                    if (onGridTypeChange) {
+                      onGridTypeChange('masonry');
+                    } else {
+                      setMenuGridType('masonry');
+                    }
+                  }}
+                >
+                  Masonry grid
+                </MenuRow>
+              ) : null}
+            </>
+          ) : null}
+        </Menu>
+      </MenuDropdown>
+    );
+  };
+
+  // Render header groups (supports column grouping and multi-row headers).
+  const renderColGroup = (
+    columnsToRender: Array<(typeof visibleColumns)[number]>,
+    includeActions: boolean
+  ) => {
+    return (
+      <colgroup>
+        {columnsToRender.map((column) => {
+          const size = column.getSize?.();
+          return (
+            <col
+              key={column.id}
+              style={size ? { width: `${size}px` } : undefined}
+            />
+          );
+        })}
+        {includeActions ? <col className="solara-table__actions-col" /> : null}
+      </colgroup>
+    );
+  };
+
+  // Resolve header groups for a pin region; falls back to filtering the full groups.
+  // The fallback keeps only headers whose leaf columns are all in the same pin region.
+  const getHeaderGroupsForRegion = (region: 'left' | 'center' | 'right') => {
+    type HeaderGroups = ReturnType<typeof table.getHeaderGroups>;
+    const tableAny = table as unknown as {
+      getLeftHeaderGroups?: () => HeaderGroups;
+      getCenterHeaderGroups?: () => HeaderGroups;
+      getRightHeaderGroups?: () => HeaderGroups;
+    };
+
+    // Prefer TanStack's regional header groups when available.
+    const direct =
+      region === 'left'
+        ? tableAny.getLeftHeaderGroups?.()
+        : region === 'right'
+          ? tableAny.getRightHeaderGroups?.()
+          : tableAny.getCenterHeaderGroups?.();
+
+    if (direct && direct.length > 0) return direct;
+
+    // Fallback: filter header groups to a single pin region.
+    const headerGroups = table.getHeaderGroups();
+    return headerGroups
+      .map((group) => {
+        const headers = group.headers.filter((header) => {
+          const leafHeaders = header.getLeafHeaders
+            ? header.getLeafHeaders()
+            : [header];
+          const regions = new Set(
+            leafHeaders.map((leaf) => {
+              const pinned = getPinnedSide(leaf.column);
+              if (pinned === 'left') return 'left';
+              if (pinned === 'right') return 'right';
+              return 'center';
+            })
+          );
+          return regions.size === 1 && regions.has(region);
+        });
+
+        return { ...group, headers };
+      })
+      .filter((group) => group.headers.length > 0);
+  };
+
+  // Resolve visible cells for a pin region; falls back to filtering row cells.
+  // This keeps column order consistent with TanStack for each pane.
+  const getRowCellsForRegion = (
+    row: (typeof rows)[number],
+    region: 'left' | 'center' | 'right'
+  ) => {
+    type RowCells = ReturnType<typeof row.getVisibleCells>;
+    const rowAny = row as unknown as {
+      getLeftVisibleCells?: () => RowCells;
+      getCenterVisibleCells?: () => RowCells;
+      getRightVisibleCells?: () => RowCells;
+    };
+
+    // Prefer TanStack's regional cell helpers when available.
+    const direct =
+      region === 'left'
+        ? rowAny.getLeftVisibleCells?.()
+        : region === 'right'
+          ? rowAny.getRightVisibleCells?.()
+          : rowAny.getCenterVisibleCells?.();
+
+    if (direct && direct.length > 0) return direct;
+
+    // Fallback: filter cells to a single pin region.
+    return row.getVisibleCells().filter((cell) => {
+      const pinned = getPinnedSide(cell.column);
+      if (region === 'left') return pinned === 'left';
+      if (region === 'right') return pinned === 'right';
+      return !pinned;
+    });
+  };
+
+  const renderHeaderSection = (
+    headerGroups: ReturnType<typeof table.getHeaderGroups>,
+    includeActions: boolean
+  ) => {
+    if (!showHeader) return null;
+
+    const columnControls = hasBuiltInMenu ? renderColumnControls() : null;
+    // Allow custom header actions while still keeping the built-in controls.
+    const resolvedHeaderActions =
+      headerActions && columnControls ? (
+        <div className="solara-table__header-actions-stack">
+          {headerActions}
+          {columnControls}
+        </div>
+      ) : (
+        headerActions ?? columnControls
+      );
+    // Use a dedicated header cell for actions so it stays aligned with header content.
+    const hasHeaderActions = includeActions && Boolean(resolvedHeaderActions);
+    const headerRowSpan = headerGroups.length;
+
+    const resolvedHeaderStyle = transparentBackground ? { background: 'transparent' } : undefined;
+
+    return (
+      <thead className={resolvedHeaderClassName} style={resolvedHeaderStyle}>
+        {headerGroups.map((headerGroup, groupIndex) => (
+          <tr key={headerGroup.id}>
+            {headerGroup.headers.map((header) => {
+              if (header.isPlaceholder) return <th key={header.id} />;
+
+              const headerProps = getHeaderProps?.(header);
+              const {
+                className: headerPropsClassName,
+                style: headerPropsStyle,
+                ...restHeaderProps
+              } = headerProps ?? {};
+              const resolvedHeaderStyle =
+                transparentSticky
+                  ? { ...(headerPropsStyle ?? {}), background: 'transparent', boxShadow: 'none' }
+                  : headerPropsStyle;
+              const headerContent = renderHeaderCell
+                ? renderHeaderCell(header)
+                : flexRender(header.column.columnDef.header, header.getContext());
+              // Sorting state comes from TanStack so we only render controls when supported.
+              const canSort = header.column.getCanSort();
+              const sortingState = header.column.getIsSorted();
+              const sortIndicator =
+                sortingState === 'asc'
+                  ? 'arrow_chevron_up_16'
+                  : sortingState === 'desc'
+                    ? 'arrow_chevron_down_16'
+                    : null;
+
+              return (
+                <th
+                  key={header.id}
+                  className={[
+                    'solara-table__header-cell',
+                    headerCellClassName?.(header),
+                    canSort ? 'solara-table__header-cell--sortable' : null,
+                    headerPropsClassName,
+                  ]
+                    .filter(Boolean)
+                    .join(' ')}
+                  style={resolvedHeaderStyle}
+                  {...restHeaderProps}
+                >
+                  {canSort ? (
+                    <button
+                      type="button"
+                      className="solara-table__sort"
+                      onClick={header.column.getToggleSortingHandler()}
+                    >
+                      <span>{headerContent}</span>
+                      {sortIndicator ? (
+                        <span className="solara-table__sort-indicator">
+                          <Icon name={sortIndicator} size={16} aria-hidden />
+                        </span>
+                      ) : null}
+                    </button>
+                  ) : (
+                    headerContent
+                  )}
+                </th>
+              );
+            })}
+            {hasHeaderActions && groupIndex === 0 ? (
+              <th
+                className="solara-table__header-actions-cell"
+                rowSpan={headerRowSpan}
+              >
+                {resolvedHeaderActions}
+              </th>
+            ) : null}
+          </tr>
+        ))}
+      </thead>
+    );
+  };
+
+  // Default body renderer that maps TanStack row/cell models to <tr>/<td>.
+  // We render one body per pane when split layout is active.
+  const renderDefaultBodySection = (
+    region: 'left' | 'center' | 'right',
+    includeActions: boolean
+  ) => (
+    <tbody className={resolvedBodyClassName}>
+      {rows.length === 0 ? (
+        region === 'center' ? (
+          <tr className="solara-table__empty">
+            <td
+              colSpan={
+                Math.max(1, region === 'center' ? centerColumns.length : 1) +
+                (includeActions ? 1 : 0)
+              }
+            >
+              {emptyState ?? 'No results.'}
+            </td>
+          </tr>
+        ) : null
+      ) : (
+        rows.map((row) => {
+          // State flags are read from TanStack once per row and mapped to CSS classes.
+          // This keeps highlight behavior centralized (selected, expanded, and sub-row).
+          const isSelected = row.getIsSelected?.() ?? false;
+          const isExpanded = row.getIsExpanded?.() ?? false;
+          const isSubRow = row.depth > 0;
+          const isInExpandedGroup = isSubRow && (row.getParentRow?.()?.getIsExpanded?.() ?? false);
+          const rowProps = getRowProps?.(row);
+          const { className: rowPropsClassName, ...restRowProps } =
+            rowProps ?? {};
+          const rowCells = getRowCellsForRegion(row, region).map((cell) => {
+            const cellProps = getCellProps?.(cell);
+            const {
+              className: cellPropsClassName,
+              style: cellPropsStyle,
+              ...restCellProps
+            } = cellProps ?? {};
+            const resolvedCellStyle =
+              transparentSticky
+                ? { ...(cellPropsStyle ?? {}), background: 'transparent', boxShadow: 'none' }
+                : cellPropsStyle;
+            const cellContent = renderCell
+              ? renderCell(cell)
+              : flexRender(cell.column.columnDef.cell, cell.getContext());
+
+            return (
+              <td
+                key={cell.id}
+                className={[
+                  'solara-table__cell',
+                  cellClassName?.(cell),
+                  cellPropsClassName,
+                ]
+                  .filter(Boolean)
+                  .join(' ')}
+                style={resolvedCellStyle}
+                {...restCellProps}
+              >
+                {cellContent}
+              </td>
+            );
+          });
+
+          if (renderRow && region === 'center' && !hasPinnedColumns) {
+            return (
+              <React.Fragment key={row.id}>
+                {renderRow(row, rowCells)}
+              </React.Fragment>
+            );
+          }
+
+          return (
+            <tr
+              key={row.id}
+              className={[
+                'solara-table__row',
+                isSelected ? 'solara-table__row--selected' : null,
+                isExpanded ? 'solara-table__row--expanded' : null,
+                isSubRow ? 'solara-table__row--subrow' : null,
+                isInExpandedGroup ? 'solara-table__row--in-expanded-group' : null,
+                rowClassName?.(row),
+                onRowClick ? 'solara-table__row--clickable' : null,
+                rowPropsClassName,
+              ]
+                .filter(Boolean)
+                .join(' ')}
+              // Expose state to assistive tech and allow selector-based styling hooks.
+              aria-selected={isSelected || undefined}
+              data-selected={isSelected ? 'true' : undefined}
+              data-expanded={isExpanded ? 'true' : undefined}
+              onClick={(event) => onRowClick?.(row, event)}
+              {...restRowProps}
+            >
+              {rowCells}
+              {/* Keep row alignment when a header actions column is present. */}
+              {includeActions ? (
+                <td className="solara-table__actions-cell" />
+              ) : null}
+            </tr>
+          );
+        })
+      )}
+    </tbody>
+  );
+
+  const resolveGridCellContent = (
+    row: (typeof rows)[number],
+    cell: ReturnType<(typeof rows)[number]['getVisibleCells']>[number]
+  ) => {
+    // Grid can override cell rendering globally or by column id.
+    const columnRenderer = gridCellRenderers?.[cell.column.id];
+    if (columnRenderer) return columnRenderer(cell, row, table);
+    if (renderGridCell) return renderGridCell(cell, row, table);
+    if (renderCell) return renderCell(cell);
+    return flexRender(cell.column.columnDef.cell, cell.getContext());
+  };
+
+  const buildGridCellsForRow = (row: (typeof rows)[number]) => {
+    return row
+      .getVisibleCells()
+      // Apply grid overlay visibility after TanStack visibility so base table logic always wins.
+      .filter((cell) => resolvedGridVisibleColumnIdSet.has(cell.column.id))
+      .map((cell) => {
+        const columnId = cell.column.id;
+        const config = gridColumnConfig?.[columnId];
+        // `media` cells render in a dedicated full-width area above detail fields.
+        // `detail` cells render in the content section with label/value semantics.
+        const variant = config?.variant ?? 'detail';
+        const showLabel = config?.showLabel ?? variant !== 'media';
+        const headerLabel =
+          typeof cell.column.columnDef.header === 'string'
+            ? cell.column.columnDef.header
+            : columnId;
+
+        return {
+          id: cell.id,
+          columnId,
+          headerLabel,
+          variant,
+          showLabel,
+          unpadded: Boolean(config?.unpadded),
+          // Keep class composition local so custom grid configs can extend existing cell styling.
+          className: [cellClassName?.(cell), config?.className]
+            .filter(Boolean)
+            .join(' '),
+          // Content is resolved once here so both default/custom grid row renderers share behavior.
+          content: resolveGridCellContent(row, cell),
+        };
+      });
+  };
+
+  const renderDefaultGridRow = (row: (typeof rows)[number]) => {
+    const rowCells = buildGridCellsForRow(row);
+    // Media-first composition keeps image/video hero content full-bleed at the top.
+    const mediaCells = rowCells.filter((cell) => cell.variant === 'media');
+    const detailCells = rowCells.filter((cell) => cell.variant !== 'media');
+    const isSelected = row.getIsSelected?.() ?? false;
+    const isExpanded = row.getIsExpanded?.() ?? false;
+    const isSubRow = row.depth > 0;
+    const isInExpandedGroup =
+      isSubRow && (row.getParentRow?.()?.getIsExpanded?.() ?? false);
+
+    return (
+      <div
+        key={row.id}
+        className={[
+          'solara-table__grid-row',
+          'solara-table__row',
+          isSelected ? 'solara-table__row--selected' : null,
+          isExpanded ? 'solara-table__row--expanded' : null,
+          isSubRow ? 'solara-table__row--subrow' : null,
+          isInExpandedGroup ? 'solara-table__row--in-expanded-group' : null,
+          rowClassName?.(row),
+          onRowClick ? 'solara-table__row--clickable' : null,
+        ]
+          .filter(Boolean)
+          .join(' ')}
+        aria-selected={isSelected || undefined}
+        data-selected={isSelected ? 'true' : undefined}
+        data-expanded={isExpanded ? 'true' : undefined}
+        onClick={(event) => onRowClick?.(row, event)}
+      >
+        {mediaCells.map((cell) => (
+          <div
+            key={cell.id}
+            className={[
+              'solara-table__grid-cell',
+              'solara-table__grid-cell--media',
+              cell.unpadded ? 'solara-table__grid-cell--unpadded' : null,
+              cell.className,
+            ]
+              .filter(Boolean)
+              .join(' ')}
+          >
+            {cell.showLabel ? (
+              <div className="solara-table__grid-cell-label">{cell.headerLabel}</div>
+            ) : null}
+            <div className="solara-table__grid-cell-value">{cell.content}</div>
+          </div>
+        ))}
+        {detailCells.length > 0 ? (
+          <div className="solara-table__grid-row-details">
+            {detailCells.map((cell) => (
+              <div
+                key={cell.id}
+                className={[
+                  'solara-table__grid-cell',
+                  cell.unpadded ? 'solara-table__grid-cell--unpadded' : null,
+                  cell.className,
+                ]
+                  .filter(Boolean)
+                  .join(' ')}
+              >
+                {cell.showLabel ? (
+                  <div className="solara-table__grid-cell-label">{cell.headerLabel}</div>
+                ) : null}
+                <div className="solara-table__grid-cell-value">{cell.content}</div>
+              </div>
+            ))}
+          </div>
+        ) : null}
+      </div>
+    );
+  };
+
+  const renderGridLayout = () => {
+    const actionMenu = hasBuiltInMenu ? renderColumnControls() : null;
+    const resolvedHeaderActions =
+      headerActions && actionMenu ? (
+        <div className="solara-table__header-actions-stack">
+          {headerActions}
+          {actionMenu}
+        </div>
+      ) : (
+        headerActions ?? actionMenu
+      );
+    const hasGridActions = Boolean(resolvedHeaderActions);
+    const gridMinWidth = toCssLength(gridMinColumnWidth) ?? '260px';
+    const gridTypeClass: TableGridType =
+      resolvedGridType === 'masonry' ? 'masonry' : 'grid';
+    const gridContainerStyle: React.CSSProperties = {};
+    const gridGap = toCssLength(gridSpacing?.gap);
+    // Explicit per-axis gaps fall back to `gap` to keep config concise when symmetry is fine.
+    const gridColumnGap = toCssLength(gridSpacing?.columnGap ?? gridSpacing?.gap);
+    const gridRowGap = toCssLength(gridSpacing?.rowGap ?? gridSpacing?.gap);
+    const gridDetailsGap = toCssLength(gridSpacing?.detailsGap);
+    const gridDetailsPadding = toCssLength(gridSpacing?.detailsPadding);
+
+    // Keep all spacing overrides token-based so density and custom spacing compose predictably.
+    setGridStyleVar(gridContainerStyle, '--solara-table-grid-gap', gridGap);
+    setGridStyleVar(gridContainerStyle, '--solara-table-grid-column-gap', gridColumnGap);
+    setGridStyleVar(gridContainerStyle, '--solara-table-grid-row-gap', gridRowGap);
+    setGridStyleVar(gridContainerStyle, '--solara-table-grid-details-gap', gridDetailsGap);
+    setGridStyleVar(
+      gridContainerStyle,
+      '--solara-table-grid-details-padding',
+      gridDetailsPadding
+    );
+
+    if (gridTypeClass === 'masonry') {
+      // Masonry uses CSS columns while card internals keep the same media/detail structure.
+      // We set only column width here and let browser columns stack variable-height cards naturally.
+      gridContainerStyle.columnWidth = gridMinWidth;
+    } else {
+      // Standard grid keeps predictable row/column tracks with auto-fit cards.
+      gridContainerStyle.gridTemplateColumns = `repeat(auto-fit, minmax(${gridMinWidth}, 1fr))`;
+    }
+
+    return (
+      <div
+        className={wrapperClassName}
+        {...wrapperProps}
+        style={{ ...(wrapperProps?.style ?? {}) }}
+      >
+        {hasGridActions ? (
+          <div className="solara-table__grid-toolbar">{resolvedHeaderActions}</div>
+        ) : null}
+        {rows.length === 0 ? (
+          <div className="solara-table__grid-empty">{emptyState ?? 'No results.'}</div>
+        ) : (
+          <div
+            className={[
+              'solara-table__grid',
+              gridTypeClass === 'masonry'
+                ? 'solara-table__grid--masonry'
+                : 'solara-table__grid--standard',
+            ]
+              .filter(Boolean)
+              .join(' ')}
+            style={gridContainerStyle}
+          >
+            {rows.map((row) => {
+              if (!renderGridRow) return renderDefaultGridRow(row);
+              // Custom grid rows receive the filtered grid-visible cells in order.
+              const cells = buildGridCellsForRow(row).map((cell) => cell.content);
+              return (
+                <React.Fragment key={row.id}>
+                  {renderGridRow(row, cells, table)}
+                </React.Fragment>
+              );
+            })}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  const sharedTableStyle = transparentBackground
+    ? { ...(tableProps?.style ?? {}), background: 'transparent' }
+    : tableProps?.style;
+
+  const stripWidthStyles = (
+    style: React.CSSProperties | undefined
+  ): React.CSSProperties | undefined => {
+    if (!style) return style;
+    const { width, minWidth, maxWidth, ...rest } = style;
+    return rest;
+  };
+
+  const centerTableProps = tableProps;
+  const sideTableProps =
+    tableProps && tableProps.style
+      ? { ...tableProps, style: stripWidthStyles(tableProps.style) }
+      : tableProps;
+
+  // Layout branch point: grid mode bypasses table markup and renders card composition.
+  // TanStack row modeling is still shared; only presentation changes.
+  if (resolvedLayoutMode === 'grid') {
+    return renderGridLayout();
+  }
+
+  if (useSplitStickyLayout) {
+    const headerGroupsLeft = getHeaderGroupsForRegion('left');
+    const headerGroupsCenter = getHeaderGroupsForRegion('center');
+    const headerGroupsRight = getHeaderGroupsForRegion('right');
+    const hasHeaderActions = Boolean(hasBuiltInMenu || headerActions);
+    const actionsInRight = hasHeaderActions && rightColumns.length > 0;
+    const actionsInCenter = hasHeaderActions && !actionsInRight;
+    const useCustomBody = Boolean(renderBody) && !hasPinnedColumns;
+    // Custom list body is disabled with pinned split panes to avoid pane desync/structure mismatch.
+
+    const wrapperStyle = { ...(wrapperProps?.style ?? {}) } as React.CSSProperties;
+    const bodyWrapperStyle: React.CSSProperties = {
+      ...(wrapperProps?.style ?? {}),
+      overflow: 'auto',
+    };
+    const bodySideStyle: React.CSSProperties = {
+      ...bodyWrapperStyle,
+      overflowY: 'auto',
+      overflowX: 'hidden',
+    };
+    const { style: _ignoredStyle, onScroll, ...restWrapperProps } =
+      wrapperProps ?? {};
+
+    // Keep header + side panes in sync with the center scroll container.
+    // Center pane owns horizontal scroll; side panes mirror vertical scroll.
+    const handleBodyScroll: React.UIEventHandler<HTMLDivElement> = (event) => {
+      const target = event.currentTarget;
+      if (headerScrollRef.current) {
+        headerScrollRef.current.scrollLeft = target.scrollLeft;
+      }
+      if (bodyLeftScrollRef.current) {
+        bodyLeftScrollRef.current.scrollTop = target.scrollTop;
+      }
+      if (bodyRightScrollRef.current) {
+        bodyRightScrollRef.current.scrollTop = target.scrollTop;
+      }
+      onScroll?.(event);
+    };
+
+    return (
+      <div
+        className={wrapperClassName}
+        {...restWrapperProps}
+        style={wrapperStyle}
+      >
+        <div className="solara-table__split-header">
+          {leftColumns.length > 0 ? (
+            <table
+              className={`${resolvedTableClassName} solara-table__pane solara-table__pane--left`}
+              style={stripWidthStyles(sharedTableStyle)}
+              {...sideTableProps}
+            >
+              {renderColGroup(leftColumns, false)}
+              {renderHeaderSection(headerGroupsLeft, false)}
+            </table>
+          ) : null}
+          <div className="solara-table__header-scroll" ref={headerScrollRef}>
+            <table
+              className={`${resolvedTableClassName} solara-table__pane solara-table__pane--center`}
+              style={sharedTableStyle}
+              {...centerTableProps}
+            >
+              {renderColGroup(centerColumns, actionsInCenter)}
+              {renderHeaderSection(headerGroupsCenter, actionsInCenter)}
+            </table>
+          </div>
+          {rightColumns.length > 0 ? (
+            <table
+              className={`${resolvedTableClassName} solara-table__pane solara-table__pane--right`}
+              style={stripWidthStyles(sharedTableStyle)}
+              {...sideTableProps}
+            >
+              {renderColGroup(rightColumns, actionsInRight)}
+              {renderHeaderSection(headerGroupsRight, actionsInRight)}
+            </table>
+          ) : null}
+        </div>
+        <div className="solara-table__split-body">
+          {leftColumns.length > 0 ? (
+            <div
+              className="solara-table__body-side"
+              ref={bodyLeftScrollRef}
+              style={bodySideStyle}
+            >
+              <table
+                className={`${resolvedTableClassName} solara-table__pane solara-table__pane--left`}
+                style={stripWidthStyles(sharedTableStyle)}
+                {...sideTableProps}
+              >
+                {renderColGroup(leftColumns, false)}
+                {renderDefaultBodySection('left', false)}
+              </table>
+            </div>
+          ) : null}
+          <div
+            className="solara-table__body-center"
+            ref={bodyCenterScrollRef}
+            style={bodyWrapperStyle}
+            onScroll={handleBodyScroll}
+          >
+            <table
+              className={`${resolvedTableClassName} solara-table__pane solara-table__pane--center`}
+              style={sharedTableStyle}
+              {...centerTableProps}
+            >
+              {renderColGroup(centerColumns, actionsInCenter)}
+              {useCustomBody
+                ? renderBody?.(table, rows)
+                : renderDefaultBodySection('center', actionsInCenter)}
+            </table>
+          </div>
+          {rightColumns.length > 0 ? (
+            <div
+              className="solara-table__body-side"
+              ref={bodyRightScrollRef}
+              style={bodySideStyle}
+            >
+              <table
+                className={`${resolvedTableClassName} solara-table__pane solara-table__pane--right`}
+                style={stripWidthStyles(sharedTableStyle)}
+                {...sideTableProps}
+              >
+                {renderColGroup(rightColumns, actionsInRight)}
+                {renderDefaultBodySection('right', actionsInRight)}
+              </table>
+            </div>
+          ) : null}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={wrapperClassName}
+      {...wrapperProps}
+      style={{
+        ...(wrapperProps?.style ?? {}),
+      }}
+    >
+      <table
+        className={resolvedTableClassName}
+        style={sharedTableStyle}
+        {...tableProps}
+      >
+        {renderHeaderSection(table.getHeaderGroups(), hasBuiltInMenu || Boolean(headerActions))}
+        {renderBody
+          ? renderBody(table, rows)
+          : renderDefaultBodySection('center', hasBuiltInMenu || Boolean(headerActions))}
+      </table>
+      {/* Pagination footer is layout-agnostic TanStack state surfaced with Solara controls. */}
+      {showPagination ? (
+        <div
+          className="solara-table__pagination"
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            marginTop: '12px',
+            gap: '12px',
+            fontSize: '12px',
+          }}
+        >
+          <div>
+            <span style={{ marginRight: '6px' }}>{resolvedPaginationLabels.pageLabel}</span>
+            <strong>
+              {pageIndex + 1}
+              {pageCount > 0 && pageCount !== -1 ? ` of ${pageCount}` : ''}
+            </strong>
+          </div>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+            <span>{resolvedPaginationLabels.rowsLabel}</span>
+            <Dropdown
+              size="small"
+              variant="ghost"
+              value={String(pageSize)}
+              style={{ minWidth: '72px' }}
+              onChange={(event) => table.setPageSize(Number(event.target.value))}
+              options={paginationPageSizes.map((size) => ({
+                label: String(size),
+                value: String(size),
+              }))}
+            />
+            <Button
+              label={resolvedPaginationLabels.prevLabel}
+              variant="ghost"
+              size="small"
+              onClick={() => table.previousPage()}
+              disabled={!canPreviousPage}
+            />
+            <Button
+              label={resolvedPaginationLabels.nextLabel}
+              variant="ghost"
+              size="small"
+              onClick={() => table.nextPage()}
+              disabled={!canNextPage}
+            />
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}