@crisp-ui-kit/crisp 0.54.8 → 0.54.9

package/dist/esm/components/datatable/datatable.js

@@ -1,9 +1,19 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ArrowDown, ArrowUp, Check, ChevronsUpDown, CircleUserRound, GripVertical, Lock, Plus, Search, SlidersHorizontal, } from "lucide-react";
+import { ArrowDown, ArrowUp, Check, ChevronsUpDown, CircleUserRound, ClipboardPaste, Copy, GripVertical, History, Lock, PanelRight, Plus, Search, SlidersHorizontal, X, } from "lucide-react";
 import * as React from "react";
 import { cellDatePrecision, formatCellDate, isRtlElement, parseCellDate, useCrispMessage, useCrispMessages, } from "../../core/index.js";
+// crisp/#601 supersession: a deliberate exception to "DS atoms stay
+// generic; product components compose them" (AUTHORING.md) -- the row's
+// own comment affordance is `CommentCountBadge` (product/comments, #625),
+// already correctly built and measured for the dot/hover-count states this
+// plain icon path can't express on its own. Reaching into `product/` from
+// `components/` runs backwards from every other import in this file; it's
+// scoped to this one component, not a precedent for the rest of DataTable.
+import { CommentCountBadge } from "../../product/comments/index.js";
 import { Avatar } from "../avatar/index.js";
 import { Checkbox } from "../checkbox/index.js";
+import { ColumnCalc } from "../columncalc/index.js";
+import { ContextMenu } from "../contextmenu/index.js";
 import { Menu, MenuItem } from "../menu/index.js";
 import { Select } from "../select/index.js";
 import { Spinner } from "../spinner/index.js";
@@ -18,6 +28,35 @@ import { datatableRecipe } from "./datatable.recipe.js";
 export function isLabelTruncated(el) {
     return el.scrollWidth > el.clientWidth;
 }
+// #731: the pure resequencing behind both the controlled `columnOrder` prop
+// and the drag/Move-left-right mutations that produce one -- exported so the
+// "does this actually reorder, and does it survive a stale/unknown key"
+// logic can be mutation-tested without mounting the table. Every key in
+// `order` that matches a real column is placed first, in `order`'s own
+// sequence; every column NOT named in `order` (a brand-new column a
+// consumer's persisted order hasn't caught up to yet) keeps its relative
+// position at the end, in `cols`' own order -- so a column can never be
+// dropped or duplicated by this, only resequenced. An `order` entry with no
+// matching column (one that was removed, or a stale value from a saved
+// view) is silently skipped rather than throwing.
+export function reorderColumns(cols, order) {
+    if (!order || order.length === 0)
+        return cols;
+    const byKey = new Map(cols.map((c) => [c.key, c]));
+    const seen = new Set();
+    const ordered = [];
+    for (const key of order) {
+        const c = byKey.get(key);
+        if (c && !seen.has(key)) {
+            ordered.push(c);
+            seen.add(key);
+        }
+    }
+    for (const c of cols)
+        if (!seen.has(c.key))
+            ordered.push(c);
+    return ordered;
+}
 /**
  * The header label span: a `Tooltip` (full text, `asChild` so the wrapper
  * never displaces the ellipsis CSS the span already carries -- see
@@ -223,7 +262,7 @@ function formatCell(type, v, symbol, locale = "en-US") {
 // silently drop the cell's data. Each branch decides for itself where a
 // display string belongs -- as an entity's name, a status' label -- while the
 // raw value keeps driving structure and tone.
-function renderTyped(col, value, avatarTone, row, display, locale = "en-US") {
+function renderTyped(col, value, avatarTone, row, display, locale = "en-US", openPreviewLabel = "Open preview", rowHovered = false) {
     // Attio's own empty cell is genuinely blank -- no placeholder character at
     // all, for any column type (#412).
     const empty = null;
@@ -242,7 +281,10 @@ function renderTyped(col, value, avatarTone, row, display, locale = "en-US") {
                             // at a DIFFERENT record than the row itself (#501).
                             ev.stopPropagation();
                             col.onEntityClick?.(row);
-                        }, children: e.name })) : (_jsx("span", { className: "crisp-datatable-entity-name", children: e.name }))] }));
+                        }, children: e.name })) : (_jsx("span", { className: "crisp-datatable-entity-name", children: e.name })), col.onOpenComments ? (_jsx("span", { className: "crisp-datatable-entity-actions", children: _jsx(CommentCountBadge, { count: col.commentCount?.(row) ?? 0, hovered: rowHovered, onOpen: () => col.onOpenComments?.(row), onOpenPreview: col.onOpenPreview ? () => col.onOpenPreview?.(row) : undefined, previewLabel: openPreviewLabel }) })) : (col.onOpenPreview && (_jsx("span", { className: "crisp-datatable-entity-actions", children: _jsx("button", { type: "button", className: "crisp-datatable-entity-action", "aria-label": openPreviewLabel, onClick: (ev) => {
+                                ev.stopPropagation();
+                                col.onOpenPreview?.(row);
+                            }, children: _jsx(PanelRight, { "data-rtl-flip": "", size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }) })))] }));
         }
         case "tags": {
             // asking for a format on a tag column means "render it your way" -- show
@@ -415,7 +457,7 @@ function DataReferenceEditor({ col, value, isPending, onCommit, onCancel, }) {
                     onCommit(v);
             } }) }));
 }
-export function DataTable({ columns: columnsProp, data, selectable = false, selectedIds, onSelectionChange, selectAllLabel: selectAllLabelProp, selectRowLabel = (row) => `Select row ${row.id}`, selectionAnnouncement, columnMenu = false, onColumnsChange, groupBy, onRowsReorder, error, sort: sortProp, defaultSort, onSortChange, filterable = false, searchPlaceholder: searchPlaceholderProp, searchLabel: searchLabelProp, onEdit, stickyFirst = true, stickyLast = false, scrollProps, locale: localeProp, avatarTone = "brand", surface, interactive = false, onRowClick, onAddRow, addRowLabel: addRowLabelProp, empty: emptyProp, showCount = true, countLabel, toolbar, height, className, reorderRowLabel: reorderRowLabelProp, sortAscendingLabel: sortAscendingLabelProp, sortDescendingLabel: sortDescendingLabelProp, moveColumnLeftLabel: moveColumnLeftLabelProp, moveColumnRightLabel: moveColumnRightLabelProp, editColumnLabel: editColumnLabelProp, hideColumnLabel: hideColumnLabelProp, renameColumnLabel: renameColumnLabelProp, viewSettingsLabel: viewSettingsLabelProp, columnsGroupLabel: columnsGroupLabelProp, ...rest }) {
+export function DataTable({ columns: columnsProp, data, selectable = false, selectedIds, onSelectionChange, selectAllLabel: selectAllLabelProp, selectRowLabel = (row) => `Select row ${row.id}`, selectionAnnouncement, columnMenu = false, onColumnsChange, columnOrder, onColumnOrderChange, groupBy, onRowsReorder, error, sort: sortProp, defaultSort, onSortChange, filterable = false, searchPlaceholder: searchPlaceholderProp, searchLabel: searchLabelProp, onEdit, onViewEditHistory, stickyFirst = true, stickyLast = false, scrollProps, locale: localeProp, avatarTone = "brand", surface, interactive = false, onRowClick, onAddRow, addRowLabel: addRowLabelProp, empty: emptyProp, showCount = true, countLabel, toolbar, height, className, reorderRowLabel: reorderRowLabelProp, openPreviewLabel: openPreviewLabelProp, sortAscendingLabel: sortAscendingLabelProp, sortDescendingLabel: sortDescendingLabelProp, moveColumnLeftLabel: moveColumnLeftLabelProp, moveColumnRightLabel: moveColumnRightLabelProp, editColumnLabel: editColumnLabelProp, hideColumnLabel: hideColumnLabelProp, renameColumnLabel: renameColumnLabelProp, viewSettingsLabel: viewSettingsLabelProp, columnsGroupLabel: columnsGroupLabelProp, cellMenuLabel: cellMenuLabelProp, copyLabel: copyLabelProp, pasteLabel: pasteLabelProp, viewEditHistoryLabel: viewEditHistoryLabelProp, clearValueLabel: clearValueLabelProp, ...rest }) {
     // crisp/#471: same resolution order as TableToolbar's own — an explicit
     // prop wins, then the provider's translation of the built-in English
     // default, then that default itself with no provider in the tree.
@@ -432,6 +474,7 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
     // wants shown); only the built-in string default translates.
     const empty = emptyProp ?? crispMessages["No results."] ?? "No results.";
     const reorderRowLabel = useCrispMessage(reorderRowLabelProp, "Reorder row");
+    const openPreviewLabel = useCrispMessage(openPreviewLabelProp, "Open preview");
     const sortAscendingLabel = useCrispMessage(sortAscendingLabelProp, "Sort ascending");
     const sortDescendingLabel = useCrispMessage(sortDescendingLabelProp, "Sort descending");
     const moveColumnLeftLabel = useCrispMessage(moveColumnLeftLabelProp, "Move left");
@@ -441,6 +484,11 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
     const renameColumnLabel = useCrispMessage(renameColumnLabelProp, "Rename column");
     const viewSettingsLabel = useCrispMessage(viewSettingsLabelProp, "View settings");
     const columnsGroupLabel = useCrispMessage(columnsGroupLabelProp, "Columns");
+    const cellMenuLabel = useCrispMessage(cellMenuLabelProp, "Cell options");
+    const copyLabel = useCrispMessage(copyLabelProp, "Copy");
+    const pasteLabel = useCrispMessage(pasteLabelProp, "Paste");
+    const viewEditHistoryLabel = useCrispMessage(viewEditHistoryLabelProp, "View edit history");
+    const clearValueLabel = useCrispMessage(clearValueLabelProp, "Clear value");
     // countLabel/selectionAnnouncement stay formatter props, same escape hatch
     // as TableToolbar's sortTriggerLabel — word order and pluralisation rules
     // differ too much across languages for a template. Their BUILT-IN default
@@ -469,14 +517,32 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
     // menu mutates this copy and reports upward via `onColumnsChange`.
     const [internalCols, setInternalCols] = React.useState(columnsProp);
     React.useEffect(() => setInternalCols(columnsProp), [columnsProp]);
-    /** Every column, hidden ones included — what the column manager lists. */
-    const allColumns = internalCols;
+    /** Every column, hidden ones included — what the column manager lists.
+     * `columnOrder`, controlled or not, is the one source of truth for ORDER;
+     * `internalCols` still carries each column's hidden/renamed state, so
+     * resequencing it here never loses either. */
+    const allColumns = React.useMemo(() => reorderColumns(internalCols, columnOrder), [internalCols, columnOrder]);
     /** What the grid actually renders. */
