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

package/src/tmdatagrid/components/TMDataGrid.module.css

@@ -41,6 +41,11 @@
 }
 
 .root {
+  /* The frame's corner radius. Any length or Mantine radius token; `0` squares
+     the grid off against a card or a full-bleed page. Override it on the grid:
+     <TMDataGrid style={{ "--dg-radius": 0 }} />
+     The root clips its overflow, so the header and the last row follow it. */
+  --dg-radius: var(--mantine-radius-md);
   /* Fallbacks, so the parts still work if rendered outside a sized root. */
   --dg-row-height: 52px;
   --dg-header-height: 44px;
@@ -66,6 +71,13 @@
     var(--mantine-color-text) 3.5%,
     var(--mantine-color-body)
   );
+  /* A confirmed entry row under draft mode - entered, awaiting Save all. A
+     whisper of green over the body, one declaration for both themes. */
+  --dg-row-new-bg: color-mix(
+    in srgb,
+    var(--mantine-color-green-6) 8%,
+    var(--mantine-color-body)
+  );
 
   /* The stacking ladder, stated once. Body cells sit at auto (0); everything
      sticky stacks over them in this order, and a sticky row crossing a sticky
@@ -89,6 +101,6 @@
      from the host page would centre headers away from their cell content. */
   text-align: left;
   border: 1px solid var(--mantine-color-default-border);
-  border-radius: var(--mantine-radius-md);
+  border-radius: var(--dg-radius);
   background-color: var(--mantine-color-body);
 }

package/src/tmdatagrid/components/TMDataGridCellEditor.tsx

@@ -43,7 +43,7 @@ const BUILT_IN_EDITORS: Record<
 export type TMDataGridCellEditorClose =
   | { committed: true; via: "enter" | "tab" | "shift-tab" | "pick" }
   | { committed: false; via: "escape" }
-  /** Batch: the editor closed, the draft stays - Enter parks, Tab moves on. */
+  /** Draft: the editor closed, the draft stays - Enter parks, Tab moves on. */
   | { committed: false; via: "defer" | "defer-tab" | "defer-shift-tab" };
 
 /**
@@ -59,6 +59,7 @@ export function TMDataGridCellEditor({
   row,
   takeSeedText,
   onClose,
+  inEntryBlock = false,
 }: {
   cell: Cell<TMDataGridFeatures, TMDataGridRowData, unknown>;
   row: Row<TMDataGridFeatures, TMDataGridRowData>;
@@ -66,6 +67,13 @@ export function TMDataGridCellEditor({
   takeSeedText: () => string | undefined;
   /** After the editor closed itself - the table moves the focus. */
   onClose: (args: TMDataGridCellEditorClose) => void;
