@svgrid/grid 2.6.21 → 2.6.23

package/src/SvGrid.svelte

@@ -15,6 +15,8 @@
   } from "./index";
   import "./sv-grid-scrollbar";
   import "./SvGrid.css";
+  import type { RowResizeOptions } from "./row-resize";
+  import type { ColumnResizeOptions } from "./column-resize";
   import {
     RenderSnippetConfig,
     RenderComponentConfig,
@@ -31,6 +33,9 @@
   import {
     cfTextStyle,
     getEditorInputType,
+    usesRichDateFilter,
+    toIsoDateLocal,
+    fromIsoDateLocal,
     getOptionLabel,
     getOptionColor,
     colorfulChipStyle,
@@ -46,6 +51,7 @@
   // SvGridChartPanel (charting) and SvGridBoard (Kanban) are heavy, prop-gated
   // views - lazy-loaded below so they stay out of the base <SvGrid> bundle.
   import { getSchedulerView } from "./scheduler-view.svelte";
+  import { getSelectionBarView } from "./selection-bar-view.svelte";
   import { getBoardView } from "./board-view.svelte";
   import { getChartView } from "./chart-view.svelte";
   let props: Props<TFeatures, TData> = $props();
@@ -97,6 +103,37 @@
       import("./SvGridChartView.svelte").then((m) => (ChartView = m.default));
   });
   let MenusOverlay = $state<typeof import("./GridMenus.svelte").default | null>(null);