-    const columns = React.useMemo(() => internalCols.filter((c) => !c.hidden), [internalCols]);
+    const columns = React.useMemo(() => allColumns.filter((c) => !c.hidden), [allColumns]);
     const applyColumns = React.useCallback((next) => {
         setInternalCols(next);
         onColumnsChange?.(next);
     }, [onColumnsChange]);
+    // Reordering specifically (a header drag, or the menu's Move left/right) —
+    // separate from `applyColumns` above (hide/rename, which never touch
+    // order) because this is the one path that also owns `columnOrder`:
+    // uncontrolled, it seeds `internalCols`' own order same as any other
+    // mutation; controlled, the next render's `allColumns` re-derives order
+    // from the (now stale, until the consumer updates it) `columnOrder` prop
+    // instead — the same contract `sort`/`selectedIds` already use — so this
+    // deliberately does NOT touch `internalCols`' order when controlled.
+    const applyOrder = React.useCallback((nextOrder) => {
+        const next = reorderColumns(allColumns, nextOrder);
+        if (columnOrder === undefined)
+            setInternalCols(next);
+        onColumnsChange?.(next);
+        onColumnOrderChange?.(next.map((c) => c.key));
+    }, [allColumns, columnOrder, onColumnsChange, onColumnOrderChange]);
     const moveColumn = React.useCallback((key, dir) => {
         const i = allColumns.findIndex((c) => c.key === key);
         const j = i + dir;
@@ -484,14 +550,44 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
             return;
         const next = [...allColumns];
         [next[i], next[j]] = [next[j], next[i]];
-        applyColumns(next);
-    }, [allColumns, applyColumns]);
+        applyOrder(next.map((c) => c.key));
+    }, [allColumns, applyOrder]);
     const hideColumn = React.useCallback((key) => applyColumns(allColumns.map((c) => (c.key === key ? { ...c, hidden: true } : c))), [allColumns, applyColumns]);
     const renameColumn = React.useCallback((key, header) => applyColumns(allColumns.map((c) => (c.key === key ? { ...c, header } : c))), [allColumns, applyColumns]);
     const [renaming, setRenaming] = React.useState(null);
     const showColumn = React.useCallback((key) => applyColumns(allColumns.map((c) => (c.key === key ? { ...c, hidden: false } : c))), [allColumns, applyColumns]);
     const [selCell, setSelCell] = React.useState(null);
