@jielga/tmdatagrid 2.0.0-beta.9 → 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,
@@ -321,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.
@@ -345,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,
@@ -669,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
@@ -726,7 +729,6 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
   renderRowContextMenu,
   renderColumnMenuItems,
   rowContextMenuProps,
-  cellExport,
   onReachEnd,
   reachEndThreshold = 10,
   "aria-label": ariaLabel,
@@ -737,6 +739,8 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
     ui,
     edit,
     features,
+    filters,
+    exportOptions: gridExportOptions,
     labels,
     rowHeight,
     controlSize,
@@ -783,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 ?? {};
@@ -900,6 +922,22 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
    * 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);
@@ -917,10 +955,28 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
     );
     const measure = () => {
       let header = 0;
-      for (const headerRow of headerRows) header += headerRow.offsetHeight;
+      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;
@@ -934,7 +990,7 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
       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
@@ -958,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.
@@ -1122,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 = [
@@ -1141,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: [
@@ -1308,14 +1338,51 @@ 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 rather than beside the other
-   * measurements because `hasSummaryRow` is only known this far into the
-   * render.
+   * row to just underneath them. Down here for the same reason as the
+   * measurement above.
    */
   useEffect(() => {
     const grid = gridElementRef.current;
@@ -1579,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
@@ -1605,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,
+      }),
+    );
   };
 
   /**
@@ -1621,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 = (
@@ -1640,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,
     });
   };
 
@@ -1695,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 ??
@@ -1904,7 +1978,7 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
           event.preventDefault();
           nextControl.focus();
           // What Tab does on a text field, and what the caret otherwise loses.
-          if (nextControl instanceof HTMLInputElement) nextControl.select();
+          if (isInputElement(nextControl)) nextControl.select();
           return;
         }
         const rowIndex = rows.findIndex(
@@ -2119,13 +2193,15 @@ 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(document.activeElement)
-    ) {
+    if (!wantsCellFocusRef.current && !container.contains(activeElement)) {
       return;
     }
     // Mid-hop: Tab parked the focus on a guard and the browser is about to
@@ -2136,8 +2212,8 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
     // the cell, and that intent is honoured.
     if (
       !wantsCellFocusRef.current &&
-      document.activeElement instanceof Element &&
-      document.activeElement.closest('[data-dg-part="tab-guard"]') !== null
+      activeElement !== null &&
+      activeElement.closest('[data-dg-part="tab-guard"]') !== null
     ) {
       return;
     }
@@ -2148,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
@@ -2156,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;
     }
@@ -2256,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
@@ -2379,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}
@@ -2417,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}
@@ -2437,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
@@ -2453,6 +2538,14 @@ 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
@@ -2511,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
@@ -2529,9 +2622,9 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
               // reopening takes it back to the entry block.
               const rowEditing =
                 features.editMode === "row" &&
-                editOpenRowIds.includes(row.id) &&
-                !editDraftRowIds.includes(row.id) &&
-                !newRows.some((newRow) => newRow.tempId === 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
@@ -2568,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}
@@ -2577,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
@@ -2595,42 +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)
-                  }
+                  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)) ||
-                    (newRowCount > 0 &&
-                      newRows.some((newRow) => newRow.tempId === 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={
-                    newRowCount > 0 &&
-                    newRows.some((newRow) => newRow.tempId === row.id)
-                  }
+                  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
                   }
@@ -2642,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)
@@ -2909,7 +3003,7 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
                         renderBodyRow(
                           row,
                           -1,
-                          headerGroups.length + index + 1,
+                          headerRowCount + index + 1,
                           "top",
                         ),
                       )}
@@ -2930,7 +3024,7 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
                       row,
                       virtualItem.index,
                       virtualItem.index +
-                        headerGroups.length +
+                        headerRowCount +
                         pinnedTopRows.length +
                         1,
                     );
@@ -2953,7 +3047,7 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
                         renderBodyRow(
                           row,
                           -1,
-                          headerGroups.length +
+                          headerRowCount +
                             pinnedTopRows.length +
                             rows.length +
                             index +
@@ -3009,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
@@ -3025,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"
@@ -3079,7 +3175,13 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
         </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>
   );
 }