+  /**
+   * Hosted by the entry block rather than a body cell. Under draft the keys
+   * change meaning there: Enter confirms the whole entry (the engine parks
+   * it), and Tab stays the browser's, walking the entry row's own inputs the
+   * way row mode's do.
+   */
+  inEntryBlock?: boolean;
 }) {
   const { table, edit, features, labels, controlSize } = useTMDataGridContext();
   // Row mode mounts one host per editable cell of the row; every key that
@@ -164,7 +172,7 @@ export function TMDataGridCellEditor({
     onClose({ committed: false, via: "escape" });
   };
 
-  /** Batch: the key closes the editor and leaves the draft for submitAll. */
+  /** Draft: the key closes the editor and leaves the draft for submitAll. */
   const deferAndClose = (via: "defer" | "defer-tab" | "defer-shift-tab") => {
     if (closingRef.current) return;
     closingRef.current = true;
@@ -173,23 +181,27 @@ export function TMDataGridCellEditor({
   };
 
   const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
-    const isBatch = features.editMode === "batch";
+    const isDraft = features.editMode === "draft";
     if (event.key === "Enter") {
       event.preventDefault();
       event.stopPropagation();
       // In row mode Enter (and Ctrl+Enter, the documented pair) saves the
-      // row; in batch nothing commits until submitAll, so Enter just parks
-      // the draft.
-      if (isBatch) deferAndClose("defer");
+      // row; in draft nothing reaches a callback until submitAll, so Enter
+      // parks the draft - and in the entry block it confirms the entry, which
+      // the engine parks the same way.
+      if (isDraft && !inEntryBlock) deferAndClose("defer");
       else void commitAndClose("enter");
     } else if (event.key === "Escape") {
       event.preventDefault();
       event.stopPropagation();
       cancelAndClose();
-    } else if (event.key === "Tab" && !isRowMode) {
+    } else if (event.key === "Tab" && !isRowMode && !(isDraft && inEntryBlock)) {
+      // In the draft entry block Tab stays the browser's: every editable
+      // cell's editor is mounted, so it walks the row's inputs as row mode's
+      // does.
       event.preventDefault();
       event.stopPropagation();
-      if (isBatch) {
+      if (isDraft) {
         deferAndClose(event.shiftKey ? "defer-shift-tab" : "defer-tab");
       } else {
         void commitAndClose(event.shiftKey ? "shift-tab" : "tab");

package/src/tmdatagrid/components/TMDataGridColumnsPanel.tsx

@@ -11,8 +11,6 @@ import { useState } from "react";
 import classes from "./TMDataGridColumnsPanel.module.css";
 import { useTMDataGridContext } from "../TMDataGridContext";
 import { getColumnLabel } from "../core/columnUtils";
-import { GROUP_COLUMN_ID } from "./TMDataGridGroupColumn";
-import { ROW_NUMBER_COLUMN_ID } from "./TMDataGridRowNumberColumn";
 import { SearchIcon } from "./icons";
 
 /**
@@ -29,16 +27,15 @@ export function TMDataGridColumnsPanel() {
     (state) => state.columnVisibility,
   );
 
-  // The tree column is left out rather than listed and disabled: its visibility
-  // is not a setting at all, it follows the grouping state, so an unchecked box
-  // that cannot be ticked would only invite the question. The row-number
-  // gutter follows `enableRowNumbers` the same way.
+  // Only what can actually be hidden. A column with `enableHiding: false` is
+  // left out rather than listed and disabled: a box that cannot be ticked only
+  // invites the question, and every generated lane is one - the checkbox and
+  // edit lanes hold the controls the grid needs, the tree column follows the
+  // grouping state, the row-number gutter follows `enableRowNumbers`. None of
+  // them is a setting.
   const columns = table
     .getAllLeafColumns()
-    .filter(
-      (column) =>
-        column.id !== GROUP_COLUMN_ID && column.id !== ROW_NUMBER_COLUMN_ID,
-    );
+    .filter((column) => column.getCanHide());
   const needle = search.trim().toLowerCase();
   const visibleInPanel = needle
     ? columns.filter((column) =>
@@ -46,11 +43,28 @@ export function TMDataGridColumnsPanel() {
       )
     : columns;
 
-  const hideableColumns = columns.filter((column) => column.getCanHide());
-  const shownCount = hideableColumns.filter(
+  const shownCount = columns.filter(
     (column) => columnVisibility[column.id] !== false,
   ).length;
 
+  /**
+   * Show or hide every listed column.
+   *
+   * Not `table.toggleAllColumnsVisible`, which writes a visibility entry for
+   * *every* leaf column: showing all would publish the tree column - hidden
+   * because nothing is grouped, not because the user hid it - and hiding all
+   * would force the same column visible, since it writes `!getCanHide()` for
+   * the columns it will not touch. Either way a lane the panel never listed
+   * changes state, and persistence then keeps it that way.
+   */
+  const setAllVisible = (visible: boolean) => {
+    table.setColumnVisibility((previous) => {
+      const next = { ...previous };
+      for (const column of columns) next[column.id] = visible;
+      return next;
+    });
+  };
+
   return (
     <div data-dg-part="columns-panel" className={classes.columnsPanel}>
       <div className={classes.columnsPanelSearch}>
@@ -74,7 +88,6 @@ export function TMDataGridColumnsPanel() {
               label={getColumnLabel(column)}
               data-dg-part="columns-toggle"
               data-column-id={column.id}
-              disabled={!column.getCanHide()}
               checked={columnVisibility[column.id] !== false}
               onChange={(event) =>
                 column.toggleVisibility(event.currentTarget.checked)
@@ -94,11 +107,9 @@ export function TMDataGridColumnsPanel() {
           size={controlSize}
           label={labels.columnsShowHideAll}
           data-dg-part="columns-toggle-all"
-          checked={shownCount === hideableColumns.length}
-          indeterminate={shownCount > 0 && shownCount < hideableColumns.length}
-          onChange={(event) =>
-            table.toggleAllColumnsVisible(event.currentTarget.checked)
-          }
+          checked={shownCount === columns.length}
+          indeterminate={shownCount > 0 && shownCount < columns.length}
+          onChange={(event) => setAllVisible(event.currentTarget.checked)}
         />
         {/* The whole layout, not only visibility: one reset with an honest
             scope, stated in the tooltip. `table.resetColumnVisibility()` would

package/src/tmdatagrid/components/TMDataGridDetailsColumn.tsx

@@ -117,16 +117,13 @@ function DetailsHeader<TData extends RowData>({
  * The generated details lane, prepended whenever `renderDetails` is set.
  *
  * Structural, like the checkbox and tree columns: fixed width, pinned to the
- * left after both of them, not hideable, not movable and not resizable. A
- * toggle that wandered off to the right of the grid (or hid itself) would
- * leave rows with panels no one can open.
+ * left after both of them, not hideable, not movable and not resizable. Moving
+ * or hiding the toggle would leave rows with panels that cannot be opened.
  *
- * Last of the three because it acts on one record: the checkbox picks rows out
- * and the tree says which group they are in, and only then is there a row to
- * open.
+ * Last of the three because it acts on a single record.
  *
- * Nothing stops a second toggle elsewhere: `row.toggleExpanded()` is the whole
- * interface, and this lane is only the one the grid ships.
+ * A second toggle elsewhere is supported: `row.toggleExpanded()` is the entire
+ * interface, and this lane is only the control the grid ships.
  */
 export function createDetailsColumn<TData extends RowData>(
   label = "Details",

package/src/tmdatagrid/components/TMDataGridEditActions.tsx

@@ -120,9 +120,9 @@ export type TMDataGridEditActionsProps = {
 };
 
 /**
- * Batch mode's toolbar chrome: Save with the dirty-row count, and Discard.
+ * Draft mode's toolbar chrome: Save with the dirty-row count, and Discard.
  * Both read the edit store, so they grey out while nothing is dirty and the
- * Save spins while a submit is in flight. Works under any `editMode` - a
+ * Save spins while a submit is in flight. Works under any `editing.mode` - a
  * cellConfirm grid accumulating drafts can offer the same pair - and renders
  * nothing while editing is off.
  *

package/src/tmdatagrid/components/TMDataGridEditColumn.tsx

@@ -1,6 +1,7 @@
 import { ActionIcon, Group, Loader, Tooltip } from "@mantine/core";
 import { useSelector } from "@tanstack/react-store";
 import type { ColumnDef, Row, RowData } from "@tanstack/react-table";
+import classes from "./TMDataGridTable.module.css";
 import {
   useCellControlTabIndex,
   useTMDataGridContext,
@@ -11,6 +12,7 @@ import {
   CheckIcon,
   CloseIcon,
   PencilIcon,
+  PlusIcon,
   RestoreIcon,
   TrashIcon,
 } from "./icons";
@@ -18,10 +20,49 @@ import {
 export const EDIT_COLUMN_ID = "__edit__";
 
 /**
- * One row's slot in the edit lane. Three states, driven off the edit store:
- * a pencil while idle, Save/Cancel while the row's form is open, a loader
- * while its commit is in flight. A row error turns the Save red and puts the
- * message in its tooltip - the pathless `.refine()` has nowhere else to land.
+ * Draft mode's change marker in the lane - what kind of uncommitted change
+ * the row carries. Non-interactive; the buttons beside it act. `data-state`
+ * is the styling hook, `data-error` flips it red and puts the message in the
+ * tooltip in place of the state's name.
+ */
+function RowStateIndicator({
+  state,
+  rowId,
+  label,
+  error,
+}: {
+  state: "new" | "edited" | "deleted";
+  rowId: string;
+  label: string;
+  error: string | null;
+}) {
+  const Icon =
+    state === "new" ? PlusIcon : state === "edited" ? PencilIcon : TrashIcon;
+  return (
+    <Tooltip label={error ?? label} withArrow>
+      <span
+        role="img"
+        aria-label={label}
+        data-dg-part="row-state"
+        data-state={state}
+        data-row-id={rowId}
+        data-error={error !== null || undefined}
+        className={classes.rowStateIndicator}
+      >
+        <Icon size={16} stroke={1.6} />
+      </span>
+    </Tooltip>
+  );
+}
+
+/**
+ * One row's slot in the edit lane, driven off the edit store. Outside draft
+ * mode: a pencil while idle, Save/Cancel while the row's form is open, a
+ * loader while its commit is in flight; a row error turns the Save red with
+ * the message in its tooltip - the pathless `.refine()` has nowhere else to
+ * land. Under draft mode the lane is the change marker and the per-row
+ * revert instead: a state icon (new/edited/deleted) beside undo, discard or
+ * restore - never a per-row save, which the engine would only park anyway.
  */
 function EditLaneCell<TData extends RowData>({
   row,
@@ -38,18 +79,97 @@ function EditLaneCell<TData extends RowData>({
   const isNew = useSelector(edit.store, (state) =>
     state.newRows.some((newRow) => newRow.tempId === rowId),
   );
+  const isConfirmedNew = useSelector(
+    edit.store,
+    (state) =>
+      state.newRows.find((newRow) => newRow.tempId === rowId)?.confirmed ===
+      true,
+  );
   const isMarkedDeleted = useSelector(edit.store, (state) =>
     state.deletedRowIds.includes(rowId),
   );
 
   if (row.getIsGrouped()) return null;
 
-  // An entry row: ✓ adds it (not under batch, where submitAll does), ✕
-  // discards the entry.
+  const isDraftMode = features.editMode === "draft";
+  const hasErrors =
+    projection !== undefined &&
+    (projection.hasRowError || projection.errorFields.length > 0);
+  const rowError = hasErrors
+    ? (firstErrorText(edit.getForm(rowId)?.state.errors ?? []) ??
+      labels.editRowErrors)
+    : null;
+
+  const trash = edit.canDeleteRows() ? (
+    <Tooltip label={labels.deleteRow} withArrow>
+      <ActionIcon
+        variant="subtle"
+        color="gray"
+        size="sm"
+        tabIndex={tabIndex}
+        aria-label={labels.deleteRow}
+        data-dg-part="delete-row"
+        data-row-id={rowId}
+        onClick={(event) => {
+          event.stopPropagation();
+          edit.deleteRow(rowId);
+        }}
+      >
+        <TrashIcon size={16} stroke={1.6} />
+      </ActionIcon>
+    </Tooltip>
+  ) : null;
+
+  // An entry row: ✓ enters it - an add under the immediate modes, a parked
+  // confirm under draft - and ✕ discards the entry. A confirmed entry waits
+  // for Save all as a value row: marked new, re-openable, still discardable.
   if (isNew) {
+    if (isConfirmedNew) {
+      return (
+        <Group gap={0} wrap="nowrap">
+          <RowStateIndicator
+            state="new"
+            rowId={rowId}
+            label={labels.rowStateNew}
+            error={rowError}
+          />
+          <Tooltip label={labels.editRow} withArrow>
+            <ActionIcon
+              variant="subtle"
+              color="gray"
+              size="sm"
+              tabIndex={tabIndex}
+              aria-label={labels.editRow}
+              data-dg-part="edit-row"
+              data-row-id={rowId}
+              onClick={(event) => {
+                event.stopPropagation();
+                edit.begin({ rowId, columnId: null });
+              }}
+            >
+              <PencilIcon size={16} stroke={1.6} />
+            </ActionIcon>
+          </Tooltip>
+          <Tooltip label={labels.discardNewRow} withArrow>
+            <ActionIcon
+              variant="subtle"
+              color="gray"
+              size="sm"
+              tabIndex={tabIndex}
+              aria-label={labels.discardNewRow}
+              data-dg-part="discard-new-row"
+              data-row-id={rowId}
+              onClick={() => edit.cancel(rowId)}
+            >
+              <CloseIcon size={16} stroke={1.6} />
+            </ActionIcon>
+          </Tooltip>
+        </Group>
+      );
+    }
     return (
       <Group gap={0} wrap="nowrap">
-        {features.editMode !== "batch" && (
+        <Tooltip label={labels.confirmNewRow} withArrow>
           <ActionIcon
             variant="subtle"
             color="green"
@@ -62,84 +182,121 @@ function EditLaneCell<TData extends RowData>({
           >
             <CheckIcon size={16} stroke={2} />
           </ActionIcon>
-        )}
-        <ActionIcon
-          variant="subtle"
-          color="gray"
-          size="sm"
-          tabIndex={tabIndex}
-          aria-label={labels.discardNewRow}
-          data-dg-part="discard-new-row"
-          data-row-id={rowId}
-          onClick={() => edit.cancel(rowId)}
-        >
-          <CloseIcon size={16} stroke={1.6} />
-        </ActionIcon>
+        </Tooltip>
+        <Tooltip label={labels.discardNewRow} withArrow>
+          <ActionIcon
+            variant="subtle"
+            color="gray"
+            size="sm"
+            tabIndex={tabIndex}
+            aria-label={labels.discardNewRow}
+            data-dg-part="discard-new-row"
+            data-row-id={rowId}
+            onClick={() => edit.cancel(rowId)}
+          >
+            <CloseIcon size={16} stroke={1.6} />
+          </ActionIcon>
+        </Tooltip>
       </Group>
     );
   }
 
-  // A batch deletion mark is a draft like any other - restorable in place.
+  // A draft-mode deletion mark is a draft like any other - restorable in place.
   if (isMarkedDeleted) {
-    return (
-      <ActionIcon
-        variant="subtle"
-        color="gray"
-        size="sm"
-        tabIndex={tabIndex}
-        aria-label={labels.restoreRow}
-        data-dg-part="restore-row"
-        data-row-id={rowId}
-        onClick={(event) => {
-          event.stopPropagation();
-          edit.deleteRow(rowId);
-        }}
-      >
-        <RestoreIcon size={16} stroke={1.6} />
-      </ActionIcon>
-    );
-  }
-
-  // The pencil means "this row edits"; a row that does not gets nothing.
-  if (!edit.canEditRow(row as never)) return null;
-
-  if (!isOpen) {
     return (
       <Group gap={0} wrap="nowrap">
-        {features.editMode === "row" && (
+        <RowStateIndicator
+          state="deleted"
+          rowId={rowId}
+          label={labels.rowStateDeleted}
+          error={null}
+        />
+        <Tooltip label={labels.restoreRow} withArrow>
           <ActionIcon
             variant="subtle"
             color="gray"
             size="sm"
             tabIndex={tabIndex}
-            aria-label={labels.editRow}
-            data-dg-part="edit-row"
+            aria-label={labels.restoreRow}
+            data-dg-part="restore-row"
             data-row-id={rowId}
             onClick={(event) => {
               event.stopPropagation();
-              edit.begin({ rowId, columnId: null });
+              edit.deleteRow(rowId);
             }}
           >
-            <PencilIcon size={16} stroke={1.6} />
+            <RestoreIcon size={16} stroke={1.6} />
           </ActionIcon>
-        )}
-        {edit.canDeleteRows() && (
+        </Tooltip>
+      </Group>
+    );
+  }
+
+  // The pencil means "this row edits"; a row that does not gets nothing.
+  if (!edit.canEditRow(row as never)) return null;
+
+  // Draft mode never offers a per-row save - the engine would only park it,
+  // and Save all is the commit. The lane is the state marker and the revert.
+  // No trash beside the revert: the two undo-shaped icons were too easy to
+  // mistake for one another, so a dirty row reverts first, then deletes.
+  if (isDraftMode) {
+    if (projection?.isSubmitting) {
+      return <Loader size="xs" aria-label={labels.loading} />;
+    }
+    const isDirty = (projection?.dirtyFields.length ?? 0) > 0;
+    if (!isDirty) return trash;
+    return (
+      <Group gap={0} wrap="nowrap">
+        <RowStateIndicator
+          state="edited"
+          rowId={rowId}
+          label={labels.rowStateEdited}
+          error={rowError}
+        />
+        <Tooltip label={labels.revertRow} withArrow>
           <ActionIcon
             variant="subtle"
             color="gray"
             size="sm"
             tabIndex={tabIndex}
-            aria-label={labels.deleteRow}
-            data-dg-part="delete-row"
+            aria-label={labels.revertRow}
+            data-dg-part="revert-row"
             data-row-id={rowId}
             onClick={(event) => {
               event.stopPropagation();
-              edit.deleteRow(rowId);
+              edit.cancel(rowId);
             }}
           >
-            <TrashIcon size={16} stroke={1.6} />
+            <RestoreIcon size={16} stroke={1.6} />
           </ActionIcon>
+        </Tooltip>
+      </Group>
+    );
+  }
+
+  if (!isOpen) {
+    return (
+      <Group gap={0} wrap="nowrap">
+        {features.editMode === "row" && (
+          <Tooltip label={labels.editRow} withArrow>
+            <ActionIcon
+              variant="subtle"
+              color="gray"
+              size="sm"
+              tabIndex={tabIndex}
+              aria-label={labels.editRow}
+              data-dg-part="edit-row"
+              data-row-id={rowId}
+              onClick={(event) => {
+                event.stopPropagation();
+                edit.begin({ rowId, columnId: null });
+              }}
+            >
+              <PencilIcon size={16} stroke={1.6} />
+            </ActionIcon>
+          </Tooltip>
         )}
+        {trash}
       </Group>
     );
   }
@@ -148,14 +305,6 @@ function EditLaneCell<TData extends RowData>({
     return <Loader size="xs" aria-label={labels.loading} />;
   }
 
-  const hasErrors =
-    projection !== undefined &&
-    (projection.hasRowError || projection.errorFields.length > 0);
-  const rowError = hasErrors
-    ? (firstErrorText(edit.getForm(rowId)?.state.errors ?? []) ??
-      labels.editRowErrors)
-    : null;
-
   const save = (
     <ActionIcon
       variant="subtle"
@@ -177,39 +326,46 @@ function EditLaneCell<TData extends RowData>({
   return (
     <Group gap={0} wrap="nowrap">
       {rowError === null ? (
-        save
+        <Tooltip label={labels.saveRow} withArrow>
+          {save}
+        </Tooltip>
       ) : (
         <Tooltip label={rowError} withArrow>
           {save}
         </Tooltip>
       )}
-      <ActionIcon
-        variant="subtle"
-        color="gray"
-        size="sm"
-        tabIndex={tabIndex}
-        aria-label={labels.cancelRowEdit}
-        data-dg-part="cancel-row"
-        data-row-id={rowId}
-        onClick={(event) => {
-          event.stopPropagation();
-          edit.cancel(rowId);
-        }}
-      >
-        <CloseIcon size={16} stroke={1.6} />
-      </ActionIcon>
+      <Tooltip label={labels.cancelRowEdit} withArrow>
+        <ActionIcon
+          variant="subtle"
+          color="gray"
+          size="sm"
+          tabIndex={tabIndex}
+          aria-label={labels.cancelRowEdit}
+          data-dg-part="cancel-row"
+          data-row-id={rowId}
+          onClick={(event) => {
+            event.stopPropagation();
+            edit.cancel(rowId);
+          }}
+        >
+          <CloseIcon size={16} stroke={1.6} />
+        </ActionIcon>
+      </Tooltip>
     </Group>
   );
 }
 
 /**
- * The generated edit lane, appended and pinned right under
- * `editMode: "row"` - the row's Save at the end of the row, mirroring the
- * checkbox lane's build on the left.
+ * The generated edit lane, appended and pinned right - the row's Save at the
+ * end of the row under `mode: "row"`, the state marker and revert under
+ * `mode: "draft"`, mirroring the checkbox lane's build on the left.
  */
 export function createEditColumn<TData extends RowData>(
   label = "Edit",
+  /** Draft mode holds three controls where the others hold two. */
+  wide = false,
 ): ColumnDef<TMDataGridFeatures, TData, unknown> {
+  const width = wide ? 88 : 64;
   return {
     id: EDIT_COLUMN_ID,
     meta: {
@@ -217,14 +373,18 @@ export function createEditColumn<TData extends RowData>(
       align: "center",
       enableOrdering: false,
     },
-    // Wide enough for the Save/Cancel pair it holds while editing.
-    size: 64,
-    minSize: 64,
-    maxSize: 64,
+    // Wide enough for the pair (or draft's trio) it holds while editing.
+    size: width,
+    minSize: width,
+    maxSize: width,
     enableResizing: false,
     enableSorting: false,
     enableColumnFilter: false,
     enableGlobalFilter: false,
+    // The row's Save, Cancel and Delete live here, so hiding the lane would
+    // strand an open row with no way to commit or discard it. Same rule as the
+    // checkbox lane: chrome the grid generates is not a user setting.
+    enableHiding: false,
     // Structurally pinned to the right; not movable.
     enablePinning: false,
     header: () => null,