+    // crisp/#625/#601 supersession: `CommentCountBadge` branches its own
+    // render (a plain dot vs. the icon+count row) on a `hovered` boolean it
+    // takes as a prop -- unlike the plain #601 icons this replaces, which
+    // reveal on pure `tr:hover` CSS, the badge has no hover detection of its
+    // own (see its own doc comment) and needs the row's hover state IN JS.
+    // A single id, not a Set: only one row is ever hovered at a time, so this
+    // is one extra re-render on enter/leave, not per-row state.
+    const [hoveredRowId, setHoveredRowId] = React.useState(null);
+    // crisp/#645, checklist G-101: a Shift+Click extends a RANGE from the last
+    // plain-click anchor to the newly clicked cell (spreadsheet convention --
+    // Attio's own trigger is "Click cell A, Shift+Click cell B"). `selAnchor`
+    // is the fixed corner; `selCell` (above) keeps doubling as the moving
+    // corner/focus cell, so every existing single-cell consumer (editing,
+    // arrow-key nav, Enter) is unaffected -- a plain click resets `selAnchor`
+    // to null, collapsing back to single-cell mode.
+    const [selAnchor, setSelAnchor] = React.useState(null);
     const gridRef = React.useRef(null);
+    // The native-copy-event proxy (crisp/#645): Attio "has no Mousetrap/
+    // JS-keydown binding for c/mod+c ... it copies purely via the native
+    // browser copy event" -- confirmed live, `document.execCommand('copy')`
+    // on the focused element is what reliably fires it, a synthetic keydown
+    // does not. A plain focused `<div>` (what `gridRef` is) never receives a
+    // native `copy` event at all (no selection, nothing editable) -- verified
+    // empirically (Playwright, a focused non-editable div, real Ctrl+C: no
+    // `copy` event fires; the same page's `<input>` with selected text does).
+    // This hidden, always-selected textarea is what a spreadsheet-style grid
+    // needs to give the browser something copyable while the VISIBLE focus
+    // styling stays on the grid: it's the same visually-hidden-but-focusable
+    // shape as `.crisp-datatable-live` below, just interactive instead of
+    // `aria-live`.
+    const clipboardProxyRef = React.useRef(null);
     // #579: the click-to-expand overlay for a truncated cell. Only one is ever
     // open (a second click-to-expand elsewhere closes the first, matching "one
     // live session"-style singular UI state already used for `selCell`).
@@ -635,6 +731,25 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
     const [widths, setWidths] = React.useState({});
     const [resizingKey, setResizingKey] = React.useState(null);
     const resizeRef = React.useRef(null);
+    // crisp/#731 -- column drag-to-reorder. Pointer events, not native HTML5
+    // `draggable`: measured live on Attio's own grid (#731's issue comment) --
+    // `aria-roledescription="draggable"` etc. on every draggable header is
+    // dnd-kit's own signature, itself pointer-events-based, the same primitive
+    // `board.tsx` moved to in #724 (mousedown -> several mousemoves -> mouseup,
+    // no `[draggable]` anywhere). Mirrors that fix's own shape: a ref for the
+    // in-flight gesture (so a pointermove before the 2px threshold never
+    // re-renders), React state for what actually needs to paint.
+    const [dragColKey, setDragColKey] = React.useState(null);
+    const [dropCol, setDropCol] = React.useState(null);
+    const colDragRef = React.useRef(null);
+    // Keyed by column key, not index -- #577's own column virtualization means
+    // an off-screen column's `TableHead` unmounts entirely (confirmed live:
+    // Attio does the same, a column scrolled far enough away disappears from
+    // the DOM), so this only ever holds the currently-mounted ones, same as
+    // `board.tsx`'s `colRefs`.
+    const colRefs = React.useRef(new Map());
+    const autoScrollRef = React.useRef(null);
+    const COL_DRAG_THRESHOLD = 2; // crisp/#736 review fix: measured ~2px, not 4px
     const colWidth = (col) => widths[col.key] ?? col.width ?? (col.type === "entity" ? 220 : 160);
     const minWidth = (showGrip ? GRIP_W : 0) +
         (selectable ? CHECK_W : 0) +
@@ -883,21 +998,166 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
                 return { type: "text", inputMode: "text" };
         }
     }
