@exxatdesignux/ui 0.2.16 → 0.2.18

package/template/components/data-table/use-table-state.ts

@@ -112,7 +112,8 @@ export function useTableState<TData extends Record<string, unknown>>(
   const addSortRule = React.useCallback((fieldKey: string) => {
     setSortRules(prev => {
       if (prev.some(r => r.fieldKey === fieldKey)) return prev
-      return [...prev, { id: `sort-${Date.now()}`, fieldKey, direction: "asc" }]
+      // New drawer sorts are primary (same as column-header sort), not trailing.
+      return [{ id: `sort-${Date.now()}`, fieldKey, direction: "asc" }, ...prev]
     })
   }, [setSortRules])
 
@@ -178,9 +179,12 @@ export function useTableState<TData extends Record<string, unknown>>(
       }
       return f.operators?.[0] ?? "contains"
     })()
-    setActiveFilters(prev => [...prev, { id, fieldKey, operator: firstOperator, values: [] }])
+    const newFilter: ActiveFilter = { id, fieldKey, operator: firstOperator, values: [] }
+    setActiveFilters(prev => [...prev, newFilter])
     if (fromDrawer) {
-      setDrawerExpandedFilters(new Set([id]))
+      setDrawerExpandedFilters(() => new Set([id]))
+      // Keep toolbar pills hidden until a value is chosen — avoids mounting every
+      // FilterPill (heavy) on each drawer "Add filter" click.
     } else {
       setOpenFilterId(id)
       setFilterBarVisible(true)
@@ -188,8 +192,24 @@ export function useTableState<TData extends Record<string, unknown>>(
   }, [columns, setActiveFilters, setDrawerExpandedFilters, setOpenFilterId, setFilterBarVisible])
 
   const updateFilter = React.useCallback((id: string, patch: Partial<ActiveFilter>) => {
-    setActiveFilters(prev => prev.map(f => f.id === id ? { ...f, ...patch } : f))
-  }, [setActiveFilters])
+    let shouldShowFilterBar = false
+    setActiveFilters(prev => {
+      const next = prev.map(f => {
+        if (f.id !== id) return f
+        const merged = { ...f, ...patch }
+        const col = columns.find(c => c.key === merged.fieldKey)
+        if (merged.values.length > 0) {
+          shouldShowFilterBar =
+            col?.filter?.type === "text"
+              ? (merged.values[0] ?? "").trim().length > 0
+              : true
+        }
+        return merged
+      })
+      return next
+    })
+    if (shouldShowFilterBar) setFilterBarVisible(true)
+  }, [columns, setActiveFilters, setFilterBarVisible])
 
   const removeFilter = React.useCallback((id: string) => {
     // Use functional updates only — no stale-closure risk on activeFilters.
@@ -242,7 +262,8 @@ export function useTableState<TData extends Record<string, unknown>>(
   const toggleColVisibility = React.useCallback((key: string) => {
     setHiddenCols(prev => {
       const next = new Set(prev)
-      next.has(key) ? next.delete(key) : next.add(key)
+      if (next.has(key)) next.delete(key)
+      else next.add(key)
       return next
     })
   }, [setHiddenCols])
@@ -281,90 +302,208 @@ export function useTableState<TData extends Record<string, unknown>>(
   // ── Hovered row ───────────────────────────────────────────────────────────
   const [hoveredRow, setHoveredRow] = React.useState<string | number | null>(null)
 
+  // ── Column lookup index (stable per `columns` reference) ─────────────────
+  // The previous implementation called `columns.find(c => c.key === ...)` inside
+  // every filter/sort comparator and every sticky-offset getter — for large
+  // datasets that's O(rows × cols) per render. Map lookups make those O(1).
+  const columnsByKey = React.useMemo(() => {
+    const map = new Map<string, ColumnDef<TData>>()
+    for (const col of columns) map.set(col.key, col)
+    return map
+  }, [columns])
+
+  // Searchable text cache. Per row, concatenate every value into one
+  // lower-cased blob ONCE and reuse it across keystrokes. Keyed by row
+  // identity via WeakMap so it never holds onto rows the consumer dropped.
+  const searchableTextCache = React.useRef<WeakMap<object, string>>(new WeakMap())
+  const getSearchableText = React.useCallback((row: TData): string => {
+    const cache = searchableTextCache.current
+    const cached = cache.get(row)
+    if (cached !== undefined) return cached
+    let blob = ""
+    for (const v of Object.values(row)) {
+      if (v == null) continue
+      blob += String(v).toLowerCase() + "\n"
+    }
+    cache.set(row, blob)
+    return blob
+  }, [])
+
+  // Per-row per-column lower-cased value cache (column quick-search +
+  // text-mask filters). One `Map` per row, lazily filled on first lookup.
+  const lowerValueCache = React.useRef<WeakMap<object, Map<string, string>>>(new WeakMap())
+  const getLowerValue = React.useCallback((row: TData, key: string): string => {
+    const wm = lowerValueCache.current
+    let perRow = wm.get(row)
+    if (!perRow) {
+      perRow = new Map()
+      wm.set(row, perRow)
+    }
+    const cached = perRow.get(key)
+    if (cached !== undefined) return cached
+    const computed = String(row[key] ?? "").toLowerCase()
+    perRow.set(key, computed)
+    return computed
+  }, [])
+
+  // Reset the row-keyed caches whenever the dataset reference changes so we
+  // don't pin stale strings for rows the consumer just replaced.
+  React.useEffect(() => {
+    searchableTextCache.current = new WeakMap()
+    lowerValueCache.current = new WeakMap()
+  }, [data])
+
   // ── Derived: filtered + sorted rows ──────────────────────────────────────
   const rows = React.useMemo(() => {
     let result = data.slice()
 
-    if (search.trim()) {
-      const q = search.toLowerCase()
-      result = result.filter(r =>
-        Object.values(r).some(v => String(v ?? "").toLowerCase().includes(q))
-      )
+    const q = search.trim().toLowerCase()
+    if (q) {
+      result = result.filter(r => getSearchableText(r).includes(q))
     }
 
-    const activeWithValues = activeFilters.filter(f => f.values.length > 0)
+    const activeWithValues = activeFilters.filter(f => {
+      if (f.values.length === 0) return false
+      const col = columnsByKey.get(f.fieldKey)
+      if (col?.filter?.type === "text") {
+        return (f.values[0] ?? "").trim().length > 0
+      }
+      return true
+    })
     if (activeWithValues.length > 0) {
-      const matchesFilter = (r: TData, filter: ActiveFilter) => {
-        const col = columns.find(c => c.key === filter.fieldKey)
-        if (!col?.filter) return true
-        const rowVal = String(r[filter.fieldKey] ?? "")
+      // Pre-resolve column, operator, normalised needle, and select-value Set
+      // for each active filter ONCE (instead of per row).
+      type CompiledFilter = {
+        col: ColumnDef<TData>
+        id: string
+        type: "select" | "date" | "text"
+        operator: ActiveFilter["operator"]
+        selectValues?: Set<string>
+        dateTarget?: string
+        textNeedle?: string
+        digitsNeedle?: string
+        isDigitsMask?: boolean
+      }
+      const compiled: CompiledFilter[] = []
+      for (const f of activeWithValues) {
+        const col = columnsByKey.get(f.fieldKey)
+        if (!col?.filter) continue
         if (col.filter.type === "select") {
-          return filter.operator === "is"
-            ? filter.values.includes(rowVal)
-            : !filter.values.includes(rowVal)
+          compiled.push({
+            col,
+            id: f.id,
+            type: "select",
+            operator: f.operator,
+            selectValues: new Set(f.values),
+          })
+        } else if (col.filter.type === "date") {
+          compiled.push({
+            col,
+            id: f.id,
+            type: "date",
+            operator: f.operator,
+            dateTarget: f.values[0],
+          })
+        } else {
+          const raw = f.values[0] ?? ""
+          const isDigitsMask = col.filter.textMask === "phone" || col.filter.textMask === "zip"
+          compiled.push({
+            col,
+            id: f.id,
+            type: "text",
+            operator: f.operator,
+            isDigitsMask,
+            digitsNeedle: isDigitsMask ? digitsOnly(raw) : undefined,
+            textNeedle: !isDigitsMask ? raw.toLowerCase() : undefined,
+          })
+        }
+      }
+
+      const matchesCompiled = (r: TData, f: CompiledFilter): boolean => {
+        const rowVal = String(r[f.col.key] ?? "")
+        if (f.type === "select") {
+          const hit = f.selectValues!.has(rowVal)
+          return f.operator === "is" ? hit : !hit
         }
-        if (col.filter.type === "date") {
-          const targetYmd = filter.values[0]
-          if (!targetYmd) return true
+        if (f.type === "date") {
+          if (!f.dateTarget) return true
           const rowYmd = parseRowDateToYmd(rowVal)
-          const op = filter.operator === "is_not" ? "is_not" : "is"
+          const op = f.operator === "is_not" ? "is_not" : "is"
           if (rowYmd === null) return op === "is_not"
-          return op === "is" ? rowYmd === targetYmd : rowYmd !== targetYmd
-        } else {
-          const raw = filter.values[0] ?? ""
-          const textMask = col.filter.textMask
-          if (textMask === "phone" || textMask === "zip") {
-            const q = digitsOnly(raw)
-            if (!q) return true
-            const hay = digitsOnly(rowVal)
-            return filter.operator === "contains"
-              ? hay.includes(q)
-              : !hay.includes(q)
-          }
-          const q = raw.toLowerCase()
-          if (!q) return true
-          return filter.operator === "contains"
-            ? rowVal.toLowerCase().includes(q)
-            : !rowVal.toLowerCase().includes(q)
+          return op === "is" ? rowYmd === f.dateTarget : rowYmd !== f.dateTarget
+        }
+        if (f.isDigitsMask) {
+          if (!f.digitsNeedle) return true
+          const hay = digitsOnly(rowVal)
+          return f.operator === "contains" ? hay.includes(f.digitsNeedle) : !hay.includes(f.digitsNeedle)
         }
+        if (!f.textNeedle) return true
+        const hay = getLowerValue(r, f.col.key)
+        return f.operator === "contains" ? hay.includes(f.textNeedle) : !hay.includes(f.textNeedle)
+      }
+
+      if (compiled.length > 0) {
+        result = result.filter(r => {
+          let res = matchesCompiled(r, compiled[0])
+          for (let i = 1; i < compiled.length; i++) {
+            const connector = filterConnectors[compiled[i - 1].id] ?? "and"
+            const match = matchesCompiled(r, compiled[i])
+            res = connector === "and" ? res && match : res || match
+          }
+          return res
+        })
       }
+    }
+
+    // Column menu quick-search — pre-normalise needles outside the row loop.
+    const colMenuEntries: { key: string; lower: string }[] = []
+    for (const [key, raw] of Object.entries(colMenuSearch)) {
+      const trimmed = raw.trim()
+      if (trimmed) colMenuEntries.push({ key, lower: trimmed.toLowerCase() })
+    }
+    if (colMenuEntries.length > 0) {
       result = result.filter(r => {
-        let res = matchesFilter(r, activeWithValues[0])
-        for (let i = 1; i < activeWithValues.length; i++) {
-          const connector = getConnector(activeWithValues[i - 1].id)
-          const match = matchesFilter(r, activeWithValues[i])
-          res = connector === "and" ? res && match : res || match
+        for (const { key, lower } of colMenuEntries) {
+          if (!getLowerValue(r, key).includes(lower)) return false
         }
-        return res
+        return true
       })
     }
 
-    // Column menu quick-search
-    Object.entries(colMenuSearch).forEach(([key, q]) => {
-      if (!q.trim()) return
-      const lower = q.toLowerCase()
-      result = result.filter(r => String(r[key] ?? "").toLowerCase().includes(lower))
-    })
-
-    // Sort
+    // Sort — resolve each rule's sort key ONCE, then run the comparator over
+    // an indexed list so the inner loop is a tight array walk, not a chain of
+    // `columns.find` lookups per comparison.
     if (sortRules.length > 0) {
-      result.sort((a, b) => {
-        for (const rule of sortRules) {
-          const col = columns.find(c => c.key === rule.fieldKey)
-          const sk = col?.sortKey ?? col?.key
-          if (!sk) continue
-          const aVal = a[sk as string]
-          const bVal = b[sk as string]
-          const cmp = compareUnknownSort(aVal, bVal)
-          if (cmp !== 0) return rule.direction === "asc" ? cmp : -cmp
-        }
-        return 0
-      })
+      const resolved: { sk: string; dir: SortDir }[] = []
+      for (const rule of sortRules) {
+        const col = columnsByKey.get(rule.fieldKey)
+        const sk = col?.sortKey ?? col?.key
+        if (sk) resolved.push({ sk: sk as string, dir: rule.direction })
+      }
+      if (resolved.length > 0) {
+        result.sort((a, b) => {
+          for (let i = 0; i < resolved.length; i++) {
+            const { sk, dir } = resolved[i]
+            const cmp = compareUnknownSort(a[sk], b[sk])
+            if (cmp !== 0) return dir === "asc" ? cmp : -cmp
+          }
+          return 0
+        })
+      }
     }
 
     return result
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [data, search, activeFilters, filterConnectors, colMenuSearch, sortRules, columns])
+  }, [
+    data,
+    search,
+    activeFilters,
+    filterConnectors,
+    colMenuSearch,
+    sortRules,
+    columnsByKey,
+    getSearchableText,
+    getLowerValue,
+  ])
 
   // ── Paged rows (slice of rows when pagination is active) ─────────────────
   const pagedRows = React.useMemo(() => {
@@ -404,19 +543,28 @@ export function useTableState<TData extends Record<string, unknown>>(
       result[key] = pin
     }
     return result
-  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [colPins, isOverflowing, isReflowViewport])
 
   // ── Display columns ───────────────────────────────────────────────────────
   const displayCols = React.useMemo(() => {
-    const leftPinned  = colOrder.filter(k => colPins[k] === "left")
-    const free        = colOrder.filter(k => !colPins[k])
-    const rightPinned = colOrder.filter(k => colPins[k] === "right")
-    return [...leftPinned, ...free, ...rightPinned]
-      .map(k => columns.find(c => c.key === k))
-      .filter((c): c is ColumnDef<TData> => !!c)
-      .filter(c => !hiddenCols.has(c.key))
-  }, [colOrder, colPins, hiddenCols, columns])
+    const leftPinned: string[] = []
+    const free: string[] = []
+    const rightPinned: string[] = []
+    for (const k of colOrder) {
+      const pin = colPins[k]
+      if (pin === "left") leftPinned.push(k)
+      else if (pin === "right") rightPinned.push(k)
+      else free.push(k)
+    }
+    const ordered = [...leftPinned, ...free, ...rightPinned]
+    const out: ColumnDef<TData>[] = []
+    for (const k of ordered) {
+      if (hiddenCols.has(k)) continue
+      const col = columnsByKey.get(k)
+      if (col) out.push(col)
+    }
+    return out
+  }, [colOrder, colPins, hiddenCols, columnsByKey])
 
   // ── Column actions ────────────────────────────────────────────────────────
   function startResize(key: string, e: React.MouseEvent) {
@@ -494,7 +642,8 @@ export function useTableState<TData extends Record<string, unknown>>(
   const toggleRow = React.useCallback((id: string | number) => {
     setSelected(prev => {
       const next = new Set(prev)
-      next.has(id) ? next.delete(id) : next.add(id)
+      if (next.has(id)) next.delete(id)
+      else next.add(id)
       return next
     })
   }, [setSelected])
@@ -504,33 +653,60 @@ export function useTableState<TData extends Record<string, unknown>>(
   }, [setSelected])
 
   // ── Sticky offset calculations ────────────────────────────────────────────
-  function getStickyLeft(key: string): number {
-    let offset = 0
+  // Precompute every pinned column's offset ONCE per render so the per-cell
+  // `stickyStyle()` call is an O(1) map lookup instead of an O(cols) walk.
+  // With `cells = rows × cols`, the previous O(rows × cols²) became the
+  // dominant cost on wide tables.
+  const stickyOffsets = React.useMemo(() => {
+    const left = new Map<string, number>()
+    const right = new Map<string, number>()
+    let leftOffset = 0
     for (const col of displayCols) {
       if (effectivePins[col.key] !== "left") break
-      if (col.key === key) return offset
-      offset += colWidths[col.key] ?? col.width ?? 100
+      left.set(col.key, leftOffset)
+      leftOffset += colWidths[col.key] ?? col.width ?? 100
     }
-    return 0
-  }
-  function getStickyRight(key: string): number {
-    let offset = 0
-    const rightCols = [...displayCols].filter(c => effectivePins[c.key] === "right").reverse()
-    for (const col of rightCols) {
-      if (col.key === key) return offset
-      offset += colWidths[col.key] ?? col.width ?? 100
+    let rightOffset = 0
+    for (let i = displayCols.length - 1; i >= 0; i--) {
+      const col = displayCols[i]
+      if (effectivePins[col.key] !== "right") break
+      right.set(col.key, rightOffset)
+      rightOffset += colWidths[col.key] ?? col.width ?? 100
     }
-    return 0
-  }
-  function stickyStyle(key: string, isHeader = false): React.CSSProperties {
-    if (isReflowViewport) return {}
-    const pin = effectivePins[key]
-    if (pin === "left")  return { position: "sticky", left:  getStickyLeft(key),  ...(isHeader ? { top: 0 } : {}) }
-    if (pin === "right") return { position: "sticky", right: getStickyRight(key), ...(isHeader ? { top: 0 } : {}) }
-    return isHeader ? { position: "sticky", top: 0 } : {}
-  }
+    return { left, right }
+  }, [displayCols, effectivePins, colWidths])
+
+  const getStickyLeft = React.useCallback((key: string): number => {
+    return stickyOffsets.left.get(key) ?? 0
+  }, [stickyOffsets])
+
+  const getStickyRight = React.useCallback((key: string): number => {
+    return stickyOffsets.right.get(key) ?? 0
+  }, [stickyOffsets])
+
+  const stickyStyle = React.useCallback(
+    (key: string, isHeader = false): React.CSSProperties => {
+      if (isReflowViewport) return {}
+      const pin = effectivePins[key]
+      if (pin === "left") {
+        return isHeader
+          ? { position: "sticky", left: stickyOffsets.left.get(key) ?? 0, top: 0 }
+          : { position: "sticky", left: stickyOffsets.left.get(key) ?? 0 }
+      }
+      if (pin === "right") {
+        return isHeader
+          ? { position: "sticky", right: stickyOffsets.right.get(key) ?? 0, top: 0 }
+          : { position: "sticky", right: stickyOffsets.right.get(key) ?? 0 }
+      }
+      return isHeader ? { position: "sticky", top: 0 } : {}
+    },
+    [effectivePins, isReflowViewport, stickyOffsets],
+  )
 
-  const totalWidth = displayCols.reduce((s, c) => s + (colWidths[c.key] ?? c.width ?? 100), 0)
+  const totalWidth = React.useMemo(
+    () => displayCols.reduce((s, c) => s + (colWidths[c.key] ?? c.width ?? 100), 0),
+    [displayCols, colWidths],
+  )
 
   return {
     // Sort

package/template/components/data-views/data-row-list.tsx

@@ -0,0 +1,183 @@
+"use client"
+
+/**
+ * DataRowList — generic vertical-stack list view used by every hub's "list"
+ * tab (placements, team, compliance, sites, question-bank, …). Replaces the
+ * hand-rolled `<ul …flex-col gap-2 px-4 pb-8 pt-2 lg:px-6> {rows.map(<li>…)}`
+ * shell that was duplicated across `*-list-view.tsx` files.
+ *
+ * Composition over inheritance: callers provide a `renderRow(row)` that
+ * returns whatever ListPageBoardCard / link / chip-stack they need — this
+ * component owns the chrome (spacing, empty state, virtualization), not the
+ * row body.
+ *
+ * Auto-virtualises with `@tanstack/react-virtual` when the row count meets
+ * `virtualizeThreshold` (default 100). Disable by passing `0`.
+ */
+
+import * as React from "react"
+import { useWindowVirtualizer } from "@tanstack/react-virtual"
+import { cn } from "@/lib/utils"
+
+const DEFAULT_VIRTUALIZE_THRESHOLD = 100
+const DEFAULT_ESTIMATED_ROW_HEIGHT = 96
+const DEFAULT_OVERSCAN = 8
+
+export interface DataRowListProps<TRow> {
+  /** The filtered/sorted rows from `tableState.rows` (or wherever). */
+  rows: readonly TRow[]
+  /** Stable id used as the React `key` and (for virtualizer) the v-key. */
+  getRowId: (row: TRow, index: number) => string | number
+  /** Render the body of one row. Wrap with `<ListPageBoardCard layout="row">` etc. */
+  renderRow: (row: TRow, index: number) => React.ReactNode
+  /**
+   * Shown when `rows.length === 0`. Strings render as muted body copy; pass
+   * a `ReactNode` for richer empty states (illustration, CTA, etc.).
+   */
+  emptyState?: React.ReactNode
+  /**
+   * Auto-virtualise when `rows.length >= virtualizeThreshold`. Default 100.
+   * Pass `0` to never virtualise (preserves predictable layout for short
+   * lists like dashboards / pinned tabs).
+   */
+  virtualizeThreshold?: number
+  /** Hint for the virtualizer; clamps to measured size after first paint. */
+  estimatedRowHeight?: number
+  /** Override the default container padding / gap if needed. */
+  className?: string
+  /** Override the per-row `<li>` className (e.g. tighter spacing). */
+  rowClassName?: string
+  /** `aria-label` for the `<ul>` (screen-reader name for the list). */
+  ariaLabel?: string
+}
+
+const DEFAULT_OUTER_CLASS = "flex list-none flex-col gap-2 px-4 pb-8 pt-2 lg:px-6"
+
+export function DataRowList<TRow>(props: DataRowListProps<TRow>) {
+  const {
+    rows,
+    getRowId,
+    renderRow,
+    emptyState,
+    virtualizeThreshold = DEFAULT_VIRTUALIZE_THRESHOLD,
+    estimatedRowHeight = DEFAULT_ESTIMATED_ROW_HEIGHT,
+    className,
+    rowClassName,
+    ariaLabel,
+  } = props
+
+  if (rows.length === 0) {
+    if (emptyState == null) return null
+    if (typeof emptyState === "string") {
+      return (
+        <div className="px-4 py-16 text-center lg:px-6">
+          <p className="text-sm text-muted-foreground">{emptyState}</p>
+        </div>
+      )
+    }
+    return <div className="px-4 py-16 text-center lg:px-6">{emptyState}</div>
+  }
+
+  if (virtualizeThreshold > 0 && rows.length >= virtualizeThreshold) {
+    return (
+      <DataRowListVirtualized
+        rows={rows}
+        getRowId={getRowId}
+        renderRow={renderRow}
+        estimatedRowHeight={estimatedRowHeight}
+        className={className}
+        rowClassName={rowClassName}
+        ariaLabel={ariaLabel}
+      />
+    )
+  }
+
+  return (
+    <ul aria-label={ariaLabel} className={cn(DEFAULT_OUTER_CLASS, className)}>
+      {rows.map((row, i) => (
+        <li key={getRowId(row, i)} className={rowClassName}>
+          {renderRow(row, i)}
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Virtualised variant — keeps the DOM short on long lists (e.g. 1000+ rows).
+// Uses `useWindowVirtualizer` so the page scroll drives row recycling; this
+// is the right tool for hub-level lists (not nested-scroll containers).
+// ─────────────────────────────────────────────────────────────────────────────
+
+function DataRowListVirtualized<TRow>({
+  rows,
+  getRowId,
+  renderRow,
+  estimatedRowHeight,
+  className,
+  rowClassName,
+  ariaLabel,
+}: {
+  rows: readonly TRow[]
+  getRowId: (row: TRow, index: number) => string | number
+  renderRow: (row: TRow, index: number) => React.ReactNode
+  estimatedRowHeight: number
+  className?: string
+  rowClassName?: string
+  ariaLabel?: string
+}) {
+  const anchorRef = React.useRef<HTMLDivElement | null>(null)
+  // `scrollMargin` is read by the virtualizer during render, so it has to
+  // be state (not a ref). We measure with `useLayoutEffect` after the first
+  // paint and on resize so window-scroll math stays accurate when the page
+  // layout shifts (sidebar collapse, banner, etc.).
+  const [scrollMargin, setScrollMargin] = React.useState(0)
+
+  const updateScrollMargin = React.useCallback(() => {
+    const el = anchorRef.current
+    if (!el) return
+    setScrollMargin(el.getBoundingClientRect().top + window.scrollY)
+  }, [])
+
+  React.useLayoutEffect(() => {
+    updateScrollMargin()
+    window.addEventListener("resize", updateScrollMargin)
+    return () => window.removeEventListener("resize", updateScrollMargin)
+  }, [updateScrollMargin, rows.length])
+
+  const virtualizer = useWindowVirtualizer({
+    count: rows.length,
+    estimateSize: () => estimatedRowHeight,
+    overscan: DEFAULT_OVERSCAN,
+    scrollMargin,
+    getItemKey: i => String(getRowId(rows[i], i)),
+  })
+
+  const totalSize = virtualizer.getTotalSize()
+
+  return (
+    <div ref={anchorRef} className={cn("px-4 pb-8 pt-2 lg:px-6", className)}>
+      <ul
+        aria-label={ariaLabel}
+        className="relative m-0 w-full list-none p-0"
+        style={{ height: `${totalSize}px` }}
+      >
+        {virtualizer.getVirtualItems().map(vr => {
+          const row = rows[vr.index]
+          if (!row) return null
+          return (
+            <li
+              key={vr.key}
+              data-index={vr.index}
+              ref={virtualizer.measureElement}
+              className={cn("absolute left-0 top-0 w-full pb-2", rowClassName)}
+              style={{ transform: `translateY(${vr.start}px)` }}
+            >
+              {renderRow(row, vr.index)}
+            </li>
+          )
+        })}
+      </ul>
+    </div>
+  )
+}

package/template/components/data-views/index.ts

@@ -1,14 +1,14 @@
 /**
  * Central exports for list-page data surfaces and shared view chrome.
  *
- * **Pattern:** `ListPageTemplate` + `DataListTable` — one `useTableState`, one toolbar,
+ * **Pattern:** `ListPageTemplate` + `PlacementsTable` (or any hub-specific `*-table.tsx`) — one `useTableState`, one toolbar,
  * table | list | board | dashboard from the same component (`AGENTS.md` §4, `docs/data-views-pattern.md`).
  *
  * **View UI:** `ViewSegmentedControl` matches the template’s views toolbar (`bg-muted/60` pills).
  */
 
-export { DataListTable } from "@/components/data-list-table"
-export type { DataListTableProps, DataListTableHandle } from "@/components/data-list-table"
+export { PlacementsTable } from "@/components/placements-table"
+export type { PlacementsTableProps, PlacementsTableHandle } from "@/components/placements-table"
 export type { PlacementLifecycleTabId } from "@/lib/placement-lifecycle"
 export type { DataListViewType } from "@/lib/data-list-view"
 export { DATA_LIST_VIEW_TILES, dataListViewIcon, dataListViewLabel } from "@/lib/data-list-view"
@@ -103,6 +103,10 @@ export {
 /** Generic folder icon-grid — reusable across all list hubs. */
 export { FolderGridView, type FolderGridViewProps } from "@/components/data-views/folder-grid-view"
 
+/** Generic vertical row list — used by every hub's "list" tab. Composes
+ *  `ListPageBoardCard layout="row"` via a `renderRow` prop. */
+export { DataRowList, type DataRowListProps } from "@/components/data-views/data-row-list"
+
 
 /** Unified hub tile + list row surface — see `list-page-board-card.tsx`. */
 export {