@exxatdesignux/ui 0.2.19 → 0.4.0

package/src/components/data-views/folder-grid-view.tsx

@@ -0,0 +1,86 @@
+"use client"
+
+/**
+ * FolderGridView — generic icon-grid layout for any list-page hub.
+ *
+ * Handles the responsive CSS grid shell, empty state, and accessibility list role.
+ * Pass a `renderTile` render-prop for domain-specific tile content
+ * (Placements, Team, Rotations, etc.).
+ *
+ * Usage:
+ * ```tsx
+ * <FolderGridView
+ *   rows={placements}
+ *   getRowId={r => r.id}
+ *   renderTile={row => <PlacementFolderTile row={row} onClick={…} />}
+ *   ariaLabel="Placements folder view"
+ * />
+ * ```
+ */
+
+import * as React from "react"
+import { cn } from "../../lib/utils"
+import {
+  ListPageViewFrame,
+  LIST_PAGE_VIEW_FRAME_MAX_ICON_GRID,
+} from "../ui/list-page-view-frame"
+
+export interface FolderGridViewProps<T> {
+  rows: T[]
+  getRowId: (row: T) => string | number
+  /** Render one tile — receives the row, returns a React node (typically a `<button>`). */
+  renderTile: (row: T) => React.ReactNode
+  /** Shown when `rows` is empty. */
+  emptyContent?: React.ReactNode
+  /** `aria-label` on the grid list. */
+  ariaLabel?: string
+  className?: string
+  /**
+   * When true, constrains the grid to a centered max width so folder tiles don’t stretch
+   * edge-to-edge on very wide viewports.
+   */
+  constrainWidth?: boolean
+}
+
+export function FolderGridView<T>({
+  rows,
+  getRowId,
+  renderTile,
+  emptyContent,
+  ariaLabel = "Folder view",
+  className,
+  constrainWidth = false,
+}: FolderGridViewProps<T>) {
+  if (rows.length === 0) {
+    return (
+      <ListPageViewFrame
+        maxWidthClassName={constrainWidth ? LIST_PAGE_VIEW_FRAME_MAX_ICON_GRID : undefined}
+        className={cn(className)}
+      >
+        <div className="flex flex-col items-center justify-center rounded-xl border border-dashed border-border py-16 text-sm text-muted-foreground">
+          <i className="fa-solid fa-grid-2 mb-3 text-3xl opacity-40" aria-hidden="true" />
+          {emptyContent ?? <p>No records found.</p>}
+        </div>
+      </ListPageViewFrame>
+    )
+  }
+
+  return (
+    <ListPageViewFrame className={cn(className)}>
+      <div
+        className={cn(
+          "grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-8",
+          constrainWidth && "mx-auto max-w-6xl",
+        )}
+        role="list"
+        aria-label={ariaLabel}
+      >
+        {rows.map(row => (
+          <div key={getRowId(row)} role="listitem">
+            {renderTile(row)}
+          </div>
+        ))}
+      </div>
+    </ListPageViewFrame>
+  )
+}

package/src/components/data-views/hub-table.tsx