+    /** The rectangular range's index bounds (inclusive), or null outside range
+     * mode (`selAnchor` unset -- single-cell selection, the common case).
+     * Indices, not ids/keys, so it always reads against the CURRENT rendered
+     * `rows`/`columns` order -- the same order arrow-key nav already uses. */
+    function getSelRangeIndices() {
+        if (!selAnchor || !selCell)
+            return null;
+        const ar = rows.findIndex((row) => row.id === selAnchor.id);
+        const ac = columns.findIndex((col) => col.key === selAnchor.key);
+        const fr = rows.findIndex((row) => row.id === selCell.id);
+        const fc = columns.findIndex((col) => col.key === selCell.key);
+        if (ar < 0 || ac < 0 || fr < 0 || fc < 0)
+            return null;
+        return {
+            r0: Math.min(ar, fr),
+            r1: Math.max(ar, fr),
+            c0: Math.min(ac, fc),
+            c1: Math.max(ac, fc),
+        };
+    }
+    /**
+     * crisp/#645: Attio copies the RAW, unformatted value (`asText`, not
+     * `formatCell` -- G-070: a formatted "28,946,065" cell copies as raw
+     * "28946065"), writes nothing at all for a `readOnly`/computed cell
+     * (G-100 -- no clipboard write occurs, not an empty string), and a
+     * Shift+Click range copies as TSV: `\t` between columns, `\r\n` between
+     * rows, no header row, raw values (G-101). Returns null for "no clipboard
+     * write" (the single-readOnly-cell case, or nothing selected) rather than
+     * "" -- the caller must not fall back to writing an empty string either.
+     */
+    function buildCopyText() {
+        const range = getSelRangeIndices();
+        if (range) {
+            const { r0, r1, c0, c1 } = range;
+            const lines = [];
+            for (let ri = r0; ri <= r1; ri++) {
+                const row = rows[ri];
+                const cells = [];
+                for (let ci = c0; ci <= c1; ci++) {
+                    const col = columns[ci];
+                    cells.push(col.readOnly ? "" : asText(cellValue(col, row)));
+                }
+                lines.push(cells.join("\t"));
+            }
+            return lines.join("\r\n");
+        }
+        if (!selCell)
+            return null;
+        const row = rows.find((rw) => rw.id === selCell.id);
+        const col = columns.find((cc) => cc.key === selCell.key);
+        if (!row || !col || col.readOnly)
+            return null;
+        return asText(cellValue(col, row));
+    }
+    /**
+     * crisp/#645: the native `copy`/`paste` events, not a keydown handler --
+     * Attio "has no Mousetrap/JS-keydown binding for c/mod+c ... it copies
+     * purely via the native browser copy event" (confirmed live). These fire
+     * on `clipboardProxyRef`'s hidden textarea (see its own comment), which
+     * `onGridKeyDown` below no longer intercepts Cmd/Ctrl+C for.
+     */
+    function onGridCopy(e) {
+        e.preventDefault();
+        const text = buildCopyText();
+        if (text != null)
+            e.clipboardData.setData("text/plain", text);
+    }
+    /** crisp/#598, G-071: Attio's own context-menu Paste "looked like it would
+     * commit immediately with no safe cancel step" -- matched here: paste
+     * commits straight to `onEdit`, it doesn't open the cell's editor first.
+     * Single-cell only -- a range-fill paste isn't measured (G-071 was
+     * deliberately not exercised against real clipboard content), so it isn't
+     * built rather than guessed. */
+    function onGridPaste(e) {
+        e.preventDefault();
+        if (!selCell || editing)
+            return;
+        const col = columns.find((cc) => cc.key === selCell.key);
+        if (!col?.editable || col.readOnly)
+            return;
+        const text = e.clipboardData.getData("text/plain");
+        onEdit?.(selCell.id, selCell.key, text);
+    }
+    /**
+     * crisp/#598, checklist G-043: Attio's cell context menu is "identical
+     * regardless of field type" — Copy, Paste, View edit history, Clear
+     * value, every time, just some items disabled. No row-level menu exists
+     * at all (G-044 — RecordsTable's own Copy/Duplicate/Pin/Delete row menu
+     * was dropped rather than carried onto DataTable, per the consolidation
+     * plan's own decision: Attio has no row menu to match).
+     */
+    function cellMenuItems(row, col) {
+        return [
+            {
+                label: copyLabel,
+                icon: _jsx(Copy, { size: 16, strokeWidth: 1.75 }),
+                // G-100: Attio has "no copy handler at all" for a computed/
+                // read-only field -- disabled here, not just silently a no-op, so
+                // the menu itself tells the reader why.
+                disabled: !!col.readOnly,
+                onSelect: () => {
+                    if (col.readOnly)
+                        return;
+                    navigator.clipboard
+                        ?.writeText(asText(cellValue(col, row)))
+                        .catch(() => { });
+                },
+            },
+            {
+                label: pasteLabel,
+                icon: _jsx(ClipboardPaste, { size: 16, strokeWidth: 1.75 }),
+                disabled: !col.editable || !!col.readOnly,
+                onSelect: () => {
+                    navigator.clipboard
+                        ?.readText()
+                        .then((text) => onEdit?.(row.id, col.key, text))
+                        .catch(() => { });
+                },
+            },
+            { separator: true },
+            {
+                label: viewEditHistoryLabel,
+                icon: _jsx(History, { size: 16, strokeWidth: 1.75 }),
+                // Attio's own item carries a "Pro" pill (crisp has no billing
+                // concept to gate on, see this prop's own doc comment) -- disabled
+                // only when the consumer gave nothing for it to open, not gated on
+                // a plan crisp doesn't model.
+                disabled: !onViewEditHistory,
+                onSelect: () => onViewEditHistory?.(row.id, col.key),
+            },
+            { separator: true },
+            {
+                label: clearValueLabel,
+                icon: _jsx(X, { size: 16, strokeWidth: 1.75 }),
+                danger: true,
+                disabled: !col.editable,
+                onSelect: () => onEdit?.(row.id, col.key, ""),
+            },
+        ];
+    }
     /**
      * Spreadsheet keyboard model, ported from RecordsTable: arrows move the
      * selected cell, Enter opens its editor (or, on a non-editable cell,
-     * activates the row via `onRowClick`), Escape clears, and Cmd/Ctrl+C
-     * copies the cell's RENDERED text (what the user sees, not the raw value).
+     * activates the row via `onRowClick`), Escape clears. Cmd/Ctrl+C is
+     * deliberately NOT handled here (crisp/#645) -- copy is the native `copy`
+     * event on `clipboardProxyRef`, see `onGridCopy` above.
      */
     function onGridKeyDown(e) {
         if (!selCell || editing)
             return;
-        if ((e.metaKey || e.ctrlKey) && (e.key === "c" || e.key === "C")) {
-            const row = rows.find((rw) => rw.id === selCell.id);
-            const col = columns.find((cc) => cc.key === selCell.key);
-            if (row && col)
-                navigator.clipboard?.writeText(formatCell(col.type, cellValue(col, row), col.symbol, locale));
+        // crisp/#607, G-069: Attio's own Cmd+A selects every row (confirmed
+        // live, `metaKey:true`, all 37/37 rows, header checkbox fully checked)
+        // -- a real SELECT ALL, not `toggleAll`'s flip-if-already-all-selected,
+        // so a second Cmd+A with everything already picked stays a no-op
+        // instead of clearing the selection out from under the user.
+        if ((e.metaKey || e.ctrlKey) && (e.key === "a" || e.key === "A")) {
+            if (!selectable)
+                return;
             e.preventDefault();
+            setSelected(new Set(rows.map((rw) => rw.id)));
             return;
         }
         const r = rows.findIndex((row) => row.id === selCell.id);
@@ -917,8 +1177,27 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
             const forward = e.key === (rtl ? "ArrowLeft" : "ArrowRight");
             nc = forward ? Math.min(columns.length - 1, c + 1) : Math.max(0, c - 1);
         }
+        // crisp/#607, G-066/G-068: End jumps to the last row (confirmed live --
+        // it also triggers Attio's own lazy-load, which is a data-loading
+        // concern outside this component; the #577 scroll-into-view effect
+        // below already re-runs on every `selCell` change, on a virtualized
+        // grid too, so jumping straight to the last row is enough to reveal it
+        // the same way arrowing down one row at a time would). PageUp/PageDown
+        // move a viewport's worth of rows -- `scrollRef`'s own rendered height
+        // divided by the uniform row height, at least one row so a viewport
+        // shorter than one row can't get stuck.
+        else if (e.key === "End")
+            nr = rows.length - 1;
+        else if (e.key === "PageDown" || e.key === "PageUp") {
+            const viewportRows = Math.max(1, Math.floor((scrollRef.current?.clientHeight ?? 0) / ROW_HEIGHT));
+            nr =
+                e.key === "PageDown"
+                    ? Math.min(rows.length - 1, r + viewportRows)
+                    : Math.max(0, r - viewportRows);
+        }
         else if (e.key === "Escape") {
             setSelCell(null);
+            setSelAnchor(null);
             return;
         }
         else if (e.key === "Enter") {
@@ -940,7 +1219,16 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
         else
             return;
         e.preventDefault();
+        // A plain arrow key moves the single-cell selection and drops any active
+        // range -- Attio's own range trigger is Shift+Click only (G-101), arrow
+        // keys were never measured as a range-extend gesture, so this doesn't
+        // invent one.
+        setSelAnchor(null);
         setSelCell({ id: rows[nr].id, key: columns[nc].key });
+        // keeps the clipboard proxy's selection non-collapsed after a move, so
+        // a Cmd+C right after an arrow key still has something native `copy`
+        // can fire on (see `clipboardProxyRef`'s own comment).
+        clipboardProxyRef.current?.select();
     }
     // Opening a cell's editor also clears any stale error left over from a
     // PREVIOUS failed commit on it (#385) -- otherwise a rejection from three
@@ -1052,7 +1340,8 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
         renderItems,
     ]);
     const totalCols = columns.length + (selectable ? 1 : 0) + (showGrip ? 1 : 0);
