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

package/skills/testing-editing/SKILL.md

@@ -0,0 +1,225 @@
+---
+name: testing-editing
+description: >
+  Test TMDataGrid editing flows from Playwright: adding a row through the entry
+  row, where its temporary id (__new__1) goes at commit and at save, finding an
+  added row when the grid does not know the id the app gave it, asserting a
+  failed validation on an entry row, cell and row edits, deletions, and the
+  draft store (data-new, data-draft, data-dirty, data-deleted, row-state,
+  save-all and data-draft-count). Load when writing or fixing a test that adds,
+  edits, deletes or saves rows, or when a locator for a new row stops resolving
+  after the row is committed.
+metadata:
+  type: core
+  library: '@jielga/tmdatagrid'
+  library_version: '2.0.0-beta.23'
+sources:
+  - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/testing.md'
+  - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/editing.md'
+  - 'Jielga/TMDataGrid:packages/tmdatagrid/src/components/TMDataGridEntryRows.tsx'
+  - 'Jielga/TMDataGrid:packages/tmdatagrid/src/components/TMDataGridEditColumn.tsx'
+---
+
+# TMDataGrid - Testing editing
+
+Builds on the `testing` skill: parts are `[data-dg-part]`, coordinates are
+`[data-row-id]` / `[data-column-id]`, and `DataGrid` is its page object.
+
+## The life of an added row
+
+`edit.addRow()` opens an entry row keyed by a temporary id. What happens at ✓
+depends on `editing.draft`, and that decides what a test can hold on to:
+
+| Step | Without `draft` | With `draft: true` |
+| --- | --- | --- |
+| `addRow()` | `[data-dg-part="entry-row"][data-row-id="__new__1"]`; editors are `[data-dg-part="editor"][data-row-id="__new__1"][data-column-id="..."]` | Same |
+| ✓ fails validation | Entry row stays; failing cells carry `data-invalid="true"` | Same |
+| ✓ (`confirm-new-row`) | **Entry row removed, temp id gone.** `onRowAdd({ tempId, value })` runs in the app; the row exists again only when the app puts it in `data`, under the id the app's `getRowId` returns | Becomes a body row **still keyed by the temp id**: `[data-dg-part="row"][data-row-id="__new__1"][data-new="true"][data-draft="true"]`, lane shows `[data-dg-part="row-state"][data-state="new"]`, `[data-dg-part="save-all"]` counts it in `data-draft-count` |
+| Save (`save-all`) | - | As ✓ without `draft`: temp id gone, row comes back through `data` under the app's id |
+| `newRowsSticky: true` | - | The committed row stays an `entry-row` with `data-committed="true"`, outside `data-dg-row-count`, until Save |
+
+The grid never learns the id the app assigns (a database id, a negative
+counter, a uuid - whatever `onRowAdd` or `onSaveDrafts` does). The temp id →
+real id mapping does not exist anywhere in the DOM.
+
+## The rule: find an added row by content, not by id
+
+Once `onRowAdd` or `saveDrafts` has run, the only thing the test knows about
+the row is what it typed. Narrow the grid to a value unique to that row, assert
+that exactly one row is left, read that row's cells:
+
+```ts
+async expectRowAdded(uniqueValue: string, cells: Record<string, string>) {
+  await this.search(uniqueValue);   // or filterBy on a column when there is no quick search
+  await this.expectRowCount(1);     // retries until the app has put the row in data
+  const row = this.part("row");     // exactly one body row now
+  for (const [columnId, text] of Object.entries(cells)) {
+    await expect(row.locator(`[data-column-id="${columnId}"]`)).toHaveText(text);
+  }
+  await this.search("");
+}
+```
+
+- The `data-dg-row-count` assertion is the wait. Nothing else signals that
+  `onRowAdd` finished: `aria-busy` reflects `meta.loading` only.
+- Use a value no other row has - put a run id in the name. Two matches means
+  `expectRowCount(1)` fails, correctly.
+- Scoped to the grid and to one column: no `page.getByText`, no virtualization
+  problem, no strict-mode ambiguity.
+
+## Page object methods
+
+Add these to the `DataGrid` class from the `testing` skill:
+
+```ts
+entryRow(): Locator {
+  return this.part("entry-row");
+}
+
+/** Built-in editors of an open row: an entry row, or a row opened in row mode. */
+async fillRow(rowId: string, values: Record<string, string>): Promise<void> {
+  for (const [columnId, value] of Object.entries(values)) {
+    await this.part("editor", { rowId, columnId })
+      .locator('[data-dg-part="editor-input"]')
+      .fill(value);
+  }
+}
+
+async commitEntryRow(rowId: string): Promise<void> {
+  await this.part("confirm-new-row", { rowId }).click();
+}
+
+/** Save in TMDataGrid.DraftActions, waited until the store is empty. */
+async saveDrafts(): Promise<void> {
+  await this.part("save-all").click();
+  await expect(this.part("save-all")).toHaveAttribute("data-draft-count", "0");
+}
+```
+
+`fillRow` covers the built-in editors. A column with `meta.edit.editor` renders
+the app's own component inside the `editor` part; scope through
+`part("editor", { rowId, columnId })` and fill whatever is inside.
+
+## Recipes
+
+### Add a row, without draft
+
+```ts
+await page.getByRole("button", { name: "Add row" }).click(); // the app's button → edit.addRow()
+const tempId = (await grid.entryRow().getAttribute("data-row-id"))!;
+await grid.fillRow(tempId, { name: "Nordkvist-4711", city: "Stockholm" });
+await grid.commitEntryRow(tempId);
+
+await expect(grid.entryRow()).toHaveCount(0);           // entry row gone; tempId is now meaningless
+await grid.expectRowAdded("Nordkvist-4711", { name: "Nordkvist-4711", city: "Stockholm" });
+```
+
+### Add a row, with draft, then save
+
+```ts
+await grid.commitEntryRow(tempId);
+const row = grid.part("row", { rowId: tempId });        // tempId is still the row's id
+await expect(row).toHaveAttribute("data-new", "true");
+await expect(row).toHaveAttribute("data-draft", "true");
+await expect(grid.part("row-state", { rowId: tempId })).toHaveAttribute("data-state", "new");
+await expect(grid.part("save-all")).toHaveAttribute("data-draft-count", "1");
+
+await grid.saveDrafts();
+await expect(row).toHaveCount(0);                       // tempId dies here
+await grid.expectRowAdded("Nordkvist-4711", { city: "Stockholm" });
+```
+
+Reopening a committed draft row: `edit-row` (the lane's pencil) or a
+double-click puts it back in the entry block, still under the temp id; ✕
+(`discard-new-row`) removes it.
+
+### A ✓ that fails validation
+
+```ts
+await grid.commitEntryRow(tempId);
+await expect(grid.entryRow()).toHaveCount(1);           // still open
+await expect(grid.entryRow().locator('[data-column-id="email"]'))
+  .toHaveAttribute("data-invalid", "true");
+```
+
+### Change a cell or a row
+
+```ts
+const cell = grid.cell({ rowId: "42", columnId: "salary" });
+await cell.dblclick();                                  // cell mode: opens the editor
+await grid.fillRow("42", { salary: "52000" });
+await page.keyboard.press("Enter");                     // commits
+
+// Without draft: onCommit ran, the app applied it, the grid holds nothing
+await expect(cell).toHaveText("52 000");
+
+// Under draft: the grid holds it until Save
+await expect(cell).toHaveAttribute("data-dirty", "true");
+await expect(grid.part("row", { rowId: "42" })).toHaveAttribute("data-dirty", "true");
+await expect(grid.part("row-state", { rowId: "42" })).toHaveAttribute("data-state", "edited");
+```
+
+Row mode: `edit-row` opens the row, `fillRow` reaches its editors, `save-row`
+commits, `cancel-row` discards. `cellConfirm` mode: `editor-confirm` /
+`editor-cancel` beside the input, or Enter / Escape.
+
+### Delete a row
+
+```ts
+const before = Number(await grid.grid.getAttribute("data-dg-row-count"));
+await grid.part("delete-row", { rowId: "42" }).click();
+
+// Without draft: onRowDelete ran, the app removed it from data
+await grid.expectRowCount(before - 1);
+
+// Under draft: marked until Save; restore-row undoes the mark
+await expect(grid.part("row", { rowId: "42" })).toHaveAttribute("data-deleted", "true");
+await grid.part("restore-row", { rowId: "42" }).click();
+```
+
+## Attribute values
+
+A state attribute is present, with the value `"true"`, only while it applies:
+`data-new`, `data-draft`, `data-dirty`, `data-deleted` on a body row,
+`data-committed` on an entry row, `data-dirty`, `data-invalid`, `data-editing`
+on a cell. `[data-new]` and `[data-new="true"]` match the same rows,
+`toHaveAttribute("data-new")` and `toHaveAttribute("data-new", "true")` both
+hold, and the negative is `not.toHaveAttribute("data-new")`.
+
+## Common mistakes
+
+### Looking for the new row's text on the page
+
+`page.getByText("Nordkvist")` searches the whole document: other grids, the
+toolbar, a toast. And the row may be virtualized out of the DOM, so the
+locator fails or flakes depending on sort order and viewport. Narrow with
+search or a filter, assert `data-dg-row-count` is 1, read that one row.
+
+### Keeping the temp id after ✓ without draft
+
+`grid.part("row", { rowId: "__new__1" })` never resolves: without `draft` the
+grid drops the entry and the id at ✓, and the row's real id is the app's. Only
+under `draft: true` does the temp id outlive ✓ - and only until Save.
+
+### Waiting for the added row with a timeout
+
+The app's `onRowAdd` may be async. `expectRowCount(1)` after narrowing retries
+until the row is in `data`; a `waitForTimeout` either wastes time or is too
+short on CI.
+
+### Asserting the negative with `"false"`
+
+`toHaveAttribute("data-new", "false")` never passes: a state that does not
+apply is an absent attribute, not `"false"`. Use
+`not.toHaveAttribute("data-new")`, and `:not([data-new])` in CSS.
+
+### Asserting a deletion with `toHaveCount(0)`
+
+A row outside the viewport has no element either. Assert `data-dg-row-count`
+dropped by one, or, under `draft`, `data-deleted="true"` on the row.
+
+### Expecting the grid to show the change without draft
+
+Without `draft: true` the grid holds nothing after a commit: no `data-dirty`,
+no `row-state`, `save-all` stays disabled at `data-draft-count="0"`. The
+assertion is the cell's text after the app has applied the change to `data`.

package/src/components/TMDataGridDetailsColumn.tsx

@@ -51,7 +51,7 @@ function DetailsCell<TData extends RowData>({
         row.toggleExpanded();
       }}
     >
-      <span className={classes.chevron} data-expanded={expanded}>
+      <span className={classes.chevron} data-expanded={expanded || undefined}>
         <ChevronRightIcon size={16} stroke={1.6} />
       </span>
     </UnstyledButton>
@@ -106,7 +106,7 @@ function DetailsHeader<TData extends RowData>({
         )
       }
     >
-      <span className={classes.chevron} data-expanded={allExpanded}>
+      <span className={classes.chevron} data-expanded={allExpanded || undefined}>
         <ChevronRightIcon size={16} stroke={1.6} />
       </span>
     </UnstyledButton>

package/src/components/TMDataGridEntryRows.tsx

@@ -16,6 +16,7 @@ import {
   isColumnEditableForRow,
   isControlColumn,
 } from "../core/columnUtils";
+import { draftCellContext } from "../core/draftCellContext";
 import { getEditFieldName, type TMDataGridEditApi } from "../core/editEngine";
 import { focusEditorContent } from "../core/editorFocus";
 import {
@@ -45,10 +46,11 @@ function isEntryCellEditable(
 }
 
 /**
- * One cell of an entry row: the lane's controls, a value once the row is
- * committed, or an editor. The invalid marker subscribes here, per cell, as
- * a body cell's does - a refused ✓ paints the cells its issues name and
- * nothing else. No dirty marker: everything in an entry row is new.
+ * One cell of an entry row: the lane's controls, an editor for a cell the
+ * open row edits, or a value through the column's own renderer. The invalid
+ * marker subscribes here, per cell, as a body cell's does - a refused ✓
+ * paints the cells its issues name and nothing else. No dirty marker:
+ * everything in an entry row is new.
  */
 function EntryCell({
   entryRow,
@@ -76,12 +78,22 @@ function EntryCell({
   });
   const editable =
     cell !== undefined && isEntryCellEditable(entryRow, column, edit);
+  // An open row's cells outside the editors follow the form as it is typed,
+  // as a body row's do: the column's renderer over a context reading the
+  // form's values - the whole row, so a computed cell repaints with any
+  // field. `undefined` for a committed row, whose values the entry table
+  // already holds as data, and for the lanes.
+  const draftValues = useSelector(edit.store, (state) =>
+    committed || isControlColumn(column.id)
+      ? undefined
+      : state.rows[entryRow.id]?.values,
+  );
   return (
     <div
       role="cell"
       data-column-id={column.id}
       data-align={getColumnAlign(column)}
-      data-control-column={isControlColumn(column.id)}
+      data-control-column={isControlColumn(column.id) || undefined}
       data-invalid={isInvalid || undefined}
       // A committed row re-opens where it is double-clicked, the same
       // gesture a body cell answers - and, like a body cell, a cell that
@@ -108,16 +120,10 @@ function EntryCell({
         zIndex: layout.pinnedAt ? pinnedZ : undefined,
       }}
     >
-      {cell !== undefined && column.id === EDIT_COLUMN_ID ? (
+      {cell === undefined ? null : column.id === EDIT_COLUMN_ID ? (
         // The lane's cell - the entry row's controls.
         flexRender(cell.column.columnDef.cell, cell.getContext())
-      ) : committed && cell !== undefined ? (
-        // Entered, awaiting Save all: a value row through the columns' own
-        // renderers, over the draft the entry table was fed.
-        <span className={classes.cellContent}>
-          {flexRender(cell.column.columnDef.cell, cell.getContext())}
-        </span>
-      ) : editable && cell !== undefined ? (
+      ) : !committed && editable ? (
         <TMDataGridCellEditor
           cell={cell}
           row={entryRow}
@@ -125,6 +131,24 @@ function EntryCell({
           onClose={() => {}}
           inEntryBlock
         />
+      ) : committed || !isControlColumn(column.id) ? (
+        // A value through the column's own renderer. Every cell of a row
+        // entered and awaiting Save all, over the draft the entry table was
+        // fed - and, while the row is open, every cell it does not open (a
+        // display column, `meta.edit.enabled` off), over the form as it is
+        // typed, as a body row in row mode shows them. Blank was how a
+        // calculated column or a button cell vanished the moment a
+        // committed row was reopened. The generated lanes stay blank while
+        // the row is open: a checkbox or a chevron there would act on the
+        // entry table's own state, which reaches nothing.
+        <span className={classes.cellContent}>
+          {flexRender(
+            cell.column.columnDef.cell,
+            draftValues !== undefined
+              ? draftCellContext(cell, draftValues)
+              : cell.getContext(),
+          )}
+        </span>
       ) : null}
     </div>
   );
@@ -245,18 +269,19 @@ export function TMDataGridEntryRows({
     focusEditorContent(editor);
   });
 
-  // Open (uncommitted) rows keep the seed values frozen at addRow - the live values
-  // belong to the forms, which the editors read directly, and this table only
-  // provides row and cell identity. A committed row's cells render values, and
-  // a committed row is data: its values come from the draft store, which is
-  // also what the row keeps while a reopen is undecided.
+  // What the rows render over. A committed row is data: its values are the
+  // draft store's, which stand through a reopen. An open row's cells read
+  // the form itself - the editors directly, the rest through EntryCell's
+  // draft overlay - so its entry here gives the row an identity and a
+  // fallback: the committed values it was reopened from, else the seed
+  // frozen at addRow (the form's `defaultValues`, which a reopen keeps at
+  // the seed and writes the committed values over).
   const data = useMemo(
     () =>
       newRows.map(
-        ({ tempId, committed }) =>
-          ((committed
-            ? committedValues[tempId]
-            : edit.getForm(tempId)?.options.defaultValues) ??
+        ({ tempId }) =>
+          (committedValues[tempId] ??
+            edit.getForm(tempId)?.options.defaultValues ??
             {}) as TMDataGridRowData,
       ),
     [newRows, committedValues, edit],
@@ -288,10 +313,10 @@ export function TMDataGridEntryRows({
         data-dg-part="entry-row"
         data-row-id={entryRow.id}
         data-new
-        data-committed={committed}
+        data-committed={committed || undefined}
         // The same marker body rows carry once committed, so one selector
         // reaches everything parked in the draft store.
-        data-draft={committed}
+        data-draft={committed || undefined}
         className={classes.entryRow}
       >
         {orderedColumns.map((column) => (

package/src/components/TMDataGridFooter.tsx

@@ -330,7 +330,7 @@ export function TMDataGridFooter({
       <Box
         data-dg-part="footer"
         className={footerClassName}
-        data-paging-suspended={!paging}
+        data-paging-suspended={!paging || undefined}
         {...others}
       >
         {/* The default render is the controls in order - which is what makes

package/src/components/TMDataGridGroupColumn.tsx

@@ -82,7 +82,7 @@ function GroupCell<TData extends RowData>({
         row.toggleExpanded();
       }}
     >
-      <span className={classes.chevron} data-expanded={expanded}>
+      <span className={classes.chevron} data-expanded={expanded || undefined}>
         <ChevronRightIcon size={16} stroke={1.6} />
       </span>
       <span className={classes.groupLabel}>{label}</span>

package/src/components/TMDataGridHeaderCell.module.css

@@ -90,11 +90,11 @@
 
 /* See the sort ActionIcon: an unsorted column's arrow is an invitation, not a
    state, so it sits back until the pointer is on it. */
-.sortAction[data-sorted="false"] {
+.sortAction:not([data-sorted]) {
   opacity: 0.55;
 }
 
-.sortAction[data-sorted="false"]:hover {
+.sortAction:not([data-sorted]):hover {
   opacity: 1;
 }
 

package/src/components/TMDataGridHeaderCell.tsx

@@ -540,11 +540,11 @@ export function TMDataGridHeaderCell({
       // The same coordinate the body, summary and entry cells carry, so one
       // selector reaches a column's header and its cells alike.
       data-column-id={column.id}
-      data-active={isSorted || isFiltered}
+      data-active={isSorted || isFiltered || undefined}
       data-align={align}
       // A control lane is a fixed track, so it cannot take the cell padding the
       // scale grows for text. See isControlColumn.
-      data-control-column={isControlColumn(column.id)}
+      data-control-column={isControlColumn(column.id) || undefined}
       // Only meaningful on a sortable column: "none" announces that this
       // header sorts, which is wrong on one that does not.
       aria-sort={
@@ -639,12 +639,12 @@ export function TMDataGridHeaderCell({
           {canSort && (
             <ActionIcon
               className={`${classes.headerAction} ${classes.sortAction}`}
-              data-pinned-visible={isSorted}
+              data-pinned-visible={isSorted || undefined}
               // The arrow is the only sort indicator now that the title no
               // longer tints, so it takes the colour while the sort holds. On
               // an unsorted column it is only the hover affordance, and stays a
               // faded grey so the two are not confused.
-              data-sorted={isSorted}
+              data-sorted={isSorted || undefined}
               variant="subtle"
               color={isSorted ? undefined : "gray"}
               size="xs"
@@ -685,7 +685,7 @@ export function TMDataGridHeaderCell({
                   // Held visible for the right-click menu too: that one opens at
                   // the pointer and is portaled, so the hover that revealed the
                   // actions is lost the moment the pointer enters the dropdown.
-                  data-pinned-visible={menuOpened || contextMenuOpened}
+                  data-pinned-visible={menuOpened || contextMenuOpened || undefined}
                   variant="subtle"
                   color="gray"
                   size="xs"

package/src/components/TMDataGridHeaderFilterRow.tsx

@@ -271,7 +271,7 @@ export function TMDataGridHeaderFilterRow({
             aria-label={labels.filterOn(getColumnLabel(column))}
             data-dg-part="header-filter-cell"
             data-column-id={column.id}
-            data-control-column={isControlColumn(column.id)}
+            data-control-column={isControlColumn(column.id) || undefined}
             className={[
               classes.headerFilterCell,
               layout.isBoundary && layout.pinnedAt === "left"

package/src/components/TMDataGridTable.tsx

@@ -332,16 +332,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.
@@ -356,7 +356,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,
@@ -2674,7 +2674,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}
@@ -2683,13 +2683,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
@@ -2701,33 +2704,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.
                   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={editDirtyRowIdSet.has(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={
-                    editDraftRowIdSet.has(row.id) || newRowIdSet.has(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)}
+                  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
                   }
@@ -2739,7 +2749,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)
@@ -3122,7 +3132,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"