@@ -0,0 +1,606 @@
+"use client"
+
+/**
+ * `<HubTable<TRow>>` — single centralized table surface used by every list-page hub.
+ *
+ * Owns all the per-hub scaffolding that was previously duplicated in `placements-table.tsx`,
+ * `team-table.tsx`, `compliance-table.tsx`, `library-table.tsx`, and `sites-table.tsx`:
+ *
+ *  • `useTableState` setup tied to the centralized row dataset
+ *  • `displayOptions` state + `patchDisplay`
+ *  • `conditionalRules` state + add/remove/update handlers
+ *  • `filterFields` derived from column `filter` defs
+ *  • `fieldDefinitions` + `resolveColumnLabel` for the Properties drawer
+ *  • `TablePropertiesDrawerButton` wiring with `currentView` + `supportedViewTypes`
+ *  • `DataTable` for `view === "table"`; `ListPageConnectedViewBody` for every other view
+ *  • Imperative `openPropertiesDrawer()` exposed via `handleRef`
+ *
+ * Each hub now only declares **what's actually different**: its column defs and a typed
+ * `renderers` map for the views it implements. The renderers receive `state`, `toolbar`,
+ * `toolbarShell`, `drawerToolbarProps`, `displayOptions`, and `patchDisplay` so they can
+ * either reuse the pre-composed toolbar (`toolbarShell(<MyView rows={state.rows} />)`) or
+ * build their own (e.g. dashboard view with extra layout-edit actions).
+ *
+ * **Single dataset rule:** rows flow through `useTableState`; `tableState.rows` is the
+ * filtered/sorted row bag every non-table renderer reads. There is **no** parallel mock
+ * array per view. See `.cursor/rules/exxat-centralized-list-dataset.mdc`.
+ */
+
+import * as React from "react"
+import { cn } from "../../lib/utils"
+import { DataTable, DataTableToolbar } from "../data-table"
+import { CountSyncer, PaginationBar } from "../data-table/pagination"
+import type { ColumnDef } from "../data-table/types"
+import { useTableState } from "../data-table/use-table-state"
+import type { DataListViewType } from "../../lib/data-list-view"
+import {
+  getDataListViewRenderKind,
+  type DataListViewRenderKind,
+} from "../../lib/data-list-view-registry"
+import {
+  DEFAULT_DATA_LIST_DISPLAY_OPTIONS,
+  type DataListDisplayOptions,
+} from "../../lib/data-list-display-options"
+import { TablePropertiesDrawerButton } from "../table-properties"
+import type {
+  ConditionalRule,
+  FilterFieldDef,
+  FilterOperator,
+} from "../../lib/table-properties-types"
+import {
+  ListPageConnectedViewBody,
+  type ListPageConnectedViewRenderers,
+} from "./list-page-connected-view-body"
+import { DataRowList } from "./data-row-list"
+import {
+  ListPageBoardTemplate,
+  type ListPageBoardColumnDef,
+} from "./list-page-board-template"
+import type { OpenTablePropertiesHandle } from "../../lib/list-page-table-properties"
+
+// ──────────────────────────────────────────────────────────────────────────────
+// Helpers
+// ──────────────────────────────────────────────────────────────────────────────
+
+function columnToFilterFieldDef<TRow>(c: ColumnDef<TRow>): FilterFieldDef | null {
+  if (!c.filter) return null
+  const f = c.filter
+  const defaultOps: FilterOperator[] =
+    f.type === "select" || f.type === "date" ? ["is", "is_not"] : ["contains", "not_contains"]
+  return {
+    key: c.key,
+    label: c.label,
+    icon: f.icon ?? "fa-filter",
+    type: f.type,
+    operators: (f.operators ?? defaultOps) as FilterOperator[],
+    options: f.options,
+    ...(f.textMask ? { textMask: f.textMask } : {}),
+  }
+}
+
+/** Derive `FilterFieldDef[]` from a hub's column defs — preferred to hand-writing both. */
+export function columnsToFilterFields<TRow>(cols: ColumnDef<TRow>[]): FilterFieldDef[] {
+  return cols
+    .map(c => columnToFilterFieldDef<TRow>(c))
+    .filter((x): x is FilterFieldDef => x !== null)
+}
+
+/** Field definitions for the drawer's Sort / Group / Columns panels — excludes utility columns. */
+export function columnsToFieldDefinitions<TRow>(
+  cols: ColumnDef<TRow>[],
+): { key: string; label: string; sortable: boolean }[] {
+  return cols
+    .filter(c => c.key !== "select" && c.key !== "actions")
+    .map(c => ({
+      key: c.key,
+      label: c.label,
+      sortable: !!(c.sortable && (c.sortKey ?? c.key)),
+    }))
+}
+
+// ──────────────────────────────────────────────────────────────────────────────
+// Public types
+// ──────────────────────────────────────────────────────────────────────────────
+
+/** Subset of `TablePropertiesDrawerButton` props that `HubTable` owns. Exposed so renderers
+ * that build a custom toolbar (e.g. dashboard with an extra Edit-layout button) can splat
+ * this back into their own `<TablePropertiesDrawerButton {...drawerToolbarProps} state={s} extraActions={…} />`. */
+export interface HubDrawerToolbarProps {
+  totalRows: number
+  filterFields: FilterFieldDef[]
+  fieldDefinitions: { key: string; label: string; sortable: boolean }[]
+  resolveColumnLabel: (key: string) => string
+  displayOptions: DataListDisplayOptions
+  onDisplayOptionsChange: (patch: Partial<DataListDisplayOptions>) => void
+  conditionalRules: ConditionalRule[]
+  onAddConditionalRule: (rule: Omit<ConditionalRule, "id">) => void
+  onRemoveConditionalRule: (id: string) => void
+  onUpdateConditionalRule: (id: string, patch: Partial<ConditionalRule>) => void
+  currentView: DataListViewType
+  onViewChange?: (v: DataListViewType) => void
+  supportedViewTypes: readonly DataListViewType[]
+  lifecycleTabLabel: string
+  boardGroupByColumnOptions?: { key: string; label: string }[]
+  renderFilterOptionValue?: (fieldKey: string, value: string) => React.ReactNode
+  pagination?: boolean
+  onPaginationChange?: (v: boolean) => void
+}
+
+/** Everything a non-table renderer needs. The pre-composed `toolbar` includes search +
+ * filter chips + the Properties button; the renderer just wraps it around its body with
+ * `toolbarShell`. For dashboards or other layouts that own their own toolbar, use
+ * `drawerToolbarProps` to assemble a custom `<TablePropertiesDrawerButton>`. */
+export interface HubTableRendererArgs<TRow extends Record<string, unknown>> {
+  state: ReturnType<typeof useTableState<TRow>>
+  toolbar: React.ReactNode
+  toolbarShell: (body: React.ReactNode) => React.ReactNode
+  drawerToolbarProps: HubDrawerToolbarProps
+  displayOptions: DataListDisplayOptions
+  patchDisplay: (patch: Partial<DataListDisplayOptions>) => void
+}
+
+/** Hubs provide one renderer per `DataListViewRenderKind` they implement. The `data-table`
+ * kind is handled internally by `HubTable` (do not override unless you genuinely need a
+ * different table surface). Missing kinds render `<ListPageViewNotConfigured>` — clear empty
+ * state, never a silent dashboard fallback. */
+export type HubTableRenderers<TRow extends Record<string, unknown>> = Partial<
+  Record<DataListViewRenderKind, (args: HubTableRendererArgs<TRow>) => React.ReactNode>
+>
+
+export type HubTableHandle = OpenTablePropertiesHandle
+
+export interface HubTableProps<TRow extends Record<string, unknown>> {
+  /** Full row dataset (already scoped/filtered by the hub client, e.g. by URL nav). */
+  rows: TRow[]
+  /** Column defs — `filter` blocks here become Properties drawer filter fields automatically. */
+  columns: ColumnDef<TRow>[]
+  /** Active view from the `ListPageTemplate` tab. */
+  view: DataListViewType
+  onViewChange?: (v: DataListViewType) => void
+  /** Allowlist passed to `TablePropertiesDrawerButton` so Properties cannot offer unsupported views. */
+  supportedViewTypes: readonly DataListViewType[]
+  /** Used by `ListPageViewNotConfigured` when a supported view has no renderer. */
+  hubLabel: string
+  /** Shown below "Properties" in the drawer header. */
+  lifecycleTabLabel: string
+  /** Toolbar search input aria-label. */
+  searchAriaLabel: string
+  getRowId: (row: TRow) => string | number
+  getRowSelectionLabel: (row: TRow) => string
+  defaultSort: { key: string; dir: "asc" | "desc" }
+  /** DataTable empty state. Defaults to a muted "No records match your filters." */
+  emptyState?: React.ReactNode
+  /** Per-view renderers (everything other than `view === "table"`). */
+  renderers: HubTableRenderers<TRow>
+  /** Bulk-actions slot rendered when one or more rows are selected. */
+  bulkActionsSlot?: (selected: Set<string | number>) => React.ReactNode
+  /** Board-view group-by column options for the Properties drawer. */
+  boardGroupByColumnOptions?: { key: string; label: string }[]
+  /** Initial display options (toolbar search visibility, calendar panel, etc.). */
+  displayOptionsInit?: DataListDisplayOptions
+  /** Custom renderer for filter option values (e.g. status chips). */
+  renderFilterOptionValue?: (fieldKey: string, value: string) => React.ReactNode
+  /** DataTable: enable "Group by" feature. Default `true`. */
+  groupable?: boolean
+  /** DataTable: enable row selection checkboxes. Default `true`. */
+  selectable?: boolean
+  /** DataTable: row click handler (e.g. navigate to detail route). */
+  onRowClick?: (row: TRow) => void
+  /**
+   * Controlled `displayOptions` — when provided (with `onDisplayOptionsChange`), the hub client
+   * owns persistence (e.g. Placements page persists across tab switches). Otherwise `HubTable`
+   * owns internal state from `displayOptionsInit`.
+   */
+  displayOptions?: DataListDisplayOptions
+  onDisplayOptionsChange?: (patch: Partial<DataListDisplayOptions>) => void
+  /**
+   * Pagination toggle forwarded to `TablePropertiesDrawerButton` so the drawer can offer
+   * "Show pagination" on the Display panel. The hub still implements its own pagination chrome
+   * around the table body via `tableRenderer`. Defaults to `false` / no toggle.
+   */
+  pagination?: boolean
+  onPaginationChange?: (v: boolean) => void
+  /** Imperative handle (`openPropertiesDrawer`) for hub clients that pass `tablePropertiesRef`. */
+  handleRef?: React.Ref<HubTableHandle>
+  /** Optional override for the `data-table` view. Default mounts `<DataTable {…}>`. */
+  tableRenderer?: (args: HubTableRendererArgs<TRow>) => React.ReactNode
+  /**
+   * Forwarded to `useTableState` so the hub can switch on server-style pagination
+   * with externally-controlled page/pageSize (advanced; most hubs should leave
+   * this undefined and let `HubTable` own the internal page state — see
+   * `pagination` + `paginationPageSizeOptions`).
+   */
+  paginationOverride?: { page: number; pageSize: number }
+  /** Page size options shown in the toolbar `<PaginationBar>`. Default `[10, 25, 50, 100]`. */
+  paginationPageSizeOptions?: number[]
+  /** Initial page size when `HubTable` owns pagination internally. Default `10`. */
+  paginationInitialPageSize?: number
+  /**
+   * Forwarded to `useTableState` to sync toolbar search from `?q=` (Library search routes).
+   * Defining as `""` enables sync without an initial query.
+   */
+  syncedSearchFromUrl?: string
+
+  // ─── Centralized "list" and "board" defaults ───────────────────────────────
+  // When a hub does NOT provide a renderer for `list-with-toolbar`, but DOES provide
+  // `renderListRow`, `HubTable` synthesises a default that wires `DataRowList` through
+  // the shared toolbar. Same for `board-with-toolbar` + `renderBoardCard`. This is the
+  // happy path for most hubs; the explicit renderer escape hatch is only needed for
+  // exotic surfaces (e.g. Placements board with per-phase column search).
+
+  /** Default `list-with-toolbar` renderer body — `HubTable` wraps with toolbar + `DataRowList`. */
+  renderListRow?: (row: TRow) => React.ReactNode
+  /** Override the `aria-label` on the `<ul>` from `renderListRow`. Defaults to `hubLabel`. */
+  listAriaLabel?: string
+  /** Empty-state for the default list renderer. Defaults to "No records match your filters." */
+  listEmptyState?: React.ReactNode
+  /** Virtualise after N rows in the default list renderer. Default 100; pass `0` to disable. */
+  listVirtualizeThreshold?: number
+  /** Estimated row height (px) for the default list virtualiser. Default 96. */
+  listEstimatedRowHeight?: number
+
+  /** Default `board-with-toolbar` renderer body — `HubTable` wraps with toolbar + `ListPageBoardTemplate`. */
+  renderBoardCard?: (row: TRow) => React.ReactNode
+  /** Required if `renderBoardCard` is set: how rows group into columns. */
+  boardGroups?: ListPageBoardColumnDef<TRow>[]
+  /** Per-column count badge tint classes for the default board renderer. */
+  boardColumnCountBadgeClassName?: Record<string, string>
+  /** Empty column copy for the default board renderer. Defaults to "No items". */
+  boardEmptyColumnLabel?: string
+}
+
+// ──────────────────────────────────────────────────────────────────────────────
+// Component
+// ──────────────────────────────────────────────────────────────────────────────
+
+export function HubTable<TRow extends Record<string, unknown>>({
+  rows,
+  columns,
+  view,
+  onViewChange,
+  supportedViewTypes,
+  hubLabel,
+  lifecycleTabLabel,
+  searchAriaLabel,
+  getRowId,
+  getRowSelectionLabel,
+  defaultSort,
+  emptyState,
+  renderers,
+  bulkActionsSlot,
+  boardGroupByColumnOptions,
+  displayOptionsInit,
+  renderFilterOptionValue,
+  groupable = true,
+  selectable = true,
+  onRowClick,
+  displayOptions: displayOptionsControlled,
+  onDisplayOptionsChange: onDisplayOptionsChangeControlled,
+  pagination,
+  onPaginationChange,
+  handleRef,
+  tableRenderer,
+  paginationOverride,
+  paginationPageSizeOptions = [10, 25, 50, 100],
+  paginationInitialPageSize = 10,
+  syncedSearchFromUrl,
+  renderListRow,
+  listAriaLabel,
+  listEmptyState,
+  listVirtualizeThreshold,
+  listEstimatedRowHeight,
+  renderBoardCard,
+  boardGroups,
+  boardColumnCountBadgeClassName,
+  boardEmptyColumnLabel,
+}: HubTableProps<TRow>) {
+  const filterFields = React.useMemo(() => columnsToFilterFields(columns), [columns])
+  const fieldDefinitions = React.useMemo(() => columnsToFieldDefinitions(columns), [columns])
+  const resolveColumnLabel = React.useCallback(
+    (key: string) => columns.find(c => c.key === key)?.label ?? key,
+    [columns],
+  )
+
+  // displayOptions: controlled (parent owns state via prop pair) OR uncontrolled (HubTable owns it).
+  // Most hubs keep display options ephemeral; Placements persists them across tabs at the page level.
+  const [internalDisplayOptions, setInternalDisplayOptions] = React.useState<DataListDisplayOptions>(
+    displayOptionsInit ?? DEFAULT_DATA_LIST_DISPLAY_OPTIONS,
+  )
+  const isControlled =
+    displayOptionsControlled !== undefined && onDisplayOptionsChangeControlled !== undefined
+  const displayOptions = isControlled ? displayOptionsControlled : internalDisplayOptions
+  const patchDisplay = React.useCallback(
+    (patch: Partial<DataListDisplayOptions>) => {
+      if (isControlled) {
+        onDisplayOptionsChangeControlled!(patch)
+      } else {
+        setInternalDisplayOptions(prev => ({ ...prev, ...patch }))
+      }
+    },
+    [isControlled, onDisplayOptionsChangeControlled],
+  )
+
+  const [conditionalRules, setConditionalRules] = React.useState<ConditionalRule[]>([])
+  const addConditionalRule = React.useCallback((rule: Omit<ConditionalRule, "id">) => {
+    setConditionalRules(prev => [...prev, { ...rule, id: `cr-${Date.now()}` }])
+  }, [])
+  const removeConditionalRule = React.useCallback((id: string) => {
+    setConditionalRules(prev => prev.filter(r => r.id !== id))
+  }, [])
+  const updateConditionalRule = React.useCallback(
+    (id: string, patch: Partial<ConditionalRule>) => {
+      setConditionalRules(prev => prev.map(r => (r.id === id ? { ...r, ...patch } : r)))
+    },
+    [],
+  )
+
+  // ─── Pagination chrome (centralized) ─────────────────────────────────────
+  // When `pagination === true` and the parent did NOT supply `paginationOverride`,
+  // `HubTable` owns the page/pageSize internally and wraps the default table +
+  // list renderers with `<CountSyncer>` + `<PaginationBar>`. Hubs that need full
+  // control (e.g. server-side pagination) keep using `paginationOverride`.
+  const [internalPage, setInternalPage] = React.useState(1)
+  const [internalPageSize, setInternalPageSize] = React.useState(paginationInitialPageSize)
+  const chromeOwnedPagination = pagination === true && paginationOverride === undefined
+  const effectivePaginationOverride =
+    paginationOverride ??
+    (chromeOwnedPagination ? { page: internalPage, pageSize: internalPageSize } : undefined)
+
+  const tableState = useTableState<TRow>(
+    rows,
+    columns,
+    defaultSort,
+    effectivePaginationOverride,
+    syncedSearchFromUrl,
+  )
+
+  const handlePageChange = React.useCallback((p: number) => setInternalPage(p), [])
+  const handlePageSizeChange = React.useCallback((n: number) => {
+    setInternalPageSize(n)
+    setInternalPage(1)
+  }, [])
+  const resetPage = React.useCallback(() => setInternalPage(1), [])
+
+  // Extract the stable setter from `useTableState` first so the
+  // `useImperativeHandle` deps array sees the exact value the hook reads.
+  // `setSheetOpen` is referentially stable, so the handle is created once.
+  const { setSheetOpen: openPropertiesSheet } = tableState
+  React.useImperativeHandle(
+    handleRef ?? null,
+    () => ({ openPropertiesDrawer: () => openPropertiesSheet(true) }),
+    [openPropertiesSheet],
+  )
+
+  const drawerToolbarProps: HubDrawerToolbarProps = {
+    totalRows: rows.length,
+    filterFields,
+    fieldDefinitions,
+    resolveColumnLabel,
+    displayOptions,
+    onDisplayOptionsChange: patchDisplay,
+    conditionalRules,
+    onAddConditionalRule: addConditionalRule,
+    onRemoveConditionalRule: removeConditionalRule,
+    onUpdateConditionalRule: updateConditionalRule,
+    currentView: view,
+    onViewChange,
+    supportedViewTypes,
+    lifecycleTabLabel,
+    boardGroupByColumnOptions,
+    renderFilterOptionValue,
+    ...(pagination !== undefined ? { pagination } : {}),
+    ...(onPaginationChange !== undefined ? { onPaginationChange } : {}),
+  }
+
+  const toolbar = (
+    <DataTableToolbar
+      state={tableState}
+      columns={columns}
+      searchable={displayOptions.showToolbarSearch}
+      searchAriaLabel={searchAriaLabel}
+      renderFilterOptionValue={renderFilterOptionValue}
+      toolbarSlot={s => <TablePropertiesDrawerButton {...drawerToolbarProps} state={s} />}
+    />
+  )
+
+  const toolbarShell = React.useCallback(
+    (body: React.ReactNode) => (
+      <div className="flex min-h-0 flex-1 flex-col">
+        {toolbar}
+        {body}
+      </div>
+    ),
+    // `toolbar` is recreated each render; including it would defeat memoization but
+    // also gives renderers a fresh closure — acceptable because renderers are called
+    // on render anyway. Keep deps stable so the function identity is stable.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      tableState,
+      columns,
+      displayOptions.showToolbarSearch,
+      searchAriaLabel,
+      renderFilterOptionValue,
+      drawerToolbarProps,
+    ],
+  )
+
+  // Default `data-table` renderer — full DataTable with toolbar + bulk actions. When
+  // `pagination === true` and the parent did not provide `paginationOverride`, the chrome
+  // (CountSyncer + PaginationBar) is wrapped automatically so the drawer toggle "Show
+  // pagination" works out of the box. Hubs that need finer control (custom chrome,
+  // server-side paging) can still override via `tableRenderer`.
+  const defaultTableRenderer = (args: HubTableRendererArgs<TRow>) => {
+    const filteredCount = (args.state.rows as TRow[]).length
+    const totalPages = Math.max(1, Math.ceil(filteredCount / Math.max(1, internalPageSize)))
+    const safePage = Math.min(internalPage, totalPages)
+    return (
+      <div className="pb-6">
+        {chromeOwnedPagination ? (
+          <CountSyncer
+            count={filteredCount}
+            onSync={(n) => {
+              const next = Math.max(1, Math.ceil(n / Math.max(1, internalPageSize)))
+              if (safePage > next) setInternalPage(next)
+            }}
+            onReset={resetPage}
+          />
+        ) : null}
+        <DataTable<TRow>
+          data={rows}
+          columns={columns}
+          getRowId={getRowId}
+          getRowSelectionLabel={getRowSelectionLabel}
+          selectable={selectable}
+          searchable={displayOptions.showToolbarSearch}
+          showColumnHeaders={displayOptions.showColumnLabels}
+          groupable={groupable}
+          defaultSort={defaultSort}
+          emptyState={emptyState ?? <p className="text-sm text-muted-foreground">No records match your filters.</p>}
+          conditionalRules={conditionalRules}
+          state={args.state}
+          renderFilterOptionValue={renderFilterOptionValue}
+          toolbarSlot={s => <TablePropertiesDrawerButton {...drawerToolbarProps} state={s} />}
+          bulkActionsSlot={bulkActionsSlot}
+          onRowClick={onRowClick}
+          hasFooter={chromeOwnedPagination}
+        />
+        {chromeOwnedPagination ? (
+          <div
+            className={cn(
+              "mx-4 lg:mx-6 border-x border-b border-border rounded-b-lg overflow-hidden bg-background",
+              // z-40 sits above pinned cells (z-20), group headers (z-25), and column headers
+              // (z-30 / z-40) so the sticky footer paints over any table content that scrolls
+              // behind it. Pinned-left cells ship with their own `bg-dt-row-bg`, which
+              // otherwise wins because of z-20 > z-10.
+              "sticky bottom-0 z-40",
+            )}
+          >
+            <PaginationBar
+              page={safePage}
+              pageSize={internalPageSize}
+              total={filteredCount}
+              pageSizeOptions={paginationPageSizeOptions}
+              onPageChange={handlePageChange}
+              onPageSizeChange={handlePageSizeChange}
+            />
+          </div>
+        ) : null}
+      </div>
+    )
+  }
+
+  const args: HubTableRendererArgs<TRow> = {
+    state: tableState,
+    toolbar,
+    toolbarShell,
+    drawerToolbarProps,
+    displayOptions,
+    patchDisplay,
+  }
+
+  // Dev-time warning when a `supportedViewType` has no renderer (other than `table`,
+  // which has the built-in default). Mirrors `defineHubViewRenderers` from
+  // `lib/hub-connected-view-renderers.ts` but inline so we don't double-wrap.
+  if (process.env.NODE_ENV !== "production") {
+    for (const v of supportedViewTypes) {
+      const kind = getDataListViewRenderKind(v)
+      if (kind === "data-table") continue
+      if (renderers[kind] == null) {
+        console.warn(
+          `[Exxat DS][HubTable: ${hubLabel}] Missing renderer for supported view "${v}" (${kind}). ` +
+            "Add a renderer entry, or remove the view from supportedViewTypes.",
+        )
+      }
+    }
+  }
+
+  // Compose `ListPageConnectedViewBody` renderers: the built-in `data-table` (or hub override)
+  // plus each hub-provided non-table renderer. Wrapping in `() => …` defers execution until
+  // the active view actually selects that kind — so heavy bodies (dashboard charts) don't
+  // pay render cost on a table tab.
+  const composed: ListPageConnectedViewRenderers = {
+    "data-table": () => (tableRenderer ?? defaultTableRenderer)(args),
+  }
+
+  // Default centralized list renderer: same DataRowList shell every hub used to roll
+  // by hand. Hub provides only the per-row body via `renderListRow`. When `pagination`
+  // is on (and `paginationOverride` is not externally supplied), the list view reads
+  // `state.pagedRows` and adds the same `CountSyncer` + `PaginationBar` chrome as the
+  // table view.
+  if (renderers["list-with-toolbar"] == null && renderListRow != null) {
+    composed["list-with-toolbar"] = () => {
+      const fullRows = args.state.rows as TRow[]
+      const pagedRows = chromeOwnedPagination ? (args.state.pagedRows as TRow[]) : fullRows
+      const filteredCount = fullRows.length
+      const totalPages = Math.max(1, Math.ceil(filteredCount / Math.max(1, internalPageSize)))
+      const safePage = Math.min(internalPage, totalPages)
+      return args.toolbarShell(
+        <>
+          {chromeOwnedPagination ? (
+            <CountSyncer
+              count={filteredCount}
+              onSync={(n) => {
+                const next = Math.max(1, Math.ceil(n / Math.max(1, internalPageSize)))
+                if (safePage > next) setInternalPage(next)
+              }}
+              onReset={resetPage}
+            />
+          ) : null}
+          <DataRowList<TRow>
+            rows={pagedRows}
+            getRowId={row => getRowId(row)}
+            ariaLabel={listAriaLabel ?? hubLabel}
+            emptyState={listEmptyState ?? "No records match your filters."}
+            {...(listVirtualizeThreshold !== undefined ? { virtualizeThreshold: listVirtualizeThreshold } : {})}
+            {...(listEstimatedRowHeight !== undefined ? { estimatedRowHeight: listEstimatedRowHeight } : {})}
+            renderRow={renderListRow}
+          />
+          {chromeOwnedPagination ? (
+            <div
+              className={cn(
+                "mx-4 lg:mx-6 border-x border-b border-border rounded-b-lg overflow-hidden bg-background",
+                // Match the table-view footer — above pinned cells (z-20) and column
+                // headers (z-30 / z-40) so the sticky chrome paints over scrolling rows.
+                "sticky bottom-0 z-40",
+              )}
+            >
+              <PaginationBar
+                page={safePage}
+                pageSize={internalPageSize}
+                total={filteredCount}
+                pageSizeOptions={paginationPageSizeOptions}
+                onPageChange={handlePageChange}
+                onPageSizeChange={handlePageSizeChange}
+              />
+            </div>
+          ) : null}
+        </>,
+      )
+    }
+  }
+
+  // Default centralized board renderer: same ListPageBoardTemplate every hub used to wrap.
+  // Hub provides only the per-card body via `renderBoardCard` and the column predicate set.
+  if (renderers["board-with-toolbar"] == null && renderBoardCard != null && boardGroups != null) {
+    composed["board-with-toolbar"] = () =>
+      args.toolbarShell(
+        <ListPageBoardTemplate<TRow>
+          columns={boardGroups}
+          rows={args.state.rows as TRow[]}
+          getRowKey={getRowId}
+          renderCard={renderBoardCard}
+          columnCountBadgeClassName={boardColumnCountBadgeClassName ?? {}}
+          emptyColumnLabel={boardEmptyColumnLabel ?? "No items"}
+        />,
+      )
+  }
+
+  for (const kind of Object.keys(renderers) as DataListViewRenderKind[]) {
+    const r = renderers[kind]
+    if (r) composed[kind] = () => r(args)
+  }
+
+  return <ListPageConnectedViewBody view={view} hubLabel={hubLabel} renderers={composed} />
+}
+
+HubTable.displayName = "HubTable"