@astryxdesign/core 0.1.1 → 0.1.2-canary.3893cd5

package/dist/Table/TableRow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableRow.d.ts","sourceRoot":"","sources":["../../src/Table/TableRow.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,EAAM,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAC1C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAMjD,+CAA+C;AAC/C,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,mBAAmB,CAAC;IACnE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;IACrC,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,MAAM,CAAC,EAAE,YAAY,EAAE,CAAC;CACzB;AAwCD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,MAAM,EACN,GAAG,EACH,GAAG,KAAK,EACT,EAAE,aAAa,+BAgDf;yBArDe,QAAQ"}
+{"version":3,"file":"TableRow.d.ts","sourceRoot":"","sources":["../../src/Table/TableRow.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,EAAM,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAC1C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAMjD,+CAA+C;AAC/C,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,mBAAmB,CAAC;IACnE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;IACrC,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,MAAM,CAAC,EAAE,YAAY,EAAE,CAAC;IACxB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AA4DD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,MAAM,EACN,GAAG,EACH,WAAmB,EACnB,GAAG,KAAK,EACT,EAAE,aAAa,+BAoDf;yBA1De,QAAQ"}

package/dist/Table/TableRow.js

@@ -27,12 +27,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const stripedRowStyles = {
   row: {
     kWkggS: "x1dnou9g",
+    "--table-row-overlay": "x1rht92",
     $$css: true
   }
 };
 const hoverRowStyles = {
   row: {
     kWkggS: "xe9uy6x",
+    "--table-row-overlay": "x1pkcbo2",
     k1ekBW: "x15406qy",
     kIyJzY: "xuedmi6",
     kAMwcw: "xlr8y92",
@@ -42,6 +44,7 @@ const hoverRowStyles = {
 const stripedHoverRowStyles = {
   row: {
     kWkggS: "x1dnou9g xe9uy6x",
+    "--table-row-overlay": "x1rht92 x1pkcbo2",
     k1ekBW: "x15406qy",
     kIyJzY: "xuedmi6",
     kAMwcw: "xlr8y92",
@@ -69,6 +72,7 @@ export function TableRow({
   children,
   xstyle,
   ref,
+  isHeaderRow = false,
   ...props
 }) {
   const ctx = use(TableContext);
@@ -82,13 +86,17 @@ export function TableRow({
   }
   const rowStyles = [];
 
-  // Handle striped + hover combination to avoid backgroundColor conflicts
-  if (ctx.isStriped && ctx.hasHover) {
-    rowStyles.push(stripedHoverRowStyles.row);
-  } else if (ctx.isStriped) {
-    rowStyles.push(stripedRowStyles.row);
-  } else if (ctx.hasHover) {
-    rowStyles.push(hoverRowStyles.row);
+  // Striped + hover styling is for body rows only — the header row must not
+  // pick up the hover highlight (or striping) even when hasHover/isStriped.
+  if (!isHeaderRow) {
+    // Handle striped + hover combination to avoid backgroundColor conflicts
+    if (ctx.isStriped && ctx.hasHover) {
+      rowStyles.push(stripedHoverRowStyles.row);
+    } else if (ctx.isStriped) {
+      rowStyles.push(stripedRowStyles.row);
+    } else if (ctx.hasHover) {
+      rowStyles.push(hoverRowStyles.row);
+    }
   }
   if (ctx.dividers === 'rows' || ctx.dividers === 'grid') {
     // Note: last-body-row border removal is handled by TableCell

package/dist/Table/index.d.ts

@@ -22,10 +22,11 @@ export { useTablePagination, paginateData } from './plugins/pagination';
 export { useTableColumnSettings } from './plugins/columnSettings';
 export { useTableColumnSettingsState } from './plugins/columnSettings';
 export { useTableColumnResize } from './plugins/columnResize';
+export { useTableStickyColumns } from './plugins/stickyColumns';
 export { useTableFiltering, useTableFilterState, toSearchFilters, } from './plugins/filtering';
 export { useBaseTablePlugins } from './useBaseTablePlugins';
 export { proportional, pixel, generateColumns, resolveColumnWidths, DEFAULT_MIN_COLUMN_WIDTH, } from './columnUtils';
-export type { TableColumn, TableColumnAlign, TableVerticalAlign, ColumnWidth, ProportionalWidth, PixelWidth, TablePlugin, TableRenderProps, HeaderRowRenderProps, HeaderCellRenderProps, BodyRowRenderProps, BodyCellRenderProps, BaseTableProps, } from './types';
+export type { TableColumn, TableColumnAlign, TableVerticalAlign, ColumnWidth, ProportionalWidth, PixelWidth, TablePlugin, TableRenderProps, HeaderRowRenderProps, HeaderCellRenderProps, BodyRowRenderProps, BodyCellRenderProps, ScrollWrapperRenderProps, BaseTableProps, } from './types';
 export type { TableProps, TableDensity, TableDividers, TableTextOverflow, } from './Table';
 export type { TableRowProps } from './TableRow';
 export type { TableCellProps } from './TableCell';
@@ -42,5 +43,6 @@ export type { UseTablePaginationConfig } from './plugins/pagination';
 export type { UseTableColumnSettingsConfig, ColumnSettingsOption, } from './plugins/columnSettings';
 export type { UseTableColumnSettingsStateConfig, UseTableColumnSettingsStateReturn, } from './plugins/columnSettings';
 export type { UseTableColumnResizeConfig } from './plugins/columnResize';
+export type { UseTableStickyColumnsConfig } from './plugins/stickyColumns';
 export type { UseTableFilteringConfig, TableFilterState, TableFilterVariant, TableFilterValue, TableFilterFieldRef, } from './plugins/filtering';
 //# sourceMappingURL=index.d.ts.map

package/dist/Table/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Table/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Table/index.ts"],"names":[],"mappings":"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"}

package/dist/Table/index.js

@@ -26,6 +26,7 @@ export { useTablePagination, paginateData } from "./plugins/pagination/index.js"
 export { useTableColumnSettings } from "./plugins/columnSettings/index.js";
 export { useTableColumnSettingsState } from "./plugins/columnSettings/index.js";
 export { useTableColumnResize } from "./plugins/columnResize/index.js";
+export { useTableStickyColumns } from "./plugins/stickyColumns/index.js";
 export { useTableFiltering, useTableFilterState, toSearchFilters } from "./plugins/filtering/index.js";
 export { useBaseTablePlugins } from "./useBaseTablePlugins.js";
 export { proportional, pixel, generateColumns, resolveColumnWidths, DEFAULT_MIN_COLUMN_WIDTH } from "./columnUtils.js";

package/dist/Table/plugins/stickyColumns/index.d.ts

@@ -0,0 +1,3 @@
+export { useTableStickyColumns } from './useTableStickyColumns';
+export type { UseTableStickyColumnsConfig } from './useTableStickyColumns';
+//# sourceMappingURL=index.d.ts.map

package/dist/Table/plugins/stickyColumns/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/stickyColumns/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,qBAAqB,EAAC,MAAM,yBAAyB,CAAC;AAC9D,YAAY,EAAC,2BAA2B,EAAC,MAAM,yBAAyB,CAAC"}

package/dist/Table/plugins/stickyColumns/index.js

@@ -0,0 +1,3 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+export { useTableStickyColumns } from "./useTableStickyColumns.js";

package/dist/Table/plugins/stickyColumns/useTableStickyColumns.d.ts

@@ -0,0 +1,25 @@
+import type { TablePlugin } from '../../types';
+/**
+ * Config for {@link useTableStickyColumns}. Provide at least one of
+ * `startKeys` / `endKeys` to pin columns.
+ *
+ * @remarks Every field is optional by design, so `useTableStickyColumns({})`
+ * compiles and is an intentional no-op that pins nothing — the hook returns a
+ * plugin that passes every cell through untouched. This lets callers compute
+ * the config conditionally (e.g. `endKeys: enabled ? ['notes'] : undefined`)
+ * without branching on whether to install the plugin at all.
+ */
+export interface UseTableStickyColumnsConfig {
+    /**
+     * Column keys pinned to the START (inline-start / left in LTR) edge — the
+     * contiguous run from the first column through the last listed key.
+     */
+    startKeys?: string[];
+    /**
+     * Column keys pinned to the END (inline-end / right in LTR) edge — the
+     * contiguous run from the first listed key through the last column.
+     */
+    endKeys?: string[];
+}
+export declare function useTableStickyColumns<T extends Record<string, unknown>>(config: UseTableStickyColumnsConfig): TablePlugin<T>;
+//# sourceMappingURL=useTableStickyColumns.d.ts.map

package/dist/Table/plugins/stickyColumns/useTableStickyColumns.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTableStickyColumns.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/stickyColumns/useTableStickyColumns.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAEV,WAAW,EAIZ,MAAM,aAAa,CAAC;AAOrB;;;;;;;;;GASG;AACH,MAAM,WAAW,2BAA2B;IAC1C;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB;AA6MD,wBAAgB,qBAAqB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACrE,MAAM,EAAE,2BAA2B,GAClC,WAAW,CAAC,CAAC,CAAC,CAmJhB"}

package/dist/Table/plugins/stickyColumns/useTableStickyColumns.js

@@ -0,0 +1,369 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file useTableStickyColumns.tsx
+ * @input React, StyleX, theme tokens, Table types
+ * @output Exports useTableStickyColumns hook and UseTableStickyColumnsConfig type
+ * @position Sticky-columns plugin; consumed by Table via plugins prop
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/Table/Table.doc.mjs (sticky-columns documentation)
+ * - /packages/core/src/Table/index.ts (exports)
+ */
+import { useCallback, useMemo, useRef } from 'react';
+import * as stylex from '@stylexjs/stylex';
+import "../../../theme/tokens.stylex.js";
+import { colorVars, durationVars, easeVars } from "../../../theme/tokens.stylex.js";
+import { DEFAULT_MIN_COLUMN_WIDTH } from "../../columnUtils.js";
+
+// =============================================================================
+// Config
+// =============================================================================
+
+/**
+ * Config for {@link useTableStickyColumns}. Provide at least one of
+ * `startKeys` / `endKeys` to pin columns.
+ *
+ * @remarks Every field is optional by design, so `useTableStickyColumns({})`
+ * compiles and is an intentional no-op that pins nothing — the hook returns a
+ * plugin that passes every cell through untouched. This lets callers compute
+ * the config conditionally (e.g. `endKeys: enabled ? ['notes'] : undefined`)
+ * without branching on whether to install the plugin at all.
+ */
+
+// =============================================================================
+// Width helpers
+// =============================================================================
+
+/**
+ * Resolve a column's pixel width for cumulative offset math. Mirrors the
+ * resize plugin's fallback so offsets line up with rendered widths:
+ * pixel columns use their value; proportional columns use their declared
+ * minWidth (or the default); unknown widths use the default.
+ */
+function getColumnWidth(col) {
+  const w = col.width;
+  if (!w) {
+    return DEFAULT_MIN_COLUMN_WIDTH;
+  }
+  if (w.type === 'pixel') {
+    return w.value;
+  }
+  // proportional
+  return w.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH;
+}
+
+/**
+ * Columns pinned to the START edge → cumulative inline offset (px). The pinned
+ * block is the contiguous run from column 0 through the last key in `startKeys`
+ * (inclusive of any synthetic columns before it). `null` if none / no context.
+ */
+function computeStartOffsets(columns, startKeys) {
+  if (!columns || columns.length === 0 || startKeys.length === 0) {
+    return null;
+  }
+  let lastStickyIndex = -1;
+  for (let i = 0; i < columns.length; i++) {
+    if (startKeys.includes(columns[i].key)) {
+      lastStickyIndex = i;
+    }
+  }
+  if (lastStickyIndex === -1) {
+    return null;
+  }
+  const offsets = new Map();
+  let cumulative = 0;
+  for (let i = 0; i <= lastStickyIndex; i++) {
+    offsets.set(columns[i].key, cumulative);
+    cumulative += getColumnWidth(columns[i]);
+  }
+  return offsets;
+}
+
+/**
+ * Mirror of {@link computeStartOffsets} for the END edge — contiguous run from
+ * the first key in `endKeys` through the last column, offsets accumulating from
+ * the end (last column = 0). `null` if none.
+ */
+function computeEndOffsets(columns, endKeys) {
+  if (!columns || columns.length === 0 || endKeys.length === 0) {
+    return null;
+  }
+  let firstStickyIndex = -1;
+  for (let i = 0; i < columns.length; i++) {
+    if (endKeys.includes(columns[i].key)) {
+      firstStickyIndex = i;
+      break;
+    }
+  }
+  if (firstStickyIndex === -1) {
+    return null;
+  }
+  const offsets = new Map();
+  let cumulative = 0;
+  for (let i = columns.length - 1; i >= firstStickyIndex; i--) {
+    offsets.set(columns[i].key, cumulative);
+    cumulative += getColumnWidth(columns[i]);
+  }
+  return offsets;
+}
+/**
+ * Resolve how a single column should be pinned given the start/end configs and
+ * the full column list. A key (mis)configured on both edges resolves to start.
+ * Returns `null` for columns that should not be pinned.
+ */
+function resolveStickySide(columns, columnKey, startKeys, endKeys) {
+  const startOffsets = computeStartOffsets(columns, startKeys);
+  if (startOffsets?.has(columnKey)) {
+    return {
+      edge: 'start',
+      offset: startOffsets.get(columnKey) ?? 0
+    };
+  }
+  const endOffsets = computeEndOffsets(columns, endKeys);
+  if (endOffsets?.has(columnKey)) {
+    return {
+      edge: 'end',
+      offset: endOffsets.get(columnKey) ?? 0
+    };
+  }
+  return null;
+}
+
+// =============================================================================
+// Styles
+// =============================================================================
+
+// Scroll-state CSS variables set on the scroll container by the layout ref;
+// the cell ::after shadows read them so each edge's shadow only shows when
+// content is hidden behind it. (A variable, not stylex.when.ancestor, because
+// StyleX ancestor selectors are pseudo-class only — not scroll state.)
+const SHADOW_VAR_START = '--table-sticky-shadow-start';
+const SHADOW_VAR_END = '--table-sticky-shadow-end';
+const stickyStyles = {
+  cell: {
+    kVAEAm: "x7wzq59",
+    kWkggS: "x1fd97le",
+    kgeoSG: "x1cpjm7i",
+    kEoFBp: "x1hmns74",
+    kFcpXp: "xxx281p",
+    kxmVGU: "xy5mcqj",
+    km8f2m: "xkk1bqk",
+    kLkRvE: "x1uvfo0n",
+    k7KCAZ: "xxcwgru",
+    kKXxxB: "x1y1nw7a",
+    kqUdNP: "xa5v58t",
+    kHypHr: "xx83zyx",
+    kVQacm: "x1rea2x4",
+    $$css: true
+  },
+  headerCell: {
+    kY2c9j: "xzkaem6",
+    $$css: true
+  },
+  bodyCell: {
+    kY2c9j: "x1vjfegm",
+    $$css: true
+  }
+};
+
+// Soft drop shadow over the scrolling region (matches the EPS sticky treatment).
+// border-collapse tables don't paint box-shadow on cells in Chromium, so it's a
+// ::after gradient strip just past the pinned edge (visible thanks to the cell's
+// overflow: visible). Opacity is gated by the scroll-state variable above.
+const SHADOW_WIDTH = '6px';
+// --color-shadow is only ~10% alpha (too faint here); use a slightly stronger soft tint.
+const SHADOW_TINT = 'light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.32))';
+const shadowStyles = {
+  start: {
+    k5JduY: "x1s928wv",
+    kwXMNM: "x1j6awrg",
+    k3foIR: "x1m1drc7",
+    k8Iv0R: "x1xrz1ek",
+    kH8aOt: "x1unh1gc",
+    kkgrvl: "xzkji8o",
+    kLigFv: "x1qyefdi",
+    kloYau: "x2q1x1w",
+    kFJxch: "x17s1k9h",
+    kypkao: "x1sggmfs",
+    kNctxI: "x156sm4c",
+    $$css: true
+  },
+  end: {
+    k5JduY: "x1s928wv",
+    kwXMNM: "x1j6awrg",
+    k3foIR: "x1m1drc7",
+    k8Iv0R: "x1xrz1ek",
+    kc1e00: "x1iygr5g",
+    kkgrvl: "xzkji8o",
+    kLigFv: "xvs0bi2",
+    kloYau: "x2q1x1w",
+    kFJxch: "x17s1k9h",
+    kypkao: "x1c2idit",
+    kNctxI: "x14ofgck",
+    $$css: true
+  }
+};
+
+// Stable empty default so an unset start/end doesn't allocate a fresh array
+// (and bust the memo) on every render.
+const EMPTY = [];
+
+// =============================================================================
+// Hook
+// =============================================================================
+
+export function useTableStickyColumns(config) {
+  const {
+    startKeys,
+    endKeys
+  } = config;
+  const start = startKeys ?? EMPTY;
+  const end = endKeys ?? EMPTY;
+  const hasStart = start.length > 0;
+  const hasEnd = end.length > 0;
+
+  // Live snapshot of the resolved config, read inside the (memoized) transforms
+  // and the scroll-shadow callback. Keeping these in a ref lets the plugin memo
+  // be computed once (deps: only the stable scroll-shadow callback) while never
+  // reading stale config — consumers typically pass fresh array literals each
+  // render, so we never want array identity in the deps.
+  const stateRef = useRef({
+    start,
+    end,
+    hasStart,
+    hasEnd
+  });
+  stateRef.current = {
+    start,
+    end,
+    hasStart,
+    hasEnd
+  };
+
+  // Scroll-aware shadows: toggle CSS variables on the scroll container so each
+  // edge's shadow only paints when there is hidden, horizontally-scrolled
+  // content behind that edge. Implemented with a callback ref + scroll/resize
+  // listeners (synchronizing with the DOM) rather than React state, so
+  // scrolling never triggers re-renders.
+  const detachRef = useRef(null);
+  const attachScrollShadow = useCallback(el => {
+    detachRef.current?.();
+    detachRef.current = null;
+    if (!el) {
+      return;
+    }
+    const update = () => {
+      const {
+        hasStart: hs,
+        hasEnd: he
+      } = stateRef.current;
+      const maxScroll = el.scrollWidth - el.clientWidth;
+      const hasOverflow = maxScroll > 1;
+      if (hs) {
+        el.style.setProperty(SHADOW_VAR_START, hasOverflow && el.scrollLeft > 1 ? '1' : '0');
+      }
+      if (he) {
+        el.style.setProperty(SHADOW_VAR_END, hasOverflow && el.scrollLeft < maxScroll - 1 ? '1' : '0');
+      }
+    };
+    el.addEventListener('scroll', update, {
+      passive: true
+    });
+    const resizeObserver = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(update) : null;
+    resizeObserver?.observe(el);
+    update();
+    detachRef.current = () => {
+      el.removeEventListener('scroll', update);
+      resizeObserver?.disconnect();
+    };
+  }, []);
+  return useMemo(() => ({
+    transformHeaderCell(props, column) {
+      const {
+        start: s,
+        end: e
+      } = stateRef.current;
+      const side = resolveStickySide(props.columns, column.key, s, e);
+      if (!side) {
+        return props;
+      }
+      // position/inline-offset are runtime values → set via inline style so
+      // they are authoritative regardless of plugin composition order (the
+      // resize plugin also writes inline style on header cells).
+      const offsetStyle = side.edge === 'start' ? {
+        insetInlineStart: `${side.offset}px`
+      } : {
+        insetInlineEnd: `${side.offset}px`
+      };
+      return {
+        ...props,
+        htmlProps: {
+          ...props.htmlProps,
+          style: {
+            ...props.htmlProps.style,
+            ...offsetStyle
+          }
+        },
+        styles: [...props.styles, stickyStyles.cell, stickyStyles.headerCell, side.edge === 'start' ? shadowStyles.start : shadowStyles.end]
+      };
+    },
+    transformBodyCell(props, column) {
+      const {
+        start: s,
+        end: e
+      } = stateRef.current;
+      const side = resolveStickySide(props.columns, column.key, s, e);
+      if (!side) {
+        return props;
+      }
+      const offsetStyle = side.edge === 'start' ? {
+        insetInlineStart: `${side.offset}px`
+      } : {
+        insetInlineEnd: `${side.offset}px`
+      };
+      return {
+        ...props,
+        htmlProps: {
+          ...props.htmlProps,
+          style: {
+            ...props.htmlProps.style,
+            ...offsetStyle
+          }
+        },
+        styles: [...props.styles, stickyStyles.cell, stickyStyles.bodyCell, side.edge === 'start' ? shadowStyles.start : shadowStyles.end]
+      };
+    },
+    transformScrollWrapper(props) {
+      // No pinned edges → nothing to gate; leave the wrapper untouched.
+      if (!stateRef.current.hasStart && !stateRef.current.hasEnd) {
+        return props;
+      }
+      // Compose with any ref a prior plugin (e.g. virtualization) set on the
+      // scroll container.
+      const existingRef = props.htmlProps.ref;
+      const mergedRef = node => {
+        attachScrollShadow(node);
+        if (typeof existingRef === 'function') {
+          existingRef(node);
+        } else if (existingRef != null) {
+          // RefObject — assign through its writable `.current`.
+          existingRef.current = node;
+        }
+      };
+      return {
+        ...props,
+        htmlProps: {
+          ...props.htmlProps,
+          ref: mergedRef
+        }
+      };
+    }
+  }),
+  // The returned plugin's transforms read live config from `stateRef` and
+  // `attachScrollShadow` is stable (empty deps), so the plugin object can be
+  // computed once and reused across renders.
+  [attachScrollShadow]);
+}

package/dist/Table/types.d.ts

@@ -217,6 +217,20 @@ export interface HeaderCellRenderProps {
     overlay?: ReactNode;
     /** Content rendered below the header label row (e.g. inline filter controls). */
     below?: ReactNode;
+    /**
+     * Index of this column within the final, ordered list of rendered columns
+     * (after column injection/reordering by other plugins). Populated by
+     * BaseTable. Optional for backward compatibility with hand-constructed
+     * renders in tests.
+     */
+    columnIndex?: number;
+    /**
+     * The full, final ordered list of columns being rendered (after column
+     * injection/reordering by other plugins). Populated by BaseTable so plugins
+     * can reason about column position — e.g. cumulative sticky offsets. Optional
+     * for backward compatibility.
+     */
+    columns?: ReadonlyArray<TableColumn<Record<string, unknown>>>;
 }
 /** Props passed through the plugin pipeline for each body `<tr>` */
 export interface BodyRowRenderProps {
@@ -230,6 +244,48 @@ export interface BodyRowRenderProps {
 export interface BodyCellRenderProps {
     htmlProps: TdHTMLAttributes<HTMLTableCellElement>;
     styles: StyleXStyles[];
+    /**
+     * Index of this cell's column within the final ordered column list.
+     * Mirrors the `columnIndex` passed to `transformHeaderCell`. Populated by
+     * BaseTable. Optional for backward compatibility with hand-constructed
+     * renders in tests.
+     */
+    columnIndex?: number;
+    /**
+     * The full, final ordered list of columns being rendered. Populated by
+     * BaseTable so plugins can reason about column position — e.g. cumulative
+     * sticky offsets. Optional for backward compatibility.
+     */
+    columns?: ReadonlyArray<TableColumn<Record<string, unknown>>>;
+}
+/**
+ * Props passed through the plugin pipeline for the scroll-wrapper region — the
+ * `<div>` wrapping the `<table>` element (the horizontal scroll container, see
+ * the `scrollWrapper` prop on `BaseTableProps`). Lets plugins attach a `ref` to
+ * the scrollable element (e.g. for scroll-aware sticky-column shadows or
+ * virtualization) and inject chrome before/after the table.
+ *
+ * Named after `scrollWrapper` (not "layout") to avoid ambiguity: it transforms
+ * the wrapper element, not the internal header/body/footer layout of `<table>`.
+ *
+ * Runs after `transformTable`/cell transforms but inside `transformTableContext`,
+ * so plugin chrome added here stays within any context providers but wraps the
+ * scroll area.
+ */
+export interface ScrollWrapperRenderProps {
+    /**
+     * HTML attributes applied to the scroll container `<div>`, including an
+     * optional `ref`. Plugins compose refs by reading the existing `ref` and
+     * merging their own (see `useTableStickyColumns`).
+     */
+    htmlProps: HTMLAttributes<HTMLDivElement> & {
+        ref?: Ref<HTMLDivElement>;
+    };
+    styles: StyleXStyles[];
+    /** Content rendered before the `<table>`, inside the scroll container. */
+    beforeTable?: ReactNode;
+    /** Content rendered after the `<table>`, inside the scroll container. */
+    afterTable?: ReactNode;
 }
 /**
  * Table plugin — transforms render props at each structural level.
@@ -243,7 +299,8 @@ export interface BodyCellRenderProps {
  * 4. `transformHeaderCell` — transform each `<th>` props
  * 5. `transformBodyRow` — transform each body `<tr>` props
  * 6. `transformBodyCell` — transform each body `<td>` props
- * 7. `transformTableContext` — wrap the table output in context providers
+ * 7. `transformScrollWrapper` — transform the scroll-container wrapper around the table
+ * 8. `transformTableContext` — wrap the table output in context providers
  */
 export interface TablePlugin<T extends Record<string, unknown> = Record<string, unknown>> {
     /**
@@ -256,12 +313,29 @@ export interface TablePlugin<T extends Record<string, unknown> = Record<string,
     transformTable?: (props: TableRenderProps) => TableRenderProps;
     /** Transform the header `<tr>` props */
     transformHeaderRow?: (props: HeaderRowRenderProps) => HeaderRowRenderProps;
-    /** Transform each `<th>` props */
-    transformHeaderCell?: (props: HeaderCellRenderProps, column: TableColumn<T>) => HeaderCellRenderProps;
+    /**
+     * Transform each `<th>` props.
+     *
+     * `columnIndex` and the full `columns` list are provided for plugins that
+     * need to reason about column position (e.g. cumulative sticky offsets).
+     */
+    transformHeaderCell?: (props: HeaderCellRenderProps, column: TableColumn<T>, columnIndex: number, columns: ReadonlyArray<TableColumn<T>>) => HeaderCellRenderProps;
     /** Transform each body `<tr>` props */
     transformBodyRow?: (props: BodyRowRenderProps, item: T, index: number) => BodyRowRenderProps;
-    /** Transform each body `<td>` props */
-    transformBodyCell?: (props: BodyCellRenderProps, column: TableColumn<T>, item: T) => BodyCellRenderProps;
+    /**
+     * Transform each body `<td>` props.
+     *
+     * `columnIndex` and the full `columns` list are provided for plugins that
+     * need to reason about column position (e.g. cumulative sticky offsets).
+     */
+    transformBodyCell?: (props: BodyCellRenderProps, column: TableColumn<T>, item: T, columnIndex: number, columns: ReadonlyArray<TableColumn<T>>) => BodyCellRenderProps;
+    /**
+     * Transform the scroll-wrapper region — the `<div>` wrapping the `<table>`
+     * (see the `scrollWrapper` prop). Use to attach a `ref` to the scrollable
+     * element (scroll-aware shadows, virtualization) or to inject chrome
+     * before/after the table.
+     */
+    transformScrollWrapper?: (props: ScrollWrapperRenderProps) => ScrollWrapperRenderProps;
     /** Wrap the table output in context providers */
     transformTableContext?: (children: ReactNode) => ReactNode;
 }
@@ -271,6 +345,11 @@ export interface TableRowComponentProps extends HTMLAttributes<HTMLTableRowEleme
     ref?: Ref<HTMLTableRowElement>;
     children: ReactNode;
     xstyle?: StyleXStyles[];
+    /**
+     * Whether this row is the header row. Header rows skip the striped/hover
+     * row styling, which is only meant for body rows.
+     */
+    isHeaderRow?: boolean;
 }
 /** Props for cell components used in the components prop */
 export interface TableCellComponentProps extends TdHTMLAttributes<HTMLTableCellElement> {
@@ -311,9 +390,20 @@ export interface BaseTableProps<T extends Record<string, unknown>> extends BaseP
      * plugin `transformTableContext` layer. Used by `Table` to add a
      * horizontal scroll container so plugin chrome (pagination, toolbars)
      * stays outside the scrollable area.
+     *
+     * Receives `htmlProps` (including an optional `ref`) and `styles` produced
+     * by the plugin `transformScrollWrapper` pipeline, plus `beforeTable`/`afterTable`
+     * chrome. The wrapper must spread `htmlProps` (and apply `styles`) onto its
+     * scroll-container element so plugins can attach refs / scroll listeners.
      */
     scrollWrapper?: ComponentType<{
         children: ReactNode;
+        htmlProps?: HTMLAttributes<HTMLDivElement> & {
+            ref?: Ref<HTMLDivElement>;
+        };
+        styles?: StyleXStyles[];
+        beforeTable?: ReactNode;
+        afterTable?: ReactNode;
     }>;
     /**
      * How default-rendered body cell text behaves when it exceeds column width.