@jielga/tmdatagrid 2.0.0-beta.2 → 2.0.0-beta.21

package/src/{tmdatagrid/components → components}/TMDataGridTable.tsx

@@ -18,13 +18,19 @@ import {
   useCallback,
   useEffect,
   useLayoutEffect,
+  useMemo,
   useRef,
   useState,
 } from "react";
 import classes from "./TMDataGridTable.module.css";
 import sticky from "./sticky.module.css";
 import { type TMDataGridRowData, useTMDataGridContext } from "../TMDataGridContext";
-import { TMDataGridFilterPanel } from "./TMDataGridFilterPanel";
+import {
+  TMDataGridFilterPopup,
+  TMDataGridFilterSidebar,
+} from "./TMDataGridFilterSurface";
+import { TMDataGridHeaderFilterRow } from "./TMDataGridHeaderFilterRow";
+import { getGridCapabilities } from "../core/capabilities";
 import {
   TMDataGridHeaderCell,
   type TMDataGridColumnMenuItemsRenderer,
@@ -34,7 +40,17 @@ import {
   type TMDataGridCellEditorClose,
 } from "./TMDataGridCellEditor";
 import { TMDataGridEntryRows } from "./TMDataGridEntryRows";
-import { getColumnAlign, isControlColumn } from "../core/columnUtils";
+import {
+  getColumnAlign,
+  isControlColumn,
+  isGeneratedColumn,
+} from "../core/columnUtils";
+import {
+  resizePreview,
+  type TMDataGridColumnTrack,
+} from "../core/resizePreview";
+import { useSettledTableState } from "../core/useSettledTableState";
+import { isInputElement } from "../core/dom";
 import { draftCellContext } from "../core/draftCellContext";
 import {
   getEditFieldName,
@@ -53,14 +69,14 @@ import {
   resolveRangeBounds,
 } from "../core/cellRange";
 import {
-  buildCellMatrix,
-  DEFAULT_CELL_EXPORT_OPTIONS,
-  downloadTextFile,
+  buildExportData,
+  fromCellExportOptions,
+  resolveExportOptions,
   toClipboardText,
-  toExcelCsv,
   writeClipboardText,
+  writeExportFile,
   type TMDataGridCellExportOptions,
-} from "../core/cellExport";
+} from "../core/export";
 import { autosizeColumn, hasMountedCells } from "../core/autosize";
 import {
   getDisplayedRows,
@@ -281,10 +297,22 @@ function TMDataGridBodyCell({
   // The whole draft, not one field: a computed or custom renderer may read any
   // field off the row, so every data cell of a drafted row repaints together
   // when its draft moves - and only then, `values` being reference-stable
-  // across meta-only form events. `undefined` everywhere else.
-  const draftValues = useSelector(edit.store, (state) =>
-    isControl ? undefined : state.rows[cellRowId]?.values,
-  );
+  // across meta-only form events. `undefined` everywhere else - including a
+  // committed row, whose draft already *is* the row: the hook feeds the draft
+  // store's values to the table as `data`, so `row.original` holds them.
+  // Only an open form's undecided values need the overlay.
+  const draftValues = useSelector(edit.store, (state) => {
+    if (isControl) return undefined;
+    if (state.committedRowIds.includes(cellRowId)) return undefined;
+    if (
+      state.newRows.some(
+        (newRow) => newRow.tempId === cellRowId && newRow.committed,
+      )
+    ) {
+      return undefined;
+    }
+    return state.rows[cellRowId]?.values;
+  });
   return (
     <div
       // `gridcell` rather than `cell` is what tells a screen reader the arrow
@@ -344,19 +372,22 @@ function TMDataGridBodyCell({
         left: layout.pinnedAt === "left" ? layout.offset : undefined,
         right: layout.pinnedAt === "right" ? layout.offset : undefined,
         // The focus ring is drawn inside the cell's own box, so the cell has to
-        // be able to stack above its neighbours - a plain one to lift the ring
-        // over the pinned lane it sits beside, a pinned one to keep the ring
-        // whole while the rest of the row slides under it. Values from the
-        // stacking ladder in TMDataGrid.module.css.
+        // stack above the cells it shares an edge with - but not above the
+        // pinned lanes, or the ring rides over them once the row scrolls
+        // sideways. A focused cell that is itself pinned takes the slot above
+        // them, keeping its ring whole while the rest of the row slides under
+        // it. Values from the stacking ladder in TMDataGrid.module.css.
         position: layout.pinnedAt
           ? "sticky"
           : nav?.focused
             ? "relative"
             : undefined,
-        zIndex: nav?.focused
-          ? "var(--dg-z-focused-cell, 3)"
-          : layout.pinnedAt
-            ? "var(--dg-z-pinned-cell, 2)"
+        zIndex: layout.pinnedAt
+          ? nav?.focused
+            ? "var(--dg-z-pinned-focused-cell, 3)"
+            : "var(--dg-z-pinned-cell, 2)"
+          : nav?.focused
+            ? "var(--dg-z-focused-cell, 1)"
             : undefined,
       }}
     >
@@ -364,9 +395,10 @@ function TMDataGridBodyCell({
         <span className={classes.cellContent}>
           {(() => {
             // A row with a live form shows its draft, not `data`: the column's
-            // own renderer over a context reading the form's values. Parked
-            // drafts - draft mode, cellConfirm's kept-on-blur - are the point;
-            // group cells are excluded because no group row ever has a form.
+            // own renderer over a context reading the form's values. The
+            // drafts that outlive their editor - parked ones, cellConfirm's
+            // kept ones - are the point; group cells are excluded because no
+            // group row ever has a form.
             const draftContext =
               draftValues !== undefined &&
               contentOverride === undefined &&
@@ -649,9 +681,10 @@ export type TMDataGridTableProps<TData extends RowData> = {
    */
   rowContextMenuProps?: Omit<MenuProps, "opened" | "onChange" | "children">;
   /**
-   * How Ctrl+C and the export item write values, under
-   * `cellSelection: "range"`. Defaults to the Nordic Excel conventions - see
-   * {@link TMDataGridCellExportOptions}.
+   * @deprecated Set `exportOptions` on `useTMDataGrid` instead; it covers the
+   * cell-range menu and every other export alike. Until it goes, this is
+   * converted (`separator` and `decimalComma` become a `csvExcelFormat`) and
+   * merged over `exportOptions` for the cell-range menu only.
    */
   cellExport?: TMDataGridCellExportOptions;
   /**
@@ -716,6 +749,8 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
     ui,
     edit,
     features,
+    filters,
+    exportOptions: gridExportOptions,
     labels,
     rowHeight,
     controlSize,
@@ -725,9 +760,10 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
     scrollerRef,
   } = useTMDataGridContext();
 
-  // The body depends on every state slice (sorting, filters, paging, sizing,
-  // visibility, selection), so it subscribes to the whole table store.
-  useSelector(table.store);
+  // The body depends on every settled state slice (sorting, filters, paging,
+  // sizing, visibility, selection). Not on the transient resize deltas: those
+  // publish on every pointer move and the drag paints itself, see below.
+  useSettledTableState(table.store);
   // The active row lives in the chrome store, so it needs its own subscription.
   const highlightedRowId = useSelector(ui, (state) => state.highlightedRowId);
   // As does the focused cell. Selected separately from the row above so a grid
@@ -740,7 +776,10 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
   // Row mode opens whole rows and any number of them at once, so which rows
   // are showing editors is the set of open forms, not the single active slot.
   const editOpenRowIds = useSelector(edit.store, (state) => state.openRowIds);
-  const newRowCount = useSelector(edit.store, (state) => state.newRows.length);
+  // Entry rows, for the block's mount and for `data-new` on the committed
+  // ones that have joined the body. Identity-stable across typing.
+  const newRows = useSelector(edit.store, (state) => state.newRows);
+  const newRowCount = newRows.length;
   const deletedRowIds = useSelector(edit.store, (state) => state.deletedRowIds);
   // Rows carrying a dirty draft, for the row-level marker. Derived from the
   // same projections the cells subscribe to; the array's identity churns with
@@ -750,6 +789,32 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
       (id) => (state.rows[id]?.dirtyFields.length ?? 0) > 0,
     ),
   );
+  // Rows parked in the draft store, waiting for Save. A separate marker from
+  // `data-dirty`, which covers any row being typed into: after a partial save
+  // these are what is left, so one selector highlights everything still
+  // pending.
+  const editDraftRowIds = useSelector(
+    edit.store,
+    (state) => state.committedRowIds,
+  );
+  // The same lists by id: the body asks them once per rendered row, and an
+  // import runs each of them to thousands.
+  const editOpenRowIdSet = useMemo(
+    () => new Set(editOpenRowIds),
+    [editOpenRowIds],
+  );
+  const editDirtyRowIdSet = useMemo(
+    () => new Set(editDirtyRowIds),
+    [editDirtyRowIds],
+  );
+  const editDraftRowIdSet = useMemo(
+    () => new Set(editDraftRowIds),
+    [editDraftRowIds],
+  );
+  const newRowIdSet = useMemo(
+    () => new Set(newRows.map((newRow) => newRow.tempId)),
+    [newRows],
+  );
 
   const { loading, noResultsLabel = labels.noResults } =
     table.options.meta ?? {};
@@ -843,29 +908,99 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
   });
 
   /**
-   * The header's height, published as `--dg-header-height` for the entry
-   * block to stick under - never measured otherwise (`top: 0` needs no
-   * number). A ResizeObserver, mounted only while the block is in use: the
-   * same discipline `renderDetails` applies to `measureElement`.
+   * Everything the body rows start after, and how much of it stays on screen
+   * once they scroll: the header rows, the entry block and the pinned top
+   * block all sit in the same scroll content, above the first virtual row.
+   *
+   * Three readers, one measurement.
+   *
+   * `--dg-header-height` is the header total alone, published for the entry
+   * block to stick under and only while a block is in use - the stylesheet's
+   * per-`size` value is what the header cells are laid out against otherwise,
+   * and it is not the sum of a stacked group's rows.
+   *
+   * `bodyOffsetTop` is the whole stack, and it is the virtualizer's
+   * `scrollMargin`: item offsets start at zero, so without it every one of
+   * them is short by the height of what the rows begin after. `stickyCoverTop`
+   * leaves out the entry rows that flow with the body (`editNewRowsSticky`
+   * off), and is its `scrollPaddingStart` - the part of the stack that stays
+   * put and would otherwise be covering the row `align: "auto"` just scrolled
+   * to.
+   *
+   * The observer is mounted whatever the grid shows, unlike the block
+   * measurements below it: the header is there in every case, and the
+   * virtualizer needs its height from the first paint.
    */
   const gridElementRef = useRef<HTMLDivElement>(null);
+  /**
+   * Header filters only render where something can be filtered - the row would
+   * otherwise be a band of empty cells on a grid with `enableColumnFilters:
+   * false`. Derived up here because the header measurement below depends on
+   * whether the row is in the DOM.
+   */
+  const hasHeaderFilterRow =
+    filters.inHeader && getGridCapabilities(table, features).canFilterAny;
+  /**
+   * How many rows deep the header is. In the measurement's dependencies
+   * because the rows are found once, by query: a `columns` change that adds or
+   * drops a group level changes which elements have to be measured and given
+   * their sticky inset, and nothing else in the list moves when it does.
+   */
+  const headerDepth = table.getCenterHeaderGroups().length;
+  const tableWrapperRef = useRef<HTMLDivElement>(null);
+  const [bodyOffsetTop, setBodyOffsetTop] = useState(0);
+  const [stickyCoverTop, setStickyCoverTop] = useState(0);
+  const [stickyCoverBottom, setStickyCoverBottom] = useState(0);
   useEffect(() => {
-    if (newRowCount === 0 && pinnedTopRows.length === 0) return;
     const grid = gridElementRef.current;
     if (grid === null) return;
     const headerRows = grid.querySelectorAll<HTMLElement>(
       "[data-dg-header-row]",
     );
+    const stickyBlocks = grid.querySelectorAll<HTMLElement>(
+      '[data-dg-entry-block], [data-dg-part="pinned-top"]',
+    );
+    const flowBlocks = grid.querySelectorAll<HTMLElement>(
+      "[data-dg-entry-flow-block]",
+    );
     const measure = () => {
-      let total = 0;
-      for (const headerRow of headerRows) total += headerRow.offsetHeight;
-      grid.style.setProperty("--dg-header-height", `${total}px`);
+      let header = 0;
+      for (const headerRow of headerRows) {
+        // Every header row is sticky, so each one needs the height of the rows
+        // above it as its own inset - otherwise a stacked group and the filter
+        // row all pin to the top edge and paint over each other. Written on the
+        // element because only JS knows where the row before it ended; the
+        // stylesheet's `top` is the pre-measurement fallback.
+        headerRow.style.top = `${header}px`;
+        header += headerRow.offsetHeight;
+      }
+      if (newRowCount > 0 || pinnedTopRows.length > 0) {
+        grid.style.setProperty("--dg-header-height", `${header}px`);
+      }
+      // The whole header's height, on the wrapper rather than on the grid,
+      // because the popup is a sibling of the scroll container and never sees
+      // a property set inside it. A second name rather than reusing
+      // `--dg-header-height`: the header cells read that one for their own
+      // `min-height`, so publishing a stacked total there would feed a
+      // two-row header back in as the height of each of its rows.
+      tableWrapperRef.current?.style.setProperty(
+        "--dg-header-stack-height",
+        `${header}px`,
+      );
+      let cover = header;
+      for (const block of stickyBlocks) cover += block.offsetHeight;
+      let offset = cover;
+      for (const block of flowBlocks) offset += block.offsetHeight;
+      setStickyCoverTop(cover);
+      setBodyOffsetTop(offset);
     };
     measure();
     const observer = new ResizeObserver(measure);
-    for (const headerRow of headerRows) observer.observe(headerRow);
+    for (const element of [...headerRows, ...stickyBlocks, ...flowBlocks]) {
+      observer.observe(element);
+    }
     return () => observer.disconnect();
-  }, [newRowCount, pinnedTopRows.length]);
+  }, [newRowCount, pinnedTopRows.length, hasHeaderFilterRow, headerDepth]);
 
   /**
    * The entry block's height, published as `--dg-entry-height` so the pinned
@@ -889,32 +1024,6 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
     };
   }, [newRowCount, pinnedTopRows.length]);
 
-  /**
-   * The summary row's height, published as `--dg-summary-height` so the
-   * pinned bottom block sticks above it rather than underneath it.
-   */
-  useEffect(() => {
-    if (pinnedBottomRows.length === 0) return;
-    const grid = gridElementRef.current;
-    if (grid === null) return;
-    const summaryRow = grid.querySelector<HTMLElement>(
-      '[data-dg-part="summary-row"]',
-    );
-    if (summaryRow === null) return;
-    const measure = () =>
-      grid.style.setProperty(
-        "--dg-summary-height",
-        `${summaryRow.offsetHeight}px`,
-      );
-    measure();
-    const observer = new ResizeObserver(measure);
-    observer.observe(summaryRow);
-    return () => {
-      observer.disconnect();
-      grid.style.removeProperty("--dg-summary-height");
-    };
-  }, [pinnedBottomRows.length]);
-
   // A persisted pageIndex can outlive the data that produced it; TanStack only
   // auto-resets on live filter/sort/data changes, not on restored state. The
   // guard makes the dependency-free effect idempotent.
@@ -959,12 +1068,44 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
     getItemKey: useCallback((index: number) => rows[index]?.id ?? index, [rows]),
     overscan,
     initialRect: { height: 600, width: 1200 },
+    /**
+     * The rows are not the first thing in the scroll container - the header,
+     * the entry block and the pinned top block come before them. The margin is
+     * what puts an item's offset in the container's own scroll coordinates;
+     * the two paddings are the sticky blocks at either end, which cover the
+     * viewport without shrinking it, so `align: "auto"` has to scroll past
+     * them rather than stopping underneath.
+     */
+    scrollMargin: bodyOffsetTop,
+    scrollPaddingStart: stickyCoverTop,
+    scrollPaddingEnd: stickyCoverBottom,
   });
 
+  /**
+   * A live `size` (or `meta.rowHeight`) change moves what `estimateSize`
+   * answers, but the virtualizer's measurement cache does not list that option
+   * among its dependencies - by its own docs, changing the estimate means
+   * calling `measure()`. Without this the spacers keep the old height until
+   * something else invalidates the cache, so the scroll range and the window
+   * disagree with the rows actually painted.
+   */
+  const prevRowHeightRef = useRef(rowHeight);
+  useEffect(() => {
+    if (prevRowHeightRef.current === rowHeight) return;
+    prevRowHeightRef.current = rowHeight;
+    virtualizer.measure();
+  }, [rowHeight, virtualizer]);
+
+  // The spacers stand in for the rows that are not mounted, so they measure
+  // from the first row rather than from the top of the scroll container:
+  // `scrollMargin` is included in every item's `start` and `end` and excluded
+  // from `getTotalSize()`, and taking it back off here is what keeps a spacer
+  // the height of the rows it replaces.
   const virtualItems = virtualizer.getVirtualItems();
-  const paddingTop = virtualItems[0]?.start ?? 0;
+  const paddingTop = (virtualItems[0]?.start ?? bodyOffsetTop) - bodyOffsetTop;
   const paddingBottom =
-    virtualizer.getTotalSize() - (virtualItems.at(-1)?.end ?? 0);
+    virtualizer.getTotalSize() -
+    ((virtualItems.at(-1)?.end ?? bodyOffsetTop) - bodyOffsetTop);
 
   /**
    * `api.scrollToRow`, implemented where the virtualizer is.
@@ -1021,14 +1162,14 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
     onReachEnd();
   });
 
-  // The *Visible* variants throughout: `getLeftLeafColumns()` and friends
+  // The *Visible* variants throughout: `getStartLeafColumns()` and friends
   // include hidden columns, while the cells below come from
-  // `row.getLeftVisibleCells()`, which does not. Mixing the two would lay down
+  // `row.getStartVisibleCells()`, which does not. Mixing the two would lay down
   // a grid track for a column that renders no cell, shifting every column after
   // it out of its header. The tree column is hidden exactly this way while
   // nothing is grouped.
-  const leftLeafColumns = table.getLeftVisibleLeafColumns();
-  const rightLeafColumns = table.getRightVisibleLeafColumns();
+  const leftLeafColumns = table.getStartVisibleLeafColumns();
+  const rightLeafColumns = table.getEndVisibleLeafColumns();
   const centerLeafColumns = table.getCenterVisibleLeafColumns();
 
   const orderedColumns = [
@@ -1040,8 +1181,8 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
   // Headers and cells must follow the same left → center → right order as the
   // column tracks, otherwise pinning a column would shuffle it out of its lane.
   const centerHeaderGroups = table.getCenterHeaderGroups();
-  const leftHeaderGroups = table.getLeftHeaderGroups();
-  const rightHeaderGroups = table.getRightHeaderGroups();
+  const leftHeaderGroups = table.getStartHeaderGroups();
+  const rightHeaderGroups = table.getEndHeaderGroups();
   const headerGroups = centerHeaderGroups.map((group, index) => ({
     id: group.id,
     headers: [
@@ -1058,19 +1199,26 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
   // Pinned columns are always exact: their sticky offsets come from
   // `getStart()` / `getAfter()`, which sum `getSize()` and cannot see an `fr`.
   const columnSizing = table.store.state.columnSizing;
-  const columnTracks = orderedColumns.map((column) => {
-    const isFixed = column.columnDef.minSize === column.columnDef.maxSize;
-    const isResized = column.id in columnSizing;
-    const isPinned = column.getIsPinned() !== false;
-    const minWidth = column.columnDef.minSize ?? 80;
-    if (isFixed || isResized || isPinned) {
-      return { track: `${column.getSize()}px`, minWidth: column.getSize() };
-    }
-    return {
-      track: `minmax(${minWidth}px, ${column.columnDef.meta?.flex ?? 1}fr)`,
-      minWidth,
-    };
-  });
+  const columnTracks: Array<TMDataGridColumnTrack> = orderedColumns.map(
+    (column) => {
+      const isFixed = column.columnDef.minSize === column.columnDef.maxSize;
+      const isResized = column.id in columnSizing;
+      const isPinned = column.getIsPinned() !== false;
+      const minWidth = column.columnDef.minSize ?? 80;
+      if (isFixed || isResized || isPinned) {
+        return {
+          id: column.id,
+          track: `${column.getSize()}px`,
+          minWidth: column.getSize(),
+        };
+      }
+      return {
+        id: column.id,
+        track: `minmax(${minWidth}px, ${column.columnDef.meta?.flex ?? 1}fr)`,
+        minWidth,
+      };
+    },
+  );
   const gridTemplateColumns = columnTracks.map((c) => c.track).join(" ");
   const gridMinWidth = columnTracks.reduce((sum, c) => sum + c.minWidth, 0);
 
@@ -1118,6 +1266,65 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
   const layoutFor = (columnId: string) =>
     columnLayout.get(columnId) ?? UNPINNED_LAYOUT;
 
+  /**
+   * A running resize drag paints itself, straight onto the grid element.
+   *
+   * Every row sits on the grid's own column tracks through `subgrid`, so the
+   * whole drag is one style write per frame. Letting the drag render instead -
+   * `columnResizeMode: "onChange"`, which publishes a width on every pointer
+   * move - costs a React pass over every mounted cell for each of those moves,
+   * and the gesture turns choppy on a grid wide enough to be worth resizing.
+   *
+   * TanStack still owns the gesture and still commits the width into
+   * `columnSizing` when the pointer is released; the render that follows lands
+   * on the same numbers the last frame painted.
+   */
+  const previewRef = useRef<{
+    tracks: Array<TMDataGridColumnTrack>;
+    leftLane: Array<string>;
+    rightLane: Array<string>;
+  }>({ tracks: columnTracks, leftLane: [], rightLane: [] });
+  useEffect(() => {
+    previewRef.current = {
+      tracks: columnTracks,
+      leftLane: leftLeafColumns.map((column) => column.id),
+      // Outermost last, the order the offsets above accumulate in.
+      rightLane: [...rightLeafColumns].reverse().map((column) => column.id),
+    };
+  });
+  useEffect(() => {
+    const element = gridElementRef.current;
+    if (!element) return;
+
+    // Painted straight from the store's publish rather than on a frame of its
+    // own: the browser already coalesces pointer moves to one per frame, and a
+    // `requestAnimationFrame` stops firing altogether while the window is
+    // occluded - which would leave the drag frozen under the pointer.
+    let painted = "";
+    const subscription = table.store.subscribe((state) => {
+      const preview = resizePreview({
+        progress: state.columnResizing,
+        boundsOf: (columnId) => table.getColumn(columnId)?.columnDef ?? {},
+        ...previewRef.current,
+      });
+      if (!preview || preview.gridTemplateColumns === painted) return;
+      painted = preview.gridTemplateColumns;
+      element.style.gridTemplateColumns = preview.gridTemplateColumns;
+      element.style.minWidth = `${preview.minWidth}px`;
+      // Only the pinned lanes, and only while the drag is resizing one of
+      // them: their sticky offsets are the one measurement that does not
+      // follow from the track list alone.
+      for (const { columnId, side, offset } of preview.offsets) {
+        for (const cell of element.querySelectorAll<HTMLElement>(
+          `[data-column-id="${CSS.escape(columnId)}"]`,
+        )) {
+          cell.style[side] = `${offset}px`;
+        }
+      }
+    });
+    return () => subscription.unsubscribe();
+  }, [table]);
+
   // Pinned rows count as content: with every visible row pinned to an edge,
   // an empty-state message beside them would contradict what is on screen.
   const isEmpty = rows.length === 0 && pinnedRowCount === 0;
@@ -1141,6 +1348,68 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
   const hasSummaryRow = orderedColumns.some(
     (column) => column.columnDef.footer !== undefined,
   );
+  /**
+   * Rows above the first body row, which is what every `aria-rowindex` in the
+   * body counts from and what `aria-rowcount` adds up. The header groups plus
+   * the filter row, when there is one.
+   */
+  const headerRowCount = headerGroups.length + (hasHeaderFilterRow ? 1 : 0);
+
+  /**
+   * The summary row's height, published as `--dg-summary-height`, which two
+   * things read: the pinned bottom block sticks above the summary row rather
+   * than underneath it, and the summary row's own `top` inset holds it on the
+   * bottom edge of a body too short to scroll. A layout effect, so the first
+   * paint already has the measurement - `top` would otherwise resolve to 100%
+   * for a frame and take an overflowing grid's summary row out of view. Down
+   * here rather than beside the other measurements because `hasSummaryRow` is
+   * only known this far into the render.
+   */
+  useLayoutEffect(() => {
+    if (!hasSummaryRow) return;
+    const grid = gridElementRef.current;
+    if (grid === null) return;
+    const summaryRow = grid.querySelector<HTMLElement>(
+      '[data-dg-part="summary-row"]',
+    );
+    if (summaryRow === null) return;
+    const measure = () =>
+      grid.style.setProperty(
+        "--dg-summary-height",
+        `${summaryRow.offsetHeight}px`,
+      );
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(summaryRow);
+    return () => {
+      observer.disconnect();
+      grid.style.removeProperty("--dg-summary-height");
+    };
+  }, [hasSummaryRow]);
+
+  /**
+   * The other end of the same story as `stickyCoverTop`: the pinned bottom
+   * block and the summary row stick to the container's bottom edge, so the
+   * virtualizer takes their height as `scrollPaddingEnd` and stops scrolling a
+   * row to just underneath them. Down here for the same reason as the
+   * measurement above.
+   */
+  useEffect(() => {
+    const grid = gridElementRef.current;
+    if (grid === null) return;
+    const blocks = grid.querySelectorAll<HTMLElement>(
+      '[data-dg-part="pinned-bottom"], [data-dg-part="summary-row"]',
+    );
+    const measure = () => {
+      let total = 0;
+      for (const block of blocks) total += block.offsetHeight;
+      setStickyCoverBottom(total);
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    for (const block of blocks) observer.observe(block);
+    return () => observer.disconnect();
+  }, [pinnedBottomRows.length, hasSummaryRow]);
 
   // "row" mode: the row itself is the selection control, with the modifier
   // conventions of any desktop list - see resolveRowSelectionClick.
@@ -1241,6 +1510,23 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
   /** The last position the effect acted on, so it can tell a move from a re-render. */
   const appliedCellRef = useRef<TMDataGridCellPosition | null>(null);
 
+  /**
+   * The two focusable elements that bracket the body, and the flag that says
+   * which way focus is passing through one.
+   *
+   * They are what makes the body one tab stop without asking anything of the
+   * cell renderers. Tab inside the body parks the focus on the guard past the
+   * edge being left, and the browser's default Tab then continues from there -
+   * so the next stop is whatever follows the grid, however many tabbable
+   * controls the mounted rows happen to hold. Focus arriving at a guard any
+   * other way came from outside the body, and is forwarded to the cursor cell.
+   * `guardHopRef` is what tells the two apart; the grid raises it just before
+   * it moves the focus itself.
+   */
+  const leadingGuardRef = useRef<HTMLDivElement>(null);
+  const trailingGuardRef = useRef<HTMLDivElement>(null);
+  const guardHopRef = useRef(false);
+
   // O(n) per keystroke and per render while a cell is focused. Fine at any row
   // count a grid actually holds, and the alternative - an id→index map rebuilt
   // whenever sorting, filtering or grouping changes - costs more than it saves.
@@ -1257,13 +1543,14 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
     virtualItems.some((item) => item.index === focusedRowIndex);
 
   /**
-   * The one cell in the body that Tab can reach.
+   * The cell the tab guards hand the focus to when Tab enters the body.
    *
    * The focused cell when it is on screen. When it is not - the grid has never
    * been entered, or the user scrolled the focus away with the wheel - the
-   * first mounted cell stands in, so the body always has exactly one tab stop.
-   * Without the fallback, scrolling the focused row out of the DOM would take
-   * the grid out of the tab order entirely.
+   * first mounted cell stands in, so entering the body always lands somewhere.
+   * No body cell is itself in the tab order: the guards are the body's only
+   * tab stops, which is what keeps a cell from turning up between two of a
+   * row's controls when Tab walks them.
    */
   const firstMountedRow = rows[virtualItems[0]?.index ?? -1];
   const tabStopCell: TMDataGridCellPosition | null = !cellSelection
@@ -1274,6 +1561,35 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
         ? { rowId: firstMountedRow.id, columnId: orderedColumns[0].id }
         : null;
 
+  /**
+   * Focus landing on either guard.
+   *
+   * A raised hop flag means the grid put it there on its way out, so the
+   * browser's default Tab is about to carry on from the guard - nothing to do
+   * but lower the flag. Anything else is Tab off the last header control onto
+   * the leading guard, or Shift+Tab from below the grid onto the trailing one:
+   * both mean "enter the body", and the body is entered at the cursor cell.
+   *
+   * The state is moved as well as the DOM focus, because the cell may not be
+   * the one the ring is on; the direct focus is so it happens in this event
+   * rather than a frame later.
+   *
+   * With no rows there is no cell to hand it to. The guard keeps the focus and
+   * the next Tab leaves the grid the way it came in.
+   */
+  const handleGuardFocus = () => {
+    if (guardHopRef.current) {
+      guardHopRef.current = false;
+      return;
+    }
+    if (tabStopCell === null) return;
+    wantsCellFocusRef.current = true;
+    ui.actions.setFocusedCell(tabStopCell);
+    const container = scrollContainerRef.current;
+    if (container === null) return;
+    findCellElement(container, tabStopCell)?.focus({ preventScroll: true });
+  };
+
   const isCellAt = (
     position: TMDataGridCellPosition | null,
     rowId: string,
@@ -1340,24 +1656,26 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
       ? 0
       : orderedColumns
           .slice(selectionBounds.left, selectionBounds.right + 1)
-          .filter((column) => !isControlColumn(column.id)).length;
-
-  const exportOptions = { ...DEFAULT_CELL_EXPORT_OPTIONS, ...cellExport };
+          .filter(
+            (column) =>
+              !isGeneratedColumn(column.id) &&
+              column.columnDef.meta?.enableExport !== false,
+          ).length;
+
+  const exportOptions = resolveExportOptions(
+    gridExportOptions,
+    cellExport && fromCellExportOptions(cellExport),
+  );
   // Sticky across menus, the way a checkbox in a dialog is: a user who exports
   // with headers once almost always wants them the next time too.
   const [exportIncludesHeaders, setExportIncludesHeaders] = useState(
     exportOptions.includeHeaders,
   );
-  const buildSelectionMatrix = (includeHeaders: boolean) =>
+  // The rectangle's values, over the displayed rows the bounds index into.
+  const buildSelectionData = () =>
     selectionBounds === null
-      ? []
-      : buildCellMatrix({
-          rows,
-          columns: orderedColumns,
-          bounds: selectionBounds,
-          includeHeaders,
-          decimalComma: exportOptions.decimalComma,
-        });
+      ? null
+      : buildExportData({ table, rows, bounds: selectionBounds });
 
   /**
    * Ctrl+C. Values only, no header row - Excel's own copy does not include one
@@ -1366,9 +1684,13 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
    * because a file is a document and a clipboard is a fragment.
    */
   const copySelection = async () => {
-    const matrix = buildSelectionMatrix(false);
-    if (matrix.length === 0) return;
-    await writeClipboardText(toClipboardText(matrix));
+    const data = buildSelectionData();
+    if (data === null || data.columnIds.length === 0) return;
+    await writeClipboardText(
+      toClipboardText(data, {
+        decimalComma: exportOptions.format.decimalComma,
+      }),
+    );
   };
 
   /**
@@ -1382,12 +1704,15 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
 
   // The drag ends wherever the button comes up, which is routinely outside the
   // grid - over the scrollbar, or past the window edge. Only the window hears
-  // that, so only the window can end it.
+  // that, so only the window can end it. The grid's own window, not the
+  // global one: rendered through a portal into a window opened with
+  // `window.open`, the global is the opener and never hears the release.
   useEffect(() => {
     if (!isDraggingRange) return;
     const stop = () => setIsDraggingRange(false);
-    window.addEventListener("mouseup", stop);
-    return () => window.removeEventListener("mouseup", stop);
+    const view = gridElementRef.current?.ownerDocument.defaultView ?? window;
+    view.addEventListener("mouseup", stop);
+    return () => view.removeEventListener("mouseup", stop);
   }, [isDraggingRange]);
 
   const startRangeDrag = (
@@ -1401,12 +1726,13 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
     if (!extend) setIsDraggingRange(true);
   };
 
-  const exportSelectionCsv = (includeHeaders: boolean) => {
-    const matrix = buildSelectionMatrix(includeHeaders);
-    if (matrix.length === 0) return;
-    downloadTextFile({
-      fileName: `${exportOptions.fileName}.csv`,
-      text: toExcelCsv(matrix, { separator: exportOptions.separator }),
+  /** The export item: the rectangle, in the grid's export format. */
+  const exportSelection = () => {
+    const data = buildSelectionData();
+    if (data === null || data.columnIds.length === 0) return;
+    void writeExportFile(data, {
+      ...exportOptions,
+      includeHeaders: exportIncludesHeaders,
     });
   };
 
@@ -1456,9 +1782,9 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
     const row = rows.find((candidate) => candidate.id === rowId);
     if (row === undefined) return null;
     const cells = [
-      ...row.getLeftVisibleCells(),
+      ...row.getStartVisibleCells(),
       ...row.getCenterVisibleCells(),
-      ...row.getRightVisibleCells(),
+      ...row.getEndVisibleCells(),
     ];
     return (
       cells.find((cell) => edit.canEditCell(row, cell.column))?.column.id ??
@@ -1531,7 +1857,7 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
     close: TMDataGridCellEditorClose,
   ) => {
     // Where the keyboard goes: Enter moves down, Tab to the next editable
-    // cell (the deferring draft variants move the same way, draft in tow) -
+    // cell (cellConfirm's deferring variants move the same way, draft kept) -
     // everything else, and a saved row, goes back to where the edit was.
     const move =
       close.via === "enter"
@@ -1623,14 +1949,109 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
   const handleGridKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
     const target = event.target as HTMLElement;
 
-    // Focus is on something inside a cell - a checkbox, a link, an editor. Its
-    // keys are its own; the one the grid still answers is the way back out.
+    // The body cell the key was pressed in, whether the focus is on the cell
+    // itself or on a control inside it. `null` for a header control or a tab
+    // guard, neither of which is part of cell navigation.
+    const keyCellElement =
+      target.dataset.cell === "true"
+        ? target
+        : target.closest<HTMLElement>('[data-cell="true"]');
+    if (keyCellElement === null) return;
+
+    if (event.key === "Tab") {
+      // Inside a row's controls the row is a form, and Tab walks it the way
+      // the browser walks any form: through the row's open editors, the
+      // buttons in its cells and, on an open row, the lane's save and cancel.
+      // That part is left to the browser. What the grid decides is the two
+      // ends: past the row's last control the cursor moves to the next row's
+      // first cell, and before its first control to the previous row's last -
+      // the cell is put on the cursor and left alone, whatever it holds. A cell
+      // editor never gets here, it claims Tab itself to commit and move on.
+      if (target.dataset.cell !== "true") {
+        const rowElement = keyCellElement.closest<HTMLElement>(
+          '[data-dg-part="row"]',
+        );
+        const tabbables =
+          rowElement === null
+            ? []
+            : Array.from(
+                rowElement.querySelectorAll<HTMLElement>(FOCUSABLE_IN_CELL),
+              ).filter((element) => element.tabIndex >= 0);
+        const index = tabbables.indexOf(target);
+        // A control the walk cannot place is left to the browser rather than
+        // guessed about.
+        if (index < 0) return;
+        // The step itself is taken here rather than left to the browser: a
+        // select editor keeps its option list in the row, and the browser's
+        // Tab lands on that scrollable list, which the editor then closes
+        // under the focus. Walking the controls, and only the controls, is
+        // what the browser would do if the list were not there.
+        const nextControl = tabbables[index + (event.shiftKey ? -1 : 1)];
+        if (nextControl !== undefined) {
+          event.preventDefault();
+          nextControl.focus();
+          // What Tab does on a text field, and what the caret otherwise loses.
+          if (isInputElement(nextControl)) nextControl.select();
+          return;
+        }
+        const rowIndex = rows.findIndex(
+          (row) => row.id === keyCellElement.dataset.rowId,
+        );
+        const nextRowIndex = rowIndex + (event.shiftKey ? -1 : 1);
+        const nextRow = rowIndex < 0 ? undefined : rows[nextRowIndex];
+        const nextColumn = event.shiftKey
+          ? orderedColumns[orderedColumns.length - 1]
+          : orderedColumns[0];
+        if (nextRow !== undefined && nextColumn !== undefined) {
+          event.preventDefault();
+          moveFocusedCell({
+            rowIndex: nextRowIndex,
+            columnIndex: event.shiftKey ? orderedColumns.length - 1 : 0,
+          });
+          // The focus-following effect stands down while the focus sits in an
+          // editor, which is exactly where it sits now: move it by hand. The
+          // adjacent row is mounted whenever there is any overscan; without
+          // one, letting go of the editor is what lets the effect take over.
+          const container = scrollContainerRef.current;
+          const nextCell =
+            container === null
+              ? null
+              : findCellElement(container, {
+                  rowId: nextRow.id,
+                  columnId: nextColumn.id,
+                });
+          if (nextCell !== null) nextCell.focus({ preventScroll: true });
+          else target.blur();
+          return;
+        }
+        // No row past this one: the body is left, below.
+      }
+
+      // Tab leaves the body in one hop, from a cell or from the last control
+      // of the last row. Not prevented: the focus is moved onto the guard past
+      // the edge being left and the browser's own Tab then runs from there,
+      // which is what puts it on the next thing after the grid - or, going
+      // back, on the last header control, since the leading guard sits below
+      // them.
+      const guard = event.shiftKey
+        ? leadingGuardRef.current
+        : trailingGuardRef.current;
+      if (guard === null) return;
+      guardHopRef.current = true;
+      guard.focus({ preventScroll: true });
+      return;
+    }
+
+    // An open editor owns the rest of its keys; the cell editor stops the
+    // ones it acts on before they get here, a row-shaped one lets them pass.
+    if (target.closest('[data-dg-part="editor"]') !== null) return;
+
+    // Focus is on something inside a cell - a checkbox, a link. Its keys are
+    // its own; the one the grid still answers is the way back out.
     if (target.dataset.cell !== "true") {
       if (event.key !== "Escape") return;
-      const cellElement = target.closest<HTMLElement>('[data-cell="true"]');
-      if (cellElement === null) return;
       event.preventDefault();
-      cellElement.focus();
+      keyCellElement.focus();
       return;
     }
 
@@ -1725,9 +2146,9 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
     // Space selects the row, from any of its cells.
     //
     // Not routed through `handleRowActivate`, which is the *click* path and only
-    // selects in `"row"` mode: with the cell cursor on, the checkbox is no
-    // longer a tab stop (see useCellControlTabIndex), so this is the keyboard's
-    // way to a selection under every mode that has one - checkbox included.
+    // selects in `"row"` mode: the checkbox is not in the page's tab order, so
+    // this is the keyboard's way to a selection under every mode that has one -
+    // checkbox included.
     if (event.key === " ") {
       event.preventDefault();
       const row = rows[rowIndex];
@@ -1785,12 +2206,27 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
       return;
     }
 
+    // The grid's own document, not the global one: in a window opened with
+    // `window.open` the global document is the opener's, and its focus is
+    // never in this grid.
+    const activeElement = container.ownerDocument.activeElement;
+
     // Never take the focus from elsewhere on the page. A consumer moving the
     // cell while the user is typing in a form somewhere means "move the ring",
     // not "move the caret" - the scroll above already did the visible part.
+    if (!wantsCellFocusRef.current && !container.contains(activeElement)) {
+      return;
+    }
+    // Mid-hop: Tab parked the focus on a guard and the browser is about to
+    // carry it out of the grid. This effect can run in between - a discrete
+    // event flushes its renders before the default action - and pulling the
+    // focus back onto the cell here would send the browser's Tab off from
+    // the cell instead. A guard the user *arrived* on has already asked for
+    // the cell, and that intent is honoured.
     if (
       !wantsCellFocusRef.current &&
-      !container.contains(document.activeElement)
+      activeElement !== null &&
+      activeElement.closest('[data-dg-part="tab-guard"]') !== null
     ) {
       return;
     }
@@ -1801,7 +2237,7 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
     wantsCellFocusRef.current = false;
     // Focus is already inside - on the control Enter stepped into. The cell is
     // where the ring belongs, so there is nothing to move.
-    if (cellElement.contains(document.activeElement)) return;
+    if (cellElement.contains(activeElement)) return;
     // An open editor outranks the ring, wherever it is. Row mode opens a whole
     // row from one gesture, so the caret legitimately sits in a cell other
     // than the one that gesture landed the ring on - the lane's pencil is the
@@ -1809,8 +2245,8 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
     // the caret back onto that cell would leave the row open with the caret in
     // none of its editors, and the user with nothing to type into.
     if (
-      document.activeElement instanceof Element &&
-      document.activeElement.closest('[data-dg-part="editor"]') !== null
+      activeElement !== null &&
+      activeElement.closest('[data-dg-part="editor"]') !== null
     ) {
       return;
     }
@@ -1909,9 +2345,9 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
         </Menu.Item>
         <Menu.Item
           disabled={selectedDataColumnCount === 0}
-          onClick={() => exportSelectionCsv(exportIncludesHeaders)}
+          onClick={exportSelection}
         >
-          {labels.exportCsv}
+          {labels.exportCells}
         </Menu.Item>
         {/* Stays open on click: it is the setting the item above reads, and
             reopening the menu to change your mind about headers is a worse
@@ -2032,7 +2468,11 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
       : undefined;
 
   return (
-    <div className={classes.tableWrapper}>
+    <div
+      ref={tableWrapperRef}
+      className={classes.tableWrapper}
+      data-dg-filter-sidebar={filters.surface === "sidebar" || undefined}
+    >
       <div
         ref={scrollContainerRef}
         className={classes.scrollContainer}
@@ -2070,7 +2510,7 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
           aria-rowcount={
             rows.length +
             pinnedRowCount +
-            headerGroups.length +
+            headerRowCount +
             (hasSummaryRow ? 1 : 0)
           }
           aria-colcount={orderedColumns.length}
@@ -2090,11 +2530,16 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
                 data-dg-header-row
                 // The scrolled-under shadow belongs to the boundary between
                 // header and body - the last header row, not every stacked
-                // group row above it. See the stylesheet.
-                data-dg-header-last={
-                  groupIndex === headerGroups.length - 1 || undefined
-                }
-                className={classes.headerRow}
+                // group row above it, and not this one at all when the filter
+                // row is below it. See sticky.module.css.
+                className={[
+                  classes.headerRow,
+                  !hasHeaderFilterRow && groupIndex === headerGroups.length - 1
+                    ? sticky.headerBoundary
+                    : "",
+                ]
+                  .filter(Boolean)
+                  .join(" ")}
               >
                 {headerGroup.headers.map((header) => (
                   <TMDataGridHeaderCell
@@ -2106,8 +2551,34 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
                 ))}
               </div>
             ))}
+
+            {hasHeaderFilterRow && (
+              <TMDataGridHeaderFilterRow
+                leafHeaders={leafHeaders}
+                layoutFor={layoutFor}
+                ariaRowIndex={headerRowCount}
+              />
+            )}
           </div>
 
+          {/* The leading tab guard, below the header controls and above the
+              first body row - see `handleGuardFocus`. Not `aria-hidden`: it
+              is focusable, and a focusable node hidden from the tree is what
+              screen readers have no way to describe.
+              Out of the tab order while there is no cell to hand focus to,
+              so an empty body is not two dead stops. */}
+          {cellSelection && (
+            <div
+              ref={leadingGuardRef}
+              tabIndex={tabStopCell === null ? -1 : 0}
+              role="presentation"
+              data-dg-part="tab-guard"
+              data-guard="leading"
+              className={classes.tabGuard}
+              onFocus={handleGuardFocus}
+            />
+          )}
+
           {/* The entry block - new rows being typed, stuck under the header.
               Present only while `edit.addRow()` has open entries. */}
           {features.editing && newRowCount > 0 && (
@@ -2146,17 +2617,27 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
               const isGroupRow = row.getIsGrouped();
               const isInteractive = rowGesturesFor(row);
               const rowCells = [
-                ...row.getLeftVisibleCells(),
+                ...row.getStartVisibleCells(),
                 ...row.getCenterVisibleCells(),
-                ...row.getRightVisibleCells(),
+                ...row.getEndVisibleCells(),
               ];
               // Row mode opens every editable cell of the row at once, and
               // rows accumulate: a second row opening leaves the first one
               // open, so every row holding a form shows its editors. Which of
               // them holds the caret is not decided here - see
               // placeEditCaret, which places it once per gesture.
+              //
+              // A parked row is not one of them. It keeps its form, so it is
+              // still "open", but it has been decided: it renders its draft
+              // through the column's own renderer until `begin` reopens it.
+              // A committed entry row in the body has a form too - every
+              // entry row does - but it is a value row until reopened, and
+              // reopening takes it back to the entry block.
               const rowEditing =
-                features.editMode === "row" && editOpenRowIds.includes(row.id);
+                features.editMode === "row" &&
+                editOpenRowIdSet.has(row.id) &&
+                !editDraftRowIdSet.has(row.id) &&
+                !newRowIdSet.has(row.id);
               // Cell selection takes the body's tab stop off the row and puts
               // it on a cell - two stops per row would make Tab a way of
               // walking the grid, which is what the arrow keys are for. Space
@@ -2229,10 +2710,16 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
                   }
                   // Carrying a dirty draft - the row-level face of the cells'
                   // own data-dirty markers, for row-scoped styling.
-                  data-dirty={
-                    editDirtyRowIds.length > 0 &&
-                    editDirtyRowIds.includes(row.id)
+                  data-dirty={editDirtyRowIdSet.has(row.id)}
+                  // Committed into the draft store, waiting for Save. A
+                  // committed entry row is one too - it is in the body
+                  // because it is committed - and carries `data-new` besides.
+                  data-draft={
+                    editDraftRowIdSet.has(row.id) || newRowIdSet.has(row.id)
                   }
+                  // An entered row not yet in `data`, committed into the draft
+                  // store and sorted, filtered and grouped with the rest.
+                  data-new={newRowIdSet.has(row.id)}
                   // The menu is anchored to the rowgroup, so Mantine's own
                   // `data-expanded` lands there rather than on a row. This is
                   // what says which row the open menu is about.
@@ -2385,13 +2872,10 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
                                 row.id,
                                 cell.column.id,
                               ),
-                              tabIndex: isCellAt(
-                                tabStopCell,
-                                row.id,
-                                cell.column.id,
-                              )
-                                ? 0
-                                : -1,
+                              // Focusable by click and by the grid, never by
+                              // Tab - the guards are the way in. See
+                              // `tabStopCell`.
+                              tabIndex: -1,
                               // "Selected" means "in the block Ctrl+C would
                               // take" - which under `"single"` is the one cell
                               // the user is standing on.
@@ -2417,6 +2901,24 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
                               // Right-click is the menu's; the middle button is
                               // the browser's.
                               if (event.button !== 0) return;
+                              // Pressing a control in the cell - a checkbox, a
+                              // chevron, a button a renderer put there - is not
+                              // a selection gesture, and a block the user built
+                              // should not pay for it. The focus still follows
+                              // the press, through the bubbling `onFocus`, so
+                              // the cursor ends up on the row acted on; only
+                              // the range survives.
+                              const pressed = event.target as HTMLElement;
+                              const control =
+                                pressed === event.currentTarget
+                                  ? null
+                                  : pressed.closest(FOCUSABLE_IN_CELL);
+                              if (
+                                control !== null &&
+                                event.currentTarget.contains(control)
+                              ) {
+                                return;
+                              }
                               // Shift+click would otherwise smear the browser's
                               // own text selection across everything between
                               // the two cells.
@@ -2504,7 +3006,7 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
                         renderBodyRow(
                           row,
                           -1,
-                          headerGroups.length + index + 1,
+                          headerRowCount + index + 1,
                           "top",
                         ),
                       )}
@@ -2525,7 +3027,7 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
                       row,
                       virtualItem.index,
                       virtualItem.index +
-                        headerGroups.length +
+                        headerRowCount +
                         pinnedTopRows.length +
                         1,
                     );
@@ -2548,7 +3050,7 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
                         renderBodyRow(
                           row,
                           -1,
-                          headerGroups.length +
+                          headerRowCount +
                             pinnedTopRows.length +
                             rows.length +
                             index +
@@ -2604,7 +3106,7 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
             <div
               role="row"
               aria-rowindex={
-                rows.length + pinnedRowCount + headerGroups.length + 1
+                rows.length + pinnedRowCount + headerRowCount + 1
               }
               // Also what the height measurement above looks for. One
               // attribute serves both now that the part name *is* the
@@ -2657,10 +3159,30 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
               })}
             </div>
           )}
+
+          {/* The trailing tab guard, last child of the grid so that Shift+Tab
+              from below the grid meets it before any cell. */}
+          {cellSelection && (
+            <div
+              ref={trailingGuardRef}
+              tabIndex={tabStopCell === null ? -1 : 0}
+              role="presentation"
+              data-dg-part="tab-guard"
+              data-guard="trailing"
+              className={classes.tabGuard}
+              onFocus={handleGuardFocus}
+            />
+          )}
         </div>
       </div>
 
-      <TMDataGridFilterPanel />
+      {/* The automatic filter surfaces. The popup floats over the first body
+          rows, anchored to the wrapper; the sidebar is a second column of it,
+          which is why the wrapper turns into a flex row for one. Under
+          `filters.surface: "none"` neither renders and the consumer's own
+          `TMDataGrid.FilterPanel` is the only panel on the page. */}
+      {filters.surface === "popup" && <TMDataGridFilterPopup />}
+      {filters.surface === "sidebar" && <TMDataGridFilterSidebar />}
     </div>
   );
 }