-    const hasSummary = columns.some((c) => c.summary);
+    const hasSummary = columns.some((c) => c.summary || c.calc);
+    const hasCommentColumn = columns.some((c) => c.onOpenComments);
     // sticky attrs for the leading column(s): grip col (index -2) + selection
     // col (-1) + first data column (0). Each offsets by whatever leading
     // columns come before it, so the group stays contiguous when scrolled.
@@ -1149,13 +1438,135 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
         setResizingKey(null);
         e.target.releasePointerCapture(e.pointerId);
     }
+    // Which mounted column (if any) `clientX` is over, and which side of it --
+    // X only, not the full box: like `board.tsx`'s own `columnAt` (#724), the
+    // header row is a single non-wrapping row, so X alone already identifies a
+    // column unambiguously, and checking Y too only risks the same short-row
+    // miss that #724 found the hard way. The midpoint split is what turns
+    // "over column C" into an insertion point: left half means "before C",
+    // right half means "after C" -- exposed as `dropCol` so the render can draw
+    // the measured blue line on the correct edge.
+    function columnDropAt(clientX) {
+        for (const [key, el] of colRefs.current) {
+            const r = el.getBoundingClientRect();
+            if (clientX >= r.left && clientX <= r.right) {
+                return {
+                    key,
+                    side: clientX < r.left + r.width / 2 ? "before" : "after",
+                };
+            }
+        }
+        return null;
+    }
+    function stopColAutoScroll() {
+        if (autoScrollRef.current != null) {
+            cancelAnimationFrame(autoScrollRef.current);
+            autoScrollRef.current = null;
+        }
+    }
+    // Edge auto-scroll (measured live, #731's issue comment: dragging a header
+    // toward the viewport edge scrolls the grid to reveal more columns). A
+    // `requestAnimationFrame` loop, not a one-shot nudge per pointermove: the
+    // scroll has to keep going even while the pointer itself sits still near
+    // the edge, which a per-event nudge can't do. Guarded for environments with
+    // no `requestAnimationFrame` (bun test's happy-dom) -- never throws, just a
+    // no-op there, same as the `ResizeObserver` guards elsewhere in this file.
+    function updateColAutoScroll(clientX) {
+        if (typeof requestAnimationFrame === "undefined")
+            return;
+        const el = scrollRef.current;
+        if (!el)
+            return;
+        const r = el.getBoundingClientRect();
+        const EDGE = 40;
+        const dir = clientX < r.left + EDGE ? -1 : clientX > r.right - EDGE ? 1 : 0;
+        stopColAutoScroll();
+        if (dir === 0)
+            return;
+        const step = () => {
+            el.scrollLeft += dir * 12;
+            autoScrollRef.current = requestAnimationFrame(step);
+        };
+        autoScrollRef.current = requestAnimationFrame(step);
+    }
+    function onColHeaderPointerDown(e, key) {
+        if (!e.isPrimary)
+            return;
+        colDragRef.current = {
+            key,
+            pointerId: e.pointerId,
+            startX: e.clientX,
+            startY: e.clientY,
+            active: false,
+        };
+    }
+    function onColHeaderPointerMove(e) {
+        const st = colDragRef.current;
+        if (!st || st.pointerId !== e.pointerId)
+            return;
+        if (!st.active) {
+            if (Math.hypot(e.clientX - st.startX, e.clientY - st.startY) <
+                COL_DRAG_THRESHOLD)
+                return;
+            st.active = true;
+            setDragColKey(st.key);
+            e.currentTarget.setPointerCapture(e.pointerId);
+        }
+        const at = columnDropAt(e.clientX);
+        setDropCol(at && at.key !== st.key ? at : null);
+        updateColAutoScroll(e.clientX);
+    }
+    function endColHeaderDrag(e, commit) {
+        const st = colDragRef.current;
+        if (!st || st.pointerId !== e.pointerId)
+            return;
+        if (commit && st.active && dropCol) {
+            const keys = allColumns.map((c) => c.key);
+            const from = keys.indexOf(st.key);
+            const to = keys.indexOf(dropCol.key);
+            if (from >= 0 && to >= 0) {
+                keys.splice(from, 1);
+                let insertAt = keys.indexOf(dropCol.key);
+                if (dropCol.side === "after")
+                    insertAt += 1;
+                keys.splice(insertAt, 0, st.key);
+                applyOrder(keys);
+            }
+        }
+        colDragRef.current = null;
+        setDragColKey(null);
+        setDropCol(null);
+        stopColAutoScroll();
+    }
+    // Escape cancels the drag without committing (measured live, #731's issue
+    // comment: verified twice against the real grid) -- a document listener,
+    // not a React `onKeyDown` on the header, for the same reason
+    // `useEscapeExitsEditing` above uses one: focus during a pointer drag isn't
+    // reliably inside the dragged element.
+    React.useEffect(() => {
+        if (!dragColKey)
+            return;
+        const onKey = (e) => {
+            if (e.key !== "Escape")
+                return;
+            colDragRef.current = null;
+            setDragColKey(null);
+            setDropCol(null);
+            if (autoScrollRef.current != null) {
+                cancelAnimationFrame(autoScrollRef.current);
+                autoScrollRef.current = null;
+            }
+        };
+        document.addEventListener("keydown", onKey);
+        return () => document.removeEventListener("keydown", onKey);
+    }, [dragColKey]);
     function ChevronFor({ colKey }) {
         const dir = sortDirByKey.get(colKey);
         if (dir)
             return dir === "asc" ? (_jsx(ArrowUp, { className: "crisp-datatable-chevron", size: 13, strokeWidth: 2 })) : (_jsx(ArrowDown, { className: "crisp-datatable-chevron", size: 13, strokeWidth: 2 }));
         return (_jsx(ChevronsUpDown, { className: "crisp-datatable-chevron", size: 13, strokeWidth: 2 }));
     }
