@crispy-seed/data-table 0.4.0 → 0.5.0

package/dist/index.js

@@ -859,18 +859,33 @@ function useDataTableColumnCalc(props) {
     return next;
 }
 /**
- * Drag-to-reorder: removes `dragKey` from `order` and reinserts it immediately before
- * `dropKey`'s CURRENT position (i.e. its position after the removal, so dropping a
- * column just after its own old slot doesn't appear to do nothing). A no-op (an
- * equal-valued copy) when either key is missing or they're the same key.
+ * Drag-to-reorder: moves `dragKey` to `dropKey`'s own ORIGINAL index (the standard
+ * `arrayMove` two-splice shape -- remove `dragKey`, then reinsert it at `dropKey`'s
+ * pre-removal index of the now-shorter array), the same semantics dnd-kit's own
+ * `arrayMove` uses. A no-op (an equal-valued copy) when either key is missing or
+ * they're the same key.
+ *
+ * An EARLIER version of this function instead reinserted `dragKey` immediately before
+ * `dropKey`'s post-removal position. That reads the same for a multi-column jump, but
+ * is a silent no-op for the single most common drag gesture there is: dragging a
+ * column onto its own immediate RIGHT neighbor. Concretely, for `["a","b"]`, dragging
+ * "a" onto "b": removing "a" leaves `["b"]`, and "immediately before b" is index 0 --
+ * exactly where "a" already was, so nothing moved even though a real drag-and-drop
+ * gesture happened (caught by `DataTable.columns.test.tsx`'s own end-to-end drag test,
+ * which fires a real `dragover` DOM event and asserts the header order actually
+ * changed -- it didn't). This version's two-splice shape lands the dragged column at
+ * the target's own original slot instead, which swaps immediate neighbors correctly in
+ * both directions and still matches the old multi-jump behavior for a LEFTWARD drag
+ * (only a RIGHTWARD multi-column jump now lands one slot further, after the drop
+ * target instead of before it -- see this file's own test for both directions).
  */ function reorderColumnKey(order, dragKey, dropKey) {
     if (dragKey === dropKey || !order.includes(dragKey) || !order.includes(dropKey)) {
         return [
             ...order
         ];
     }
+    const dropIndex = order.indexOf(dropKey);
     const withoutDrag = order.filter((key)=>key !== dragKey);
-    const dropIndex = withoutDrag.indexOf(dropKey);
     return [
         ...withoutDrag.slice(0, dropIndex),
         dragKey,
@@ -882,6 +897,24 @@ function useDataTableColumnCalc(props) {
  *  nor balloon past a sane cap from one fast mouse move). */ function clampColumnWidth(width, min = 80, max = 640) {
     return Math.min(max, Math.max(min, width));
 }
+/**
+ * Reconciles a persisted/controlled PINNED set against the table's current column
+ * KEYS -- the same drop-what's-gone rule `reconcileColumnOrder` already applies to
+ * `columnOrder`, but pins never need the "append what's new" half of that: an unpinned
+ * column simply isn't in the set, appending it here would silently pin every brand-new
+ * column by accident. A key no longer in `keys` (hidden isn't "gone" -- only removed
+ * from `columns` entirely) is dropped; everything else keeps its order.
+ */ function reconcilePinnedColumns(pinned, keys) {
+    const keySet = new Set(keys);
+    return pinned.filter((key)=>keySet.has(key));
+}
+/** Pin/unpin: adds `key` if absent, removes it if present -- column-menu.tsx's own
+ *  "Pin column"/"Unpin column" toggle is one call of this, the same shape
+ *  `toggleMembership` already gives row selection. Kept as its own named function
+ *  (rather than reusing `toggleMembership` directly) so a pin-specific doc comment and
+ *  call sites aren't reading a generically-named helper for a column-specific concern. */ function togglePinnedColumn(pinned, key) {
+    return toggleMembership(pinned, key);
+}
 /**
  * Infinite scroll's own gate: fire `onLoadMore` only when the sentinel is ACTUALLY
  * intersecting (not e.g. an observer's initial `false` callback, which fires once on
@@ -895,19 +928,90 @@ function useDataTableColumnCalc(props) {
  */ function shouldTriggerLoadMore(isIntersecting, hasMore, loadingMore) {
     return hasMore && !loadingMore;
 }
+function isPlainObject(value) {
+    return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+/** Structural validation for ONE parsed view -- every field of `DataTableViewState` is
+ *  optional, so this only rejects a field that's actually PRESENT but the wrong shape
+ *  (a consumer's storage from a future/older version of this shape), not a field that's
+ *  simply missing. */ function isValidDataTableView(value) {
+    if (!isPlainObject(value)) return false;
+    if (typeof value["id"] !== "string" || typeof value["name"] !== "string") return false;
+    if (!isPlainObject(value["state"])) return false;
+    const state = value["state"];
+    if (state["columnOrder"] !== undefined && !isStringArray(state["columnOrder"])) return false;
+    if (state["hiddenColumnKeys"] !== undefined && !isStringArray(state["hiddenColumnKeys"])) return false;
+    if (state["pinnedColumnKeys"] !== undefined && !isStringArray(state["pinnedColumnKeys"])) return false;
+    if (state["columnWidths"] !== undefined && !isPlainObject(state["columnWidths"])) return false;
+    if (state["toolbarSorts"] !== undefined && !Array.isArray(state["toolbarSorts"])) return false;
+    if (state["toolbarFilters"] !== undefined && !Array.isArray(state["toolbarFilters"])) return false;
+    return true;
+}
+function isStringArray(value) {
+    return Array.isArray(value) && value.every((entry)=>typeof entry === "string");
+}
+/** JSON-serializes a saved-views list for the default localStorage store -- pure so it
+ *  can be unit- and mutation-tested without touching `window.localStorage` at all (the
+ *  hook's own effect, `useDataTableViews.ts`, is the only thing that actually touches
+ *  storage; this is just the byte-for-byte shape it writes/reads). */ function serializeDataTableViews(views) {
+    return JSON.stringify(views);
+}
+/**
+ * Parses a saved-views blob back into a `DataTableView[]`, defensively: malformed JSON,
+ * a non-array root, or any single malformed entry drops just that problem (an empty
+ * list, or that one entry) rather than throwing -- a consumer's localStorage can hold a
+ * PRIOR version's shape after this ships a new field, and one bad/stale entry shouldn't
+ * cost every other saved view.
+ */ function deserializeDataTableViews(raw) {
+    if (!raw) return [];
+    let parsed;
+    try {
+        parsed = JSON.parse(raw);
+    } catch  {
+        return [];
+    }
+    if (!Array.isArray(parsed)) return [];
+    return parsed.filter(isValidDataTableView);
+}
+/** Inserts `view` (by `id`), or replaces the existing entry with the same `id` in
+ *  place -- "Save" (new view) and "update the currently loaded view" are both one call
+ *  of this, matching `moveColumnKey`/`reorderColumnKey`'s own "one pure op per user
+ *  gesture" shape. */ function upsertDataTableView(views, view) {
+    const index = views.findIndex((existing)=>existing.id === view.id);
+    if (index === -1) return [
+        ...views,
+        view
+    ];
+    const next = [
+        ...views
+    ];
+    next[index] = view;
+    return next;
+}
+/** Renames the view with this `id` -- a no-op (an equal-valued copy) if no view has
+ *  that id. */ function renameDataTableView(views, id, name) {
+    return views.map((view)=>view.id === id ? {
+            ...view,
+            name
+        } : view);
+}
+/** Removes the view with this `id`. */ function removeDataTableView(views, id) {
+    return views.filter((view)=>view.id !== id);
+}
 const EMPTY_STRINGS = [];
 const EMPTY_RECORD = {};
 /**
  * Owns everything DATATABLE-ATTIO-SPEC.md's column menu + reorder + resize tranche
- * needs -- order, visibility, a per-column label override, and a per-column width --
- * the way useDataTableSelection owns the one selected-id SET rather than one hook per
- * row. All four are "one value per column key" maps/lists a consumer may want to
- * persist (a saved view), so they share this hook instead of splitting into four
- * separate ones; drag-to-reorder and drag-to-resize (below) are the two INTERACTIONS
- * built on top of the order/width state this hook already owns, not independent state
+ * needs -- order, visibility, a per-column label override, a per-column width, and
+ * (Attio's "Pin column") a per-column left-pinned flag -- the way useDataTableSelection
+ * owns the one selected-id SET rather than one hook per row. All five are "one value
+ * per column key" maps/lists/sets a consumer may want to persist (a saved view), so
+ * they share this hook instead of splitting into five separate ones; drag-to-reorder
+ * and drag-to-resize (below) are the two INTERACTIONS built on top of the order/width
+ * state this hook already owns, not independent state
  * of their own.
  */ function useDataTableColumns(props) {
-    const { columnKeys = EMPTY_STRINGS, columnOrder: columnOrderProp, defaultColumnOrder, onColumnOrderChange, hiddenColumnKeys: hiddenProp, defaultHiddenColumnKeys = EMPTY_STRINGS, onHiddenColumnKeysChange, columnWidths: widthsProp, defaultColumnWidths = EMPTY_RECORD, onColumnWidthsChange, columnLabels: labelsProp, defaultColumnLabels = EMPTY_RECORD, onColumnLabelsChange } = props;
+    const { columnKeys = EMPTY_STRINGS, columnOrder: columnOrderProp, defaultColumnOrder, onColumnOrderChange, hiddenColumnKeys: hiddenProp, defaultHiddenColumnKeys = EMPTY_STRINGS, onHiddenColumnKeysChange, columnWidths: widthsProp, defaultColumnWidths = EMPTY_RECORD, onColumnWidthsChange, columnLabels: labelsProp, defaultColumnLabels = EMPTY_RECORD, onColumnLabelsChange, pinnedColumnKeys: pinnedProp, defaultPinnedColumnKeys = EMPTY_STRINGS, onPinnedColumnKeysChange } = props;
     const [rawOrder, setRawOrder] = useControllableState$1({
         prop: columnOrderProp,
         defaultProp: defaultColumnOrder ?? columnKeys,
@@ -944,6 +1048,36 @@ const EMPTY_RECORD = {};
         columnOrder,
         hiddenSet
     ]);
+    const [rawPinnedColumnKeys, setRawPinnedColumnKeys] = useControllableState$1({
+        prop: pinnedProp,
+        defaultProp: defaultPinnedColumnKeys,
+        onChange: onPinnedColumnKeysChange
+    });
+    // Reconciled against `columnKeys` every render, the same way `columnOrder` is above --
+    // a controlled `pinnedColumnKeys` a consumer persisted (e.g. a saved view) before a
+    // column was removed from `columns` must not keep pinning a ghost key.
+    const pinnedColumnKeys = useMemo(()=>reconcilePinnedColumns(rawPinnedColumnKeys ?? EMPTY_STRINGS, columnKeys), [
+        rawPinnedColumnKeys,
+        columnKeys
+    ]);
+    const pinnedSet = useMemo(()=>new Set(pinnedColumnKeys), [
+        pinnedColumnKeys
+    ]);
+    const isColumnPinned = useCallback((key)=>pinnedSet.has(key), [
+        pinnedSet
+    ]);
+    const pinColumn = useCallback((key)=>setRawPinnedColumnKeys((current = EMPTY_STRINGS)=>current.includes(key) ? current : [
+                ...current,
+                key
+            ]), [
+        setRawPinnedColumnKeys
+    ]);
+    const unpinColumn = useCallback((key)=>setRawPinnedColumnKeys((current = EMPTY_STRINGS)=>current.filter((existing)=>existing !== key)), [
+        setRawPinnedColumnKeys
+    ]);
+    const togglePinColumn = useCallback((key)=>setRawPinnedColumnKeys((current = EMPTY_STRINGS)=>togglePinnedColumn(current, key)), [
+        setRawPinnedColumnKeys
+    ]);
     const isColumnHidden = useCallback((key)=>hiddenSet.has(key), [
         hiddenSet
     ]);
@@ -988,22 +1122,30 @@ const EMPTY_RECORD = {};
         columnKeys
     ]);
     // -- drag-to-reorder ---------------------------------------------------------------
-    // Live state only (which column is currently being dragged) -- the styled layer
-    // drives it by calling `dragOverColumn` as the pointer crosses OTHER header cells
-    // (via `document.elementFromPoint`, since a captured pointer stops native
-    // `pointerenter` from firing on siblings), which reorders immediately rather than
-    // waiting for a drop. That is exactly what Attio's own header drag does (the column
-    // being passed visibly swaps live), and it means `endColumnDrag` never has to also
-    // commit a move -- there is nothing left to commit.
+    // Live state only (which column is currently being dragged) -- the styled layer's
+    // header cells are natively `draggable`, so `dragOverColumn` is driven straight off
+    // each cell's own `onDragOver` (one real browser event per column the pointer
+    // crosses), which reorders immediately rather than waiting for a drop. That is
+    // exactly what Attio's own header drag does (the column being passed visibly swaps
+    // live), and it means `endColumnDrag` never has to also commit a move -- there is
+    // nothing left to commit.
     const [draggingColumnKey, setDraggingColumnKey] = useState(null);
     const beginColumnDrag = useCallback((key)=>setDraggingColumnKey(key), []);
+    // Reads `draggingColumnKey` straight from this render's own closure rather than via
+    // `setDraggingColumnKey`'s functional-updater form (an earlier version of this hook
+    // nested the `reorderColumn` call inside that updater, to read a "live" value --
+    // `draggingColumnKey` never actually CHANGES during a drag, so that state update was
+    // pure ceremony, and nesting one hook's setState inside another's updater callback is
+    // exactly what silently dropped the reorder in DataTable.columns.test.tsx's own
+    // end-to-end drag test: a REAL `dragover` DOM event fired, `dragOverColumn` fired with
+    // the right key, but `columnOrder` never actually moved). Each `onDragOver` is its own
+    // discrete browser event (not a tight synchronous loop within one render), so a plain
+    // closure read is exactly as live as the updater trick was trying to be.
     const dragOverColumn = useCallback((hoverKey)=>{
-        setDraggingColumnKey((current)=>{
-            if (!current || current === hoverKey) return current;
-            reorderColumn(current, hoverKey);
-            return current;
-        });
+        if (!draggingColumnKey || draggingColumnKey === hoverKey) return;
+        reorderColumn(draggingColumnKey, hoverKey);
     }, [
+        draggingColumnKey,
         reorderColumn
     ]);
     const endColumnDrag = useCallback(()=>setDraggingColumnKey(null), []);
@@ -1039,10 +1181,15 @@ const EMPTY_RECORD = {};
         hiddenColumnKeys,
         columnWidths,
         columnLabels,
+        pinnedColumnKeys,
         isColumnHidden,
         hideColumn,
         showColumn,
         toggleColumnVisibility,
+        isColumnPinned,
+        pinColumn,
+        unpinColumn,
+        togglePinColumn,
         getColumnLabel,
         renameColumn,
         getColumnWidth,
@@ -1691,7 +1838,7 @@ function useDataTableRowContext({ strict = true } = {}) {
     return context;
 }
 const DataTableRoot = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { sort, defaultSort, onSortChange, rowIds, selectable, selectedIds, defaultSelectedIds, onSelectionChange, query, defaultQuery, onQueryChange, toolbarSorts, defaultToolbarSorts, onToolbarSortsChange, toolbarFilters, defaultToolbarFilters, onToolbarFiltersChange, columnKeys, columnOrder, defaultColumnOrder, onColumnOrderChange, hiddenColumnKeys, defaultHiddenColumnKeys, onHiddenColumnKeysChange, columnWidths, defaultColumnWidths, onColumnWidthsChange, columnLabels, defaultColumnLabels, onColumnLabelsChange, columnCalcOps, defaultColumnCalcOps, onColumnCalcOpsChange, onEdit, onLoadMore, hasMore, loadingMore, ...otherProps } = props;
+    const { sort, defaultSort, onSortChange, rowIds, selectable, selectedIds, defaultSelectedIds, onSelectionChange, query, defaultQuery, onQueryChange, toolbarSorts, defaultToolbarSorts, onToolbarSortsChange, toolbarFilters, defaultToolbarFilters, onToolbarFiltersChange, columnKeys, columnOrder, defaultColumnOrder, onColumnOrderChange, hiddenColumnKeys, defaultHiddenColumnKeys, onHiddenColumnKeysChange, columnWidths, defaultColumnWidths, onColumnWidthsChange, columnLabels, defaultColumnLabels, onColumnLabelsChange, pinnedColumnKeys, defaultPinnedColumnKeys, onPinnedColumnKeysChange, columnCalcOps, defaultColumnCalcOps, onColumnCalcOpsChange, onEdit, onLoadMore, hasMore, loadingMore, ...otherProps } = props;
     const api = useDataTable({
         sort,
         defaultSort,
@@ -1723,6 +1870,9 @@ const DataTableRoot = /*#__PURE__*/ forwardRef((props, ref)=>{
         columnLabels,
         defaultColumnLabels,
         onColumnLabelsChange,
+        pinnedColumnKeys,
+        defaultPinnedColumnKeys,
+        onPinnedColumnKeysChange,
         columnCalcOps,
         defaultColumnCalcOps,
         onColumnCalcOpsChange,
@@ -1810,6 +1960,132 @@ const DataTableCell$1 = /*#__PURE__*/ forwardRef((props, ref)=>{
 });
 DataTableCell$1.displayName = "DataTableCell";
 
+const EMPTY_VIEWS = [];
+function readStoredViews(storageKey) {
+    if (!storageKey || typeof window === "undefined") return EMPTY_VIEWS;
+    try {
+        return deserializeDataTableViews(window.localStorage.getItem(storageKey));
+    } catch  {
+        // A private-browsing tab / blocked storage throws on access, not just on quota --
+        // this hook degrades to in-memory-only rather than crash the table over it.
+        return EMPTY_VIEWS;
+    }
+}
+/** A reasonably unique id for a newly created view -- `crypto.randomUUID` where it
+ *  exists (every real browser + modern Node), a plain timestamp+random fallback
+ *  otherwise (older jsdom/test environments) so this hook never throws just because a
+ *  test runner's `crypto` is a stub. */ function generateViewId() {
+    if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+        return crypto.randomUUID();
+    }
+    return `view-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+}
+/**
+ * Owns the saved-views LIST (create/rename/delete/select) and its default persistence
+ * (localStorage, pluggable away by controlling `views`/`onViewsChange` instead) -- the
+ * same controllable shape every other DataTable state hook already uses
+ * (`useDataTableColumns`, `useDataTableToolbarSort`, ...). Read `DataTableViewsControl`
+ * (`views.tsx`, the styled layer) for how a consumer wires `captureState`/`applyState`
+ * around this to actually save/restore column + sort + filter state.
+ */ function useDataTableViews(props) {
+    const { views: viewsProp, defaultViews = EMPTY_VIEWS, onViewsChange, activeViewId: activeViewIdProp, defaultActiveViewId = null, onActiveViewIdChange, storageKey } = props;
+    // Lazy, ONE-TIME read of localStorage as this render's default -- re-reading it on
+    // every render (rather than a lazy ref) would clobber whatever the user just did in
+    // THIS tab with whatever another tab most recently wrote. Only fires at all when this
+    // hook truly owns persistence: `views` is uncontrolled AND a `storageKey` was given.
+    const initialViewsRef = useRef(null);
+    if (initialViewsRef.current === null) {
+        if (viewsProp !== undefined) {
+            initialViewsRef.current = defaultViews;
+        } else {
+            const stored = readStoredViews(storageKey);
+            // Nothing in storage yet (first run, or no `storageKey` at all) -- seed from
+            // `defaultViews` instead of an empty list, matching every other hook's own
+            // `defaultProp` semantics.
+            initialViewsRef.current = stored.length > 0 ? stored : defaultViews;
+        }
+    }
+    const [views = EMPTY_VIEWS, setViews] = useControllableState$1({
+        prop: viewsProp,
+        defaultProp: initialViewsRef.current,
+        onChange: onViewsChange
+    });
+    // Persists every change back to `storageKey` -- same "only when this hook owns
+    // persistence" gate as the lazy read above. Skips the FIRST render (the effect would
+    // otherwise immediately re-write back the exact bytes it just read, or stomp an
+    // empty default over a controlled consumer's storage before it ever mounts).
+    const skipFirstPersistRef = useRef(true);
+    useEffect(()=>{
+        if (viewsProp !== undefined || !storageKey || typeof window === "undefined") return;
+        if (skipFirstPersistRef.current) {
+            skipFirstPersistRef.current = false;
+            return;
+        }
+        try {
+            window.localStorage.setItem(storageKey, serializeDataTableViews(views));
+        } catch  {
+        // Storage full/blocked -- the view still exists in memory for this session.
+        }
+    }, [
+        views,
+        viewsProp,
+        storageKey
+    ]);
+    const [activeViewId = null, setActiveViewId] = useControllableState$1({
+        prop: activeViewIdProp,
+        defaultProp: defaultActiveViewId,
+        onChange: onActiveViewIdChange
+    });
+    const activeView = views.find((view)=>view.id === activeViewId) ?? null;
+    const createView = useCallback((name, state)=>{
+        const id = generateViewId();
+        setViews((current = EMPTY_VIEWS)=>upsertDataTableView(current, {
+                id,
+                name,
+                state
+            }));
+        setActiveViewId(id);
+        return id;
+    }, [
+        setViews,
+        setActiveViewId
+    ]);
+    const updateView = useCallback((id, state)=>{
+        setViews((current = EMPTY_VIEWS)=>{
+            const existing = current.find((view)=>view.id === id);
+            return existing ? upsertDataTableView(current, {
+                ...existing,
+                state
+            }) : current;
+        });
+    }, [
+        setViews
+    ]);
+    const renameView = useCallback((id, name)=>setViews((current = EMPTY_VIEWS)=>renameDataTableView(current, id, name)), [
+        setViews
+    ]);
+    const deleteView = useCallback((id)=>{
+        setViews((current = EMPTY_VIEWS)=>removeDataTableView(current, id));
+        setActiveViewId((current)=>current === id ? null : current);
+    }, [
+        setViews,
+        setActiveViewId
+    ]);
+    const selectView = useCallback((id)=>setActiveViewId(id), [
+        setActiveViewId
+    ]);
+    return {
+        views,
+        activeViewId,
+        activeView,
+        createView,
+        updateView,
+        renameView,
+        deleteView,
+        selectView
+    };
+}
+
 function r(e) {
     var t, f, n = "";
     if ("string" == typeof e || "number" == typeof e) n += e;
@@ -2335,76 +2611,121 @@ function RatingCell({ value, maxRating = 5 }) {
     });
 }
 
-/** The subset of `useDataTableContext()` every "resolve which columns to actually
- *  render, in what order, under what label/width" helper below needs -- narrowed so
- *  each helper's own signature documents exactly what it reads, rather than the whole
- *  table API. */ function useEffectiveColumns(columns) {
-    const { visibleColumnOrder, getColumnLabel, getColumnWidth } = useDataTableContext();
+/** Fallback width (px) used to compute a pinned column's cumulative sticky offset when
+ *  it has no explicit `width` and hasn't been drag-resized -- pinning needs a STATIC
+ *  number to put in an inline `insetInlineStart`, and `table-layout: fixed` only
+ *  decides how an unset column's share of the leftover width actually renders at paint
+ *  time (something no amount of JS math here can know ahead of it). Matches
+ *  `clampColumnWidth`'s own floor (react-headless's `dom.ts`) -- a real pinned column
+ *  narrower than this only needs its offset "wide enough not to overlap", not exact. */ const DEFAULT_PINNED_COLUMN_WIDTH = 180;
+/**
+ * Every column this table actually renders, in RENDER order: any pinned columns first
+ * (their own relative order preserved from `visibleColumnOrder`, not a separate pin-
+ * order of their own), then everything else in normal order -- resolved label/width,
+ * and this file's own sticky-left bookkeeping (`pinned`/`pinOffset`/`pinnedEdge`). Read
+ * by the header, the body, the ColumnCalc footer AND the `<colgroup>` alike -- all four
+ * must agree on this exact order, since a `<colgroup>`'s `<col>`s are matched
+ * POSITIONALLY to every row's cells; splitting "order" (here) from "which one is
+ * pinned" into two independently-ordered helpers would let a `<colgroup>` built from
+ * one and a header row built from the other drift out of sync under `table-layout:
+ * fixed`'s own column-to-cell matching.
+ */ function useEffectiveColumns(columns, options) {
+    const { visibleColumnOrder, getColumnLabel, getColumnWidth, pinnedColumnKeys } = useDataTableContext();
+    const { selectable, stickyFirst } = options;
     return React.useMemo(()=>{
         const byKey = new Map(columns.map((column)=>[
                 column.key,
                 column
             ]));
-        return visibleColumnOrder.map((key)=>byKey.get(key)).filter((column)=>Boolean(column)).map((column)=>({
+        const visibleKeySet = new Set(visibleColumnOrder);
+        const explicitPins = new Set((pinnedColumnKeys ?? []).filter((key)=>byKey.has(key) && visibleKeySet.has(key)));
+        // Legacy fallback (DataTable.columns.test.tsx's own `stickyFirst` tests, predating
+        // per-column pin): no EXPLICIT pin at all, `stickyFirst` pins exactly the first
+        // visible column -- the single-column behavior this file now generalizes to a
+        // whole pinned GROUP.
+        const pinnedSet = explicitPins.size > 0 ? explicitPins : stickyFirst && visibleColumnOrder.length > 0 ? new Set([
+            visibleColumnOrder[0]
+        ]) : explicitPins;
+        // Stable partition: pinned columns first (their relative order among THEMSELVES
+        // preserved from `visibleColumnOrder`), then every other column, also in its
+        // existing relative order. `Array.prototype.sort` is spec-stable (ES2019+).
+        const ordered = [
+            ...visibleColumnOrder
+        ].sort((a, b)=>{
+            const aPinned = pinnedSet.has(a) ? 0 : 1;
+            const bPinned = pinnedSet.has(b) ? 0 : 1;
+            return aPinned - bPinned;
+        });
+        let cursor = selectable ? 40 : 0;
+        let pinnedCount = 0;
+        const entries = ordered.map((key)=>byKey.get(key)).filter((column)=>Boolean(column)).map((column)=>{
+            const width = getColumnWidth(column.key) ?? column.width;
+            const pinned = pinnedSet.has(column.key);
+            const pinOffset = pinned ? cursor : 0;
+            if (pinned) {
+                cursor += width ?? DEFAULT_PINNED_COLUMN_WIDTH;
+                pinnedCount += 1;
+            }
+            return {
                 column,
                 label: getColumnLabel(column.key, column.header),
-                width: getColumnWidth(column.key) ?? column.width
-            }));
+                width,
+                pinned,
+                pinOffset,
+                pinnedEdge: false
+            };
+        });
+        if (pinnedCount > 0) entries[pinnedCount - 1].pinnedEdge = true;
+        return entries;
     }, [
         columns,
         visibleColumnOrder,
         getColumnLabel,
-        getColumnWidth
-    ]);
-}
-/** Sticky positioning for the leading/trailing visible cell of a row (header, body, or
- *  footer) -- `stickyFirst` pins the SELECTION cell when the table has one, plus the
- *  first data column; `stickyLast` always pins the last VISIBLE data column. Only the
- *  OUTERMOST sticky cell on each side gets `data-sticky-edge(-end)` -- that's the one
- *  whose shadow should reveal on scroll, not every sticky cell.
- *
- *  When both a selection column and a sticky first data column are present, the edge
- *  is the data column (e.g. Company), not the 40px selection cell: the data column is
- *  ALSO `position: sticky`, sitting immediately to its right, so a shadow cast from the
- *  selection cell's trailing edge would render directly underneath that opaque sticky
- *  cell and never actually be visible. Putting `data-sticky-edge` on the trailing-most
- *  sticky-left cell is what makes the shadow render somewhere unobstructed -- past the
- *  whole pinned group, not between two members of it. */ function stickyProps(options) {
-    const { selectable, stickyFirst, stickyLast, isSelectionCell, isFirst, isLast } = options;
-    if (stickyFirst && isSelectionCell) {
-        // Still sticky either way. The edge marker only belongs here when there is no
-        // sticky first DATA column to hand it to instead (i.e. no columns at all) --
-        // otherwise that data column is the true trailing edge of the pinned group.
-        return selectable ? {
-            "data-sticky": "",
-            style: {
-                insetInlineStart: 0
-            }
-        } : {
-            "data-sticky": "",
-            "data-sticky-edge": "",
-            style: {
-                insetInlineStart: 0
-            }
-        };
-    }
-    if (stickyFirst && isFirst && !selectable) {
-        return {
-            "data-sticky": "",
-            "data-sticky-edge": "",
-            style: {
-                insetInlineStart: 0
-            }
-        };
-    }
-    if (stickyFirst && isFirst && selectable) {
-        // The trailing edge of the pinned group -- past the 40px selection cell, so this
-        // is where the scroll shadow actually renders unobstructed.
+        getColumnWidth,
+        pinnedColumnKeys,
+        selectable,
+        stickyFirst
+    ]);
+}
+/** The 40px selection column's own sticky-left state -- `stickyFirst` (the table-wide
+ *  prop) alone undercounts "should the checkbox column stick" the moment ANY per-column
+ *  pin is live, controlled or not, since the live pinned SET only exists once
+ *  `DataTablePrimitiveRoot`'s provider has mounted (an uncontrolled consumer never
+ *  hands its pinned columns back up as a prop for `DataTable.tsx` to read directly).
+ *  Mirrors `DataTable.tsx`'s own `resolvedStickyLast = stickyLast ||
+ *  columns.some(actions)` widening, just resolved one level down (live STATE, not
+ *  static column config) -- read via context from a component under the provider, not
+ *  computed above it. */ function useSelectionStickyFirst(stickyFirst) {
+    const { pinnedColumnKeys } = useDataTableContext();
+    return stickyFirst || (pinnedColumnKeys?.length ?? 0) > 0;
+}
+/** Sticky positioning for the 40px SELECTION cell only (header/body/footer) -- data
+ *  columns use their own `pinned`/`pinOffset`/`pinnedEdge` (`useEffectiveColumns`,
+ *  above) instead, via `pinnedCellProps` below. The selection cell is always the
+ *  leading edge of the pinned-left group when it's sticky at all, so it never itself
+ *  carries `data-sticky-edge` -- the trailing-most pinned DATA column does (its own
+ *  `pinnedEdge`), the same split the original single-column `stickyFirst` already drew
+ *  between the selection cell and Company/Name. */ function selectionStickyProps(stickyFirst) {
+    return stickyFirst ? {
+        "data-sticky": "",
+        style: {
+            insetInlineStart: 0
+        }
+    } : {};
+}
+/** Sticky positioning for one DATA cell (header, body, or ColumnCalc footer) -- pinned-
+ *  left (this column's own `pinOffset`, `data-sticky-edge` only on the group's
+ *  trailing-most member) takes priority over sticky-right (`stickyLast`, always just
+ *  the last VISIBLE column, e.g. an `actions` column) since a column can only stick to
+ *  one edge. */ function pinnedCellProps(entry, stickyLast, isLast) {
+    if (entry.pinned) {
         return {
             "data-sticky": "",
-            "data-sticky-edge": "",
+            ...entry.pinnedEdge ? {
+                "data-sticky-edge": ""
+            } : {},
             style: {
-                insetInlineStart: 40
+                insetInlineStart: entry.pinOffset
             }
         };
     }
@@ -3452,20 +3773,16 @@ function RatingEditor({ column, value, pending, onCommit }) {
     return column.editor === "switch" || column.type === "rating" || column.type === "checkbox";
 }
 function ColumnBodyCells({ columns, row, classNames, locale, selectable, stickyFirst, stickyLast }) {
-    const effective = useEffectiveColumns(columns);
+    const effective = useEffectiveColumns(columns, {
+        selectable,
+        stickyFirst
+    });
     const { startEdit } = useDataTableContext();
     return /*#__PURE__*/ jsx(Fragment, {
-        children: effective.map(({ column }, index)=>{
-            const isFirst = index === 0;
+        children: effective.map((entry, index)=>{
+            const { column } = entry;
             const isLast = index === effective.length - 1;
-            const sticky = stickyProps({
-                selectable,
-                stickyFirst,
-                stickyLast,
-                isSelectionCell: false,
-                isFirst,
-                isLast
-            });
+            const sticky = pinnedCellProps(entry, stickyLast, isLast);
             // A gated `editable` column (everything except the always-live widgets)
             // opens on double-click -- Attio's own measured gesture (crisp's #411),
             // matched here rather than a single click, which stays "select this cell"
@@ -3701,19 +4018,15 @@ const MenuItemLabel = withItemContext(withItemStateProps(Primitive.span), "label
 withItemContext(withItemStateProps(Primitive.span), "description");
 
 function ColumnCalcCells({ columns, rows, selectable, stickyFirst, stickyLast }) {
-    const effective = useEffectiveColumns(columns);
+    const effective = useEffectiveColumns(columns, {
+        selectable,
+        stickyFirst
+    });
     return /*#__PURE__*/ jsx(Fragment, {
-        children: effective.map(({ column }, index)=>{
-            const isFirst = index === 0;
+        children: effective.map((entry, index)=>{
+            const { column } = entry;
             const isLast = index === effective.length - 1;
-            const sticky = stickyProps({
-                selectable,
-                stickyFirst,
-                stickyLast,
-                isSelectionCell: false,
-                isFirst,
-                isLast
-            });
+            const sticky = pinnedCellProps(entry, stickyLast, isLast);
             return /*#__PURE__*/ jsx(DataTableFooterCell, {
                 "data-sticky": sticky["data-sticky"],
                 "data-sticky-edge": sticky["data-sticky-edge"],
@@ -3897,20 +4210,16 @@ const DEFAULT_SORT_ICON = {
  *  `visibleColumnOrder`/labels/widths change, without also re-deriving `sortedData`'s
  *  render above it. */ function ColumnHeaderCells({ columns, columnMenu, reorderable, resizable, sortIcon, selectable, stickyFirst, stickyLast }) {
     const { draggingColumnKey, beginColumnDrag, dragOverColumn, endColumnDrag } = useDataTableContext();
-    const effective = useEffectiveColumns(columns);
+    const effective = useEffectiveColumns(columns, {
+        selectable,
+        stickyFirst
+    });
     const [renamingKey, setRenamingKey] = React.useState(null);
     return /*#__PURE__*/ jsx(Fragment, {
-        children: effective.map(({ column, label, width }, index)=>{
-            const isFirst = index === 0;
+        children: effective.map((entry, index)=>{
+            const { column, label, width } = entry;
             const isLast = index === effective.length - 1;
-            const sticky = stickyProps({
-                selectable,
-                stickyFirst,
-                stickyLast,
-                isSelectionCell: false,
-                isFirst,
-                isLast
-            });
+            const sticky = pinnedCellProps(entry, stickyLast, isLast);
             return /*#__PURE__*/ jsxs(DataTableHeaderCell, {
                 columnKey: column.key,
                 sortable: column.sortable,
@@ -4040,8 +4349,9 @@ function ColumnRenameInput({ column, initialLabel, onDone }) {
  *  permanently, so this one carries its own marker attribute distinct from that
  *  slot's OTHER occupants (the sort chevron, the filter trigger), which stay visible
  *  under their own separate rules regardless of hover. */ function ColumnMenu({ column, onRename }) {
-    const { moveColumn, hideColumn } = useDataTableContext();
+    const { moveColumn, hideColumn, isColumnPinned, togglePinColumn } = useDataTableContext();
     const columnLabel = typeof column.header === "string" ? column.header : column.key;
+    const pinned = isColumnPinned(column.key);
     const stopPropagation = (event)=>event.stopPropagation();
     return /*#__PURE__*/ jsxs(MenuRoot, {
         children: [
@@ -4083,6 +4393,12 @@ function ColumnRenameInput({ column, initialLabel, onDone }) {
                                     children: "Move right"
                                 })
                             }),
+                            /*#__PURE__*/ jsx(MenuItem, {
+                                onClick: ()=>togglePinColumn(column.key),
+                                children: /*#__PURE__*/ jsx(MenuItemLabel, {
+                                    children: pinned ? "Unpin column" : "Pin column"
+                                })
+                            }),
                             /*#__PURE__*/ jsx(MenuItem, {
                                 onClick: ()=>hideColumn(column.key),
                                 children: /*#__PURE__*/ jsx(MenuItemLabel, {
@@ -9303,7 +9619,7 @@ const fromDatePickerDate = (d)=>new Date(d.year, d.month - 1, d.day);
                                                 "aria-label": "Move sort up",
                                                 disabled: index === 0,
                                                 onClick: ()=>moveToolbarSort(index, index - 1),
-                                                style: iconButtonStyle,
+                                                style: iconButtonStyle$1,
                                                 children: /*#__PURE__*/ jsx(IconArrowUpLine_default, {
                                                     size: 13,
                                                     strokeWidth: 1.75
@@ -9314,7 +9630,7 @@ const fromDatePickerDate = (d)=>new Date(d.year, d.month - 1, d.day);
                                                 "aria-label": "Move sort down",
                                                 disabled: index === toolbarSorts.length - 1,
                                                 onClick: ()=>moveToolbarSort(index, index + 1),
-                                                style: iconButtonStyle,
+                                                style: iconButtonStyle$1,
                                                 children: /*#__PURE__*/ jsx(IconArrowDownLine_default, {
                                                     size: 13,
                                                     strokeWidth: 1.75
@@ -9324,7 +9640,7 @@ const fromDatePickerDate = (d)=>new Date(d.year, d.month - 1, d.day);
                                                 type: "button",
                                                 "aria-label": "Remove sort",
                                                 onClick: ()=>removeToolbarSort(index),
-                                                style: iconButtonStyle,
+                                                style: iconButtonStyle$1,
                                                 children: /*#__PURE__*/ jsx(IconXmarkLine_default, {
                                                     size: 13,
                                                     strokeWidth: 1.75
@@ -9339,7 +9655,7 @@ const fromDatePickerDate = (d)=>new Date(d.year, d.month - 1, d.day);
                                     disabled: availableColumns.length === 0,
                                     onClick: ()=>availableColumns[0] && addToolbarSort(availableColumns[0].key),
                                     style: {
-                                        ...iconButtonStyle,
+                                        ...iconButtonStyle$1,
                                         width: "auto",
                                         gap: 6,
                                         padding: "6px 8px",
@@ -9361,7 +9677,7 @@ const fromDatePickerDate = (d)=>new Date(d.year, d.month - 1, d.day);
         ]
     });
 }
-const iconButtonStyle = {
+const iconButtonStyle$1 = {
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
@@ -9459,7 +9775,7 @@ const formatFilterDate = (iso)=>{
                         type: "button",
                         "aria-label": `Remove ${column ? columnLabel(column) : filter.key} filter`,
                         onClick: ()=>removeToolbarFilter(filter.id),
-                        style: iconButtonStyle,
+                        style: iconButtonStyle$1,
                         children: /*#__PURE__*/ jsx(IconXmarkLine_default, {
                             size: 12,
                             strokeWidth: 1.75
@@ -9716,7 +10032,7 @@ const formatFilterDate = (iso)=>{
                                     type: "button",
                                     onClick: ()=>setPickingField(true),
                                     style: {
-                                        ...iconButtonStyle,
+                                        ...iconButtonStyle$1,
                                         width: "auto",
                                         gap: 6,
                                         padding: "6px 8px",
@@ -9801,7 +10117,7 @@ function RowCount({ shown, total, countLabel }) {
 }
 
 function DataTableInner(props, ref) {
-    const { columns, data, surface, className, locale = "en-US", sort, defaultSort, onSortChange, sortIcon, selectable, selectedIds, defaultSelectedIds, onSelectionChange, selectAllLabel = "Select all rows", getRowSelectionLabel = ()=>"Select row", selectionCheckedIcon, selectionIndeterminateIcon, query, defaultQuery, onQueryChange, searchPlaceholder = "Search…", searchLabel = "Search table", toolbarSorts, defaultToolbarSorts, onToolbarSortsChange, toolbarFilters, defaultToolbarFilters, onToolbarFiltersChange, showCount = true, countLabel, toolbarActions, columnMenu = false, reorderable = true, resizable = true, columnOrder, defaultColumnOrder, onColumnOrderChange, hiddenColumnKeys, defaultHiddenColumnKeys, onHiddenColumnKeysChange, columnWidths, defaultColumnWidths, onColumnWidthsChange, columnLabels, defaultColumnLabels, onColumnLabelsChange, onColumnsChange, columnCalcOps, defaultColumnCalcOps, onColumnCalcOpsChange, stickyFirst = false, stickyLast = false, onEdit, interactive = false, onRowClick, onAddRow, addRowLabel = "New record", loading = false, loadingLabel = "Loading...", error, empty = "No results.", onLoadMore, hasMore, loadingMore, scrollProps, ...restProps } = props;
+    const { columns, data, surface, className, locale = "en-US", sort, defaultSort, onSortChange, sortIcon, selectable, selectedIds, defaultSelectedIds, onSelectionChange, selectAllLabel = "Select all rows", getRowSelectionLabel = ()=>"Select row", selectionCheckedIcon, selectionIndeterminateIcon, query, defaultQuery, onQueryChange, searchPlaceholder = "Search…", searchLabel = "Search table", toolbarSorts, defaultToolbarSorts, onToolbarSortsChange, toolbarFilters, defaultToolbarFilters, onToolbarFiltersChange, showCount = true, countLabel, toolbarActions, columnMenu = false, reorderable = true, resizable = true, columnOrder, defaultColumnOrder, onColumnOrderChange, hiddenColumnKeys, defaultHiddenColumnKeys, onHiddenColumnKeysChange, columnWidths, defaultColumnWidths, onColumnWidthsChange, columnLabels, defaultColumnLabels, onColumnLabelsChange, pinnedColumnKeys, defaultPinnedColumnKeys, onPinnedColumnKeysChange, onColumnsChange, columnCalcOps, defaultColumnCalcOps, onColumnCalcOpsChange, stickyFirst = false, stickyLast = false, onEdit, interactive = false, onRowClick, onAddRow, addRowLabel = "New record", loading = false, loadingLabel = "Loading...", error, empty = "No results.", onLoadMore, hasMore, loadingMore, scrollProps, ...restProps } = props;
     const classNames = dataTable({
         surface,
         interactive
@@ -9937,6 +10253,9 @@ function DataTableInner(props, ref) {
             columnLabels: columnLabels,
             defaultColumnLabels: defaultColumnLabels,
             onColumnLabelsChange: onColumnLabelsChange,
+            pinnedColumnKeys: pinnedColumnKeys,
+            defaultPinnedColumnKeys: defaultPinnedColumnKeys,
+            onPinnedColumnKeysChange: onPinnedColumnKeysChange,
             columnCalcOps: columnCalcOps,
             defaultColumnCalcOps: defaultColumnCalcOps,
             onColumnCalcOpsChange: onColumnCalcOpsChange,
@@ -9980,19 +10299,13 @@ function DataTableInner(props, ref) {
                         children: [
                             /*#__PURE__*/ jsx(DataTableColGroup, {
                                 columns: columns,
-                                selectable: !!selectable
+                                selectable: !!selectable,
+                                stickyFirst: stickyFirst
                             }),
                             /*#__PURE__*/ jsxs(DataTableHeader, {
                                 children: [
-                                    selectable && /*#__PURE__*/ jsx(DataTableSelectionHeaderCell, {
-                                        ...stickyProps({
-                                            selectable,
-                                            stickyFirst,
-                                            stickyLast: resolvedStickyLast,
-                                            isSelectionCell: true,
-                                            isFirst: false,
-                                            isLast: false
-                                        }),
+                                    selectable && /*#__PURE__*/ jsx(SelectionHeaderCell, {
+                                        stickyFirst: stickyFirst,
                                         children: /*#__PURE__*/ jsx(SelectAllCheckbox, {
                                             label: selectAllLabel,
                                             checkedIcon: selectionCheckedIcon ?? DEFAULT_CHECKED_ICON,
@@ -10043,7 +10356,7 @@ function DataTableInner(props, ref) {
                                                 "data-clickable": onRowClick ? "" : undefined,
                                                 onClick: onRowClick ? ()=>onRowClick(row) : undefined,
                                                 children: [
-                                                    selectable && /*#__PURE__*/ jsx(DataTableSelectionCell, {
+                                                    selectable && /*#__PURE__*/ jsx(SelectionCell, {
                                                         // The row itself carries `onClick={onRowClick}` above, and a
                                                         // native click on this cell's checkbox bubbles up through it
                                                         // (React attaches DataTableRow's handler on the <tr>, which
@@ -10051,14 +10364,7 @@ function DataTableInner(props, ref) {
                                                         // it from at -- so this has to live here, not in the consumer).
                                                         // Without this, checking a row's box also fires `onRowClick`.
                                                         onClick: (event)=>event.stopPropagation(),
-                                                        ...stickyProps({
-                                                            selectable,
-                                                            stickyFirst,
-                                                            stickyLast: resolvedStickyLast,
-                                                            isSelectionCell: true,
-                                                            isFirst: false,
-                                                            isLast: false
-                                                        }),
+                                                        stickyFirst: stickyFirst,
                                                         children: /*#__PURE__*/ jsx(RowCheckbox, {
                                                             label: getRowSelectionLabel(row),
                                                             checkedIcon: selectionCheckedIcon ?? DEFAULT_CHECKED_ICON
@@ -10090,15 +10396,8 @@ function DataTableInner(props, ref) {
                                     // is what makes every row's selection column line up now, not a matching
                                     // per-slot width formula, so there is no more reason for this cell to
                                     // borrow a different slot than its footer siblings.
-                                    /*#__PURE__*/ jsx(DataTableFooterCell, {
-                                        ...stickyProps({
-                                            selectable,
-                                            stickyFirst,
-                                            stickyLast: resolvedStickyLast,
-                                            isSelectionCell: true,
-                                            isFirst: false,
-                                            isLast: false
-                                        })
+                                    /*#__PURE__*/ jsx(SelectionFooterCell, {
+                                        stickyFirst: stickyFirst
                                     }),
                                     /*#__PURE__*/ jsx(ColumnCalcCells, {
                                         columns: columns,
@@ -10134,7 +10433,16 @@ DataTableInner.displayName = "DataTable";
  *  `DataTableInner`) purely so it can call `useDataTableContext()` -- that context is
  *  provided by the `DataTablePrimitiveRoot` this renders as a SIBLING of, one level
  *  up from where `DataTableInner` itself sits. */ function ColumnsChangeEffect({ columns, onColumnsChange }) {
-    const effective = useEffectiveColumns(columns);
+    // `selectable`/`stickyFirst` are both `false` here on purpose: this convenience blob
+    // never renders a row of its own, so it needs neither the +40px selection offset nor
+    // `stickyFirst`'s legacy "no explicit pin -> pin the first visible column" fallback.
+    // An EXPLICIT per-column pin (`pinnedColumnKeys`) still reorders this list the same
+    // way it reorders every rendered row -- this callback reports "what's showing now",
+    // and a pinned column showing first IS what's showing now.
+    const effective = useEffectiveColumns(columns, {
+        selectable: false,
+        stickyFirst: false
+    });
     // A NEW array every time `effective` itself is a new array (its own `useMemo`
     // recomputes only when order/hidden/label/width actually change) -- `header`
     // resolves to the menu's rename override (falling back to the column's own static
@@ -10169,8 +10477,16 @@ const DataTableTable = withContext$1(DataTableTable$1, "table");
  *  out of sync between the three. A column with no explicit width gets a bare `<col>`
  *  (no `style`): `table-layout: fixed`'s own algorithm gives every such column an equal
  *  share of whatever space is left, matching the old flex grid's `flex: 1 1 0%`
- *  default with no extra code needed here. */ function DataTableColGroup({ columns, selectable }) {
-    const effective = useEffectiveColumns(columns);
+ *  default with no extra code needed here. */ function DataTableColGroup({ columns, selectable, stickyFirst }) {
+    // MUST use the same pinned-first ordering every OTHER row (header/body/footer)
+    // renders in (`useEffectiveColumns`'s own doc comment) -- a `<colgroup>`'s `<col>`s
+    // are matched positionally to each row's cells, so if a pinned column visually moves
+    // to the front of the header/body but not here, every column's width applies to the
+    // WRONG cell.
+    const effective = useEffectiveColumns(columns, {
+        selectable,
+        stickyFirst
+    });
     return /*#__PURE__*/ jsxs("colgroup", {
         children: [
             selectable && /*#__PURE__*/ jsx("col", {
@@ -10256,6 +10572,32 @@ function DataTableFooter({ children, ...props }) {
     });
 }
 const DataTableFooterCell = withContext$1(Primitive.td, "footerCell");
+// The selection column's OWN sticky wrappers -- one each for header/body/footer,
+// reading the live pinned set via `useSelectionStickyFirst` (column-layout.ts) instead
+// of the `stickyFirst` PROP alone, so the checkbox column sticks the moment ANY column
+// is pinned, uncontrolled or not (see that hook's own doc comment for why this can't
+// just be computed once, above, in `DataTableInner`).
+function SelectionHeaderCell({ stickyFirst, children }) {
+    const resolvedStickyFirst = useSelectionStickyFirst(stickyFirst);
+    return /*#__PURE__*/ jsx(DataTableSelectionHeaderCell, {
+        ...selectionStickyProps(resolvedStickyFirst),
+        children: children
+    });
+}
+function SelectionCell({ stickyFirst, onClick, children }) {
+    const resolvedStickyFirst = useSelectionStickyFirst(stickyFirst);
+    return /*#__PURE__*/ jsx(DataTableSelectionCell, {
+        onClick: onClick,
+        ...selectionStickyProps(resolvedStickyFirst),
+        children: children
+    });
+}
+function SelectionFooterCell({ stickyFirst }) {
+    const resolvedStickyFirst = useSelectionStickyFirst(stickyFirst);
+    return /*#__PURE__*/ jsx(DataTableFooterCell, {
+        ...selectionStickyProps(resolvedStickyFirst)
+    });
+}
 ////////////////////////////////////////////////////////////////////////////////////
 // Fix (bug report): karrot icons default to a 24px intrinsic SVG attribute size
 // -- see column-menu.tsx's own `SORT_ICON_SIZE` comment for the full mechanism.
@@ -10311,4 +10653,274 @@ function SelectAllCheckbox({ label, checkedIcon, indeterminateIcon }) {
     });
 }
 
-export { DataTable };
+const rowStyle = {
+    display: "flex",
+    alignItems: "center",
+    gap: 4
+};
+const rowButtonStyle = {
+    flex: 1,
+    minWidth: 0,
+    textAlign: "left",
+    display: "flex",
+    alignItems: "center",
+    gap: 6,
+    padding: "6px 8px",
+    border: "none",
+    borderRadius: 6,
+    background: "transparent",
+    color: "var(--seed-color-fg-neutral)",
+    fontSize: 13,
+    cursor: "pointer",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+};
+const smallButtonStyle = {
+    flexShrink: 0,
+    border: "none",
+    borderRadius: 6,
+    background: "transparent",
+    color: "var(--seed-color-fg-neutral-subtle)",
+    fontSize: 12,
+    padding: "4px 6px",
+    cursor: "pointer"
+};
+const iconButtonStyle = {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: 22,
+    height: 22,
+    flexShrink: 0,
+    border: "none",
+    borderRadius: 6,
+    background: "transparent",
+    color: "var(--seed-color-fg-neutral-subtle)",
+    cursor: "pointer"
+};
+/**
+ * A compact saved-views switcher -- current view name (or `label`) as the trigger,
+ * a popover listing every saved view (click to switch, inline Rename/Delete), a
+ * trailing "Save as new view", and (once a view is active) "Update view" to overwrite
+ * the loaded view with the table's current state.
+ */ function DataTableViewsControl({ label = "Views", showClearRow = false, clearLabel, captureState, applyState, newViewLabel = "Save as new view", updateViewLabel = "Update view", renameLabel = "Rename", deleteLabel = "Delete", renameInputLabel = (name)=>`Rename ${name}`, ...viewsProps }) {
+    const viewsApi = useDataTableViews(viewsProps);
+    const { activeViewId, activeView } = viewsApi;
+    const triggerLabel = activeView ? activeView.name : label;
+    return /*#__PURE__*/ jsxs(MenuRoot, {
+        children: [
+            /*#__PURE__*/ jsx(MenuTrigger, {
+                asChild: true,
+                children: /*#__PURE__*/ jsxs(ActionButton, {
+                    variant: "neutralOutline",
+                    size: "xsmall",
+                    "data-active": activeViewId ? "" : undefined,
+                    children: [
+                        /*#__PURE__*/ jsx(IconArrowUpArrowDownLine_default, {
+                            size: 14,
+                            strokeWidth: 1.75
+                        }),
+                        triggerLabel,
+                        /*#__PURE__*/ jsx(IconChevronDownSmallLine_default, {
+                            size: 14,
+                            strokeWidth: 1.75
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsx(MenuPositioner, {
+                children: /*#__PURE__*/ jsx(MenuContent, {
+                    style: {
+                        minWidth: 240
+                    },
+                    children: /*#__PURE__*/ jsx(MenuScrollArea, {
+                        children: /*#__PURE__*/ jsx(ViewsMenuBody, {
+                            viewsApi: viewsApi,
+                            captureState: captureState,
+                            applyState: applyState,
+                            label: label,
+                            showClearRow: showClearRow,
+                            clearLabel: clearLabel,
+                            newViewLabel: newViewLabel,
+                            updateViewLabel: updateViewLabel,
+                            renameLabel: renameLabel,
+                            deleteLabel: deleteLabel,
+                            renameInputLabel: renameInputLabel
+                        })
+                    })
+                })
+            })
+        ]
+    });
+}
+DataTableViewsControl.displayName = "DataTableViewsControl";
+/**
+ * The popover's own body -- split out from `DataTableViewsControl` purely so it can
+ * call `useMenuContext()` (`@seed-design/react-menu`), which only resolves for a
+ * descendant of `MenuRoot`, not the component that RENDERS `MenuRoot` itself (the same
+ * reason `column-layout.ts`'s `useSelectionStickyFirst` is its own component-level
+ * hook rather than something computed in `DataTable.tsx` above its provider). Plain
+ * `<button>` rows here (not seed `MenuItem`s -- `toolbar-conditions.tsx`'s own Sort/
+ * Filter popovers make the same call) don't auto-close the menu on click the way a real
+ * `MenuItem` does, so switching/creating/updating a view calls `setOpen(false)` here
+ * explicitly; renaming and deleting deliberately do NOT close it, so a consumer can
+ * clean up more than one view without reopening the popover each time.
+ */ function ViewsMenuBody({ viewsApi, captureState, applyState, label, showClearRow, clearLabel, newViewLabel, updateViewLabel, renameLabel, deleteLabel, renameInputLabel }) {
+    const { views, activeViewId, createView, updateView, renameView, deleteView, selectView } = viewsApi;
+    const { setOpen } = useMenuContext();
+    const [renamingId, setRenamingId] = React.useState(null);
+    const [renameValue, setRenameValue] = React.useState("");
+    // Same race `column-menu.tsx`'s own inline rename input already guards against:
+    // starting a rename swaps the clicked "Rename" button for an input in the SAME
+    // MenuContent this popover's own floating-ui focus management watches, and its
+    // focus-guard spans can steal focus right back (to the content, or the trigger)
+    // one frame after mount -- BEFORE this ref flips true -- so `onBlur` ignores that
+    // one spurious blur and only commits a REAL blur (an actual click/tab away) after.
+    const renameReadyRef = React.useRef(false);
+    const renameInputRef = React.useRef(null);
+    const handleSelect = (id)=>{
+        selectView(id);
+        if (id !== null) {
+            const view = views.find((v)=>v.id === id);
+            if (view) applyState(view.state);
+        }
+        setOpen(false);
+    };
+    const handleCreate = ()=>{
+        createView(`View ${views.length + 1}`, captureState());
+        setOpen(false);
+    };
+    const handleUpdate = ()=>{
+        if (activeViewId) updateView(activeViewId, captureState());
+        setOpen(false);
+    };
+    const startRename = (view)=>{
+        renameReadyRef.current = false;
+        setRenamingId(view.id);
+        setRenameValue(view.name);
+    };
+    const commitRename = ()=>{
+        if (renamingId && renameValue.trim()) renameView(renamingId, renameValue.trim());
+        setRenamingId(null);
+    };
+    React.useEffect(()=>{
+        if (!renamingId) return;
+        // Re-grab focus (and select the text) one frame after mount, AFTER whatever
+        // floating-ui's own focus-guard restore was going to do -- see this component's
+        // own `renameReadyRef` doc comment above.
+        const frame = requestAnimationFrame(()=>{
+            renameReadyRef.current = true;
+            renameInputRef.current?.focus();
+            renameInputRef.current?.select();
+        });
+        return ()=>cancelAnimationFrame(frame);
+    }, [
+        renamingId
+    ]);
+    return /*#__PURE__*/ jsxs("div", {
+        style: {
+            display: "flex",
+            flexDirection: "column",
+            gap: 2,
+            padding: "4px 8px"
+        },
+        children: [
+            showClearRow && /*#__PURE__*/ jsx("button", {
+                type: "button",
+                onClick: ()=>handleSelect(null),
+                "data-active": !activeViewId ? "" : undefined,
+                style: rowButtonStyle,
+                children: clearLabel ?? label
+            }),
+            views.length === 0 && /*#__PURE__*/ jsx("div", {
+                style: {
+                    fontSize: 13,
+                    color: "var(--seed-color-fg-neutral-subtle)",
+                    padding: "4px 8px"
+                },
+                children: "No saved views yet."
+            }),
+            views.map((view)=>renamingId === view.id ? /*#__PURE__*/ jsx("div", {
+                    style: rowStyle,
+                    children: /*#__PURE__*/ jsx("input", {
+                        ref: renameInputRef,
+                        // biome-ignore lint/a11y/noAutofocus: opening this input IS the user's own "Rename" click a moment earlier, not an unannounced page-load autofocus (same call column-menu.tsx's own inline rename input makes).
+                        autoFocus: true,
+                        "aria-label": renameInputLabel(view.name),
+                        value: renameValue,
+                        onChange: (event)=>setRenameValue(event.target.value),
+                        onBlur: ()=>{
+                            if (renameReadyRef.current) commitRename();
+                        },
+                        onKeyDown: (event)=>{
+                            event.stopPropagation();
+                            if (event.key === "Enter") commitRename();
+                            if (event.key === "Escape") setRenamingId(null);
+                        },
+                        style: {
+                            flex: 1,
+                            minWidth: 0,
+                            font: "inherit",
+                            fontSize: 13,
+                            padding: "6px 8px",
+                            border: "1px solid var(--seed-color-border-neutral)",
+                            borderRadius: 6,
+                            background: "var(--seed-color-bg-surface)",
+                            color: "var(--seed-color-fg-neutral)"
+                        }
+                    })
+                }, view.id) : /*#__PURE__*/ jsxs("div", {
+                    style: rowStyle,
+                    children: [
+                        /*#__PURE__*/ jsx("button", {
+                            type: "button",
+                            onClick: ()=>handleSelect(view.id),
+                            "data-active": view.id === activeViewId ? "" : undefined,
+                            style: rowButtonStyle,
+                            children: view.name
+                        }),
+                        /*#__PURE__*/ jsx("button", {
+                            type: "button",
+                            onClick: ()=>startRename(view),
+                            style: smallButtonStyle,
+                            children: renameLabel
+                        }),
+                        /*#__PURE__*/ jsx("button", {
+                            type: "button",
+                            "aria-label": `${deleteLabel} ${view.name}`,
+                            onClick: ()=>deleteView(view.id),
+                            style: iconButtonStyle,
+                            children: /*#__PURE__*/ jsx(IconXmarkLine_default, {
+                                size: 13,
+                                strokeWidth: 1.75
+                            })
+                        })
+                    ]
+                }, view.id)),
+            activeViewId && /*#__PURE__*/ jsx("button", {
+                type: "button",
+                onClick: handleUpdate,
+                style: {
+                    ...rowButtonStyle,
+                    color: "var(--seed-color-fg-neutral-subtle)"
+                },
+                children: updateViewLabel
+            }),
+            /*#__PURE__*/ jsxs("button", {
+                type: "button",
+                onClick: handleCreate,
+                style: rowButtonStyle,
+                children: [
+                    /*#__PURE__*/ jsx(IconPlusLine_default, {
+                        size: 13,
+                        strokeWidth: 1.75
+                    }),
+                    newViewLabel
+                ]
+            })
+        ]
+    });
+}
+
+export { DataTable, DataTableViewsControl };