@jielga/tmdatagrid 2.0.0-beta.8 → 2.0.0

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,12 +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,
@@ -58,14 +69,12 @@ import {
   resolveRangeBounds,
 } from "../core/cellRange";
 import {
-  buildCellMatrix,
-  DEFAULT_CELL_EXPORT_OPTIONS,
-  downloadTextFile,
+  buildExportData,
+  resolveExportOptions,
   toClipboardText,
-  toExcelCsv,
   writeClipboardText,
-  type TMDataGridCellExportOptions,
-} from "../core/cellExport";
+  writeExportFile,
+} from "../core/export";
 import { autosizeColumn, hasMountedCells } from "../core/autosize";
 import {
   getDisplayedRows,
@@ -286,10 +295,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
@@ -309,16 +330,16 @@ function TMDataGridBodyCell({
       // selectors also require `data-cell`, so they are unaffected.
       data-row-id={cell.row.id}
       data-column-id={cell.column.id}
-      data-focused={nav?.focused}
+      data-focused={nav?.focused || undefined}
       aria-selected={nav?.selected}
-      data-selected={nav?.selected}
+      data-selected={nav?.selected || undefined}
       // One attribute per side rather than a class per combination: the
       // stylesheet draws the outline edge by edge, and sixteen classes for the
       // sixteen corners of a rectangle is not a stylesheet anyone can read.
-      data-edge-top={nav?.edges?.top}
-      data-edge-bottom={nav?.edges?.bottom}
-      data-edge-left={nav?.edges?.left}
-      data-edge-right={nav?.edges?.right}
+      data-edge-top={nav?.edges?.top || undefined}
+      data-edge-bottom={nav?.edges?.bottom || undefined}
+      data-edge-left={nav?.edges?.left || undefined}
+      data-edge-right={nav?.edges?.right || undefined}
       // Bubbles, so focus landing on a control inside the cell counts as
       // landing on the cell - the ring follows the user into the checkbox
       // rather than being left behind on whichever cell they came from.
@@ -333,7 +354,7 @@ function TMDataGridBodyCell({
       data-align={getColumnAlign(cell.column)}
       // A control lane is a fixed track, so it cannot take the cell padding the
       // scale grows for text. See isControlColumn.
-      data-control-column={isControl}
+      data-control-column={isControl || undefined}
       onContextMenu={onContextMenu}
       className={[
         classes.bodyCell,
@@ -349,19 +370,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,
       }}
     >
@@ -654,12 +678,6 @@ export type TMDataGridTableProps<TData extends RowData> = {
    * `position`, `transitionProps` and the rest. Its open state is the grid's.
    */
   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}.
-   */
-  cellExport?: TMDataGridCellExportOptions;
   /**
    * Called when the scroll approaches the last row - the infinite-scroll
    * hook-in. Append the next page to `data` and the virtualizer keeps its
@@ -711,7 +729,6 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
   renderRowContextMenu,
   renderColumnMenuItems,
   rowContextMenuProps,
-  cellExport,
   onReachEnd,
   reachEndThreshold = 10,
   "aria-label": ariaLabel,
@@ -722,6 +739,8 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
     ui,
     edit,
     features,
+    filters,
+    exportOptions: gridExportOptions,
     labels,
     rowHeight,
     controlSize,
@@ -747,7 +766,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
@@ -765,6 +787,24 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
     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 ?? {};
@@ -858,29 +898,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
@@ -904,32 +1014,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.
@@ -974,6 +1058,17 @@ 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,
   });
 
   /**
@@ -991,10 +1086,16 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
     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.
@@ -1051,14 +1152,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 = [
@@ -1070,8 +1171,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: [
@@ -1237,6 +1338,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.
@@ -1337,6 +1500,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.
@@ -1353,13 +1533,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
@@ -1370,6 +1551,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,
@@ -1436,24 +1646,23 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
       ? 0
       : orderedColumns
           .slice(selectionBounds.left, selectionBounds.right + 1)
-          .filter((column) => !isControlColumn(column.id)).length;
+          .filter(
+            (column) =>
+              !isGeneratedColumn(column.id) &&
+              column.columnDef.meta?.enableExport !== false,
+          ).length;
 
-  const exportOptions = { ...DEFAULT_CELL_EXPORT_OPTIONS, ...cellExport };
+  const exportOptions = resolveExportOptions(gridExportOptions);
   // 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
@@ -1462,9 +1671,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,
+      }),
+    );
   };
 
   /**
@@ -1478,12 +1691,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 = (
@@ -1497,12 +1713,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,
     });
   };
 
@@ -1552,9 +1769,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 ??
@@ -1719,14 +1936,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;
     }
 
@@ -1821,9 +2133,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];
@@ -1881,12 +2193,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;
     }
@@ -1897,7 +2224,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
@@ -1905,8 +2232,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;
     }
@@ -2005,9 +2332,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
@@ -2128,7 +2455,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}
@@ -2166,7 +2497,7 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
           aria-rowcount={
             rows.length +
             pinnedRowCount +
-            headerGroups.length +
+            headerRowCount +
             (hasSummaryRow ? 1 : 0)
           }
           aria-colcount={orderedColumns.length}
@@ -2186,11 +2517,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
@@ -2202,8 +2538,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 && (
@@ -2242,9 +2604,9 @@ 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
@@ -2255,10 +2617,14 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
               // 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) &&
-                !editDraftRowIds.includes(row.id);
+                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
@@ -2295,7 +2661,7 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
                   // The tree's own rows. `data-grouped` rather than a class, to
                   // match how the rest of the row's state is published - and so
                   // a consumer can restyle them without reaching into modules.
-                  data-grouped={isGroupRow}
+                  data-grouped={isGroupRow || undefined}
                   data-depth={row.depth}
                   // Which edge block the row sits in, for styling hooks.
                   data-pinned={pinnedAt}
@@ -2304,13 +2670,16 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
                   // still hold ids from before the mode changed - TanStack never
                   // prunes it - and a row must not report itself selected in a
                   // mode where selecting is not a thing.
-                  data-selected={features.rowSelection && row.getIsSelected()}
+                  data-selected={
+                    (features.rowSelection && row.getIsSelected()) || undefined
+                  }
                   // Being selected is state; painting it is a display choice, so
                   // the two are separate attributes.
                   data-selected-bg={
-                    features.rowSelection &&
-                    features.showSelectedBackground &&
-                    row.getIsSelected()
+                    (features.rowSelection &&
+                      features.showSelectedBackground &&
+                      row.getIsSelected()) ||
+                    undefined
                   }
                   // The highlighted row is its own concept, so its own attribute
                   // pair - `data-highlighted` / `aria-current` against
@@ -2322,32 +2691,40 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
                   // so a consumer styling or querying rows by it would cast far
                   // wider than they meant to.
                   data-highlighted={
-                    features.highlightRow && row.id === highlightedRowId
+                    (features.highlightRow && row.id === highlightedRowId) ||
+                    undefined
                   }
                   // Marked deleted under draft: struck through and inert
-                  // until submitAll reports it, or the mark is toggled back.
+                  // until saveDrafts reports it, or the mark is toggled back.
                   data-deleted={
-                    deletedRowIds.length > 0 && deletedRowIds.includes(row.id)
+                    (deletedRowIds.length > 0 && deletedRowIds.includes(row.id)) ||
+                    undefined
                   }
                   // 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)
-                  }
-                  // Committed into the draft store, waiting for Save.
+                  data-dirty={editDirtyRowIdSet.has(row.id) || undefined}
+                  // 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={
-                    editDraftRowIds.length > 0 &&
-                    editDraftRowIds.includes(row.id)
+                    editDraftRowIdSet.has(row.id) ||
+                    newRowIdSet.has(row.id) ||
+                    undefined
                   }
+                  // 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) || undefined}
                   // 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.
                   data-context-menu={
-                    contextMenuContent !== null &&
-                    contextMenuTarget?.rowId === row.id
+                    (contextMenuContent !== null &&
+                      contextMenuTarget?.rowId === row.id) ||
+                    undefined
+                  }
+                  data-selects-on-click={
+                    (selectsOnRowClick && !isGroupRow) || undefined
                   }
-                  data-selects-on-click={selectsOnRowClick && !isGroupRow}
                   aria-selected={
                     features.rowSelection ? row.getIsSelected() : undefined
                   }
@@ -2359,7 +2736,7 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
                   // From the row's position in the whole view, so the stripes
                   // survive the virtualizer's moving window - see the prop.
                   data-striped={
-                    striped && viewIndex >= 0 ? viewIndex % 2 === 1 : undefined
+                    (striped && viewIndex >= 0 && viewIndex % 2 === 1) || undefined
                   }
                   className={[classes.bodyRow, rowClassNameFor(row)]
                     .filter(Boolean)
@@ -2492,13 +2869,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.
@@ -2524,6 +2898,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.
@@ -2611,7 +3003,7 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
                         renderBodyRow(
                           row,
                           -1,
-                          headerGroups.length + index + 1,
+                          headerRowCount + index + 1,
                           "top",
                         ),
                       )}
@@ -2632,7 +3024,7 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
                       row,
                       virtualItem.index,
                       virtualItem.index +
-                        headerGroups.length +
+                        headerRowCount +
                         pinnedTopRows.length +
                         1,
                     );
@@ -2655,7 +3047,7 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
                         renderBodyRow(
                           row,
                           -1,
-                          headerGroups.length +
+                          headerRowCount +
                             pinnedTopRows.length +
                             rows.length +
                             index +
@@ -2711,7 +3103,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
@@ -2727,7 +3119,9 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
                     role="cell"
                     data-column-id={header.column.id}
                     data-align={getColumnAlign(header.column)}
-                    data-control-column={isControlColumn(header.column.id)}
+                    data-control-column={
+                      isControlColumn(header.column.id) || undefined
+                    }
                     className={[
                       classes.summaryCell,
                       layout.isBoundary && layout.pinnedAt === "left"
@@ -2764,10 +3158,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>
   );
 }