@exxatdesignux/ui 0.2.15 → 0.2.17

package/template/components/data-table/index.tsx

@@ -27,6 +27,7 @@ import * as React from "react"
 import { useTheme } from "next-themes"
 import { createPortal } from "react-dom"
 import { cn } from "@/lib/utils"
+import { rafThrottle } from "@/lib/raf-throttle"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Kbd, KbdGroup } from "@/components/ui/kbd"
@@ -734,23 +735,29 @@ function useBulkBarFixedToTableScrollEl(
       })
     }
     apply()
-    const ro = new ResizeObserver(() => {
-      requestAnimationFrame(apply)
-    })
+    // rAF-coalesce so a single frame handles bursts of capture-phase scroll
+    // events plus the ResizeObserver firing — instead of N getBoundingClientRect
+    // + setState per second.
+    const scheduled = rafThrottle(apply)
+    const ro = new ResizeObserver(scheduled)
     ro.observe(el)
-    window.addEventListener("resize", apply)
-    window.addEventListener("scroll", apply, true)
+    window.addEventListener("resize", scheduled, { passive: true })
+    window.addEventListener("scroll", scheduled, { passive: true, capture: true })
     return () => {
+      scheduled.cancel()
       ro.disconnect()
-      window.removeEventListener("resize", apply)
-      window.removeEventListener("scroll", apply, true)
+      window.removeEventListener("resize", scheduled)
+      window.removeEventListener("scroll", scheduled, { capture: true })
     }
   }, [active, fullWidth, scrollRef])
   return style
 }
 
 function DataTableInner<TData extends Record<string, unknown>>({
-  data,
+  // `data` / `defaultSort` flow into `useTableState` upstream; the inner table
+  // reads them via `state` and never directly here. Keep the prop slots so
+  // the public `DataTable<TData>` API stays unchanged.
+  data: _data,
   columns,
   getRowId: getRowIdProp,
   getRowSelectionLabel,
@@ -758,7 +765,7 @@ function DataTableInner<TData extends Record<string, unknown>>({
   searchable = true,
   emptyState,
   onRowClick,
-  defaultSort,
+  defaultSort: _defaultSort,
   toolbarSlot,
   bulkActionsSlot,
   addRowLabel = false,
@@ -769,7 +776,7 @@ function DataTableInner<TData extends Record<string, unknown>>({
   state,
 }: DataTableInnerProps<TData>) {
   const {
-    sortRules, setSortRules,
+    setSortRules,
     sortKey, sortDir,
     handleSortByKey,
     addFilter,
@@ -777,7 +784,6 @@ function DataTableInner<TData extends Record<string, unknown>>({
     colMenuSearch, setColMenuSearch,
     selected, setSelected, toggleRow, toggleAll, getRowId,
     colWidths, startResize,
-    colOrder,
     colPins, lockedPins,
     pinColumn, unpinColumn,
     colWrap, toggleWrap,
@@ -785,7 +791,7 @@ function DataTableInner<TData extends Record<string, unknown>>({
     handleDragStart, handleDragOver, handleDrop, handleDragEnd,
     scrollRef, handleScroll, checkOverflow,
     isOverflowing,
-    hoveredRow, setHoveredRow,
+    setHoveredRow,
     rows, pagedRows, groupedRows,
     effectivePins, displayCols,
     isReflowViewport,
@@ -843,6 +849,24 @@ function DataTableInner<TData extends Record<string, unknown>>({
   const lastLeftPinKey   = [...displayCols].reverse().find(c => effectivePins[c.key] === "left")?.key
   const firstRightPinKey = displayCols.find(c => effectivePins[c.key] === "right")?.key
 
+  function floatingHeaderPinnedStyle(key: string): React.CSSProperties | undefined {
+    const pin = effectivePins[key]
+    if (!pin) return undefined
+
+    const visibleWidth =
+      typeof floatingHeaderStyle?.width === "number"
+        ? floatingHeaderStyle.width
+        : tableWrapRef.current?.clientWidth ?? floatingHeaderTableWidth
+    const maxScroll = Math.max(0, floatingHeaderTableWidth - visibleWidth)
+    const translateX = pin === "left"
+      ? headerScrollLeft
+      : headerScrollLeft - maxScroll
+
+    // The floating sticky header is horizontally translated as one table.
+    // Counter-translate pinned header cells so they remain locked to the viewport edge.
+    return { position: "relative", transform: `translateX(${translateX}px)` }
+  }
+
   // Row IDs for the current visible rows
   const allRowIds = rows.map((r, i) => getRowId(r, i, getRowIdProp))
   const allSelected  = rows.length > 0 && selected.size === rows.length
@@ -864,6 +888,7 @@ function DataTableInner<TData extends Record<string, unknown>>({
   const [headerIsStuck, setHeaderIsStuck] = React.useState(false)
   const [headerScrollLeft, setHeaderScrollLeft] = React.useState(0)
   const [floatingHeaderStyle, setFloatingHeaderStyle] = React.useState<React.CSSProperties | undefined>(undefined)
+  const [floatingHeaderTableWidth, setFloatingHeaderTableWidth] = React.useState(totalWidth)
   const [isClient, setIsClient] = React.useState(false)
 
   React.useEffect(() => {
@@ -888,11 +913,16 @@ function DataTableInner<TData extends Record<string, unknown>>({
     }
 
     update()
-    window.addEventListener("scroll", update, { passive: true, capture: true })
-    window.addEventListener("resize", update)
+    // rAF-coalesce: capture-phase scroll fires for every ancestor (sidebar,
+    // dashboard panels, anchored sheets), so a single getBoundingClientRect
+    // per frame is more than enough to keep the sticky header aligned.
+    const scheduled = rafThrottle(update)
+    window.addEventListener("scroll", scheduled, { passive: true, capture: true })
+    window.addEventListener("resize", scheduled, { passive: true })
     return () => {
-      window.removeEventListener("scroll", update, true)
-      window.removeEventListener("resize", update)
+      scheduled.cancel()
+      window.removeEventListener("scroll", scheduled, { capture: true })
+      window.removeEventListener("resize", scheduled)
     }
   }, [showColumnHeaders, rows.length, displayCols.length])
 
@@ -915,6 +945,11 @@ function DataTableInner<TData extends Record<string, unknown>>({
       const borderLeft = parseFloat(cs.borderLeftWidth) || 0
       const borderRight = parseFloat(cs.borderRightWidth) || 0
       const visibleWidth = Math.max(0, wrapEl.clientWidth - borderLeft - borderRight)
+      const renderedTableWidth = Math.max(
+        totalWidth,
+        visibleWidth,
+        wrapEl.querySelector("table")?.getBoundingClientRect().width ?? 0,
+      )
       setFloatingHeaderStyle({
         position: "fixed",
         top: headerOffset,
@@ -922,18 +957,21 @@ function DataTableInner<TData extends Record<string, unknown>>({
         width: visibleWidth,
         zIndex: 50,
       })
+      setFloatingHeaderTableWidth(renderedTableWidth)
       setHeaderScrollLeft(wrapEl.scrollLeft)
     }
 
     apply()
-    const ro = new ResizeObserver(() => requestAnimationFrame(apply))
+    const scheduled = rafThrottle(apply)
+    const ro = new ResizeObserver(scheduled)
     ro.observe(wrapEl)
-    window.addEventListener("scroll", apply, true)
-    window.addEventListener("resize", apply)
+    window.addEventListener("scroll", scheduled, { passive: true, capture: true })
+    window.addEventListener("resize", scheduled, { passive: true })
     return () => {
+      scheduled.cancel()
       ro.disconnect()
-      window.removeEventListener("scroll", apply, true)
-      window.removeEventListener("resize", apply)
+      window.removeEventListener("scroll", scheduled, { capture: true })
+      window.removeEventListener("resize", scheduled)
     }
   }, [headerIsStuck, showColumnHeaders, totalWidth, displayCols.length])
 
@@ -968,7 +1006,7 @@ function DataTableInner<TData extends Record<string, unknown>>({
               <div style={{ transform: `translateX(${-headerScrollLeft}px)` }}>
                 <table
                   className="w-full text-sm border-separate border-spacing-0"
-                  style={{ tableLayout: "fixed", width: totalWidth }}
+                  style={{ tableLayout: "fixed", width: floatingHeaderTableWidth }}
                 >
                   <colgroup>
                     {displayCols.map(col => (
@@ -984,6 +1022,7 @@ function DataTableInner<TData extends Record<string, unknown>>({
                           <th
                             key={col.key}
                             scope="col"
+                            style={floatingHeaderPinnedStyle(col.key)}
                             className={cn(
                               "h-9 px-3 text-left align-middle select-none",
                               "text-xs font-medium text-muted-foreground tracking-wide",
@@ -992,6 +1031,8 @@ function DataTableInner<TData extends Record<string, unknown>>({
                                 ? "border-r border-border last:border-r-0"
                                 : "last:border-r-0"),
                               isPinned ? "z-40" : "z-30",
+                              isPinned && "relative",
+                              isEdgePinCol && stickyShadow(effectivePins[col.key]),
                             )}
                           >
                             <div className="flex items-center justify-between gap-1 min-w-0">
@@ -1058,7 +1099,11 @@ function DataTableInner<TData extends Record<string, unknown>>({
       >
         <table
           className="w-full text-sm border-separate border-spacing-0"
-          style={{ tableLayout: "fixed", minWidth: totalWidth }}
+          style={{
+            tableLayout: "fixed",
+            minWidth: totalWidth,
+            width: headerIsStuck ? floatingHeaderTableWidth : undefined,
+          }}
         >
           <colgroup>
             {displayCols.map(col => (
@@ -1324,7 +1369,6 @@ function DataTableInner<TData extends Record<string, unknown>>({
                 {groupRows.map((row, rowIndex) => {
                   const rowId = getRowId(row, rowIndex, getRowIdProp)
                   const isSelected = selected.has(rowId)
-                  const isHovered  = hoveredRow === rowId
                   const rowClickable = Boolean(onRowClick) || selectable
                   function handleRowClick(e: React.MouseEvent<HTMLTableRowElement>) {
                     if (!rowClickable) return

package/template/components/data-table/pagination.tsx

@@ -201,7 +201,6 @@ export function DataTablePaginated<TData extends Record<string, unknown>>({
         {originalToolbarSlot ? originalToolbarSlot(state) : null}
       </>
     ),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     [originalToolbarSlot],
   )
 

package/template/components/data-table/types.ts

@@ -49,7 +49,10 @@ export interface ColumnDef<TData> {
   }
 }
 
-export interface CellContext<TData> {
+// `TData` is part of the public surface so callers can write
+// `CellContext<Placement>` for symmetry with column-def renderers, even
+// though the interface body doesn't currently reference it.
+export interface CellContext<_TData> {
   rowIndex: number
   selected: boolean
   onSelect: (selected: boolean) => void

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

@@ -242,7 +242,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 +282,201 @@ 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)
     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,
+          })
         }
-        if (col.filter.type === "date") {
-          const targetYmd = filter.values[0]
-          if (!targetYmd) return true
+      }
+
+      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 (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 +516,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 +615,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 +626,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