-    return (_jsxs("div", { ref: gridRef, className: datatableRecipe({ className }), tabIndex: -1, onKeyDown: onGridKeyDown, ...rest, children: [_jsx("div", { className: "crisp-datatable-live", role: "status", "aria-live": "polite", children: selectionText }), (filterable || showCount || toolbar || columnMenu) && (_jsxs("div", { className: "crisp-datatable-toolbar", children: [columnMenu && (_jsxs(Menu, { align: "start", trigger: _jsxs("button", { type: "button", className: "crisp-datatable-viewsettings", children: [_jsx(SlidersHorizontal, { size: 14, strokeWidth: 1.75 }), viewSettingsLabel] }), children: [_jsx("div", { className: "crisp-datatable-group-label", children: columnsGroupLabel }), allColumns.map((c) => (_jsxs(MenuItem, { onSelect: () => c.hidden ? showColumn(c.key) : hideColumn(c.key), children: [_jsx(Check, { size: 14, strokeWidth: 2, style: { opacity: c.hidden ? 0 : 1 } }), typeof c.header === "string" ? c.header : c.key] }, c.key)))] })), filterable && (_jsxs("span", { className: "crisp-datatable-search", children: [_jsx(Search, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), _jsx("input", { type: "search", placeholder: searchPlaceholder, value: query, onChange: (e) => setQuery(e.target.value), "aria-label": searchLabel })] })), showCount && (_jsx("span", { className: "crisp-datatable-count", children: resolvedCountLabel(rows.length, data.length) })), toolbar] })), _jsxs(Table, { interactive: interactive, surface: surface, 
+    return (_jsxs("div", { ref: gridRef, className: datatableRecipe({ className }), tabIndex: -1, onKeyDown: onGridKeyDown, ...rest, children: [_jsx("div", { className: "crisp-datatable-live", role: "status", "aria-live": "polite", children: selectionText }), _jsx("textarea", { ref: clipboardProxyRef, className: "crisp-datatable-clipboard-proxy", readOnly: true, value: " ", "aria-label": cellMenuLabel, tabIndex: -1, onCopy: onGridCopy, onPaste: onGridPaste }), (filterable || showCount || toolbar || columnMenu) && (_jsxs("div", { className: "crisp-datatable-toolbar", children: [columnMenu && (_jsxs(Menu, { align: "start", trigger: _jsxs("button", { type: "button", className: "crisp-datatable-viewsettings", children: [_jsx(SlidersHorizontal, { size: 14, strokeWidth: 1.75 }), viewSettingsLabel] }), children: [_jsx("div", { className: "crisp-datatable-group-label", children: columnsGroupLabel }), allColumns.map((c) => (_jsxs(MenuItem, { onSelect: () => c.hidden ? showColumn(c.key) : hideColumn(c.key), children: [_jsx(Check, { size: 14, strokeWidth: 2, style: { opacity: c.hidden ? 0 : 1 } }), typeof c.header === "string" ? c.header : c.key] }, c.key)))] })), filterable && (_jsxs("span", { className: "crisp-datatable-search", children: [_jsx(Search, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), _jsx("input", { type: "search", placeholder: searchPlaceholder, value: query, onChange: (e) => setQuery(e.target.value), "aria-label": searchLabel })] })), showCount && (_jsx("span", { className: "crisp-datatable-count", children: resolvedCountLabel(rows.length, data.length) })), toolbar] })), _jsxs(Table, { interactive: interactive, surface: surface, 
                 // crisp/#581: on the <table> itself (`tableStyle`), not the outer
                 // wrapper (`style`) -- see `Table`'s own doc comment on why. This is
                 // what lets the grid actually scroll horizontally INSIDE its own
@@ -1226,7 +1637,30 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
                                                 : "descending"
                                             : "none";
                                     const inner = (_jsxs("span", { className: "crisp-datatable-th-inner", children: [Icon ? _jsx(Icon, { size: 16, strokeWidth: 1.75 }) : null, _jsx(ThLabel, { header: col.header, referencedType: col.referencedType }), col.sortable ? _jsx(ChevronFor, { colKey: col.key }) : null] }));
-                                    return (_jsxs(TableHead, { align: alignFor(col), "aria-sort": ariaSort, "aria-colindex": colAriaIndex(i), ...dataStickyCol(i), children: [renaming === col.key ? (_jsx("input", { 
+                                    return (_jsxs(TableHead, { ref: isPrimary
+                                            ? undefined
+                                            : (el) => {
+                                                if (el)
+                                                    colRefs.current.set(col.key, el);
+                                                else
+                                                    colRefs.current.delete(col.key);
+                                            }, align: alignFor(col), "aria-sort": ariaSort, "aria-colindex": colAriaIndex(i), "data-dragging": dragColKey === col.key ? "" : undefined, "data-drop-before": dropCol?.key === col.key && dropCol.side === "before"
+                                            ? ""
+                                            : undefined, "data-drop-after": dropCol?.key === col.key && dropCol.side === "after"
+                                            ? ""
+                                            : undefined, 
+                                        // #731: column drag-to-reorder lives on the TH itself, not
+                                        // a dedicated grip -- Attio's own header is draggable by
+                                        // its whole surface (measured live). A plain click (no
+                                        // movement past the 2px threshold) never calls
+                                        // `setPointerCapture`/`preventDefault`, so the sort
+                                        // button/menu trigger/resize handle nested inside still get
+                                        // their own click normally; `startResize`'s own
+                                        // `stopPropagation` (above) keeps a resize drag from ever
+                                        // reaching this handler in the first place.
+                                        onPointerDown: isPrimary
+                                            ? undefined
+                                            : (e) => onColHeaderPointerDown(e, col.key), onPointerMove: isPrimary ? undefined : onColHeaderPointerMove, onPointerUp: isPrimary ? undefined : (e) => endColHeaderDrag(e, true), onPointerCancel: isPrimary ? undefined : (e) => endColHeaderDrag(e, false), ...dataStickyCol(i), children: [renaming === col.key ? (_jsx("input", { 
                                                 // biome-ignore lint/a11y/noAutofocus: the rename item opens this field
                                                 autoFocus: true, className: "crisp-datatable-th-rename", defaultValue: typeof col.header === "string" ? col.header : "", "aria-label": renameColumnLabel, onBlur: (e) => {
                                                     renameColumn(col.key, e.currentTarget.value);
@@ -1258,7 +1692,9 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
                                             dragRowId !== row.id &&
                                             dropRowId === row.id
                                             ? ""
-                                            : undefined, onClick: onRowClick ? () => onRowClick(row) : undefined, style: onRowClick ? { cursor: "pointer" } : undefined, onDragOver: showGrip && dragRowId
+                                            : undefined, onClick: onRowClick ? () => onRowClick(row) : undefined, style: onRowClick ? { cursor: "pointer" } : undefined, onMouseEnter: hasCommentColumn
+                                            ? () => setHoveredRowId(row.id)
+                                            : undefined, onMouseLeave: hasCommentColumn ? () => setHoveredRowId(null) : undefined, onDragOver: showGrip && dragRowId
                                             ? (e) => {
                                                 e.preventDefault();
                                                 if (dropRowId !== row.id)
@@ -1342,46 +1778,99 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
                                                                     commitEdit(row.id, col.key, e.currentTarget.value);
                                                                 } }), isPending && (_jsx(Spinner, { size: 14, className: "crisp-datatable-edit-pending" }))] }, col.key));
                                                 }
+                                                // `itemIndex` is the row's position in the full
+                                                // `rows` array (getSelRangeIndices' own r0/r1 are
+                                                // indices into that same array) for the common,
+                                                // ungrouped case. A `groupBy` view interleaves group-
+                                                // header items into `visibleItems`, which this
+                                                // doesn't correct for -- Shift+Click ranging across a
+                                                // grouped view isn't a measured Attio interaction
+                                                // (G-101's own trigger is a plain table), so it's a
+                                                // known gap rather than a guess at behaviour there.
+                                                const inRange = (() => {
+                                                    const range = getSelRangeIndices();
+                                                    if (!range)
+                                                        return false;
+                                                    return (itemIndex >= range.r0 &&
+                                                        itemIndex <= range.r1 &&
+                                                        i >= range.c0 &&
+                                                        i <= range.c1);
+                                                })();
                                                 const rendered = col.render
                                                     ? col.render(value, row)
-                                                    : renderTyped(col, value, avatarTone, row, col.format?.(value, row), locale);
+                                                    : renderTyped(col, value, avatarTone, row, col.format?.(value, row), locale, openPreviewLabel, hoveredRowId === row.id);
                                                 const isExpanded = expandedCell?.id === row.id &&
                                                     expandedCell?.key === col.key;
-                                                return (_jsxs(TableCell, { align: alignFor(col), "aria-colindex": colAriaIndex(i), ...sticky, className: col.editable
-                                                        ? "crisp-datatable-editable"
-                                                        : undefined, "data-selected": selCell?.id === row.id && selCell?.key === col.key
-                                                        ? ""
-                                                        : undefined, "data-cell-expanded": isExpanded ? "" : undefined, onClick: (e) => {
-                                                        // the keyboard model's anchor -- a single click
-                                                        // only selects. A genuine double-click (or Enter
-                                                        // on the selected cell) opens the editor (#411),
-                                                        // matching RecordsTable's own onDoubleClick.
-                                                        setSelCell({ id: row.id, key: col.key });
-                                                        gridRef.current?.focus({ preventScroll: true });
-                                                        // #579: a truncated cell also opens a read-only
-                                                        // overlay with its full value -- settled live
-                                                        // that this is click, not Attio's usual
-                                                        // hover-expand (a 1s hover on a truncated
-                                                        // Description cell produced nothing). Measured
-                                                        // the same way as `ThLabel`'s header tooltip
-                                                        // (#534): scrollWidth vs clientWidth on the
-                                                        // element the CSS ellipsis actually applies to,
-                                                        // which for a data cell is the `td` itself
-                                                        // (table.recipe.ts's own `overflow: hidden;
-                                                        // text-overflow: ellipsis`), not a nested span.
-                                                        setExpandedCell(isLabelTruncated(e.currentTarget)
-                                                            ? { id: row.id, key: col.key }
-                                                            : null);
-                                                    }, onDoubleClick: col.editable
-                                                        ? () => openEditing(row.id, col.key)
-                                                        : undefined, children: [!isExpanded && rendered, errorHere && (_jsx("span", { className: "crisp-datatable-edit-error", children: errorHere })), isExpanded && (_jsx("div", { className: "crisp-datatable-cell-overlay", onClick: (e) => e.stopPropagation(), children: rendered }))] }, col.key));
+                                                const cellContent = (_jsxs(_Fragment, { children: [!isExpanded && rendered, errorHere && (_jsx("span", { className: "crisp-datatable-edit-error", children: errorHere })), isExpanded && (_jsx("div", { className: "crisp-datatable-cell-overlay", onClick: (e) => e.stopPropagation(), children: rendered }))] }));
+                                                return (_jsx(ContextMenu, { asChild: true, variant: "dark", menuLabel: cellMenuLabel, items: cellMenuItems(row, col), children: _jsx(TableCell, { align: alignFor(col), "aria-colindex": colAriaIndex(i), ...sticky, className: col.editable
+                                                            ? "crisp-datatable-editable"
+                                                            : undefined, "data-selected": selCell?.id === row.id && selCell?.key === col.key
+                                                            ? ""
+                                                            : undefined, "data-in-range": inRange ? "" : undefined, "data-cell-expanded": isExpanded ? "" : undefined, onClick: (e) => {
+                                                            // the keyboard model's anchor -- a single click
+                                                            // only selects. A genuine double-click (or Enter
+                                                            // on the selected cell) opens the editor (#411),
+                                                            // matching RecordsTable's own onDoubleClick.
+                                                            // crisp/#645, G-101: Shift+Click extends a
+                                                            // range from the last plain-click anchor
+                                                            // ("Click cell A, Shift+Click cell B") --
+                                                            // `selCell` keeps doubling as the moving
+                                                            // corner, `selAnchor` is the fixed one.
+                                                            if (e.shiftKey && selCell) {
+                                                                setSelAnchor(selAnchor ?? selCell);
+                                                            }
+                                                            else {
+                                                                setSelAnchor(null);
+                                                            }
+                                                            setSelCell({ id: row.id, key: col.key });
+                                                            // Focuses the clipboard proxy, not `gridRef`
+                                                            // itself (crisp/#645) -- it's a DESCENDANT of
+                                                            // `gridRef`, so `onGridKeyDown` still sees
+                                                            // every key via bubbling, but now the browser
+                                                            // also has a focused, selectable text node to
+                                                            // fire a native `copy`/`paste` on. `focus()`
+                                                            // then `select()`, not `select()` alone --
+                                                            // `select()` only guarantees the SELECTION,
+                                                            // focus is a side effect some engines don't
+                                                            // give it for free.
+                                                            clipboardProxyRef.current?.focus();
+                                                            clipboardProxyRef.current?.select();
+                                                            // #579: a truncated cell also opens a read-only
+                                                            // overlay with its full value -- settled live
+                                                            // that this is click, not Attio's usual
+                                                            // hover-expand (a 1s hover on a truncated
+                                                            // Description cell produced nothing). Measured
+                                                            // the same way as `ThLabel`'s header tooltip
+                                                            // (#534): scrollWidth vs clientWidth on the
+                                                            // element the CSS ellipsis actually applies to,
+                                                            // which for a data cell is the `td` itself
+                                                            // (table.recipe.ts's own `overflow: hidden;
+                                                            // text-overflow: ellipsis`), not a nested span.
+                                                            // Skipped on a Shift+Click (crisp/#645) -- that
+                                                            // gesture's own intent is extending the range,
+                                                            // not popping open a read-only overlay on top
+                                                            // of it.
+                                                            setExpandedCell(!e.shiftKey && isLabelTruncated(e.currentTarget)
+                                                                ? { id: row.id, key: col.key }
+                                                                : null);
+                                                        }, onDoubleClick: col.editable
+                                                            ? () => openEditing(row.id, col.key)
+                                                            : undefined, onContextMenu: () => {
+                                                            // Right-clicking targets THAT cell for the
+                                                            // menu regardless of what was previously
+                                                            // selected (crisp/#598) -- collapses any
+                                                            // active range, same as a plain left-click.
+                                                            setSelAnchor(null);
+                                                            setSelCell({ id: row.id, key: col.key });
+                                                            clipboardProxyRef.current?.focus();
+                                                            clipboardProxyRef.current?.select();
+                                                        }, children: cellContent }) }, col.key));
                                             })] }, row.id));
                                 }), bottomSpacerHeight > 0 && (_jsx("tr", { "aria-hidden": "true", children: _jsx("td", { colSpan: totalCols, style: {
                                             height: bottomSpacerHeight,
                                             padding: 0,
                                             border: "none",
-                                        } }) }))] })) }), (hasSummary || onAddRow) && (_jsxs(TableFooter, { children: [hasSummary && (_jsxs(TableRow, { children: [showGrip && _jsx(TableCell, { ...stickyCol(-2) }), selectable && _jsx(TableCell, { ...stickyCol(-1) }), colSlots.map((slot) => slot.type === "spacer" ? (_jsx("td", { role: "presentation", "aria-hidden": "true", style: { padding: 0, border: "none" } }, `__spacer_${slot.side}`)) : (_jsx(TableCell, { align: alignFor(columns[slot.i]), "aria-colindex": colAriaIndex(slot.i), ...dataStickyCol(slot.i), children: columns[slot.i].summary
-                                            ? columns[slot.i].summary?.(rows)
-                                            : null }, columns[slot.i].key)))] })), onAddRow && (_jsx(TableRow, { children: _jsx(TableCell, { className: "crisp-datatable-addcell", colSpan: totalCols, children: _jsxs("button", { type: "button", className: "crisp-datatable-addrow", onClick: onAddRow, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), addRowLabel] }) }) }))] }))] })] }));
+                                        } }) }))] })) }), (hasSummary || onAddRow) && (_jsxs(TableFooter, { children: [hasSummary && (_jsxs(TableRow, { children: [showGrip && _jsx(TableCell, { ...stickyCol(-2) }), selectable && _jsx(TableCell, { ...stickyCol(-1) }), colSlots.map((slot) => slot.type === "spacer" ? (_jsx("td", { role: "presentation", "aria-hidden": "true", style: { padding: 0, border: "none" } }, `__spacer_${slot.side}`)) : (_jsx(TableCell, { align: alignFor(columns[slot.i]), "aria-colindex": colAriaIndex(slot.i), ...dataStickyCol(slot.i), children: columns[slot.i].calc ? (_jsx(ColumnCalc, { rows: rows, value: (row) => cellValue(columns[slot.i], row), numeric: columns[slot.i].type === "number" ||
+                                                columns[slot.i].type === "currency", defaultOp: columns[slot.i].calc?.defaultOp, op: columns[slot.i].calc?.op, onOpChange: columns[slot.i].calc?.onOpChange, align: alignFor(columns[slot.i]) })) : columns[slot.i].summary ? (columns[slot.i].summary?.(rows)) : null }, columns[slot.i].key)))] })), onAddRow && (_jsx(TableRow, { children: _jsx(TableCell, { className: "crisp-datatable-addcell", colSpan: totalCols, children: _jsxs("button", { type: "button", className: "crisp-datatable-addrow", onClick: onAddRow, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), addRowLabel] }) }) }))] }))] })] }));
 }
 DataTable.displayName = "DataTable";