@crispy-seed/data-table 0.11.1 → 0.12.0

package/dist/index.js

@@ -1160,6 +1160,51 @@ function isStringArray(value) {
 /** Removes the view with this `id`. */ function removeDataTableView(views, id) {
     return views.filter((view)=>view.id !== id);
 }
+// -- row virtualization ---------------------------------------------------------------
+// `virtualized` renders only the rows inside (and a little around) the scroll
+// container's viewport, with two spacer rows standing in for the rest so the scroll
+// height -- and therefore the scrollbar -- still matches the full data set. Rows are a
+// fixed height, so which rows are visible is plain arithmetic on `scrollTop`; no
+// per-row measurement, no ResizeObserver per row.
+/** The recipe's own row height (`--seed-dimension-x9` = 36px, `row.height`). */ const DEFAULT_VIRTUAL_ROW_HEIGHT = 36;
+/** Rows rendered beyond each edge of the viewport, so a fast scroll never outruns the
+ *  render and flashes an empty gap. */ const DEFAULT_VIRTUAL_OVERSCAN = 8;
+/** Distance from the bottom (px) at which `onLoadMore` fires in virtualized mode --
+ *  the same 160px look-ahead the IntersectionObserver's rootMargin gives a non-
+ *  virtualized table. */ const LOAD_MORE_THRESHOLD = 160;
+/**
+ * Which slice `[start, end)` of `count` uniform-height rows to render for a viewport,
+ * plus the heights of the two spacers that keep the total scroll height at
+ * `count * rowHeight` (`topSpacer + rendered rows + bottomSpacer`). Pure -- the hook
+ * measures the DOM, this decides.
+ */ function computeVirtualWindow(input) {
+    const { count, rowHeight, viewportHeight, overscan } = input;
+    if (count <= 0 || rowHeight <= 0) return {
+        start: 0,
+        end: 0,
+        topSpacer: 0,
+        bottomSpacer: 0
+    };
+    const scrollTop = Math.max(0, input.scrollTop);
+    const firstVisible = Math.floor(scrollTop / rowHeight);
+    const lastVisibleExclusive = Math.ceil((scrollTop + Math.max(0, viewportHeight)) / rowHeight);
+    const start = Math.min(count, Math.max(0, firstVisible - overscan));
+    const end = Math.min(count, Math.max(start, lastVisibleExclusive + overscan));
+    return {
+        start,
+        end,
+        topSpacer: start * rowHeight,
+        bottomSpacer: (count - end) * rowHeight
+    };
+}
+/**
+ * Scroll-position replacement for the sentinel row's IntersectionObserver: a
+ * virtualized table can't rely on a sentinel (it would be windowed out along with the
+ * rows), so "close enough to the bottom" is read straight off the scroll container.
+ * The 1px slop matches `useDataTableScroll`'s own sub-pixel tolerance.
+ */ function isNearBottom(scrollTop, clientHeight, scrollHeight, threshold = LOAD_MORE_THRESHOLD) {
+    return scrollTop + clientHeight >= scrollHeight - threshold - 1;
+}
 const EMPTY_STRINGS = [];
 const EMPTY_RECORD = {};
 /**
@@ -1491,7 +1536,7 @@ const ROOT_MARGIN = "160px";
  * wires this to useDataTableScroll's own scroll container) so a BOUNDED table
  * triggers off its own internal scroll, not the browsing viewport.
  */ function useDataTableInfiniteScroll(props) {
-    const { onLoadMore, hasMore = true, loadingMore: loadingMoreProp, scrollRootRef } = props;
+    const { onLoadMore, hasMore = true, loadingMore: loadingMoreProp, scrollRootRef, virtualized = false } = props;
     const [internalLoadingMore, setInternalLoadingMore] = useState(false);
     const loadingMore = loadingMoreProp ?? internalLoadingMore;
     // Mirrors the latest props into a ref the observer callback reads -- the callback
@@ -1531,6 +1576,7 @@ const ROOT_MARGIN = "160px";
     const [sentinelNode, setSentinelNode] = useState(null);
     const sentinelRef = useCallback((node)=>setSentinelNode(node), []);
     useEffect(()=>{
+        if (virtualized) return;
         if (!sentinelNode || !onLoadMore || typeof IntersectionObserver === "undefined") return;
         // Effects run after every ref callback of the SAME commit (including
         // `scrollRootRef`'s own, set by useDataTableScroll's `scrollAreaRef`) regardless
@@ -1551,6 +1597,23 @@ const ROOT_MARGIN = "160px";
         sentinelNode,
         onLoadMore,
         scrollRootRef,
+        triggerLoadMore,
+        virtualized
+    ]);
+    // Virtualized mode's trigger: near the bottom of the scroll container (same gate --
+    // `hasMore`, not already loading -- via `triggerLoadMore`). Called on every scroll
+    // and again after the row count / loading state changes (a page that lands while
+    // the user is still at the bottom, or too short to overflow, must chain the next
+    // load rather than wait for a scroll that can never come).
+    const checkScrollPosition = useCallback(()=>{
+        const element = scrollRootRef?.current;
+        if (!virtualized || !element) return;
+        if (isNearBottom(element.scrollTop, element.clientHeight, element.scrollHeight)) {
+            triggerLoadMore();
+        }
+    }, [
+        virtualized,
+        scrollRootRef,
         triggerLoadMore
     ]);
     return {
@@ -1564,7 +1627,9 @@ const ROOT_MARGIN = "160px";
         /** Fires `onLoadMore` directly, subject to the same `hasMore`/`loadingMore` gate
      *  the observer itself uses -- exposed for a consumer that wants a manual retry
      *  affordance (e.g. after a failed load) rather than only the observer's own
-     *  scroll trigger. */ triggerLoadMore
+     *  scroll trigger. */ triggerLoadMore,
+        /** Virtualized mode's scroll-position check (no-op otherwise); `useDataTable`
+     *  calls it from the scroll container's `onScroll`. */ checkScrollPosition
     };
 }
 
@@ -1576,19 +1641,53 @@ const ROOT_MARGIN = "160px";
  * real ref to a real scrollable element, re-measured on every scroll (and whenever the
  * styled layer calls `remeasure`, e.g. after a column resize/reorder changes the
  * scrollable width without the element itself ever firing a `scroll` event).
- */ function useDataTableScroll() {
+ */ function useDataTableScroll(props = {}) {
+    const { virtualized = false, rowHeight = DEFAULT_VIRTUAL_ROW_HEIGHT } = props;
+    const overscan = props.overscan ?? DEFAULT_VIRTUAL_OVERSCAN;
     const elementRef = useRef(null);
     const [scrolledStart, setScrolledStart] = useState(false);
     const [scrolledEnd, setScrolledEnd] = useState(false);
+    const [viewport, setViewport] = useState({
+        scrollTop: 0,
+        viewportHeight: 0
+    });
     const remeasure = useCallback(()=>{
         const element = elementRef.current;
         if (!element) return;
+        if (virtualized) {
+            // Row 0 starts below the sticky header, so measure from there. Snapping to whole
+            // rows keeps re-renders to one per row scrolled (not one per scroll event); the
+            // extra `rowHeight` of viewport makes up for the rows the snap rounded away.
+            const headerHeight = element.querySelector("thead")?.offsetHeight ?? 0;
+            const scrollTop = Math.max(0, element.scrollTop - headerHeight);
+            const snapped = Math.floor(scrollTop / rowHeight) * rowHeight;
+            const viewportHeight = element.clientHeight + rowHeight;
+            setViewport((prev)=>prev.scrollTop === snapped && prev.viewportHeight === viewportHeight ? prev : {
+                    scrollTop: snapped,
+                    viewportHeight
+                });
+        }
         setScrolledStart(element.scrollLeft > 0);
         // A 1px slop: sub-pixel layout can leave `scrollLeft + clientWidth` a fraction
         // short of `scrollWidth` even when fully scrolled, which would otherwise leave
         // the trailing shadow stuck on forever.
         setScrolledEnd(element.scrollLeft + element.clientWidth < element.scrollWidth - 1);
-    }, []);
+    }, [
+        virtualized,
+        rowHeight
+    ]);
+    // The container can resize without scrolling (window resize, a bounded parent
+    // changing height) -- the viewport height feeds the window, so re-measure then too.
+    useEffect(()=>{
+        const element = elementRef.current;
+        if (!virtualized || !element || typeof ResizeObserver === "undefined") return;
+        const observer = new ResizeObserver(()=>remeasure());
+        observer.observe(element);
+        return ()=>observer.disconnect();
+    }, [
+        virtualized,
+        remeasure
+    ]);
     const scrollAreaRef = useCallback((node)=>{
         elementRef.current = node;
         if (node) remeasure();
@@ -1604,6 +1703,12 @@ const ROOT_MARGIN = "160px";
         scrolledEnd,
         onScroll,
         remeasure,
+        /** Row-virtualization state; `enabled: false` (the default) means render every row. */ virtual: {
+            enabled: virtualized,
+            rowHeight,
+            overscan,
+            ...viewport
+        },
         // The raw ref object itself (not just the callback ref above) -- useDataTable.ts
         // hands this to useDataTableInfiniteScroll as the IntersectionObserver `root` for
         // its sentinel row, so a scrolled/bounded table (DATATABLE-ATTIO-SPEC.md's
@@ -2002,7 +2107,7 @@ function useDataTable(props) {
     const toolbarFilter = useDataTableToolbarFilter(props);
     const columns = useDataTableColumns(props);
     const columnCalc = useDataTableColumnCalc(props);
-    const scroll = useDataTableScroll();
+    const scroll = useDataTableScroll(props);
     const edit = useDataTableEdit(props);
     // Feature C (#12) -- which single cell (if any) is showing its read-only "show
     // full content" overlay. Independent of `edit` above -- see
@@ -2016,6 +2121,28 @@ function useDataTable(props) {
         ...props,
         scrollRootRef: scroll.elementRef
     });
+    // Virtualized mode swaps the sentinel's IntersectionObserver for a scroll-position
+    // check: on every scroll (below), and again whenever the row count or loading state
+    // changes -- new rows can leave the user still at the bottom.
+    const { checkScrollPosition } = infiniteScroll;
+    const rowCount = props.rowIds?.length;
+    // biome-ignore lint/correctness/useExhaustiveDependencies: rowCount/loadingMore/hasMore are the triggers, not values read in the effect
+    useEffect(()=>{
+        checkScrollPosition();
+    }, [
+        checkScrollPosition,
+        rowCount,
+        infiniteScroll.loadingMore,
+        infiniteScroll.hasMore
+    ]);
+    const { onScroll: measureScroll } = scroll;
+    const onScroll = useCallback(()=>{
+        measureScroll();
+        checkScrollPosition();
+    }, [
+        measureScroll,
+        checkScrollPosition
+    ]);
     // Unifies `sort` (the header's own single click-to-sort column, above) with
     // `toolbarSort.toolbarSorts` (the toolbar Sort popover's ordered list, above) into
     // ONE state instead of two -- before this, a header click only ever moved `sort`,
@@ -2127,6 +2254,7 @@ function useDataTable(props) {
         ...edit,
         ...peek,
         ...infiniteScroll,
+        onScroll,
         rootProps: elementProps({
             role: "table"
         })
@@ -2169,7 +2297,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, 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 { 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, virtualized, rowHeight, overscan, ...otherProps } = props;
     const api = useDataTable({
         sort,
         defaultSort,
@@ -2211,7 +2339,10 @@ const DataTableRoot = /*#__PURE__*/ forwardRef((props, ref)=>{
         onEdit,
         onLoadMore,
         hasMore,
-        loadingMore
+        loadingMore,
+        virtualized,
+        rowHeight,
+        overscan
     });
     return /*#__PURE__*/ jsx(DataTableProvider, {
         value: api,
@@ -2992,6 +3123,40 @@ function EntityCell({ value, className, nameClassName, actionsClassName, actionC
         name: String(value ?? "")
     };
     if (!entity.name) return null;
+    // Click-to-navigate (your-moon/crisp, Attio parity) -- `onOpenRecord` wins over a
+    // plain `href` when both are set (see `onOpenRecord`'s own doc comment,
+    // `DataTable.tsx`); neither -> the original plain, non-clickable `<span>`. Both
+    // clickable variants carry `data-clickable` -- the ONLY thing the recipe's
+    // `entityName` hover-underline rule keys off (`data-table.ts`), so a plain name
+    // never underlines and a clickable one always does, regardless of which variant
+    // rendered it.
+    const nameNode = column?.onOpenRecord && row !== undefined ? // A real `<button>`, not a `<span role="link">` -- `onOpenRecord` is an
+    // arbitrary consumer callback (like `onOpenPreview`'s own button below), never
+    // a genuine URL, so `<button>` is the correct semantic element (native
+    // keyboard activation/focusability for free, no `role`/`tabIndex`/`onKeyDown`
+    // needed) -- unlike the `href` branch just below, which IS a real URL and
+    // gets a real `<a>`. The recipe's `entityName` slot resets this button's own
+    // chrome (border/background/padding/font/color/text-align) back to plain
+    // inline text (`data-table.ts`).
+    /*#__PURE__*/ jsx("button", {
+        type: "button",
+        className: nameClassName,
+        "data-clickable": "",
+        onClick: (event)=>{
+            event.stopPropagation();
+            column.onOpenRecord?.(row);
+        },
+        children: entity.name
+    }) : entity.href ? /*#__PURE__*/ jsx("a", {
+        className: nameClassName,
+        "data-clickable": "",
+        href: entity.href,
+        onClick: (event)=>event.stopPropagation(),
+        children: entity.name
+    }) : /*#__PURE__*/ jsx("span", {
+        className: nameClassName,
+        children: entity.name
+    });
     return /*#__PURE__*/ jsxs("span", {
         className: className,
         children: [
@@ -3007,10 +3172,7 @@ function EntityCell({ value, className, nameClassName, actionsClassName, actionC
                     })
                 ]
             }),
-            /*#__PURE__*/ jsx("span", {
-                className: nameClassName,
-                children: entity.name
-            }),
+            nameNode,
             column?.onOpenPreview && row !== undefined && /*#__PURE__*/ jsx("span", {
                 className: actionsClassName,
                 children: /*#__PURE__*/ jsx("button", {
@@ -3945,7 +4107,7 @@ const TextFieldTextarea = /*#__PURE__*/ forwardRef(({ className, autoresize = tr
 });
 TextFieldTextarea.displayName = "TextFieldTextarea";
 
-__insertCSS(".seed-data-table__root{box-sizing:border-box;position:relative;display:flex;flex-direction:column;width:100%;border-width:1px;border-style:solid;font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}.seed-data-table__table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.seed-data-table__headerCell{box-sizing:border-box;position:sticky;top:0;z-index:2;vertical-align:middle;text-align:start;padding:0;height:var(--seed-dimension-x10);background-color:var(--seed-color-bg-layer-default);border-top:1px solid var(--seed-color-stroke-neutral-muted);border-bottom:1px solid var(--seed-color-stroke-neutral-muted);border-inline-end:1px solid var(--seed-color-stroke-neutral-muted);border-inline-start:none;color:var(--seed-color-fg-neutral);font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4);font-weight:var(--seed-font-weight-medium);letter-spacing:-.14px}.seed-data-table__headerCell:last-child{border-inline-end:none}.seed-data-table__headerCell[data-sortable]{cursor:pointer;user-select:none}.seed-data-table__headerCell [data-chevron]{opacity:0;transition:opacity .12s}.seed-data-table__headerCell[data-sortable]:hover [data-chevron]{opacity:.6}.seed-data-table__headerCell[data-sorted] [data-chevron]{opacity:1;color:var(--seed-color-fg-neutral)}.seed-data-table__headerCell:hover [data-column-menu]{opacity:1}.seed-data-table__headerCell [data-column-menu]:focus-visible,.seed-data-table__headerCell [data-column-menu][data-open]{opacity:1}.seed-data-table__headerCell[data-dragging]{opacity:.5}.seed-data-table__headerCell[data-sticky]{position:sticky;z-index:3;background-color:var(--seed-color-bg-layer-default)}.seed-data-table__headerCell{outline:var(--seed-dimension-x0_5) solid transparent;outline-offset:calc(var(--seed-dimension-x0_5) * -1)}.seed-data-table__headerCell:is(:focus-visible,[data-focus-visible]){outline:var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);outline-offset:calc(var(--seed-dimension-x0_5) * -1)}.seed-data-table__headerCell .seed-data-table-resize-handle{position:absolute;top:0;inset-inline-end:calc(7px / -2);width:7px;height:100%;z-index:4;display:flex;align-items:center;justify-content:center;cursor:col-resize;touch-action:none}.seed-data-table__headerCell .seed-data-table-resize-handle-inner{width:3px;height:100%;border-radius:3px;background-color:#0298d9;opacity:0;transition:opacity .1s}.seed-data-table__headerCell .seed-data-table-resize-handle:hover .seed-data-table-resize-handle-inner,.seed-data-table__headerCell .seed-data-table-resize-handle[data-resizing] .seed-data-table-resize-handle-inner{opacity:1}.seed-data-table__headerCellInner{box-sizing:border-box;display:flex;align-items:center;width:100%;height:100%;min-width:0;gap:var(--seed-dimension-x1_5);padding-inline:var(--seed-dimension-x3)}.seed-data-table__headerCellLabel{min-width:0;flex:1 1 0%;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__headerCellIcon{flex-shrink:0;margin-inline-start:auto;display:inline-flex;align-items:center;justify-content:center;width:var(--seed-dimension-x4);height:var(--seed-dimension-x4);color:var(--seed-color-fg-neutral-subtle);border:none;background:0 0;padding:0;font:inherit;cursor:pointer}.seed-data-table__headerCellIcon[data-active]{color:var(--seed-color-fg-neutral)}.seed-data-table__headerCellIcon[data-column-menu]{opacity:0;transition:opacity .12s}.seed-data-table__row{position:relative;background-color:var(--seed-color-bg-layer-default);--seed-data-table-row-bg:var(--seed-color-bg-layer-default)}.seed-data-table__row[data-clickable]{cursor:pointer}.seed-data-table__row:is([aria-selected=true],[data-selected]){background-color:color-mix(in srgb,#0298d9 10%,var(--seed-color-bg-layer-default));--seed-data-table-row-bg:color-mix(in srgb, #0298d9 10%, var(--seed-color-bg-layer-default))}.seed-data-table__row:is([aria-selected=true],[data-selected]):is(:hover,[data-hover]){background-color:color-mix(in srgb,var(--seed-color-fg-neutral) 3%,color-mix(in srgb,#0298d9 10%,var(--seed-color-bg-layer-default)));--seed-data-table-row-bg:color-mix(in srgb, var(--seed-color-fg-neutral) 3%, color-mix(in srgb, #0298d9 10%, var(--seed-color-bg-layer-default)))}.seed-data-table__cell{box-sizing:border-box;position:relative;vertical-align:middle;text-align:start;height:var(--seed-dimension-x9);border-bottom:1px solid var(--seed-color-stroke-neutral-muted);border-inline-end:1px solid var(--seed-color-stroke-neutral-muted);border-top:none;border-inline-start:none;padding-block:0;padding-inline:var(--seed-dimension-x3);color:var(--seed-color-fg-neutral);font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4);font-weight:var(--seed-font-weight-regular);letter-spacing:-.14px;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__cell:not([data-editable]){user-select:none}.seed-data-table__cell:last-child{border-inline-end:none}tbody tr:last-child .seed-data-table__cell{border-bottom:none}.seed-data-table__cell[data-numeric]{text-align:end;font-variant-numeric:tabular-nums}.seed-data-table__cell[data-sticky]{position:sticky;z-index:1;background-color:var(--seed-data-table-row-bg)}.seed-data-table__cell[data-overlay-open]{overflow:visible;z-index:20}.seed-data-table__cell[data-editable]{cursor:default}.seed-data-table__cell .seed-data-table-edit-picker{display:flex;align-items:center;gap:var(--seed-dimension-x1_5);min-width:0}.seed-data-table__cell .seed-data-table-edit-pending{flex-shrink:0;color:var(--seed-color-fg-neutral-subtle);animation:rotate .6s linear infinite}.seed-data-table__cell .seed-data-table-edit-error{position:absolute;top:100%;inset-inline-start:var(--seed-dimension-x3);inset-inline-end:var(--seed-dimension-x3);z-index:2;padding-top:2px;font-size:12px;line-height:1.3;color:var(--seed-color-fg-critical);overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__entity{display:flex;align-items:center;min-width:0;gap:var(--seed-dimension-x1_5)}.seed-data-table__entityName{min-width:0;font-weight:var(--seed-font-weight-medium);overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__tagList{display:flex;align-items:center;gap:var(--seed-dimension-x1_5);overflow:hidden;min-width:0}.seed-data-table__entityActions{display:flex;align-items:center;gap:6px;margin-inline-start:auto;flex-shrink:0;opacity:0;transition:opacity .15s}tr:hover .seed-data-table__entityActions{opacity:1}.seed-data-table__entityActions:focus-within{opacity:1}.seed-data-table__entityAction{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin:0;padding:2px;border:none;border-radius:6px;background:0 0;font-family:inherit;color:color-mix(in srgb,var(--seed-color-fg-neutral) 55%,transparent);cursor:pointer;flex-shrink:0;transition:background-color .2s,color .2s,box-shadow .2s}.seed-data-table__entityAction:hover{background:color-mix(in srgb,var(--seed-color-fg-neutral) 4%,transparent);color:var(--seed-color-fg-neutral)}.seed-data-table__link{color:var(--seed-color-fg-neutral);text-decoration:none;min-width:0;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__link:is(:hover,[data-hover]){text-decoration:underline}.seed-data-table__chip{box-sizing:border-box;display:inline-flex;align-items:center;flex-shrink:0;max-width:100%;height:22px;padding:0 4px;border-radius:7px;font-size:10px;font-weight:var(--seed-font-weight-regular);line-height:15px;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__chipList{position:relative;display:flex;align-items:center;flex-wrap:nowrap;gap:3px;overflow:hidden;min-width:0;width:100%}.seed-data-table__chipOverflow{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;height:20px;padding:0 4px;border-radius:6px;background-color:#f6f7f7;color:#000;font-size:10px;font-weight:var(--seed-font-weight-regular);line-height:15px;white-space:nowrap}.seed-data-table__chipListEditor{display:flex;align-items:center;flex-wrap:wrap;gap:3px;min-width:0;width:100%}.seed-data-table__chipRemove{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:12px;height:12px;margin:0;margin-inline-start:2px;padding:0;border:none;border-radius:999px;background:0 0;color:inherit;opacity:.6;cursor:pointer;transition:opacity .12s,background-color .12s}.seed-data-table__chipRemove:hover{opacity:1;background-color:rgba(0,0,0,.08)}.seed-data-table__chipInput{flex:1 1 auto;min-width:40px;height:22px;margin:0;padding:0;border:none;outline:0;background:0 0;font-family:inherit;font-size:var(--seed-font-size-t4);color:var(--seed-color-fg-neutral);letter-spacing:-.14px}.seed-data-table__expandOverlay{box-sizing:border-box;position:absolute;top:-1px;inset-inline-start:-1px;inset-inline-end:-1px;z-index:10;min-height:calc(100% + 2px);display:flex;align-items:flex-start;padding-inline:var(--seed-dimension-x3);padding-block:var(--seed-dimension-x3);background-color:var(--seed-color-bg-layer-floating);border-radius:4px;box-shadow:none;border:1px solid #266df0;color:var(--seed-color-fg-neutral);font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4);letter-spacing:-.14px;cursor:default}.seed-data-table__expandOverlayText{width:100%;min-width:0;white-space:normal;word-break:break-word}.seed-data-table__cellSuffixRow{display:flex;align-items:center;gap:4px;min-width:0;width:100%}.seed-data-table__cellSuffixText{flex:1 1 0%;min-width:0;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__cellSuffixIcon{flex-shrink:0;display:inline-flex;align-items:center;color:color-mix(in srgb,var(--seed-color-fg-neutral) 55%,transparent)}.seed-data-table__toolbar{box-sizing:border-box;display:flex;align-items:center;width:100%;flex-shrink:0;min-height:49px;gap:var(--seed-dimension-x2);padding-inline:var(--seed-dimension-x3);border-top:1px solid var(--seed-color-stroke-neutral-muted)}.seed-data-table__search{position:relative;display:inline-flex;align-items:center;flex:1 1 0%;max-width:280px}.seed-data-table__search svg{position:absolute;inset-inline-start:var(--seed-dimension-x2);width:var(--seed-dimension-x4);height:var(--seed-dimension-x4);color:var(--seed-color-fg-neutral-muted);pointer-events:none}.seed-data-table__search input{width:100%;height:var(--seed-dimension-x8);padding-inline-start:var(--seed-dimension-x7);padding-inline-end:var(--seed-dimension-x2);border:none;border-radius:var(--seed-radius-r2);background-color:var(--seed-color-bg-layer-default);box-shadow:inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);font-family:inherit;font-size:var(--seed-font-size-t4);color:var(--seed-color-fg-neutral);outline:0;transition:box-shadow .1s var(--seed-timing-function-easing)}.seed-data-table__search input::placeholder{color:var(--seed-color-fg-neutral-subtle)}.seed-data-table__search input:focus{box-shadow:inset 0 0 0 2px var(--seed-color-stroke-neutral-contrast)}.seed-data-table__count{flex-shrink:0;color:var(--seed-color-fg-neutral-subtle);font-size:var(--seed-font-size-t3);font-variant-numeric:tabular-nums}.seed-data-table__toolbarEnd{flex-shrink:0;margin-inline-start:auto;display:inline-flex;align-items:center;gap:var(--seed-dimension-x2)}.seed-data-table__scrollArea{position:relative;display:flex;flex-direction:column;width:100%;min-width:0;flex:1 1 auto;min-height:0;overflow-x:auto;overflow-y:auto}.seed-data-table__scrollArea[data-scrolled-start] [data-sticky-edge]{clip-path:inset(0 -38px 0 0);box-shadow:6px 0 16px 4px rgba(0,0,0,.12)}.seed-data-table__scrollArea[data-scrolled-end] [data-sticky-edge-end]{clip-path:inset(0 0 0 -38px);box-shadow:-6px 0 16px 4px rgba(0,0,0,.12)}.seed-data-table__footerCell{box-sizing:border-box;position:sticky;bottom:0;z-index:2;vertical-align:middle;padding:0;height:var(--seed-dimension-x9);background-color:var(--seed-color-bg-layer-default);border-top:1px solid var(--seed-color-stroke-neutral-muted);border-inline-end:1px solid var(--seed-color-stroke-neutral-muted);border-inline-start:none}.seed-data-table__footerCell:last-child{border-inline-end:none}.seed-data-table__footerCell .seed-data-table-column-calc-trigger{display:flex;align-items:center;gap:var(--seed-dimension-x1_5);width:100%;height:100%;min-width:0;margin:0;padding:0 var(--seed-dimension-x3);border:none;background:0 0;color:var(--seed-color-fg-neutral-subtle);font-family:inherit;font-size:var(--seed-font-size-t4);font-weight:var(--seed-font-weight-medium);white-space:nowrap;overflow:clip;cursor:pointer;transition:background-color .12s,color .12s}.seed-data-table__footerCell .seed-data-table-column-calc-trigger:hover{background-color:color-mix(in srgb,var(--seed-color-fg-neutral) 4%,transparent);color:var(--seed-color-fg-neutral)}.seed-data-table__footerCell .seed-data-table-column-calc-trigger[data-align=right]{justify-content:flex-end}.seed-data-table__footerCell .seed-data-table-column-calc-trigger svg{flex-shrink:0;opacity:.7}.seed-data-table__footerCell .seed-data-table-column-calc-placeholder{overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__footerCell .seed-data-table-column-calc-value{min-width:0;flex-shrink:1;color:var(--seed-color-fg-neutral);font-variant-numeric:tabular-nums;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__footerCell .seed-data-table-column-calc-op{min-width:0;flex-shrink:1;color:color-mix(in srgb,var(--seed-color-fg-neutral) 63%,transparent);overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__emptyState{box-sizing:border-box;text-align:center;padding-block:var(--seed-dimension-x8);padding-inline:var(--seed-dimension-x3);color:var(--seed-color-fg-neutral-subtle);font-size:var(--seed-font-size-t4)}.seed-data-table__loadingState{box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:10px;padding-block:var(--seed-dimension-x8);padding-inline:var(--seed-dimension-x3);color:color-mix(in srgb,var(--seed-color-fg-neutral) 63%,transparent);font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4);font-weight:var(--seed-font-weight-medium)}.seed-data-table__loadingState[data-inline]{padding-block:0;padding-inline:0;height:var(--seed-dimension-x9)}.seed-data-table__loadingState .seed-data-table-loading-spinner{flex-shrink:0;color:color-mix(in srgb,var(--seed-color-fg-neutral) 63%,transparent);animation:rotate .6s linear infinite}.seed-data-table__addRowCell{box-sizing:border-box;padding:0;border-top:none}.seed-data-table__addRow{box-sizing:border-box;display:flex;align-items:center;width:100%;margin:0;border:none;border-top:1px solid var(--seed-color-stroke-neutral-muted);background-color:var(--seed-color-bg-layer-default);height:var(--seed-dimension-x9);gap:var(--seed-dimension-x2);padding-inline:var(--seed-dimension-x2);color:var(--seed-color-fg-neutral-subtle);font-family:inherit;font-size:var(--seed-font-size-t4);cursor:pointer;transition:background-color .12s,color .12s}.seed-data-table__addRow:hover{background-color:color-mix(in srgb,var(--seed-color-fg-neutral) 4%,var(--seed-color-bg-layer-default));color:var(--seed-color-fg-neutral)}.seed-data-table__addRow svg{flex-shrink:0}.seed-data-table__selectionCell{text-align:center;padding:0}.seed-data-table__bulkBar{box-sizing:border-box;position:absolute;inset-inline-start:50%;transform:translateX(-50%);bottom:var(--seed-dimension-x4);z-index:30;display:flex;align-items:center;gap:var(--seed-dimension-x3);min-height:36px;padding-inline:var(--seed-dimension-x3_5);padding-block:var(--seed-dimension-x2);border-radius:var(--seed-radius-full);box-shadow:var(--seed-shadow-s3);background-color:var(--seed-color-bg-layer-floating);color:var(--seed-color-fg-neutral);font-family:inherit;font-size:var(--seed-font-size-t4);font-weight:var(--seed-font-weight-medium);white-space:nowrap}.seed-data-table__bulkBarCount{flex-shrink:0;color:var(--seed-color-fg-neutral);font-variant-numeric:tabular-nums}.seed-data-table__bulkBarClear{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:20px;height:20px;margin:0;padding:2px;border:none;border-radius:6px;background:0 0;font-family:inherit;color:color-mix(in srgb,var(--seed-color-fg-neutral) 55%,transparent);cursor:pointer;transition:background-color .2s,color .2s}.seed-data-table__bulkBarClear:hover{background-color:color-mix(in srgb,var(--seed-color-fg-neutral) 8%,transparent);color:var(--seed-color-fg-neutral)}.seed-data-table__bulkBarActions{display:flex;align-items:center;flex-shrink:0;gap:var(--seed-dimension-x3);padding-inline-start:var(--seed-dimension-x3);border-inline-start:1px solid color-mix(in srgb,var(--seed-color-fg-neutral) 16%,transparent)}.seed-data-table__root--surface_card{border-color:var(--seed-color-stroke-neutral-muted);background-color:var(--seed-color-bg-layer-default);border-radius:var(--seed-radius-r3)}.seed-data-table__root--surface_bleed{border-color:var(--seed-color-bg-transparent);background-color:var(--seed-color-bg-transparent)}.seed-data-table__row--interactive_true{transition:background-color .12s}.seed-data-table__row--interactive_true:is(:hover,[data-hover]){background-color:color-mix(in srgb,var(--seed-color-fg-neutral) 3%,transparent);--seed-data-table-row-bg:color-mix(in srgb, var(--seed-color-fg-neutral) 3%, var(--seed-color-bg-layer-default))}");
+__insertCSS(".seed-data-table__root{box-sizing:border-box;position:relative;display:flex;flex-direction:column;width:100%;border-width:1px;border-style:solid;font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}.seed-data-table__table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.seed-data-table__headerCell{box-sizing:border-box;position:sticky;top:0;z-index:2;vertical-align:middle;text-align:start;padding:0;height:var(--seed-dimension-x10);background-color:var(--seed-color-bg-layer-default);border-top:1px solid var(--seed-color-stroke-neutral-muted);border-bottom:1px solid var(--seed-color-stroke-neutral-muted);border-inline-end:1px solid var(--seed-color-stroke-neutral-muted);border-inline-start:none;color:var(--seed-color-fg-neutral);font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4);font-weight:var(--seed-font-weight-medium);letter-spacing:-.14px}.seed-data-table__headerCell:last-child{border-inline-end:none}.seed-data-table__headerCell[data-sortable]{cursor:pointer;user-select:none}.seed-data-table__headerCell [data-chevron]{opacity:0;transition:opacity .12s}.seed-data-table__headerCell[data-sortable]:hover [data-chevron]{opacity:.6}.seed-data-table__headerCell[data-sorted] [data-chevron]{opacity:1;color:var(--seed-color-fg-neutral)}.seed-data-table__headerCell:hover [data-column-menu]{opacity:1}.seed-data-table__headerCell [data-column-menu]:focus-visible,.seed-data-table__headerCell [data-column-menu][data-open]{opacity:1}.seed-data-table__headerCell[data-dragging]{opacity:.5}.seed-data-table__headerCell[data-sticky]{position:sticky;z-index:3;background-color:var(--seed-color-bg-layer-default)}.seed-data-table__headerCell{outline:var(--seed-dimension-x0_5) solid transparent;outline-offset:calc(var(--seed-dimension-x0_5) * -1)}.seed-data-table__headerCell:is(:focus-visible,[data-focus-visible]){outline:var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);outline-offset:calc(var(--seed-dimension-x0_5) * -1)}.seed-data-table__headerCell .seed-data-table-resize-handle{position:absolute;top:0;inset-inline-end:calc(7px / -2);width:7px;height:100%;z-index:4;display:flex;align-items:center;justify-content:center;cursor:col-resize;touch-action:none}.seed-data-table__headerCell .seed-data-table-resize-handle-inner{width:3px;height:100%;border-radius:3px;background-color:#0298d9;opacity:0;transition:opacity .1s}.seed-data-table__headerCell .seed-data-table-resize-handle:hover .seed-data-table-resize-handle-inner,.seed-data-table__headerCell .seed-data-table-resize-handle[data-resizing] .seed-data-table-resize-handle-inner{opacity:1}.seed-data-table__headerCellInner{box-sizing:border-box;display:flex;align-items:center;width:100%;height:100%;min-width:0;gap:var(--seed-dimension-x1_5);padding-inline:var(--seed-dimension-x3)}.seed-data-table__headerCellLabel{min-width:0;flex:1 1 0%;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__headerCellIcon{flex-shrink:0;margin-inline-start:auto;display:inline-flex;align-items:center;justify-content:center;width:var(--seed-dimension-x4);height:var(--seed-dimension-x4);color:var(--seed-color-fg-neutral-subtle);border:none;background:0 0;padding:0;font:inherit;cursor:pointer}.seed-data-table__headerCellIcon[data-active]{color:var(--seed-color-fg-neutral)}.seed-data-table__headerCellIcon[data-column-menu]{opacity:0;transition:opacity .12s}.seed-data-table__row{position:relative;background-color:var(--seed-color-bg-layer-default);--seed-data-table-row-bg:var(--seed-color-bg-layer-default)}.seed-data-table__row[data-clickable]{cursor:pointer}.seed-data-table__row:is([aria-selected=true],[data-selected]){background-color:color-mix(in srgb,#0298d9 10%,var(--seed-color-bg-layer-default));--seed-data-table-row-bg:color-mix(in srgb, #0298d9 10%, var(--seed-color-bg-layer-default))}.seed-data-table__row:is([aria-selected=true],[data-selected]):is(:hover,[data-hover]){background-color:color-mix(in srgb,var(--seed-color-fg-neutral) 3%,color-mix(in srgb,#0298d9 10%,var(--seed-color-bg-layer-default)));--seed-data-table-row-bg:color-mix(in srgb, var(--seed-color-fg-neutral) 3%, color-mix(in srgb, #0298d9 10%, var(--seed-color-bg-layer-default)))}.seed-data-table__cell{box-sizing:border-box;position:relative;vertical-align:middle;text-align:start;height:var(--seed-dimension-x9);border-bottom:1px solid var(--seed-color-stroke-neutral-muted);border-inline-end:1px solid var(--seed-color-stroke-neutral-muted);border-top:none;border-inline-start:none;padding-block:0;padding-inline:var(--seed-dimension-x3);color:var(--seed-color-fg-neutral);font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4);font-weight:var(--seed-font-weight-regular);letter-spacing:-.14px;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__cell:not([data-editable]){user-select:none}.seed-data-table__cell:last-child{border-inline-end:none}tbody tr:last-child .seed-data-table__cell{border-bottom:none}.seed-data-table__cell[data-numeric]{text-align:end;font-variant-numeric:tabular-nums}.seed-data-table__cell[data-sticky]{position:sticky;z-index:1;background-color:var(--seed-data-table-row-bg)}.seed-data-table__cell[data-overlay-open]{overflow:visible;z-index:20}.seed-data-table__cell[data-editable]{cursor:default}.seed-data-table__cell .seed-data-table-edit-picker{display:flex;align-items:center;gap:var(--seed-dimension-x1_5);min-width:0}.seed-data-table__cell .seed-data-table-edit-pending{flex-shrink:0;color:var(--seed-color-fg-neutral-subtle);animation:rotate .6s linear infinite}.seed-data-table__cell .seed-data-table-edit-error{position:absolute;top:100%;inset-inline-start:var(--seed-dimension-x3);inset-inline-end:var(--seed-dimension-x3);z-index:2;padding-top:2px;font-size:12px;line-height:1.3;color:var(--seed-color-fg-critical);overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__entity{display:flex;align-items:center;min-width:0;gap:var(--seed-dimension-x1_5)}.seed-data-table__entityName{min-width:0;font-weight:var(--seed-font-weight-medium);overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__entityName[data-clickable]{cursor:pointer;border:none;background:0 0;padding:0;margin:0;font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;text-align:start}.seed-data-table__entityName[data-clickable]:is(:hover,[data-hover]){text-decoration:underline}.seed-data-table__tagList{display:flex;align-items:center;gap:var(--seed-dimension-x1_5);overflow:hidden;min-width:0}.seed-data-table__entityActions{display:flex;align-items:center;gap:6px;margin-inline-start:auto;flex-shrink:0;opacity:0;transition:opacity .15s}tr:hover .seed-data-table__entityActions{opacity:1}.seed-data-table__entityActions:focus-within{opacity:1}.seed-data-table__entityAction{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin:0;padding:2px;border:none;border-radius:6px;background:0 0;font-family:inherit;color:color-mix(in srgb,var(--seed-color-fg-neutral) 55%,transparent);cursor:pointer;flex-shrink:0;transition:background-color .2s,color .2s,box-shadow .2s}.seed-data-table__entityAction:hover{background:color-mix(in srgb,var(--seed-color-fg-neutral) 4%,transparent);color:var(--seed-color-fg-neutral)}.seed-data-table__link{color:var(--seed-color-fg-neutral);text-decoration:none;min-width:0;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__link:is(:hover,[data-hover]){text-decoration:underline}.seed-data-table__chip{box-sizing:border-box;display:inline-flex;align-items:center;flex-shrink:0;max-width:100%;height:22px;padding:0 4px;border-radius:7px;font-size:13px;font-weight:var(--seed-font-weight-medium);line-height:15px;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__chipList{position:relative;display:flex;align-items:center;flex-wrap:nowrap;gap:3px;overflow:hidden;min-width:0;width:100%}.seed-data-table__chipOverflow{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;height:20px;padding:0 4px;border-radius:6px;background-color:#f6f7f7;color:#000;font-size:10px;font-weight:var(--seed-font-weight-regular);line-height:15px;white-space:nowrap}.seed-data-table__chipListEditor{display:flex;align-items:center;flex-wrap:wrap;gap:3px;min-width:0;width:100%}.seed-data-table__chipRemove{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:12px;height:12px;margin:0;margin-inline-start:2px;padding:0;border:none;border-radius:999px;background:0 0;color:inherit;opacity:.6;cursor:pointer;transition:opacity .12s,background-color .12s}.seed-data-table__chipRemove:hover{opacity:1;background-color:rgba(0,0,0,.08)}.seed-data-table__chipInput{flex:1 1 auto;min-width:40px;height:22px;margin:0;padding:0;border:none;outline:0;background:0 0;font-family:inherit;font-size:var(--seed-font-size-t4);color:var(--seed-color-fg-neutral);letter-spacing:-.14px}.seed-data-table__expandOverlay{box-sizing:border-box;position:absolute;top:-1px;inset-inline-start:-1px;inset-inline-end:-1px;z-index:10;min-height:calc(100% + 2px);display:flex;align-items:flex-start;padding-inline:var(--seed-dimension-x3);padding-block:var(--seed-dimension-x3);background-color:var(--seed-color-bg-layer-floating);border-radius:4px;box-shadow:none;border:1px solid #266df0;color:var(--seed-color-fg-neutral);font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4);letter-spacing:-.14px;cursor:default}.seed-data-table__expandOverlayText{width:100%;min-width:0;white-space:normal;word-break:break-word}.seed-data-table__cellSuffixRow{display:flex;align-items:center;gap:4px;min-width:0;width:100%}.seed-data-table__cellSuffixText{flex:1 1 0%;min-width:0;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__cellSuffixIcon{flex-shrink:0;display:inline-flex;align-items:center;color:color-mix(in srgb,var(--seed-color-fg-neutral) 55%,transparent)}.seed-data-table__toolbar{box-sizing:border-box;display:flex;align-items:center;width:100%;flex-shrink:0;min-height:49px;gap:var(--seed-dimension-x2);padding-inline:var(--seed-dimension-x3);border-top:1px solid var(--seed-color-stroke-neutral-muted)}.seed-data-table__search{position:relative;display:inline-flex;align-items:center;flex:1 1 0%;max-width:280px}.seed-data-table__search svg{position:absolute;inset-inline-start:var(--seed-dimension-x2);width:var(--seed-dimension-x4);height:var(--seed-dimension-x4);color:var(--seed-color-fg-neutral-muted);pointer-events:none}.seed-data-table__search input{width:100%;height:var(--seed-dimension-x8);padding-inline-start:var(--seed-dimension-x7);padding-inline-end:var(--seed-dimension-x2);border:none;border-radius:var(--seed-radius-r2);background-color:var(--seed-color-bg-layer-default);box-shadow:inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);font-family:inherit;font-size:var(--seed-font-size-t4);color:var(--seed-color-fg-neutral);outline:0;transition:box-shadow .1s var(--seed-timing-function-easing)}.seed-data-table__search input::placeholder{color:var(--seed-color-fg-neutral-subtle)}.seed-data-table__search input:focus{box-shadow:inset 0 0 0 2px var(--seed-color-stroke-neutral-contrast)}.seed-data-table__count{flex-shrink:0;color:var(--seed-color-fg-neutral-subtle);font-size:var(--seed-font-size-t3);font-variant-numeric:tabular-nums}.seed-data-table__toolbarEnd{flex-shrink:0;margin-inline-start:auto;display:inline-flex;align-items:center;gap:var(--seed-dimension-x2)}.seed-data-table__scrollArea{position:relative;display:flex;flex-direction:column;width:100%;min-width:0;flex:1 1 auto;min-height:0;overflow-x:auto;overflow-y:auto}.seed-data-table__scrollArea[data-scrolled-start] [data-sticky-edge]{clip-path:inset(0 -38px 0 0);box-shadow:6px 0 16px 4px rgba(0,0,0,.12)}.seed-data-table__scrollArea[data-scrolled-end] [data-sticky-edge-end]{clip-path:inset(0 0 0 -38px);box-shadow:-6px 0 16px 4px rgba(0,0,0,.12)}.seed-data-table__footerCell{box-sizing:border-box;position:sticky;bottom:0;z-index:2;vertical-align:middle;padding:0;height:var(--seed-dimension-x9);background-color:var(--seed-color-bg-layer-default);border-top:1px solid var(--seed-color-stroke-neutral-muted);border-inline-end:1px solid var(--seed-color-stroke-neutral-muted);border-inline-start:none}.seed-data-table__footerCell:last-child{border-inline-end:none}.seed-data-table__footerCell .seed-data-table-column-calc-trigger{display:flex;align-items:center;gap:var(--seed-dimension-x1_5);width:100%;height:100%;min-width:0;margin:0;padding:0 var(--seed-dimension-x3);border:none;background:0 0;color:var(--seed-color-fg-neutral-subtle);font-family:inherit;font-size:var(--seed-font-size-t4);font-weight:var(--seed-font-weight-medium);white-space:nowrap;overflow:clip;cursor:pointer;transition:background-color .12s,color .12s}.seed-data-table__footerCell .seed-data-table-column-calc-trigger:hover{background-color:color-mix(in srgb,var(--seed-color-fg-neutral) 4%,transparent);color:var(--seed-color-fg-neutral)}.seed-data-table__footerCell .seed-data-table-column-calc-trigger[data-align=right]{justify-content:flex-end}.seed-data-table__footerCell .seed-data-table-column-calc-trigger svg{flex-shrink:0;opacity:.7}.seed-data-table__footerCell .seed-data-table-column-calc-placeholder{overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__footerCell .seed-data-table-column-calc-value{min-width:0;flex-shrink:1;color:var(--seed-color-fg-neutral);font-variant-numeric:tabular-nums;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__footerCell .seed-data-table-column-calc-op{min-width:0;flex-shrink:1;color:color-mix(in srgb,var(--seed-color-fg-neutral) 63%,transparent);overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__emptyState{box-sizing:border-box;text-align:center;padding-block:var(--seed-dimension-x8);padding-inline:var(--seed-dimension-x3);color:var(--seed-color-fg-neutral-subtle);font-size:var(--seed-font-size-t4)}.seed-data-table__loadingState{box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:10px;padding-block:var(--seed-dimension-x8);padding-inline:var(--seed-dimension-x3);color:color-mix(in srgb,var(--seed-color-fg-neutral) 63%,transparent);font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4);font-weight:var(--seed-font-weight-medium)}.seed-data-table__loadingState[data-inline]{padding-block:0;padding-inline:0;height:var(--seed-dimension-x9)}.seed-data-table__loadingState .seed-data-table-loading-spinner{flex-shrink:0;color:color-mix(in srgb,var(--seed-color-fg-neutral) 63%,transparent);animation:rotate .6s linear infinite}.seed-data-table__addRowCell{box-sizing:border-box;padding:0;border-top:none}.seed-data-table__addRow{box-sizing:border-box;display:flex;align-items:center;width:100%;margin:0;border:none;border-top:1px solid var(--seed-color-stroke-neutral-muted);background-color:var(--seed-color-bg-layer-default);height:var(--seed-dimension-x9);gap:var(--seed-dimension-x2);padding-inline:var(--seed-dimension-x2);color:var(--seed-color-fg-neutral-subtle);font-family:inherit;font-size:var(--seed-font-size-t4);cursor:pointer;transition:background-color .12s,color .12s}.seed-data-table__addRow:hover{background-color:color-mix(in srgb,var(--seed-color-fg-neutral) 4%,var(--seed-color-bg-layer-default));color:var(--seed-color-fg-neutral)}.seed-data-table__addRow svg{flex-shrink:0}.seed-data-table__selectionCell{text-align:center;padding:0}.seed-data-table__bulkBar{box-sizing:border-box;position:absolute;inset-inline-start:50%;transform:translateX(-50%);bottom:var(--seed-dimension-x4);z-index:30;display:flex;align-items:center;gap:var(--seed-dimension-x3);min-height:36px;padding-inline:var(--seed-dimension-x3_5);padding-block:var(--seed-dimension-x2);border-radius:var(--seed-radius-full);box-shadow:var(--seed-shadow-s3);background-color:var(--seed-color-bg-layer-floating);color:var(--seed-color-fg-neutral);font-family:inherit;font-size:var(--seed-font-size-t4);font-weight:var(--seed-font-weight-medium);white-space:nowrap}.seed-data-table__bulkBarCount{flex-shrink:0;color:var(--seed-color-fg-neutral);font-variant-numeric:tabular-nums}.seed-data-table__bulkBarClear{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:20px;height:20px;margin:0;padding:2px;border:none;border-radius:6px;background:0 0;font-family:inherit;color:color-mix(in srgb,var(--seed-color-fg-neutral) 55%,transparent);cursor:pointer;transition:background-color .2s,color .2s}.seed-data-table__bulkBarClear:hover{background-color:color-mix(in srgb,var(--seed-color-fg-neutral) 8%,transparent);color:var(--seed-color-fg-neutral)}.seed-data-table__bulkBarActions{display:flex;align-items:center;flex-shrink:0;gap:var(--seed-dimension-x3);padding-inline-start:var(--seed-dimension-x3);border-inline-start:1px solid color-mix(in srgb,var(--seed-color-fg-neutral) 16%,transparent)}.seed-data-table__root--surface_card{border-color:var(--seed-color-stroke-neutral-muted);background-color:var(--seed-color-bg-layer-default);border-radius:var(--seed-radius-r3)}.seed-data-table__root--surface_bleed{border-color:var(--seed-color-bg-transparent);background-color:var(--seed-color-bg-transparent)}.seed-data-table__row--interactive_true{transition:background-color .12s}.seed-data-table__row--interactive_true:is(:hover,[data-hover]){background-color:color-mix(in srgb,var(--seed-color-fg-neutral) 3%,transparent);--seed-data-table-row-bg:color-mix(in srgb, var(--seed-color-fg-neutral) 3%, var(--seed-color-bg-layer-default))}");
 
 const createClassName = (className, variants, compoundVariants = [])=>{
     const variantKeys = Object.keys(variants);
@@ -5581,9 +5743,20 @@ function formatCalcValue(value, op) {
                                 size: 14
                             })
                         ]
-                    }) : /*#__PURE__*/ jsx("span", {
+                    }) : /*#__PURE__*/ jsxs("span", {
                         className: "seed-data-table-column-calc-placeholder",
-                        children: "Add calculation"
+                        style: {
+                            display: "inline-flex",
+                            alignItems: "center",
+                            gap: 4
+                        },
+                        children: [
+                            /*#__PURE__*/ jsx(IconPlusLine_default, {
+                                size: 13,
+                                strokeWidth: 1.75
+                            }),
+                            "Add calculation"
+                        ]
                     })
                 })
             }),
@@ -11649,7 +11822,7 @@ function RowCount({ shown, total, countLabel }) {
 }
 
 function DataTableInner(props, ref) {
-    const { columns, data, surface, className, locale = "en-US", sort, defaultSort, onSortChange, sortIcon, selectable, selectedIds, defaultSelectedIds, onSelectionChange, selectAllLabel = "Select all rows", getRowSelectionLabel = ()=>"Select row", selectionCheckedIcon, selectionIndeterminateIcon, bulkActions, clearSelectionLabel, query, defaultQuery, onQueryChange, searchPlaceholder = "Search…", searchLabel = "Search table", toolbarSorts, defaultToolbarSorts, onToolbarSortsChange, toolbarFilters, defaultToolbarFilters, onToolbarFiltersChange, showCount = true, countLabel, toolbarActions, columnMenu = false, reorderable = true, resizable = true, columnOrder, defaultColumnOrder, onColumnOrderChange, hiddenColumnKeys, defaultHiddenColumnKeys, onHiddenColumnKeysChange, columnWidths, defaultColumnWidths, onColumnWidthsChange, columnLabels, defaultColumnLabels, onColumnLabelsChange, pinnedColumnKeys, defaultPinnedColumnKeys, onPinnedColumnKeysChange, onColumnsChange, columnCalcOps, defaultColumnCalcOps, onColumnCalcOpsChange, stickyFirst = false, stickyLast = false, onEdit, cellContextMenu = true, onViewEditHistory, cellContextMenuItems, interactive = false, onRowClick, onAddRow, addRowLabel = "New record", loading = false, loadingLabel = "Loading...", error, empty = "No results.", onLoadMore, hasMore, loadingMore, scrollProps, ...restProps } = props;
+    const { columns, data, surface, className, locale = "en-US", sort, defaultSort, onSortChange, sortIcon, selectable, selectedIds, defaultSelectedIds, onSelectionChange, selectAllLabel = "Select all rows", getRowSelectionLabel = ()=>"Select row", selectionCheckedIcon, selectionIndeterminateIcon, bulkActions, clearSelectionLabel, query, defaultQuery, onQueryChange, searchPlaceholder = "Search…", searchLabel = "Search table", toolbarSorts, defaultToolbarSorts, onToolbarSortsChange, toolbarFilters, defaultToolbarFilters, onToolbarFiltersChange, showCount = true, countLabel, toolbarActions, columnMenu = false, reorderable = true, resizable = true, columnOrder, defaultColumnOrder, onColumnOrderChange, hiddenColumnKeys, defaultHiddenColumnKeys, onHiddenColumnKeysChange, columnWidths, defaultColumnWidths, onColumnWidthsChange, columnLabels, defaultColumnLabels, onColumnLabelsChange, pinnedColumnKeys, defaultPinnedColumnKeys, onPinnedColumnKeysChange, onColumnsChange, columnCalcOps, defaultColumnCalcOps, onColumnCalcOpsChange, stickyFirst = false, stickyLast = false, onEdit, cellContextMenu = true, onViewEditHistory, cellContextMenuItems, interactive = false, onRowClick, onAddRow, addRowLabel = "New record", loading = false, loadingLabel = "Loading...", error, empty = "No results.", onLoadMore, hasMore, loadingMore, scrollProps, virtualized = false, rowHeight, overscan, ...restProps } = props;
     const classNames = dataTable({
         surface,
         interactive
@@ -11822,6 +11995,9 @@ function DataTableInner(props, ref) {
             onLoadMore: onLoadMore,
             hasMore: hasMore,
             loadingMore: loadingMore,
+            virtualized: virtualized,
+            rowHeight: rowHeight,
+            overscan: overscan,
             ...restProps,
             children: [
                 onColumnsChange && /*#__PURE__*/ jsx(ColumnsChangeEffect, {
@@ -11854,7 +12030,9 @@ function DataTableInner(props, ref) {
                 }),
                 /*#__PURE__*/ jsx(DataTableScrollBody, {
                     scrollProps: scrollProps,
+                    virtualized: virtualized,
                     children: /*#__PURE__*/ jsxs(DataTableTable, {
+                        "aria-rowcount": virtualized ? sortedData.length + 1 : undefined,
                         children: [
                             /*#__PURE__*/ jsx(DataTableColGroup, {
                                 columns: columns,
@@ -11910,39 +12088,47 @@ function DataTableInner(props, ref) {
                                     })
                                 }) : /*#__PURE__*/ jsxs(Fragment, {
                                     children: [
-                                        sortedData.map((row)=>/*#__PURE__*/ jsxs(DataTableRow, {
-                                                rowId: row.id,
-                                                "data-clickable": onRowClick ? "" : undefined,
-                                                onClick: onRowClick ? ()=>onRowClick(row) : undefined,
-                                                children: [
-                                                    selectable && /*#__PURE__*/ jsx(SelectionCell, {
-                                                        // The row itself carries `onClick={onRowClick}` above, and a
-                                                        // native click on this cell's checkbox bubbles up through it
-                                                        // (React attaches DataTableRow's handler on the <tr>, which
-                                                        // sits between the checkbox and anything a consumer could stop
-                                                        // it from at -- so this has to live here, not in the consumer).
-                                                        // Without this, checking a row's box also fires `onRowClick`.
-                                                        onClick: (event)=>event.stopPropagation(),
-                                                        stickyFirst: stickyFirst,
-                                                        children: /*#__PURE__*/ jsx(RowCheckbox, {
-                                                            label: getRowSelectionLabel(row),
-                                                            checkedIcon: selectionCheckedIcon ?? DEFAULT_CHECKED_ICON
-                                                        })
-                                                    }),
-                                                    /*#__PURE__*/ jsx(ColumnBodyCells, {
-                                                        columns: columns,
-                                                        row: row,
-                                                        classNames: classNames,
-                                                        locale: locale,
-                                                        selectable: !!selectable,
-                                                        stickyFirst: stickyFirst,
-                                                        stickyLast: resolvedStickyLast,
-                                                        cellContextMenu: cellContextMenu,
-                                                        onViewEditHistory: onViewEditHistory,
-                                                        cellContextMenuItems: cellContextMenuItems
-                                                    })
-                                                ]
-                                            }, row.id)),
+                                        /*#__PURE__*/ jsx(WindowedRows, {
+                                            rows: sortedData,
+                                            virtualized: virtualized,
+                                            colSpan: totalCols,
+                                            children: (windowRows, firstIndex)=>/*#__PURE__*/ jsx(Fragment, {
+                                                    children: windowRows.map((row, offset)=>/*#__PURE__*/ jsxs(DataTableRow, {
+                                                            rowId: row.id,
+                                                            "aria-rowindex": virtualized ? firstIndex + offset + 2 : undefined,
+                                                            "data-clickable": onRowClick ? "" : undefined,
+                                                            onClick: onRowClick ? ()=>onRowClick(row) : undefined,
+                                                            children: [
+                                                                selectable && /*#__PURE__*/ jsx(SelectionCell, {
+                                                                    // The row itself carries `onClick={onRowClick}` above, and a
+                                                                    // native click on this cell's checkbox bubbles up through it
+                                                                    // (React attaches DataTableRow's handler on the <tr>, which
+                                                                    // sits between the checkbox and anything a consumer could stop
+                                                                    // it from at -- so this has to live here, not in the consumer).
+                                                                    // Without this, checking a row's box also fires `onRowClick`.
+                                                                    onClick: (event)=>event.stopPropagation(),
+                                                                    stickyFirst: stickyFirst,
+                                                                    children: /*#__PURE__*/ jsx(RowCheckbox, {
+                                                                        label: getRowSelectionLabel(row),
+                                                                        checkedIcon: selectionCheckedIcon ?? DEFAULT_CHECKED_ICON
+                                                                    })
+                                                                }),
+                                                                /*#__PURE__*/ jsx(ColumnBodyCells, {
+                                                                    columns: columns,
+                                                                    row: row,
+                                                                    classNames: classNames,
+                                                                    locale: locale,
+                                                                    selectable: !!selectable,
+                                                                    stickyFirst: stickyFirst,
+                                                                    stickyLast: resolvedStickyLast,
+                                                                    cellContextMenu: cellContextMenu,
+                                                                    onViewEditHistory: onViewEditHistory,
+                                                                    cellContextMenuItems: cellContextMenuItems
+                                                                })
+                                                            ]
+                                                        }, row.id))
+                                                })
+                                        }),
                                         onLoadMore && /*#__PURE__*/ jsx(InfiniteScrollRow, {
                                             colSpan: totalCols,
                                             classNames: classNames,
@@ -12043,7 +12229,69 @@ const DataTableTable = withContext$1(DataTableTable$1, "table");
  *  out of sync between the three. A column with no explicit width gets a bare `<col>`
  *  (no `style`): `table-layout: fixed`'s own algorithm gives every such column an equal
  *  share of whatever space is left, matching the old flex grid's `flex: 1 1 0%`
- *  default with no extra code needed here. */ function DataTableColGroup({ columns, selectable, stickyFirst }) {
+ *  default with no extra code needed here. */ /**
+ * Row virtualization's render slice. Lives inside `DataTableRoot` (it reads the
+ * windowing state off context, which `DataTableInner` above can't) and hands its
+ * children the visible `[start, end)` slice of `rows` plus that slice's first index,
+ * flanked by a spacer row each side that stands in for everything cut off -- so the
+ * scroll height stays `rows.length * rowHeight` and the scrollbar matches the full
+ * data set. `virtualized` off: every row, no spacers, the pre-0.12 output exactly.
+ */ function WindowedRows({ rows, virtualized, colSpan, children }) {
+    const { virtual } = useDataTableContext();
+    const windowed = React.useMemo(()=>virtualized ? computeVirtualWindow({
+            count: rows.length,
+            rowHeight: virtual.rowHeight,
+            scrollTop: virtual.scrollTop,
+            viewportHeight: virtual.viewportHeight,
+            overscan: virtual.overscan
+        }) : null, [
+        virtualized,
+        rows.length,
+        virtual.rowHeight,
+        virtual.scrollTop,
+        virtual.viewportHeight,
+        virtual.overscan
+    ]);
+    if (!windowed) return /*#__PURE__*/ jsx(Fragment, {
+        children: children(rows, 0)
+    });
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            windowed.topSpacer > 0 && /*#__PURE__*/ jsx(VirtualSpacerRow, {
+                height: windowed.topSpacer,
+                colSpan: colSpan
+            }),
+            children(rows.slice(windowed.start, windowed.end), windowed.start),
+            windowed.bottomSpacer > 0 && /*#__PURE__*/ jsx(VirtualSpacerRow, {
+                height: windowed.bottomSpacer,
+                colSpan: colSpan
+            })
+        ]
+    });
+}
+/** A plain `<tr><td colSpan>` of a given height -- deliberately NOT a `DataTableRow`/
+ *  `DataTableCell` (no hover tint, no cell chrome, no border, no 36px min height).
+ *  `colSpan` covers every column, so the `<colgroup>` still drives widths and sticky
+ *  columns are unaffected. */ function VirtualSpacerRow({ height, colSpan }) {
+    return /*#__PURE__*/ jsx("tr", {
+        "data-virtual-spacer": "",
+        style: {
+            height
+        },
+        children: /*#__PURE__*/ jsx("td", {
+            "aria-hidden": "true",
+            colSpan: colSpan,
+            style: {
+                height,
+                padding: 0,
+                border: 0,
+                display: "table-cell",
+                lineHeight: 0
+            }
+        })
+    });
+}
+function DataTableColGroup({ columns, selectable, stickyFirst }) {
     // MUST use the same pinned-first ordering every OTHER row (header/body/footer)
     // renders in (`useEffectiveColumns`'s own doc comment) -- a `<colgroup>`'s `<col>`s
     // are matched positionally to each row's cells, so if a pinned column visually moves
@@ -12118,7 +12366,7 @@ const DataTableSelectionCell = withSelectionCell(DataTableCell$1, "cell");
 // to clip), so it never introduces a second vertical scrollbar next to whatever
 // ambient container the whole DataTable already sits in.
 const DataTableScrollBodyBase = withContext$1(Primitive.div, "scrollArea");
-function DataTableScrollBody({ children, scrollProps }) {
+function DataTableScrollBody({ children, virtualized, scrollProps }) {
     const { scrollAreaRef, scrolledStart, scrolledEnd, onScroll } = useDataTableContext();
     const { className: scrollClassName, style: scrollStyle, ...otherScrollProps } = scrollProps ?? {};
     return /*#__PURE__*/ jsx(DataTableScrollBodyBase, {
@@ -12126,7 +12374,13 @@ function DataTableScrollBody({ children, scrollProps }) {
         ref: scrollAreaRef,
         onScroll: onScroll,
         className: scrollClassName,
-        style: scrollStyle,
+        // Virtualized: the browser's scroll anchoring would try to hold the visible rows
+        // steady as the spacer heights change under it, fighting the scroll position
+        // this windowing itself derives from -- turn it off.
+        style: virtualized ? {
+            ...scrollStyle,
+            overflowAnchor: "none"
+        } : scrollStyle,
         "data-scrolled-start": dataAttr(scrolledStart),
         "data-scrolled-end": dataAttr(scrolledEnd),
         children: children

package/dist/styles.css

@@ -4934,6 +4934,23 @@ tbody tr:last-child .seed-data-table__cell {
   overflow: clip;
 }
 
+.seed-data-table__entityName[data-clickable] {
+  cursor: pointer;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  color: inherit;
+  text-align: start;
+  background: none;
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+
+.seed-data-table__entityName[data-clickable]:is(:hover, [data-hover]) {
+  text-decoration: underline;
+}
+
 .seed-data-table__tagList {
   align-items: center;
   gap: var(--seed-dimension-x1_5);
@@ -4996,8 +5013,8 @@ tr:hover .seed-data-table__entityActions, .seed-data-table__entityActions:focus-
   box-sizing: border-box;
   max-width: 100%;
   height: 22px;
-  font-size: 10px;
-  font-weight: var(--seed-font-weight-regular);
+  font-size: 13px;
+  font-weight: var(--seed-font-weight-medium);
   text-overflow: ellipsis;
   white-space: nowrap;
   border-radius: 7px;