@crispy-seed/data-table 0.11.0 → 0.11.1

package/dist/index.cjs

@@ -987,15 +987,33 @@ function sameCell$1(a, id, key) {
  * first captured) nor keeps a ghost entry for one that was removed. Known keys keep
  * their position from `order`; any key in `keys` missing from `order` is appended, in
  * `keys`' own order; any entry in `order` no longer in `keys` is dropped.
- */ function reconcileColumnOrder(order, keys) {
+ *
+ * `actionsKey` (the styled layer's `actions`-flagged column, e.g. the row-menu `⋯`
+ * column) is kept LAST no matter what -- without this, a brand-new column added to
+ * `columns` after the table first mounted got appended past it (the "any key in `keys`
+ * missing from `order` is appended" rule above has no notion of "past the end" vs. "at
+ * the very end"), stranding it in the middle of the table since `stickyLast`/`actions`
+ * only sticks the actual trailing column. A real consumer hit this: their newly-added
+ * column landed to the right of the already-pinned-sticky `actions` column, covered by
+ * it under horizontal scroll. Column-layout's own `pinnedCellProps` independently
+ * targets the `actions` column by FLAG rather than by position (belt and suspenders --
+ * see that file's own doc comment), but this still keeps the VISUAL order sane so nothing
+ * renders hidden behind the sticky cell in the first place.
+ */ function reconcileColumnOrder(order, keys, actionsKey) {
     const keySet = new Set(keys);
     const known = order.filter((key)=>keySet.has(key));
     const knownSet = new Set(known);
     const added = keys.filter((key)=>!knownSet.has(key));
-    return [
+    const merged = [
         ...known,
         ...added
     ];
+    if (actionsKey === undefined || !keySet.has(actionsKey)) return merged;
+    const withoutActions = merged.filter((key)=>key !== actionsKey);
+    return [
+        ...withoutActions,
+        actionsKey
+    ];
 }
 /**
  * Moves `key` one step toward `direction` in `order` -- a no-op (same array, well,
@@ -1174,7 +1192,7 @@ const EMPTY_RECORD = {};
  * 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, pinnedColumnKeys: pinnedProp, defaultPinnedColumnKeys = EMPTY_STRINGS, onPinnedColumnKeysChange } = props;
+    const { columnKeys = EMPTY_STRINGS, actionsColumnKey, 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,
@@ -1185,9 +1203,10 @@ const EMPTY_RECORD = {};
     // consumer persisted before a new column existed must still show that new column
     // (appended), and one holding a column that got removed from `columns` must not
     // render a ghost header for it.
-    const columnOrder = React.useMemo(()=>reconcileColumnOrder(rawOrder ?? columnKeys, columnKeys), [
+    const columnOrder = React.useMemo(()=>reconcileColumnOrder(rawOrder ?? columnKeys, columnKeys, actionsColumnKey), [
         rawOrder,
-        columnKeys
+        columnKeys,
+        actionsColumnKey
     ]);
     const [hiddenColumnKeys = EMPTY_STRINGS, setHiddenColumnKeys] = useControllableState$1({
         prop: hiddenProp,
@@ -2169,7 +2188,7 @@ function useDataTableRowContext({ strict = true } = {}) {
     return context;
 }
 const DataTableRoot = /*#__PURE__*/ React.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, pinnedColumnKeys, defaultPinnedColumnKeys, onPinnedColumnKeysChange, 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, actionsColumnKey, 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,
@@ -2189,6 +2208,7 @@ const DataTableRoot = /*#__PURE__*/ React.forwardRef((props, ref)=>{
         defaultToolbarFilters,
         onToolbarFiltersChange,
         columnKeys,
+        actionsColumnKey,
         columnOrder,
         defaultColumnOrder,
         onColumnOrderChange,
@@ -3533,10 +3553,25 @@ function RatingCell({ value, maxRating = 5 }) {
                 width,
                 pinned,
                 pinOffset,
-                pinnedEdge: false
+                pinnedEdge: false,
+                stickyLastTarget: false
             };
         });
         if (pinnedCount > 0) entries[pinnedCount - 1].pinnedEdge = true;
+        // `stickyLast` sticks the `actions`-flagged column specifically -- not whichever
+        // column merely landed last in render order. Without this, `reconcileColumnOrder`
+        // appending a brand-new column past `actions` (this file's own `<colgroup>` doc
+        // comment on why order must stay in lockstep) silently moved the sticky-right
+        // treatment onto that new column instead, stranding `actions` in the middle of the
+        // table -- a real consumer hit this. Falls back to the genuine last entry when no
+        // column is flagged `actions` at all, matching `stickyLast`'s original single-
+        // column behavior.
+        if (entries.length > 0) {
+            const actionsColumn = columns.find((column)=>column.actions);
+            const actionsIndex = actionsColumn ? entries.findIndex((entry)=>entry.column.key === actionsColumn.key) : -1;
+            const stickyLastIndex = actionsIndex !== -1 ? actionsIndex : entries.length - 1;
+            entries[stickyLastIndex].stickyLastTarget = true;
+        }
         return entries;
     }, [
         columns,
@@ -3576,9 +3611,12 @@ function RatingCell({ value, maxRating = 5 }) {
 }
 /** 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) {
+ *  trailing-most member) takes priority over sticky-right (`stickyLast`, the
+ *  `actions`-flagged column when one exists, else the genuine last VISIBLE column)
+ *  since a column can only stick to one edge. Reads `entry.stickyLastTarget`
+ *  (`useEffectiveColumns`) rather than an `isLast` index the caller computes itself --
+ *  that index is just "last in render order", which is exactly what stranded a
+ *  reordered-past `actions` column in the first place. */ function pinnedCellProps(entry, stickyLast) {
     if (entry.pinned) {
         return {
             "data-sticky": "",
@@ -3590,7 +3628,7 @@ function RatingCell({ value, maxRating = 5 }) {
             }
         };
     }
-    if (stickyLast && isLast) {
+    if (stickyLast && entry.stickyLastTarget) {
         return {
             "data-sticky": "",
             "data-sticky-edge-end": "",
@@ -4749,26 +4787,87 @@ function ChipListEditor({ column, value, pending, onCommit, classNames }) {
     }));
 }
 ////////////////////////////////////////////////////////////////////////////////////
-// -- Feature C (#12): cell-expand "show full content" overlay -- an anchored box
-//    (position:absolute over the cell it belongs to, grows in HEIGHT, elevated)
-//    that wraps whatever a truncated cell would otherwise show inline: an editable
-//    column's OWN editor node (unchanged, just relocated into this box instead of
-//    rendered flush in the 36px row) for the editable case, or the plain full value
-//    for a read-only one. `body-cells.tsx` decides WHEN to render this (a click on a
-//    cell whose content is actually truncated, `truncate.ts`'s `isCellTruncated`);
-//    this component only supplies the box.
-function CellExpandOverlay({ className, children }) {
-    return(// `stopPropagation` -- an overlay sits on top of (and past) its own cell/row;
+// -- Feature C (#12): cell-expand "show full content" overlay -- a box that wraps
+//    whatever a truncated cell would otherwise show inline: an editable column's OWN
+//    editor node (unchanged, just relocated into this box instead of rendered flush in
+//    the 36px row) for the editable case, or the plain full value for a read-only one.
+//    `body-cells.tsx` decides WHEN to render this (a click on a cell whose content is
+//    actually truncated, `truncate.ts`'s `isCellTruncated`); this component only
+//    supplies the box.
+//
+//    Portals to `document.body` (crispy-seed#1094's own pinned-column follow-up,
+//    ported from the chip-list editor's popover, `body-cells.tsx`'s
+//    `isChipListEditable` -- that one shipped this exact fix in 0.10.3) rather than
+//    positioning `absolute` against its own cell: a `position: sticky` `<td>` clips ANY
+//    descendant that grows past its own box, in every browser tested, regardless of
+//    `overflow`/`z-index` on anything in between, so a pinned column's own truncated
+//    cell used to clip this overlay's grown content instead of showing it in full. A
+//    portal sidesteps that by not being a descendant of the sticky `<td>` at all once
+//    mounted -- position is instead measured live off `anchorRef`'s own
+//    `getBoundingClientRect()`, the same technique the chip-list popover already uses.
+function CellExpandOverlay({ className, anchorRef, contentRef, children }) {
+    const [style, setStyle] = React__namespace.useState(null);
+    // Grows 1px past the cell's own edges in every direction, matching this box's
+    // pre-portal `top: -1px; insetInlineStart: -1px; insetInlineEnd: -1px` (the recipe's
+    // `expandOverlay` class, `data-table.ts`) -- hides the 1px border seam against the
+    // cell it's expanding out of. `minHeight`/`insetInlineEnd` from that same class no
+    // longer apply once portaled (they resolved against the `<td>` as this box's own
+    // containing block, meaningless once it's a `position: fixed` child of `<body>`
+    // instead -- the same override the chip-list popover's own `measurePopoverPosition`,
+    // `body-cells.tsx`, already makes), so this overrides both explicitly.
+    const measure = React__namespace.useCallback(()=>{
+        const cell = anchorRef.current;
+        if (!cell) return;
+        const rect = cell.getBoundingClientRect();
+        setStyle({
+            position: "fixed",
+            top: rect.top - 1,
+            insetInlineStart: rect.left - 1,
+            insetInlineEnd: "auto",
+            width: rect.width + 2,
+            minHeight: "auto",
+            zIndex: 1000
+        });
+    }, [
+        anchorRef
+    ]);
+    // Measured before paint, on mount -- see this component's own prop doc comment for
+    // why it can't just trust a caller to have measured first.
+    React__namespace.useLayoutEffect(()=>{
+        measure();
+    }, [
+        measure
+    ]);
+    // Same capture-phase listeners as the chip-list popover's own reposition effect
+    // (`body-cells.tsx`) -- `scroll` doesn't bubble, so the table's own horizontal/
+    // vertical scroll container (an arbitrary ancestor, not necessarily `window` itself)
+    // is only observable this way.
+    React__namespace.useEffect(()=>{
+        window.addEventListener("scroll", measure, true);
+        window.addEventListener("resize", measure);
+        return ()=>{
+            window.removeEventListener("scroll", measure, true);
+            window.removeEventListener("resize", measure);
+        };
+    }, [
+        measure
+    ]);
+    // Nothing to portal until the first measurement lands (avoids a one-frame flash at
+    // the origin corner before `useLayoutEffect` runs).
+    if (!style) return null;
+    return /*#__PURE__*/ reactDom.createPortal(// `stopPropagation` -- an overlay sits on top of (and past) its own cell/row;
     // a click anywhere inside it must never ALSO fire the row's own `onRowClick`,
     // the same guard every other interactive cell affordance in this directory
     // already applies (`LinkCell`, `EntityCell`'s preview button, editors.tsx's
     // `TextEditor` root).
     // biome-ignore lint/a11y/noStaticElementInteractions: not a widget -- this div never responds to interaction on ITSELF, only stops propagation of events that already occurred on a real interactive descendant (the editor/text it wraps). No role fits it because it isn't a control.
     /*#__PURE__*/ jsxRuntime.jsx("div", {
+        ref: contentRef,
         className: className,
+        style: style,
         onClick: (event)=>event.stopPropagation(),
         children: children
-    }));
+    }), document.body);
 }
 
 // Row-narrowing for the toolbar's search box -- split out of DataTable.tsx the way
@@ -4864,21 +4963,17 @@ function isCellTruncated(cell) {
  *  close itself after the first tag commits, see `ChipListEditor`'s own doc
  *  comment).
  *
- *  Unlike every OTHER open editor in this file, this one does NOT render inside
- *  Feature C's `CellExpandOverlay` (an anchored box positioned relative to the
- *  `<td>`, `position: absolute` against it) -- it renders through a REAL React
- *  portal to `document.body` instead (`DataTableBodyCell`'s own `popoverStyle`).
- *  Confirmed live, crispy-seed#1094's pinned-column follow-up: a `position: sticky`
- *  `<td>` clips ANY descendant content that grows past its own box to the table's
- *  scrollport, in EVERY browser tested, regardless of `overflow: visible` on every
- *  element in between and regardless of how high its `z-index` is raised -- neither
- *  of which is a stacking-context or overflow bug this file can fix from the
- *  INSIDE. A portal sidesteps it entirely by not being a descendant of the sticky
- *  `<td>` at all once mounted. The same sticky-clip almost certainly affects the
- *  OTHER gated editors' `CellExpandOverlay` too when their own column is pinned,
- *  but porting all of Feature C to this same portal model is its own change,
- *  out of scope here -- this fix is scoped to the one editor crispy-seed#1094
- *  actually reported against a pinned column. */ function isChipListEditable(column) {
+ *  This one renders through its OWN REAL React portal to `document.body`
+ *  (`DataTableBodyCell`'s own `popoverStyle`) rather than `editors.tsx`'s shared
+ *  `CellExpandOverlay`, since its shape is different (Attio's own click-anywhere-
+ *  opens gesture, no truncation gate). `CellExpandOverlay` itself ALSO portals to
+ *  `document.body` now (ported from this exact fix) -- both exist because a
+ *  `position: sticky` `<td>` clips ANY descendant content that grows past its own
+ *  box to the table's scrollport, in EVERY browser tested, regardless of
+ *  `overflow: visible` on every element in between and regardless of how high its
+ *  `z-index` is raised -- neither of which is a stacking-context or overflow bug
+ *  fixable from the INSIDE. A portal sidesteps it entirely by not being a
+ *  descendant of the sticky `<td>` at all once mounted. */ function isChipListEditable(column) {
     return !!column.editable && column.type === "chip-list";
 }
 function ColumnBodyCells({ columns, row, classNames, locale, selectable, stickyFirst, stickyLast, cellContextMenu, onViewEditHistory, cellContextMenuItems }) {
@@ -4887,10 +4982,9 @@ function ColumnBodyCells({ columns, row, classNames, locale, selectable, stickyF
         stickyFirst
     });
     return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
-        children: effective.map((entry, index)=>{
+        children: effective.map((entry)=>{
             const { column } = entry;
-            const isLast = index === effective.length - 1;
-            const sticky = pinnedCellProps(entry, stickyLast, isLast);
+            const sticky = pinnedCellProps(entry, stickyLast);
             return /*#__PURE__*/ jsxRuntime.jsx(DataTableBodyCell, {
                 column: column,
                 row: row,
@@ -5038,6 +5132,16 @@ function ColumnBodyCells({ columns, row, classNames, locale, selectable, stickyF
     // mounted, in `document.body` -- see `isChipListEditable`'s doc comment) and by
     // the reposition effect further down.
     const popoverRef = React__namespace.useRef(null);
+    // Feature C's own portaled overlay (`CellExpandOverlay`, editors.tsx) -- its own DOM
+    // node, once mounted, same reasoning as `popoverRef` above: it lives outside
+    // `cellRef`'s subtree (a sibling of the table in `document.body`, not a descendant of
+    // the `<td>`), so the outside-click detector below needs a ref to it too. Without
+    // this, `isInside` saw every click/keystroke INSIDE the portaled editor as "outside"
+    // once the overlay actually escaped the `<td>` (this fix's whole point) -- e.g.
+    // typing into the overlay's own `TextEditor` fires a pointerdown on an input that is
+    // no longer `cellRef.current`'s descendant, so every keystroke closed the overlay and
+    // cancelled the edit before the user finished typing.
+    const expandOverlayRef = React__namespace.useRef(null);
     // Closes the overlay on Escape or an outside click/pointerdown -- a gated
     // editor's OWN Escape/blur handling already ends `isEditing` on its own (see
     // `TextEditor`/`SelectEditor`'s existing onCancel/onOpenChange wiring), which
@@ -5050,7 +5154,7 @@ function ColumnBodyCells({ columns, row, classNames, locale, selectable, stickyF
     React__namespace.useEffect(()=>{
         if (!overlayOpen) return;
         function isInside(target) {
-            return (cellRef.current?.contains(target) ?? false) || (popoverRef.current?.contains(target) ?? false);
+            return (cellRef.current?.contains(target) ?? false) || (popoverRef.current?.contains(target) ?? false) || (expandOverlayRef.current?.contains(target) ?? false);
         }
         function handlePointerDown(event) {
             if (!isInside(event.target)) {
@@ -5123,7 +5227,9 @@ function ColumnBodyCells({ columns, row, classNames, locale, selectable, stickyF
                         rowId: row.id,
                         classNames: classNames,
                         locale: locale,
-                        overlayActive: overlayActive
+                        overlayActive: overlayActive,
+                        cellRef: cellRef,
+                        expandOverlayRef: expandOverlayRef
                     }),
                     cellContextMenu && contextMenuOpen && contextMenuPoint && // A `<td>` (unlike its own parent `<tr>`) can validly hold any flow
                     // content, so `CellContextMenu`'s own 0x0 `MenuAnchor` -- itself never
@@ -5168,7 +5274,7 @@ function ColumnBodyCells({ columns, row, classNames, locale, selectable, stickyF
  * display (a custom `render` wins there, same as before `editable` existed; it never
  * overrides an actual editing/always-live state, matching crisp's own split between
  * `renderTyped`'s rest-state branch and the editing branches above it).
- */ function CellContent({ column, row, rowId, classNames, locale, overlayActive }) {
+ */ function CellContent({ column, row, rowId, classNames, locale, overlayActive, cellRef, expandOverlayRef }) {
     const { isEditing, isPending, getEditError, commitEdit, cancelEdit } = useDataTableContext();
     const rawValue = getColumnValue(column, row);
     const pending = isPending(rowId, column.key);
@@ -5262,6 +5368,8 @@ function ColumnBodyCells({ columns, row, classNames, locale, selectable, stickyF
         children: [
             overlayActive ? /*#__PURE__*/ jsxRuntime.jsx(CellExpandOverlay, {
                 className: classNames.expandOverlay,
+                anchorRef: cellRef,
+                contentRef: expandOverlayRef,
                 children: column.editable ? node : /*#__PURE__*/ jsxRuntime.jsx("span", {
                     className: classNames.expandOverlayText,
                     children: node
@@ -5425,10 +5533,9 @@ function ColumnCalcCells({ columns, rows, selectable, stickyFirst, stickyLast })
         stickyFirst
     });
     return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
-        children: effective.map((entry, index)=>{
+        children: effective.map((entry)=>{
             const { column } = entry;
-            const isLast = index === effective.length - 1;
-            const sticky = pinnedCellProps(entry, stickyLast, isLast);
+            const sticky = pinnedCellProps(entry, stickyLast);
             return /*#__PURE__*/ jsxRuntime.jsx(DataTableFooterCell, {
                 "data-sticky": sticky["data-sticky"],
                 "data-sticky-edge": sticky["data-sticky-edge"],
@@ -5651,10 +5758,9 @@ const DEFAULT_SORT_ICON = {
     });
     const [renamingKey, setRenamingKey] = React__namespace.useState(null);
     return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
-        children: effective.map((entry, index)=>{
+        children: effective.map((entry)=>{
             const { column, label, width } = entry;
-            const isLast = index === effective.length - 1;
-            const sticky = pinnedCellProps(entry, stickyLast, isLast);
+            const sticky = pinnedCellProps(entry, stickyLast);
             return /*#__PURE__*/ jsxRuntime.jsxs(DataTableHeaderCell, {
                 columnKey: column.key,
                 sortable: column.sortable,
@@ -11664,6 +11770,12 @@ function DataTableInner(props, ref) {
     const columnKeys = React__namespace.useMemo(()=>columns.map((column)=>column.key), [
         columns
     ]);
+    // Threaded down to `reconcileColumnOrder` (react-headless's `dom.ts`) so a brand-new
+    // column added to `columns` after mount gets appended BEFORE this one, not past it --
+    // see that function's own doc comment for the bug this prevents.
+    const actionsColumnKey = React__namespace.useMemo(()=>columns.find((column)=>column.actions)?.key, [
+        columns
+    ]);
     const searchable = React__namespace.useMemo(()=>columns.some((column)=>column.searchable), [
         columns
     ]);
@@ -11706,6 +11818,7 @@ function DataTableInner(props, ref) {
             toolbarFilters: resolvedToolbarFilters,
             onToolbarFiltersChange: handleToolbarFiltersChange,
             columnKeys: columnKeys,
+            actionsColumnKey: actionsColumnKey,
             columnOrder: columnOrder,
             defaultColumnOrder: defaultColumnOrder,
             onColumnOrderChange: onColumnOrderChange,

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import * as react from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 declare interface DataTableVariant {
@@ -151,7 +151,7 @@ interface DataTableColumn<TRow> {
      */
     key: string;
     /** 헤더 셀에 표시할 내용입니다. */
-    header: React.ReactNode;
+    header: react.ReactNode;
     /** 이 열을 클릭해 정렬할 수 있는지 여부입니다. */
     sortable?: boolean;
     /**
@@ -162,7 +162,7 @@ interface DataTableColumn<TRow> {
     /** 셀 내용을 직접 그립니다. 지정하면 `type`의 기본 렌더러 대신 이것을 사용합니다.
      *  `editable`이어도 편집/always-live 상태에는 영향이 없습니다 -- 이 필드는 REST
      *  상태의 표시만 바꿉니다. */
-    render?: (row: TRow) => React.ReactNode;
+    render?: (row: TRow) => react.ReactNode;
     /** `type: "currency"`의 통화 기호입니다. @default "$" */
     symbol?: string;
     /** `type: "rating"`의 별 개수입니다. @default 5 */
@@ -198,8 +198,11 @@ interface DataTableColumn<TRow> {
      * 절대 스크롤되어 사라지지 않도록 오른쪽 끝에 고정합니다 -- 이 플래그가 있는 열은 테이블
      * 전체의 `stickyLast`를 켜지 않아도 자동으로 그 고정 + 왼쪽 스크롤 그림자
      * (`stickyProps`/`stickyLast`가 이미 구현한 것과 동일한 메커니즘, `data-sticky-edge-end`
-     * / `data-scrolled-end`)를 받습니다. 열 목록의 마지막 열이어야 합니다 -- `stickyLast`
-     * 자체가 이미 "마지막으로 보이는 열"만 고정하는 규칙이기 때문입니다.
+     * / `data-scrolled-end`)를 받습니다. `stickyLast`는 이 플래그가 붙은 열을 직접 찾아
+     * 고정합니다 (`column-layout.ts`의 `useEffectiveColumns`) -- 더 이상 "마지막으로 보이는
+     * 열"이어야만 한다는 제약이 없습니다. 내부적으로도 `reconcileColumnOrder`(react-headless의
+     * `dom.ts`)가 이 열을 항상 맨 끝에 유지하므로, 마운트 이후 추가된 새 열이 이 열보다 뒤로
+     * 붙어 고정 셀 뒤에 가려지는 일도 없습니다.
      */
     actions?: boolean;
     /**
@@ -289,11 +292,11 @@ interface DataTableColumn<TRow> {
      * 줄임표 처리되고, 아이콘은 `flex-shrink:0`). `type: "text"`(기본)와 `"url"`/
      * `"email"` 열에서 동작합니다.
      */
-    suffixIcon?: (row: TRow) => React.ReactNode;
+    suffixIcon?: (row: TRow) => react.ReactNode;
 }
 interface DataTableProps<TRow extends {
     id: string;
-}> extends DataTableVariantProps, Omit<PrimitiveProps, "asChild">, Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+}> extends DataTableVariantProps, Omit<PrimitiveProps, "asChild">, Omit<react.HTMLAttributes<HTMLDivElement>, "children"> {
     columns: DataTableColumn<TRow>[];
     data: TRow[];
     /** `type`이 있는 열의 number/currency/date/datetime 표시에 쓰는 로캘입니다. @default "en-US" */
@@ -311,9 +314,9 @@ interface DataTableProps<TRow extends {
      * 씁니다. 생략하면 karrot 아이콘 셋의 chevron을 씁니다.
      */
     sortIcon?: {
-        idle?: React.ReactNode;
-        asc?: React.ReactNode;
-        desc?: React.ReactNode;
+        idle?: react.ReactNode;
+        asc?: react.ReactNode;
+        desc?: react.ReactNode;
     };
     /** 왼쪽에 40px짜리 체크박스 선택 열을 추가합니다. */
     selectable?: boolean;
@@ -329,10 +332,10 @@ interface DataTableProps<TRow extends {
     getRowSelectionLabel?: (row: TRow) => string;
     /** 선택 체크박스가 checked일 때 표시할 아이콘입니다. 생략하면 karrot의 체크 아이콘을
      *  씁니다. */
-    selectionCheckedIcon?: React.ReactNode;
+    selectionCheckedIcon?: react.ReactNode;
     /** 전체 선택 체크박스가 일부만 선택됐을 때(indeterminate) 표시할 아이콘입니다.
      *  생략하면 karrot의 minus 아이콘을 씁니다. */
-    selectionIndeterminateIcon?: React.ReactNode;
+    selectionIndeterminateIcon?: react.ReactNode;
     /**
      * 행이 하나 이상 선택되면 테이블 하단 중앙에 뜨는 벌크 액션 바(Attio 스타일 floating
      * pill, gap #4)에 넣을 소비자 액션입니다. 현재 선택된 행 id 목록을 받는 render prop --
@@ -341,7 +344,7 @@ interface DataTableProps<TRow extends {
      * "크롬 vs 소비자 콘텐츠" 분리). 생략하면 바는 크롬만 보여줍니다. `selectable`이 꺼져
      * 있으면 무시됩니다(선택 자체가 없으므로).
      */
-    bulkActions?: (selectedIds: string[]) => React.ReactNode;
+    bulkActions?: (selectedIds: string[]) => react.ReactNode;
     /** 벌크 액션 바의 지우기(x) 버튼 접근성 이름입니다. @default "Clear selection" */
     clearSelectionLabel?: string;
     /** 제어할 검색어입니다. */
@@ -380,7 +383,7 @@ interface DataTableProps<TRow extends {
      * 행 개수 텍스트를 직접 만듭니다. 생략하면 crisp의 기본 형식을 씁니다: 검색/필터로
      * 줄지 않았으면 "N rows"(단수는 "row"), 줄었으면 "N of M".
      */
-    countLabel?: (shown: number, total: number) => React.ReactNode;
+    countLabel?: (shown: number, total: number) => react.ReactNode;
     /**
      * 툴바 오른쪽, 행 개수 옆에 렌더링할 커스텀 액션입니다(예: Download/내보내기 버튼).
      * 이전에는 이 자리에 넣을 공식 prop이 없어서 소비자가 `.seed-data-table__toolbar`
@@ -389,7 +392,7 @@ interface DataTableProps<TRow extends {
      * 렌더링됩니다). 검색/정렬/필터보다 뒤, 카운트보다 앞(같은 그룹 안에서 카운트
      * 왼쪽)에 옵니다.
      */
-    toolbarActions?: React.ReactNode;
+    toolbarActions?: react.ReactNode;
     /** 헤더의 열별 메뉴(이름 변경 / 숨기기 / 왼쪽·오른쪽으로 이동)를 켭니다, seed `Menu`. */
     columnMenu?: boolean;
     /** 헤더를 드래그해 열 순서를 바꿀 수 있게 합니다. @default true */
@@ -470,7 +473,7 @@ interface DataTableProps<TRow extends {
      *  consumer's own "Assign to…") -- rendered inside the SAME `MenuScrollArea` the
      *  built-in items are, so a `<MenuItem>` from this package's own `Menu` export
      *  composes the way `column-menu.tsx`'s own items do. */
-    cellContextMenuItems?: (ctx: DataTableCellContextMenuContext<TRow>) => React.ReactNode;
+    cellContextMenuItems?: (ctx: DataTableCellContextMenuContext<TRow>) => react.ReactNode;
     /** 행을 클릭할 수 있게 하는 호버 표시입니다 (crisp의 3%/4% 포그라운드 틴트). 커서
      *  모양은 `onRowClick`이 있는지에 따로 달려 있습니다 -- 이 값과 독립적으로 켤 수
      *  있습니다(crisp의 두 prop, `interactive`/`onRowClick`도 서로 독립적입니다). */
@@ -481,19 +484,19 @@ interface DataTableProps<TRow extends {
     /** 주어지면 맨 아래에 crisp가 측정한 "+ New" 추가 행 버튼을 렌더링합니다. */
     onAddRow?: () => void;
     /** 추가 행 버튼의 라벨입니다. @default "New record" */
-    addRowLabel?: React.ReactNode;
+    addRowLabel?: react.ReactNode;
     /** 전체 본문을 이 상태로 대체합니다(로딩 아이콘 + `loadingLabel`) -- 필터/정렬
      *  재조회나 최초 로드처럼 행 전체가 아직 없을 때를 위한 것입니다. `error`/빈 상태
      *  보다 우선합니다. 인라인 스크롤 로딩 표시기(`onLoadMore`)와는 별개입니다. */
     loading?: boolean;
     /** `loading`일 때 스피너 옆에 보이는 텍스트입니다. @default "Loading..." */
-    loadingLabel?: React.ReactNode;
+    loadingLabel?: react.ReactNode;
     /** 주어지면 행 대신 이 내용을 본문에 렌더링합니다(crisp의 `.crisp-datatable-empty`
      *  칸 재사용). `loading`보다는 아래, 빈 상태보다는 위 우선순위입니다. */
-    error?: React.ReactNode;
+    error?: react.ReactNode;
     /** 검색/필터를 거치고도 행이 하나도 없을 때 본문에 렌더링할 내용입니다.
      *  @default "No results." */
-    empty?: React.ReactNode;
+    empty?: react.ReactNode;
     /**
      * Attio 스타일 무한 스크롤: 스크롤 컨테이너 바닥 근처의 sentinel 행이 뷰에 들어오면
      * 호출됩니다. `Promise`를 반환하면 그동안 자동으로 `loadingMore`가 켜집니다(직접
@@ -517,7 +520,7 @@ interface DataTableProps<TRow extends {
      * `style={{ height: "100%" }}` 같은 바운드를 주는 것만으로도 "전체 높이" 모드가
      * 됩니다 -- 새 prop 없이 기존 `style` 전달만으로 두 모드 다 지원됩니다.
      */
-    scrollProps?: Omit<React.ComponentPropsWithoutRef<"div">, "ref" | "onScroll">;
+    scrollProps?: Omit<react.ComponentPropsWithoutRef<"div">, "ref" | "onScroll">;
 }
 /**
  * @see https://seed-design.io/react/components/data-table
@@ -525,8 +528,8 @@ interface DataTableProps<TRow extends {
 declare const DataTable: <TRow extends {
     id: string;
 }>(props: DataTableProps<TRow> & {
-    ref?: React.ForwardedRef<HTMLDivElement>;
-}) => React.ReactElement;
+    ref?: react.ForwardedRef<HTMLDivElement>;
+}) => react.ReactElement;
 
 interface DataTableViewsControlProps extends UseDataTableViewsProps {
     /** The trigger's label when no view is active. @default "Views" */
@@ -536,7 +539,7 @@ interface DataTableViewsControlProps extends UseDataTableViewsProps {
      *  meaningful "no view" state to switch back to. */
     showClearRow?: boolean;
     /** The clear row's own label, when `showClearRow` is on. @default "label" */
-    clearLabel?: React.ReactNode;
+    clearLabel?: react.ReactNode;
     /**
      * Reads the table's CURRENT column order/visibility/widths/pins + toolbar sort/
      * filter conditions -- called when the user picks "Save as new view" or "Update
@@ -578,7 +581,7 @@ interface DataTableBulkBarProps {
      * onClick={() => addToList(ids)}>Add to list</ActionButton>}</DataTableBulkBar>`.
      * Omit for just the bar's own chrome ("N selected" + clear).
      */
-    children?: (selectedIds: string[]) => React.ReactNode;
+    children?: (selectedIds: string[]) => react.ReactNode;
 }
 /**
  * The floating bulk-action pill (gap #4) -- renders nothing while no row is selected
@@ -594,7 +597,7 @@ declare function DataTableBulkBar({ clearLabel, children, }: DataTableBulkBarPro
 type ResizablePanelSide = "left" | "right";
 
 type ResizablePanelHandleVariant = "panel" | "column";
-type ResizablePanelProps = Omit<React.ComponentPropsWithoutRef<"div">, "children" | "onResize"> & {
+type ResizablePanelProps = Omit<react.ComponentPropsWithoutRef<"div">, "children" | "onResize"> & {
     /** Which edge of its container the panel is anchored to. @default "left" */
     side?: ResizablePanelSide;
     /** Controlled width, in px. */
@@ -683,9 +686,9 @@ type ResizablePanelProps = Omit<React.ComponentPropsWithoutRef<"div">, "children
      * observe `animationName` changes on the SAME node that carries
      * `data-state`/the keyframe animation above.
      */
-    panelElementRef?: React.Ref<HTMLDivElement>;
+    panelElementRef?: react.Ref<HTMLDivElement>;
     className?: string;
-    children?: React.ReactNode;
+    children?: react.ReactNode;
 };
 /**
  * An adjustable-panel primitive with two layout models (`floating`'s own doc
@@ -701,7 +704,7 @@ type ResizablePanelProps = Omit<React.ComponentPropsWithoutRef<"div">, "children
  * lives in `useResizablePanel` (`@seed-design/react-resizable-panel`), this
  * component owns the DOM + recipe classes on top of it.
  */
-declare const ResizablePanel: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children" | "onResize"> & {
+declare const ResizablePanel: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children" | "onResize"> & {
     /** Which edge of its container the panel is anchored to. @default "left" */
     side?: ResizablePanelSide;
     /** Controlled width, in px. */
@@ -790,10 +793,10 @@ declare const ResizablePanel: React.ForwardRefExoticComponent<Omit<Omit<React.De
      * observe `animationName` changes on the SAME node that carries
      * `data-state`/the keyframe animation above.
      */
-    panelElementRef?: React.Ref<HTMLDivElement>;
+    panelElementRef?: react.Ref<HTMLDivElement>;
     className?: string;
-    children?: React.ReactNode;
-} & React.RefAttributes<HTMLDivElement>>;
+    children?: react.ReactNode;
+} & react.RefAttributes<HTMLDivElement>>;
 
 /** One Highlights card -- label, value and an optional icon, laid out the way
  *  Attio's own peek panel lays its own out (your-moon/crisp#448, measured
@@ -802,8 +805,8 @@ declare const ResizablePanel: React.ForwardRefExoticComponent<Omit<Omit<React.De
 type RecordPreviewHighlight = {
     key: string;
     label: string;
-    value: React.ReactNode;
-    icon?: React.ComponentType<{
+    value: react.ReactNode;
+    icon?: react.ComponentType<{
         size?: number;
     }>;
 };
@@ -816,7 +819,7 @@ type RecordPreviewSection = {
     key: string;
     label: string;
     count: number;
-    content?: React.ReactNode;
+    content?: react.ReactNode;
 };
 /** One tab of the panel's own mini detail view (a "tabs" capability with no
  *  your-moon/crisp equivalent -- crisp's own peek only ever shows Highlights
@@ -828,12 +831,12 @@ type RecordPreviewSection = {
  *  tab has been visited) -- see `Tabs.tsx`. */
 type RecordPreviewTab = {
     key: string;
-    label: React.ReactNode;
-    content: React.ReactNode;
+    label: react.ReactNode;
+    content: react.ReactNode;
     /** Rendered right after `label` inside the tab trigger, e.g. an unread
      *  count -- purely presentational, this component attaches no meaning to
      *  it. */
-    badge?: React.ReactNode;
+    badge?: react.ReactNode;
 };
 /** The record this panel previews. Only `name` is read directly here --
  *  everything else the panel shows comes from `highlights`/`activity`/
@@ -845,7 +848,7 @@ type RecordPreviewRecord = {
     name?: string;
     [key: string]: unknown;
 };
-type RecordPreviewProps = Omit<React.ComponentPropsWithoutRef<"div">, "children" | "title" | "onResize"> & {
+type RecordPreviewProps = Omit<react.ComponentPropsWithoutRef<"div">, "children" | "title" | "onResize"> & {
     /** Whether the panel is mounted/visible. */
     open: boolean;
     onClose: () => void;
@@ -866,7 +869,7 @@ type RecordPreviewProps = Omit<React.ComponentPropsWithoutRef<"div">, "children"
     nextRecordLabel?: string;
     /** "2 of 37 in All Companies" (your-moon/crisp#413) -- a single
      *  pre-formatted string; omit for no counter at all. */
-    counterLabel?: React.ReactNode;
+    counterLabel?: react.ReactNode;
     /**
      * Lets a person drag the panel wider or narrower from its own left edge --
      * this port reuses `ResizablePanel`'s own handle (`side="right"`, whose
@@ -882,7 +885,7 @@ type RecordPreviewProps = Omit<React.ComponentPropsWithoutRef<"div">, "children"
     minWidth?: number;
     maxWidth?: number;
     /** The panel's heading, and so its accessible name. Defaults to `record.name`. */
-    title?: React.ReactNode;
+    title?: react.ReactNode;
     /** Avatar image URL beside the title. Omit for an initials tile built from
      *  `record.name`'s first character. */
     avatar?: string;
@@ -891,13 +894,13 @@ type RecordPreviewProps = Omit<React.ComponentPropsWithoutRef<"div">, "children"
     record: RecordPreviewRecord | null;
     /** Heading above the highlight cards (default "Highlights"). Omit the
      *  whole section by omitting `highlights`. */
-    highlightsLabel?: React.ReactNode;
+    highlightsLabel?: react.ReactNode;
     highlights?: RecordPreviewHighlight[];
     /** Heading above the activity feed (default "Activity"). */
-    activityLabel?: React.ReactNode;
-    viewAllActivityLabel?: React.ReactNode;
+    activityLabel?: react.ReactNode;
+    viewAllActivityLabel?: react.ReactNode;
     onViewAllActivity?: () => void;
-    activity?: React.ReactNode;
+    activity?: react.ReactNode;
     /** Collapsed sections below Activity (your-moon/crisp#413). Omit for no
      *  sections at all. */
     sections?: RecordPreviewSection[];
@@ -923,9 +926,9 @@ type RecordPreviewProps = Omit<React.ComponentPropsWithoutRef<"div">, "children"
     onTabChange?: (key: string) => void;
     /** Label for the synthesized overview tab -- see `tabs`'s own doc
      *  comment. @default "Overview" */
-    overviewTabLabel?: React.ReactNode;
+    overviewTabLabel?: react.ReactNode;
     /** Rendered below the panel's content, e.g. an Edit button. */
-    footer?: React.ReactNode;
+    footer?: react.ReactNode;
     /**
      * An optional dimming backdrop behind the panel -- OFF by default (this
      * is a peek, not a modal: Attio's own peek never dims the table it

package/dist/index.js

@@ -968,15 +968,33 @@ function sameCell$1(a, id, key) {
  * first captured) nor keeps a ghost entry for one that was removed. Known keys keep
  * their position from `order`; any key in `keys` missing from `order` is appended, in
  * `keys`' own order; any entry in `order` no longer in `keys` is dropped.
- */ function reconcileColumnOrder(order, keys) {
+ *
+ * `actionsKey` (the styled layer's `actions`-flagged column, e.g. the row-menu `⋯`
+ * column) is kept LAST no matter what -- without this, a brand-new column added to
+ * `columns` after the table first mounted got appended past it (the "any key in `keys`
+ * missing from `order` is appended" rule above has no notion of "past the end" vs. "at
+ * the very end"), stranding it in the middle of the table since `stickyLast`/`actions`
+ * only sticks the actual trailing column. A real consumer hit this: their newly-added
+ * column landed to the right of the already-pinned-sticky `actions` column, covered by
+ * it under horizontal scroll. Column-layout's own `pinnedCellProps` independently
+ * targets the `actions` column by FLAG rather than by position (belt and suspenders --
+ * see that file's own doc comment), but this still keeps the VISUAL order sane so nothing
+ * renders hidden behind the sticky cell in the first place.
+ */ function reconcileColumnOrder(order, keys, actionsKey) {
     const keySet = new Set(keys);
     const known = order.filter((key)=>keySet.has(key));
     const knownSet = new Set(known);
     const added = keys.filter((key)=>!knownSet.has(key));
-    return [
+    const merged = [
         ...known,
         ...added
     ];
+    if (actionsKey === undefined || !keySet.has(actionsKey)) return merged;
+    const withoutActions = merged.filter((key)=>key !== actionsKey);
+    return [
+        ...withoutActions,
+        actionsKey
+    ];
 }
 /**
  * Moves `key` one step toward `direction` in `order` -- a no-op (same array, well,
@@ -1155,7 +1173,7 @@ const EMPTY_RECORD = {};
  * 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, pinnedColumnKeys: pinnedProp, defaultPinnedColumnKeys = EMPTY_STRINGS, onPinnedColumnKeysChange } = props;
+    const { columnKeys = EMPTY_STRINGS, actionsColumnKey, 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,
@@ -1166,9 +1184,10 @@ const EMPTY_RECORD = {};
     // consumer persisted before a new column existed must still show that new column
     // (appended), and one holding a column that got removed from `columns` must not
     // render a ghost header for it.
-    const columnOrder = useMemo(()=>reconcileColumnOrder(rawOrder ?? columnKeys, columnKeys), [
+    const columnOrder = useMemo(()=>reconcileColumnOrder(rawOrder ?? columnKeys, columnKeys, actionsColumnKey), [
         rawOrder,
-        columnKeys
+        columnKeys,
+        actionsColumnKey
     ]);
     const [hiddenColumnKeys = EMPTY_STRINGS, setHiddenColumnKeys] = useControllableState$1({
         prop: hiddenProp,
@@ -2150,7 +2169,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, pinnedColumnKeys, defaultPinnedColumnKeys, onPinnedColumnKeysChange, 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, actionsColumnKey, 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,
@@ -2170,6 +2189,7 @@ const DataTableRoot = /*#__PURE__*/ forwardRef((props, ref)=>{
         defaultToolbarFilters,
         onToolbarFiltersChange,
         columnKeys,
+        actionsColumnKey,
         columnOrder,
         defaultColumnOrder,
         onColumnOrderChange,
@@ -3514,10 +3534,25 @@ function RatingCell({ value, maxRating = 5 }) {
                 width,
                 pinned,
                 pinOffset,
-                pinnedEdge: false
+                pinnedEdge: false,
+                stickyLastTarget: false
             };
         });
         if (pinnedCount > 0) entries[pinnedCount - 1].pinnedEdge = true;
+        // `stickyLast` sticks the `actions`-flagged column specifically -- not whichever
+        // column merely landed last in render order. Without this, `reconcileColumnOrder`
+        // appending a brand-new column past `actions` (this file's own `<colgroup>` doc
+        // comment on why order must stay in lockstep) silently moved the sticky-right
+        // treatment onto that new column instead, stranding `actions` in the middle of the
+        // table -- a real consumer hit this. Falls back to the genuine last entry when no
+        // column is flagged `actions` at all, matching `stickyLast`'s original single-
+        // column behavior.
+        if (entries.length > 0) {
+            const actionsColumn = columns.find((column)=>column.actions);
+            const actionsIndex = actionsColumn ? entries.findIndex((entry)=>entry.column.key === actionsColumn.key) : -1;
+            const stickyLastIndex = actionsIndex !== -1 ? actionsIndex : entries.length - 1;
+            entries[stickyLastIndex].stickyLastTarget = true;
+        }
         return entries;
     }, [
         columns,
@@ -3557,9 +3592,12 @@ function RatingCell({ value, maxRating = 5 }) {
 }
 /** 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) {
+ *  trailing-most member) takes priority over sticky-right (`stickyLast`, the
+ *  `actions`-flagged column when one exists, else the genuine last VISIBLE column)
+ *  since a column can only stick to one edge. Reads `entry.stickyLastTarget`
+ *  (`useEffectiveColumns`) rather than an `isLast` index the caller computes itself --
+ *  that index is just "last in render order", which is exactly what stranded a
+ *  reordered-past `actions` column in the first place. */ function pinnedCellProps(entry, stickyLast) {
     if (entry.pinned) {
         return {
             "data-sticky": "",
@@ -3571,7 +3609,7 @@ function RatingCell({ value, maxRating = 5 }) {
             }
         };
     }
-    if (stickyLast && isLast) {
+    if (stickyLast && entry.stickyLastTarget) {
         return {
             "data-sticky": "",
             "data-sticky-edge-end": "",
@@ -4730,26 +4768,87 @@ function ChipListEditor({ column, value, pending, onCommit, classNames }) {
     }));
 }
 ////////////////////////////////////////////////////////////////////////////////////
-// -- Feature C (#12): cell-expand "show full content" overlay -- an anchored box
-//    (position:absolute over the cell it belongs to, grows in HEIGHT, elevated)
-//    that wraps whatever a truncated cell would otherwise show inline: an editable
-//    column's OWN editor node (unchanged, just relocated into this box instead of
-//    rendered flush in the 36px row) for the editable case, or the plain full value
-//    for a read-only one. `body-cells.tsx` decides WHEN to render this (a click on a
-//    cell whose content is actually truncated, `truncate.ts`'s `isCellTruncated`);
-//    this component only supplies the box.
-function CellExpandOverlay({ className, children }) {
-    return(// `stopPropagation` -- an overlay sits on top of (and past) its own cell/row;
+// -- Feature C (#12): cell-expand "show full content" overlay -- a box that wraps
+//    whatever a truncated cell would otherwise show inline: an editable column's OWN
+//    editor node (unchanged, just relocated into this box instead of rendered flush in
+//    the 36px row) for the editable case, or the plain full value for a read-only one.
+//    `body-cells.tsx` decides WHEN to render this (a click on a cell whose content is
+//    actually truncated, `truncate.ts`'s `isCellTruncated`); this component only
+//    supplies the box.
+//
+//    Portals to `document.body` (crispy-seed#1094's own pinned-column follow-up,
+//    ported from the chip-list editor's popover, `body-cells.tsx`'s
+//    `isChipListEditable` -- that one shipped this exact fix in 0.10.3) rather than
+//    positioning `absolute` against its own cell: a `position: sticky` `<td>` clips ANY
+//    descendant that grows past its own box, in every browser tested, regardless of
+//    `overflow`/`z-index` on anything in between, so a pinned column's own truncated
+//    cell used to clip this overlay's grown content instead of showing it in full. A
+//    portal sidesteps that by not being a descendant of the sticky `<td>` at all once
+//    mounted -- position is instead measured live off `anchorRef`'s own
+//    `getBoundingClientRect()`, the same technique the chip-list popover already uses.
+function CellExpandOverlay({ className, anchorRef, contentRef, children }) {
+    const [style, setStyle] = React.useState(null);
+    // Grows 1px past the cell's own edges in every direction, matching this box's
+    // pre-portal `top: -1px; insetInlineStart: -1px; insetInlineEnd: -1px` (the recipe's
+    // `expandOverlay` class, `data-table.ts`) -- hides the 1px border seam against the
+    // cell it's expanding out of. `minHeight`/`insetInlineEnd` from that same class no
+    // longer apply once portaled (they resolved against the `<td>` as this box's own
+    // containing block, meaningless once it's a `position: fixed` child of `<body>`
+    // instead -- the same override the chip-list popover's own `measurePopoverPosition`,
+    // `body-cells.tsx`, already makes), so this overrides both explicitly.
+    const measure = React.useCallback(()=>{
+        const cell = anchorRef.current;
+        if (!cell) return;
+        const rect = cell.getBoundingClientRect();
+        setStyle({
+            position: "fixed",
+            top: rect.top - 1,
+            insetInlineStart: rect.left - 1,
+            insetInlineEnd: "auto",
+            width: rect.width + 2,
+            minHeight: "auto",
+            zIndex: 1000
+        });
+    }, [
+        anchorRef
+    ]);
+    // Measured before paint, on mount -- see this component's own prop doc comment for
+    // why it can't just trust a caller to have measured first.
+    React.useLayoutEffect(()=>{
+        measure();
+    }, [
+        measure
+    ]);
+    // Same capture-phase listeners as the chip-list popover's own reposition effect
+    // (`body-cells.tsx`) -- `scroll` doesn't bubble, so the table's own horizontal/
+    // vertical scroll container (an arbitrary ancestor, not necessarily `window` itself)
+    // is only observable this way.
+    React.useEffect(()=>{
+        window.addEventListener("scroll", measure, true);
+        window.addEventListener("resize", measure);
+        return ()=>{
+            window.removeEventListener("scroll", measure, true);
+            window.removeEventListener("resize", measure);
+        };
+    }, [
+        measure
+    ]);
+    // Nothing to portal until the first measurement lands (avoids a one-frame flash at
+    // the origin corner before `useLayoutEffect` runs).
+    if (!style) return null;
+    return /*#__PURE__*/ createPortal(// `stopPropagation` -- an overlay sits on top of (and past) its own cell/row;
     // a click anywhere inside it must never ALSO fire the row's own `onRowClick`,
     // the same guard every other interactive cell affordance in this directory
     // already applies (`LinkCell`, `EntityCell`'s preview button, editors.tsx's
     // `TextEditor` root).
     // biome-ignore lint/a11y/noStaticElementInteractions: not a widget -- this div never responds to interaction on ITSELF, only stops propagation of events that already occurred on a real interactive descendant (the editor/text it wraps). No role fits it because it isn't a control.
     /*#__PURE__*/ jsx("div", {
+        ref: contentRef,
         className: className,
+        style: style,
         onClick: (event)=>event.stopPropagation(),
         children: children
-    }));
+    }), document.body);
 }
 
 // Row-narrowing for the toolbar's search box -- split out of DataTable.tsx the way
@@ -4845,21 +4944,17 @@ function isCellTruncated(cell) {
  *  close itself after the first tag commits, see `ChipListEditor`'s own doc
  *  comment).
  *
- *  Unlike every OTHER open editor in this file, this one does NOT render inside
- *  Feature C's `CellExpandOverlay` (an anchored box positioned relative to the
- *  `<td>`, `position: absolute` against it) -- it renders through a REAL React
- *  portal to `document.body` instead (`DataTableBodyCell`'s own `popoverStyle`).
- *  Confirmed live, crispy-seed#1094's pinned-column follow-up: a `position: sticky`
- *  `<td>` clips ANY descendant content that grows past its own box to the table's
- *  scrollport, in EVERY browser tested, regardless of `overflow: visible` on every
- *  element in between and regardless of how high its `z-index` is raised -- neither
- *  of which is a stacking-context or overflow bug this file can fix from the
- *  INSIDE. A portal sidesteps it entirely by not being a descendant of the sticky
- *  `<td>` at all once mounted. The same sticky-clip almost certainly affects the
- *  OTHER gated editors' `CellExpandOverlay` too when their own column is pinned,
- *  but porting all of Feature C to this same portal model is its own change,
- *  out of scope here -- this fix is scoped to the one editor crispy-seed#1094
- *  actually reported against a pinned column. */ function isChipListEditable(column) {
+ *  This one renders through its OWN REAL React portal to `document.body`
+ *  (`DataTableBodyCell`'s own `popoverStyle`) rather than `editors.tsx`'s shared
+ *  `CellExpandOverlay`, since its shape is different (Attio's own click-anywhere-
+ *  opens gesture, no truncation gate). `CellExpandOverlay` itself ALSO portals to
+ *  `document.body` now (ported from this exact fix) -- both exist because a
+ *  `position: sticky` `<td>` clips ANY descendant content that grows past its own
+ *  box to the table's scrollport, in EVERY browser tested, regardless of
+ *  `overflow: visible` on every element in between and regardless of how high its
+ *  `z-index` is raised -- neither of which is a stacking-context or overflow bug
+ *  fixable from the INSIDE. A portal sidesteps it entirely by not being a
+ *  descendant of the sticky `<td>` at all once mounted. */ function isChipListEditable(column) {
     return !!column.editable && column.type === "chip-list";
 }
 function ColumnBodyCells({ columns, row, classNames, locale, selectable, stickyFirst, stickyLast, cellContextMenu, onViewEditHistory, cellContextMenuItems }) {
@@ -4868,10 +4963,9 @@ function ColumnBodyCells({ columns, row, classNames, locale, selectable, stickyF
         stickyFirst
     });
     return /*#__PURE__*/ jsx(Fragment, {
-        children: effective.map((entry, index)=>{
+        children: effective.map((entry)=>{
             const { column } = entry;
-            const isLast = index === effective.length - 1;
-            const sticky = pinnedCellProps(entry, stickyLast, isLast);
+            const sticky = pinnedCellProps(entry, stickyLast);
             return /*#__PURE__*/ jsx(DataTableBodyCell, {
                 column: column,
                 row: row,
@@ -5019,6 +5113,16 @@ function ColumnBodyCells({ columns, row, classNames, locale, selectable, stickyF
     // mounted, in `document.body` -- see `isChipListEditable`'s doc comment) and by
     // the reposition effect further down.
     const popoverRef = React.useRef(null);
+    // Feature C's own portaled overlay (`CellExpandOverlay`, editors.tsx) -- its own DOM
+    // node, once mounted, same reasoning as `popoverRef` above: it lives outside
+    // `cellRef`'s subtree (a sibling of the table in `document.body`, not a descendant of
+    // the `<td>`), so the outside-click detector below needs a ref to it too. Without
+    // this, `isInside` saw every click/keystroke INSIDE the portaled editor as "outside"
+    // once the overlay actually escaped the `<td>` (this fix's whole point) -- e.g.
+    // typing into the overlay's own `TextEditor` fires a pointerdown on an input that is
+    // no longer `cellRef.current`'s descendant, so every keystroke closed the overlay and
+    // cancelled the edit before the user finished typing.
+    const expandOverlayRef = React.useRef(null);
     // Closes the overlay on Escape or an outside click/pointerdown -- a gated
     // editor's OWN Escape/blur handling already ends `isEditing` on its own (see
     // `TextEditor`/`SelectEditor`'s existing onCancel/onOpenChange wiring), which
@@ -5031,7 +5135,7 @@ function ColumnBodyCells({ columns, row, classNames, locale, selectable, stickyF
     React.useEffect(()=>{
         if (!overlayOpen) return;
         function isInside(target) {
-            return (cellRef.current?.contains(target) ?? false) || (popoverRef.current?.contains(target) ?? false);
+            return (cellRef.current?.contains(target) ?? false) || (popoverRef.current?.contains(target) ?? false) || (expandOverlayRef.current?.contains(target) ?? false);
         }
         function handlePointerDown(event) {
             if (!isInside(event.target)) {
@@ -5104,7 +5208,9 @@ function ColumnBodyCells({ columns, row, classNames, locale, selectable, stickyF
                         rowId: row.id,
                         classNames: classNames,
                         locale: locale,
-                        overlayActive: overlayActive
+                        overlayActive: overlayActive,
+                        cellRef: cellRef,
+                        expandOverlayRef: expandOverlayRef
                     }),
                     cellContextMenu && contextMenuOpen && contextMenuPoint && // A `<td>` (unlike its own parent `<tr>`) can validly hold any flow
                     // content, so `CellContextMenu`'s own 0x0 `MenuAnchor` -- itself never
@@ -5149,7 +5255,7 @@ function ColumnBodyCells({ columns, row, classNames, locale, selectable, stickyF
  * display (a custom `render` wins there, same as before `editable` existed; it never
  * overrides an actual editing/always-live state, matching crisp's own split between
  * `renderTyped`'s rest-state branch and the editing branches above it).
- */ function CellContent({ column, row, rowId, classNames, locale, overlayActive }) {
+ */ function CellContent({ column, row, rowId, classNames, locale, overlayActive, cellRef, expandOverlayRef }) {
     const { isEditing, isPending, getEditError, commitEdit, cancelEdit } = useDataTableContext();
     const rawValue = getColumnValue(column, row);
     const pending = isPending(rowId, column.key);
@@ -5243,6 +5349,8 @@ function ColumnBodyCells({ columns, row, classNames, locale, selectable, stickyF
         children: [
             overlayActive ? /*#__PURE__*/ jsx(CellExpandOverlay, {
                 className: classNames.expandOverlay,
+                anchorRef: cellRef,
+                contentRef: expandOverlayRef,
                 children: column.editable ? node : /*#__PURE__*/ jsx("span", {
                     className: classNames.expandOverlayText,
                     children: node
@@ -5406,10 +5514,9 @@ function ColumnCalcCells({ columns, rows, selectable, stickyFirst, stickyLast })
         stickyFirst
     });
     return /*#__PURE__*/ jsx(Fragment, {
-        children: effective.map((entry, index)=>{
+        children: effective.map((entry)=>{
             const { column } = entry;
-            const isLast = index === effective.length - 1;
-            const sticky = pinnedCellProps(entry, stickyLast, isLast);
+            const sticky = pinnedCellProps(entry, stickyLast);
             return /*#__PURE__*/ jsx(DataTableFooterCell, {
                 "data-sticky": sticky["data-sticky"],
                 "data-sticky-edge": sticky["data-sticky-edge"],
@@ -5632,10 +5739,9 @@ const DEFAULT_SORT_ICON = {
     });
     const [renamingKey, setRenamingKey] = React.useState(null);
     return /*#__PURE__*/ jsx(Fragment, {
-        children: effective.map((entry, index)=>{
+        children: effective.map((entry)=>{
             const { column, label, width } = entry;
-            const isLast = index === effective.length - 1;
-            const sticky = pinnedCellProps(entry, stickyLast, isLast);
+            const sticky = pinnedCellProps(entry, stickyLast);
             return /*#__PURE__*/ jsxs(DataTableHeaderCell, {
                 columnKey: column.key,
                 sortable: column.sortable,
@@ -11645,6 +11751,12 @@ function DataTableInner(props, ref) {
     const columnKeys = React.useMemo(()=>columns.map((column)=>column.key), [
         columns
     ]);
+    // Threaded down to `reconcileColumnOrder` (react-headless's `dom.ts`) so a brand-new
+    // column added to `columns` after mount gets appended BEFORE this one, not past it --
+    // see that function's own doc comment for the bug this prevents.
+    const actionsColumnKey = React.useMemo(()=>columns.find((column)=>column.actions)?.key, [
+        columns
+    ]);
     const searchable = React.useMemo(()=>columns.some((column)=>column.searchable), [
         columns
     ]);
@@ -11687,6 +11799,7 @@ function DataTableInner(props, ref) {
             toolbarFilters: resolvedToolbarFilters,
             onToolbarFiltersChange: handleToolbarFiltersChange,
             columnKeys: columnKeys,
+            actionsColumnKey: actionsColumnKey,
             columnOrder: columnOrder,
             defaultColumnOrder: defaultColumnOrder,
             onColumnOrderChange: onColumnOrderChange,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crispy-seed/data-table",
-  "version": "0.11.0",
+  "version": "0.11.1",
   "description": "Self-contained, publishable build of seed-design's Attio-measured DataTable, ResizablePanel and RecordPreview — one install, one CSS import.",
   "repository": {
     "type": "git",