+  // The grid's own date picker, for date FILTER inputs. Lazy for the same
+  // reason the cell editor's copy is: most grids never show a filter row, and
+  // most that do have no date column.
+  let FilterDatePicker = $state<typeof import("./SvDateTimePicker.svelte").default | null>(null);
+  $effect(() => {
+    if (!showFilterRowEffective && !ctrl.filterMenuFor) return;
+    if (FilterDatePicker) return;
+    const wantsPicker = ctrl.allColumns.some((c: any) =>
+      usesRichDateFilter(c.columnDef?.editorType),
+    );
+    if (wantsPicker)
+      import("./SvDateTimePicker.svelte").then((m) => (FilterDatePicker = m.default));
+  });
+  // `between` on a date column filters with a RANGE control rather than two
+  // single-date fields: one field, one popover, both ends picked in a single
+  // gesture - and it fits a narrow date column, which two pickers plus their
+  // buttons do not. Loaded only once a date column is actually set to Between,
+  // so a grid that never uses the operator never pays for the chunk.
+  let FilterRangePicker = $state<typeof import("./SvDateRangeInput.svelte").default | null>(null);
+  $effect(() => {
+    if (!showFilterRowEffective) return;
+    if (FilterRangePicker) return;
+    const wantsRange = ctrl.allColumns.some(
+      (c: any) =>
+        usesRichDateFilter(c.columnDef?.editorType) &&
+        (ctrl.filterMenuValues[c.id]?.operator ??
+          ctrl.defaultOperatorFor(c)) === "between",
+    );
+    if (wantsRange)
+      import("./SvDateRangeInput.svelte").then((m) => (FilterRangePicker = m.default));
+  });
   $effect(() => {
     if (ctrl.chartingEnabled && ctrl.chartPanelOpen && !ChartPanelView)
       import("./SvGridChartPanel.svelte").then((m) => (ChartPanelView = m.default));
@@ -167,7 +204,9 @@
   const hideTooltip = $derived(ctrl.hideTooltip);
   const findHits = $derived(ctrl.findHits);
   const headerHeight = $derived(ctrl.headerHeight);
-  const resizingColumnId = $derived(ctrl.resizingColumnId);
+  // Column resizing has always been unconditional; `columnResize={false}` is
+  // the opt-out, so the default has to stay on when the prop is absent.
+  const columnResizeEnabled = $derived(opt.columnResize === true);
   const selectionColumnWidth = $derived(ctrl.selectionColumnWidth);
   const rowNumberColumnWidth = $derived(ctrl.rowNumberColumnWidth);
   const showRowNumbersEffective = $derived(ctrl.showRowNumbersEffective);
@@ -264,6 +303,23 @@
   // Row-grouping display modes: group state lives in synthetic columns instead
   // of a full-width banner row.
   const groupColumnMode = $derived(ctrl.groupColumnMode);
+  /**
+   * True when a cell's content needs none of the wrapper snippets.
+   *
+   * A cell body normally renders through `cellBodyWithFormat` ->
+   * `cellBodyFormatted` -> `cellBody`, and with no grouping, no tree data and
+   * no conditional formats the first two are pure pass-throughs: three snippet
+   * renders and two `{#if}` blocks per cell to reach content that one render
+   * produces. Measured by ablation, that chain is 4.2 ms of a 17.4 ms mount at
+   * 28 rows x 9 columns - about a quarter of the whole mount, and the largest
+   * single per-cell cost.
+   *
+   * Computed once per render rather than per cell, so the fast path costs one
+   * boolean read at each of the ~250 cells instead of two snippet frames.
+   */
+  const plainCellBody = $derived(
+    !groupColumnMode && !treeData && !hasConditionalFormats,
+  );
   const autoGroupCell = $derived(ctrl.autoGroupCell);
   const isAutoGroupColumn = (id: string): boolean =>
     id === "__autoGroup" || id.startsWith("__group_");
@@ -280,7 +336,60 @@
   // The fixed row height, matching what the virtualized path takes from the virtualizer.
   // The non-virtualized (`virtualization={false}`) body must apply this too, else its rows
   // fall back to content height and look shorter than a virtualized grid's.
+  /**
+   * `rowResize` and `columnResize` are both opt-in and both default to OFF, so
+   * neither module is imported statically - a grid that leaves them alone must
+   * not carry their bytes. This wraps an action so its module is fetched on
+   * first enable and never otherwise. The handles appear a microtask after the
+   * first paint, which is invisible for a drag affordance.
+   *
+   * One helper for both: two hand-rolled copies of this bookkeeping would cost
+   * more base bundle than the deferral saves.
+   */
+  type LazyHandle<O> = { update(o: O): void; destroy(): void };
+  function lazyAction<O extends { disabled?: boolean }>(
+    load: () => Promise<(node: HTMLElement, opts: O) => LazyHandle<O>>,
+  ) {
+    return (node: HTMLElement, opts: O): LazyHandle<O> => {
+      let handle: LazyHandle<O> | null = null;
+      let current = opts;
+      let destroyed = false;
+      const ensure = () => {
+        if (handle || destroyed || current.disabled) return;
+        void load().then((make) => {
+          // The prop can be switched back off, or the grid unmounted, while
+          // the chunk is still in flight.
+          if (destroyed || current.disabled || handle) return;
+          handle = make(node, current);
+        });
+      };
+      ensure();
+      return {
+        update(next: O) {
+          current = next;
+          if (handle) handle.update(next);
+          else ensure();
+        },
+        destroy() {
+          destroyed = true;
+          handle?.destroy();
+        },
+      };
+    };
+  }
+
+  const lazyRowResize = lazyAction<RowResizeOptions>(() =>
+    import("./row-resize").then((m) => m.rowResize),
+  );
+  const lazyColumnResize = lazyAction<ColumnResizeOptions>(() =>
+    import("./column-resize").then((m) => m.columnResize),
+  );
+
   const rowSizePx = (i: number): number => {
+    // A height the user dragged wins over the declared one, so the row stays
+    // where they put it across re-renders and virtualization recycling.
+    const dragged = ctrl.rowResizeHeightPx(i);
+    if (dragged != null) return dragged;
     const rh = opt.rowHeight;
     return typeof rh === "function" ? rh(i) : (rh ?? 30);
   };
@@ -358,26 +467,10 @@
     return "sv-grid-cell-flash";
   }
 
-  // Keyboard-accessible column resize (#79): focus a resize handle and use the
-  // arrow keys (Shift = fine 1px step). Complements the pointer-drag resize.
-  function resizeColumnByKeyboard(e: KeyboardEvent, columnId: string) {
-    let delta = 0;
-    const step = e.shiftKey ? 1 : 10;
-    if (e.key === "ArrowLeft") delta = -step;
-    else if (e.key === "ArrowRight") delta = step;
-    else return;
-    e.preventDefault();
-    const current = ctrl.getColumnWidth(columnId);
-    ctrl.columnWidths = {
-      ...ctrl.columnWidths,
-      [columnId]: Math.max(40, current + delta),
-    };
-  }
-
   // ---- Full-row editing -------------------------------------------------
   const fullRowEdit = $derived(ctrl.fullRowEdit);
   // Commit the whole row when the user clicks away from its editors (Excel /
-  // AG-Grid feel). Clicking within any full-row editor keeps editing.
+  // spreadsheet feel). Clicking within any full-row editor keeps editing.
   // Stays here rather than in SvGridCellEditor: that component is instantiated
   // once PER editable cell during a full-row edit, so a document listener there
   // would be attached N times and commit N times.
@@ -429,7 +522,6 @@
   const setActiveCell = $derived(ctrl.setActiveCell);
   const scrollActiveCellIntoView = $derived(ctrl.scrollActiveCellIntoView);
   const getColumnWidth = $derived(ctrl.getColumnWidth);
-  const startColumnResize = $derived(ctrl.startColumnResize);
   const getCellRangeEdges = $derived(ctrl.getCellRangeEdges);
   const fillHandleCell = $derived(ctrl.fillHandleCell);
   const isInFillPreview = $derived(ctrl.isInFillPreview);
@@ -624,6 +716,24 @@
   onpointermove={onWindowPointerMove}
 />
 
+<!--
+  The licensing line every Enterprise upsell note carries. One snippet rather
+  than four copies: four gates worded four ways is how a product ends up
+  explaining its own licensing inconsistently.
+
+  Enterprise is SOFT-gated - the feature runs without a key and the grid shows
+  an unlicensed watermark - so this says exactly that rather than implying the
+  feature is inert without one.
+-->
+{#snippet enterpriseLicenseNote()}
+  <p class="sv-grid-upsell-license">
+    {messages.upsellLicense}
+    <a href="https://svgrid.com/pricing/" target="_blank" rel="noopener noreferrer">
+      {messages.upsellLicenseLink}
+    </a>
+  </p>
+{/snippet}
+
 {#if opt.loading && !opt.loadingOverlay && !hasMeasured}
   <!-- Full-screen loading state only on the *initial* load, before the grid
        has ever rendered. Once measured, a `loading` flip (from a server-mode
@@ -680,6 +790,7 @@
             <code>@svgrid/enterprise</code> and call <code>enableBoardView()</code>
             to render it.
           </p>
+          {@render enterpriseLicenseNote()}
         </div>
       {/if}
     </div>
@@ -727,6 +838,7 @@
             <code>@svgrid/enterprise</code> and call <code>enableSchedulerView()</code>
             to render it.
           </p>
+          {@render enterpriseLicenseNote()}
         </div>
       {/if}
     </div>
@@ -809,6 +921,7 @@
         <div class="sv-grid-scheduler-upsell sv-grid-pivot-upsell" role="note">
           <strong>{messages.pivotUpsellTitle}</strong>
           <p>{messages.pivotUpsellBody}</p>
+          {@render enterpriseLicenseNote()}
         </div>
       {/if}
     </div>
@@ -866,6 +979,13 @@
         <path d="M8 5l9 7-9 7" />
       {:else if name === "op-lessThan"}
         <path d="M16 5l-9 7 9 7" />
+      {:else if name === "op-between"}
+        <!-- Two bounds with the span between them. The catalogue has always
+             named this icon; the snippet had no case for it, so the Between
+             row in the operator menu drew an empty <svg>. -->
+        <path d="M5 5v14" />
+        <path d="M19 5v14" />
+        <path d="M9 12h6" />
       {:else if name === "op-isBlank"}
         <circle cx="12" cy="12" r="8" />
         <path d="M6.5 6.5l11 11" />
@@ -1294,6 +1414,32 @@
     class="sv-grid-root"
     class:sv-grid-root-fill={opt.containerHeight === "100%"}
     style={chartDockReserveStyle}
+    data-move-grab={ctrl.moveGrabHover || ctrl.moveDrag ? "true" : undefined}
+    data-selbar={
+      ctrl.selectionBarOn && ctrl.selectionBarTarget.ids.length > 0
+        ? (getSelectionBarView() ? ctrl.selectionBarPosition : `upsell-${ctrl.selectionBarPosition}`)
+        : undefined
+    }
+    use:lazyRowResize={{
+      disabled: !ctrl.rowResizeOn,
+      // No gutter column on most grids, so fall back to the first body cell -
+      // otherwise `rowResize` would be a prop that silently does nothing.
+      anchor: "row",
+      onResize: (index, height) => ctrl.setRowResizeHeight(index, height),
+    }}
+    use:lazyColumnResize={{
+      disabled: !columnResizeEnabled,
+      getWidth: (columnId) => ctrl.getColumnWidth(columnId),
+      onResize: (columnId, width) => {
+        ctrl.columnWidths = { ...ctrl.columnWidths, [columnId]: width };
+      },
+      label: (columnId) => {
+        const col = ctrl.findColumnById(columnId);
+        return col ? toolPanelHeaderLabel(col) : columnId;
+      },
+      canResize: (columnId) => ctrl.columnResizable(columnId),
+      onAutosize: (columnId) => ctrl.autosizeColumn(columnId),
+    }}
   >
     {#if showGlobalFilterEffective}
       <label class="sv-grid-global-filter">
@@ -1747,32 +1893,6 @@
                             }}
                           />
                         {/if}
-                        <div
-                          class="sv-grid-resize-handle"
-                          class:is-resizing={resizingColumnId ===
-                            header.column.id}
-                          role="separator"
-                          aria-orientation="vertical"
-                          aria-label={`Resize ${toolPanelHeaderLabel(header.column)}`}
-                          tabindex="0"
-                          {...(() => {
-                            // A focusable separator is a widget, so ARIA requires
-                            // aria-valuenow. The value it exposes is the column
-                            // width the arrow keys change; 40 is the floor
-                            // enforced in resizeColumnByKeyboard.
-                            const w = Math.round(ctrl.getColumnWidth(header.column.id));
-                            return {
-                              "aria-valuenow": w,
-                              "aria-valuemin": 40,
-                              "aria-valuetext": `${w} pixels`,
-                            };
-                          })()}
-                          onpointerdown={(event) =>
-                            startColumnResize(event, header.column.id)}
-                          onkeydown={(event) =>
-                            resizeColumnByKeyboard(event, header.column.id)}
-                          ondblclick={(event) => event.stopPropagation()}
-                        ></div>
                       {/if}
                     </th>
                   {/if}
@@ -1900,6 +2020,57 @@
                               }}
                             />
                           </div>
+                        {:else if activeOperator !== "isBlank" && activeOperator !== "isNotBlank" && activeOperator !== "regex" && FilterDatePicker && usesRichDateFilter(rendered.column.columnDef.editorType)}
+                          <!-- Same picker the cell editor uses, so a date
+                               column looks the same wherever you touch it.
+                               `regex` keeps the text box - a pattern is not
+                               a date. -->
+                          {#if activeOperator === "between"}
+                            <!-- `between` needs BOTH bounds - `condActive`
+                                 ignores the filter until `valueTo` is set too -
+                                 so this is one range field rather than two
+                                 single-date pickers: both ends come from a
+                                 single gesture in one popover, and it still
+                                 fits a narrow date column. It writes the same
+                                 pair of stores the plain text inputs use. -->
+                            {#if FilterRangePicker}
+                              {@const RangePicker = FilterRangePicker}
+                              {@const from = fromIsoDateLocal(
+                                filterRowValues[rendered.column.id],
+                              )}
+                              {@const to = fromIsoDateLocal(
+                                filterMenuValues[rendered.column.id]?.valueTo,
+                              )}
+                              <RangePicker
+                                value={from && to ? [from, to] : null}
+                                formatString="yyyy-MM-dd"
+                                block
+                                placeholder="Range…"
+                                onChange={(range) => {
+                                  updateFilterRow(
+                                    rendered.column.id,
+                                    range ? toIsoDateLocal(range[0]) : "",
+                                  );
+                                  updateFilterMenuValueTo(
+                                    rendered.column.id,
+                                    range ? toIsoDateLocal(range[1]) : "",
+                                  );
+                                }}
+                              />
+                            {/if}
+                          {:else}
+                            {@const FilterPicker = FilterDatePicker}
+                            <FilterPicker
+                              value={(filterRowValues[rendered.column.id] ?? "") || null}
+                              formatString="yyyy-MM-dd"
+                              dropDownDisplayMode="calendar"
+                              block
+                              nullable
+                              placeholder="Filter…"
+                              onChange={(d) =>
+                                updateFilterRow(rendered.column.id, toIsoDateLocal(d))}
+                            />
+                          {/if}
                         {:else if activeOperator !== "isBlank" && activeOperator !== "isNotBlank"}
                           {@const frType = getEditorInputType(
                             rendered.column.columnDef.editorType ?? "text",
@@ -2177,12 +2348,11 @@
                               rendered.column.columnDef.cellFlash,
                             ),
                           }}
-                          {...getGridCellA11yProps({
-                            id: getGridCellDomId(ctrl.gridDomId, rowIndex, colIndex),
-                            rowIndex: rowIndex + 1,
-                            colIndex: colIndex + 1,
-                            selected: isRowSelected(row.id),
-                          })}
+                          role="gridcell"
+                          id={getGridCellDomId(ctrl.gridDomId, rowIndex, colIndex)}
+                          aria-colindex={colIndex + 1}
+                          aria-rowindex={rowIndex + 1}
+                          aria-selected={isRowSelected(row.id)}
                         >
                           {#if inRowEdit || isEditing}
                             <!-- The editing cell stays empty until the lazy
@@ -2194,11 +2364,15 @@
                               <CellEditor {ctrl} column={rendered.column} {row} fullRow={inRowEdit} />
                             {/if}
                           {:else}
-                            {@render cellBodyWithFormat(
-                              row,
-                              rendered.column,
-                              cellValue,
-                            )}
+                            {#if plainCellBody}
+                              {@render cellBody(row, rendered.column, cellValue)}
+                            {:else}
+                              {@render cellBodyWithFormat(
+                                row,
+                                rendered.column,
+                                cellValue,
+                              )}
+                            {/if}
                           {/if}
                           {#if !isEditing && fillHandleCell && fillHandleCell.rowIndex === rowIndex && fillHandleCell.colIndex === colIndex}
                             <!-- Excel-style fill handle: drag down/right to
@@ -2948,6 +3122,31 @@
     {#if ctrl.chartingEnabled && ctrl.chartPanelOpen && ChartPanelView}
       <ChartPanelView {ctrl} />
     {/if}
+
+    <!-- Bulk-action bar. INSIDE the root, unlike GridMenus: it is positioned
+         `absolute` against it, so moving it outside would anchor it to the
+         page. The renderer is Enterprise and arrives through the
+         selection-bar-view seam; without it, a short note in its place. -->
+    {#if ctrl.selectionBarOn && ctrl.selectionBarTarget.ids.length > 0}
+      {#if getSelectionBarView()}
+        {@const SelectionBarView = getSelectionBarView()}
+        <SelectionBarView {ctrl} />
+      {:else}
+        <div
+          class="sv-grid-scheduler-upsell sv-grid-selection-bar-upsell"
+          data-position={ctrl.selectionBarPosition}
+          role="note"
+        >
+          <strong>Bulk-action bar</strong>
+          <p>
+            The selection bar is an Enterprise feature. Install
+            <code>@svgrid/enterprise</code> and call <code>enableSelectionBar()</code>
+            to render it.
+          </p>
+          {@render enterpriseLicenseNote()}
+        </div>
+      {/if}
+    {/if}
   </div>
   <!-- /.sv-grid-root -->
 

package/src/SvGrid.types.ts

@@ -217,6 +217,78 @@ export type ContextMenuItem<TData extends RowData = RowData> =
       action: (target: ContextMenuTarget<TData>) => void;
     };
 
+/** What a {@link SelectionBarAction} is handed when it runs. */
+export type SelectionBarTarget<TData extends RowData = RowData> = {
+  /** The selected rows, in the grid's current display order. */
+  rows: TData[];
+  /** Their row ids, same order as `rows`. */
+  ids: string[];
+};
+
+/**
+ * One button on the selection bar. Same shape as {@link ContextMenuItem}'s
+ * object form - key, label, optional hidden/disabled predicates, and an action -
+ * except everything here is handed the whole SELECTION rather than one cell.
+ */
+export type SelectionBarAction<TData extends RowData = RowData> = {
+  key: string;
+  label: string;
+  /**
+   * Inline SVG path data (the `d` of a single 24x24 path) drawn to the left of
+   * the label. A string rather than a component so an action array stays plain
+   * data that can live in a `.ts` module next to the columns.
+   */
+  icon?: string;
+  /** Render in the destructive style (red). Does not add a confirmation. */
+  danger?: boolean;
+  /** Hide the button entirely for this selection. */
+  hidden?: (target: SelectionBarTarget<TData>) => boolean;
+  /** Render greyed-out and non-clickable for this selection. */
+  disabled?: (target: SelectionBarTarget<TData>) => boolean;
+  /** Invoked on click. The bar stays open; clear the selection yourself if the
+   *  action should dismiss it. */
+  action: (target: SelectionBarTarget<TData>) => void;
+};
+
+/**
+ * A built-in bar button, named by key - the same convention
+ * {@link ContextMenuItem} uses for its string form.
+ *
+ * - `'selectAll'` selects every row in the current view.
+ * - `'editFields'` opens the bulk-edit dialog: pick a field, set one value,
+ *   apply it to every selected row in a single undo step.
+ * - `'separator'` draws a divider.
+ */
+export type SelectionBarBuiltin = "selectAll" | "editFields" | "separator";
+
+/**
+ * Full form of the {@link SvGridProps.selectionBar} prop, for when the array
+ * shorthand is not enough.
+ */
+export type SelectionBarConfig<TData extends RowData = RowData> = {
+  /**
+   * The buttons, left to right. Strings are {@link SelectionBarBuiltin} keys,
+   * objects are your own actions - so a Jira-shaped bar is
+   * `['selectAll', 'editFields', 'separator', myAction]`.
+   */
+  actions?: ReadonlyArray<SelectionBarAction<TData> | SelectionBarBuiltin>;
+  /**
+   * Which edge of the grid the bar floats against. Default `'bottom'`, where
+   * the eye is already going after ticking a checkbox and where it covers the
+   * rows a user is least likely to be reading.
+   */
+  position?: "bottom" | "top";
+  /**
+   * How many actions stay on the bar before the rest collapse into an overflow
+   * menu. Default 6, which fits a full issue-tracker set (select all, edit,
+   * status, watch, delete) without collapsing. A bar wide enough to need
+   * horizontal scrolling is a bar whose last button nobody finds.
+   */
+  maxVisible?: number;
+  /** Hide the trailing clear (x) button. Default false. */
+  hideClear?: boolean;
+};
+
 /** A single Kanban lane (board column). {@link BoardConfig}. */
 export type BoardLane = {
   /** Lane id - equals the `groupBy` field value of the cards it holds. */
@@ -1003,6 +1075,29 @@ export type Props<TFeatures extends TableFeatures = TableFeatures, TData extends
    * browser menu shows instead).
    */
   contextMenu?: boolean | ReadonlyArray<ContextMenuItem<TData>>;
+  /**
+   * Floating bar that appears over the grid while rows are selected, showing
+   * the count and the actions that apply to the whole selection - the pattern
+   * an issue tracker uses for bulk edit.
+   *
+   * `true` gives the count and a Clear button. An array is the shorthand for
+   * `{ actions }`. Pass {@link SelectionBarConfig} to also set `position`
+   * (`'bottom'` default, or `'top'`), `maxVisible` and `hideClear`. Omitted /
+   * `false` is off.
+   *
+   * Default **off**. This is chrome that floats over your content, not a
+   * gesture: it overlaps a row, and what belongs on it is specific to the app.
+   *
+   * **The prop and its types are free; the bar itself is an Enterprise
+   * feature.** Install `@svgrid/enterprise` and call `enableSelectionBar()`
+   * (or `installEnterprise`, which does it for you) to render it - without
+   * that the grid shows a short upsell note in its place, the same way the
+   * scheduler and board views do.
+   */
+  selectionBar?:
+    | boolean
+    | ReadonlyArray<SelectionBarAction<TData> | SelectionBarBuiltin>
+    | SelectionBarConfig<TData>;
   /**
    * The feature set built with `tableFeatures({ ... })`. Optional - the
    * `sortable` / `filterable` / `groupable` shortcuts below inject the
@@ -1329,6 +1424,28 @@ export type Props<TFeatures extends TableFeatures = TableFeatures, TData extends
    * supplying per-row heights).
    */
   autoRowHeight?: boolean;
+  /**
+   * Let the user drag a row's bottom edge to change its height. **Off by
+   * default**, because a resizable row needs somewhere to grab and most grids
+   * do not want a drag target on every row.
+   *
+   * The grid remembers the heights itself, so this works as a bare boolean -
+   * no `rowHeight` function required. Drag, or focus the grip and use Up/Down
+   * (Shift for 1px steps).
+   *
+   * Turning this on also turns on the **row header column** ({@link
+   * showRowNumbers}), because that is where the grip lives and where a
+   * spreadsheet puts it - a drag target on the edge of a data cell works but
+   * reads as an accident. An explicit `showRowNumbers={false}` still wins; the
+   * grip then falls back to the row's first cell, and a column of your own
+   * carrying `cellClass: 'sv-row-gutter'` is used ahead of either.
+   *
+   * Ignored under `autoRowHeight`, where the content decides the height and a
+   * manual one would immediately be overwritten. For full control of the
+   * heights - persisting them, sharing them between grids - pass a
+   * function-valued {@link rowHeight} and use the `rowResize` action directly.
+   */
+  rowResize?: boolean;
   /**
    * Height (px) of a single column-header level row. With multi-level
    * (grouped) headers the total header height is `levels * headerHeight`,
@@ -1387,6 +1504,24 @@ export type Props<TFeatures extends TableFeatures = TableFeatures, TData extends
    * win once they happen.
    */
   fitColumns?: boolean;
+  /**
+   * Let the user drag a column's edge to change its width. **Off by default**,
+   * so `width` means the width you asked for until you say otherwise.
+   *
+   * Turn it on for grids the reader is meant to arrange - a spreadsheet, a
+   * dense report, anything with columns whose content varies in length. Leave
+   * it off for layouts you control, and for columns that must keep their size:
+   * a row-number gutter, a checkbox column, an icon column.
+   *
+   * It is grid-wide rather than per-column: there is no `resizable: false` on a
+   * single column definition. `api.autosizeColumn()`, `fitColumns` and
+   * programmatic width changes work either way - this only governs the drag
+   * handle.
+   *
+   * The handles come from the `columnResize` action, loaded on demand: a grid
+   * that leaves this off never fetches that code.
+   */
+  columnResize?: boolean;
   /**
    * Make the grid usable on narrow screens. When the grid's own width drops
    * below the breakpoint (default `640`px), pinned columns are un-pinned so the
@@ -1415,6 +1550,23 @@ export type Props<TFeatures extends TableFeatures = TableFeatures, TData extends
    * is the shortcut alias and wins over it.
    */
   enableCellSelection?: boolean;
+  /**
+   * Excel-style drag-and-drop of a selected cell range: grab the range's
+   * border and drag it somewhere else to MOVE the values there, or hold
+   * Ctrl (Cmd on macOS) to COPY them instead. The modifier is read at drop
+   * time, so it can be pressed or released mid-drag.
+   *
+   * On by default whenever cell selection is on, matching the fill handle.
+   * Set `false` to keep a border pointerdown starting a fresh selection, which
+   * is what it did before this existed.
+   *
+   * The grab strip is the outer 4px of the range border, so a pointerdown
+   * anywhere further inside still starts a new selection. A drop is refused
+   * outright - nothing changes - when the destination would fall outside the
+   * grid, or when any source or destination cell is read-only. It does not
+   * move the part that fits and silently drop the rest.
+   */
+  moveCells?: boolean;
   /**
    * Highlight the row under the pointer. Default **false** - the hover tint can
    * compete with the cell selection / fill marquee. Set `true` to opt in; when
@@ -1498,7 +1650,7 @@ export type Props<TFeatures extends TableFeatures = TableFeatures, TData extends
   charting?: boolean | ChartingConfig<TData>;
   /**
    * Render the header column menu (⋮) as a tabbed popover - **General**,
-   * **Filter**, and **Columns** tabs (the AG-Grid layout). Defaults to `false`,
+   * **Filter**, and **Columns** tabs (the tabbed layout). Defaults to `false`,
    * which keeps the flat menu (actions list + "Choose columns" submenu).
    */
   columnMenuTabs?: boolean;