@jielga/tmdatagrid 2.0.0-beta.9 → 2.0.0

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

@@ -3,7 +3,7 @@ import {
   useBodyControlTabIndex,
   useTMDataGridContext,
 } from "../TMDataGridContext";
-import type { ColumnDef, Row, RowData } from "@tanstack/react-table";
+import type { Row, RowData } from "@tanstack/react-table";
 import { useSelector } from "@tanstack/react-store";
 import classes from "./TMDataGridDetailsColumn.module.css";
 import { ChevronRightIcon } from "./icons";
@@ -20,7 +20,7 @@ export const DETAILS_COLUMN_ID = "__details__";
  * expand, so the React Compiler would cache the call along with it and the
  * chevron would never turn. Same reason the select checkbox subscribes.
  */
-function DetailsCell<TData extends RowData>({
+export function DetailsCell<TData extends RowData>({
   row,
 }: {
   row: Row<TMDataGridFeatures, TData>;
@@ -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>
@@ -67,7 +67,7 @@ function DetailsCell<TData extends RowData>({
  * so it would unfold every group as well. Only the data rows are touched here;
  * whatever the tree was showing, it goes on showing. See resolveExpandAll.
  */
-function DetailsHeader<TData extends RowData>({
+export function DetailsHeader<TData extends RowData>({
   table,
 }: {
   table: TMDataGridTable<TData>;
@@ -106,55 +106,9 @@ 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>
   );
 }
-
-/**
- * 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. Moving
- * or hiding the toggle would leave rows with panels that cannot be opened.
- *
- * Last of the three because it acts on a single record.
- *
- * 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",
-): ColumnDef<TMDataGridFeatures, TData, unknown> {
-  return {
-    id: DETAILS_COLUMN_ID,
-    meta: {
-      label,
-      align: "center",
-      // Structurally the last of the generated lanes.
-      enableOrdering: false,
-    },
-    // A system lane: as wide as the control it holds and no wider. Fixed at
-    // every scale - the control does not grow with the font size, so neither
-    // should its track.
-    size: 36,
-    minSize: 36,
-    maxSize: 36,
-    enableResizing: false,
-    enableSorting: false,
-    enableColumnFilter: false,
-    enableGlobalFilter: false,
-    // Its visibility is not the user's to set: hiding it would strand every
-    // panel behind a control that is no longer there.
-    enableHiding: false,
-    // Structurally pinned to the left; users shouldn't be able to move it.
-    enablePinning: false,
-    header: ({ table }) => <DetailsHeader table={table} />,
-    cell: ({ row }) => <DetailsCell row={row} />,
-    // Deliberately no `aggregatedCell`: on a group row every cell outside the
-    // grouped column counts as aggregated, and blank is the right answer here -
-    // groups expand into their rows, not into a panel.
-  };
-}

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

@@ -3,7 +3,11 @@ import { useSelector } from "@tanstack/react-store";
 import { shallow } from "@tanstack/store";
 import type { ReactNode } from "react";
 import { useTMDataGridContext } from "../TMDataGridContext";
-import { getOpenRowIds } from "../core/editEngine";
+import {
+  getOpenRowIds,
+  type TMDataGridCommitAllResult,
+  type TMDataGridSaveDraftsResult,
+} from "../core/editEngine";
 import { getDisplayedRows } from "../core/rowSelection";
 import type {
   TMDataGridScrollAlign,
@@ -17,13 +21,20 @@ import type {
  */
 function useDraftCount(): number {
   const { edit } = useTMDataGridContext();
-  return useSelector(
-    edit.store,
-    (state) =>
-      state.committedRowIds.length +
+  return useSelector(edit.store, (state) => {
+    const deleted = new Set(state.deletedRowIds);
+    // An edited row that was then marked counts once: Save sends the
+    // deletion and leaves the edit behind.
+    const edited =
+      deleted.size === 0
+        ? state.committedRowIds.length
+        : state.committedRowIds.filter((rowId) => !deleted.has(rowId)).length;
+    return (
+      edited +
       state.newRows.filter((newRow) => newRow.committed).length +
-      state.deletedRowIds.length,
-  );
+      deleted.size
+    );
+  });
 }
 
 /**
@@ -55,15 +66,15 @@ function useOpenRowIds(): ReadonlyArray<string> {
 function EditSaveButton() {
   const { edit, labels } = useTMDataGridContext();
   const draftCount = useDraftCount();
-  const isSubmitting = useSelector(edit.store, (state) =>
-    state.openRowIds.some((rowId) => state.rows[rowId]?.isSubmitting === true),
-  );
+  // Save sends the draft store, so its loading state is the save in flight,
+  // not an open row's submit.
+  const isSaving = useSelector(edit.store, (state) => state.isSaving);
 
   return (
     <Button
       size="compact-sm"
       disabled={draftCount === 0}
-      loading={isSubmitting}
+      loading={isSaving}
       data-dg-part="save-all"
       data-draft-count={draftCount}
       onClick={() => void edit.saveDrafts()}
@@ -94,14 +105,14 @@ function EditDiscardButton() {
   const { edit, labels } = useTMDataGridContext();
   // Discard drops everything the grid is holding, open rows included, so it
   // stays live while anything is uncommitted.
-  const pendingCount = useDraftCount() + useOpenCount();
+  const uncommittedCount = useDraftCount() + useOpenCount();
 
   return (
     <Button
       variant="subtle"
       color="gray"
       size="compact-sm"
-      disabled={pendingCount === 0}
+      disabled={uncommittedCount === 0}
       data-dg-part="discard-all"
       onClick={() => edit.cancelAll()}
     >
@@ -139,21 +150,26 @@ export type TMDataGridDraftActionsState = {
    * in display order, so it need not be `openRowIds[0]`.
    */
   openRowIds: ReadonlyArray<string>;
-  /**
-   * @deprecated Was "everything uncommitted", which Save no longer sends.
-   * Reads as `draftCount + openCount`; use whichever you meant.
-   */
-  pendingCount: number;
-  /** Whether a submit is in flight. */
+  /** Whether a submit is in flight - any open row is submitting. */
   isSubmitting: boolean;
+  /** `true` while `saveDrafts` is in flight. */
+  isSaving: boolean;
 };
 
 /** What the edit chrome can do. */
 export type TMDataGridDraftActionsActions = {
-  /** Saves the draft store. Open rows are left alone. */
-  save: () => Promise<boolean>;
-  /** Submits every open row, committing the ones that validate. */
-  commitAll: () => Promise<boolean>;
+  /**
+   * Saves the draft store - `edit.saveDrafts()`. Open rows are left alone.
+   * Resolves which ids were saved, kept in the draft store for the next
+   * save, or reopened with an error; see {@link TMDataGridSaveDraftsResult}.
+   */
+  save: () => Promise<TMDataGridSaveDraftsResult>;
+  /**
+   * Submits every open row, committing the ones that validate -
+   * `edit.commitAll()`. Resolves which rows committed and which are still
+   * open; see {@link TMDataGridCommitAllResult}.
+   */
+  commitAll: () => Promise<TMDataGridCommitAllResult>;
   /** Drops everything - open form state and the draft store alike. */
   discard: () => void;
   /**
@@ -242,6 +258,7 @@ export function TMDataGridDraftActions({
   const isSubmitting = useSelector(edit.store, (state) =>
     state.openRowIds.some((rowId) => state.rows[rowId]?.isSubmitting === true),
   );
+  const isSaving = useSelector(edit.store, (state) => state.isSaving);
 
   if (!features.editing) return null;
 
@@ -251,8 +268,8 @@ export function TMDataGridDraftActions({
         draftCount,
         openCount: openRowIds.length,
         openRowIds,
-        pendingCount: draftCount + openRowIds.length,
         isSubmitting,
+        isSaving,
       },
       actions: {
         save: () => edit.saveDrafts(),

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

@@ -1,6 +1,6 @@
 import { ActionIcon, Group, Loader, Tooltip } from "@mantine/core";
 import { useSelector } from "@tanstack/react-store";
-import type { ColumnDef, Row, RowData } from "@tanstack/react-table";
+import type { Row, RowData } from "@tanstack/react-table";
 import classes from "./TMDataGridTable.module.css";
 import {
   useBodyControlTabIndex,
@@ -65,16 +65,16 @@ function RowStateIndicator({
  * | open | the mode's own controls: Save and Cancel | `editing.mode` |
  * | neither | the pencil (row mode) and the trash | `editing.mode` |
  *
- * A row error turns the Save red with the message in its tooltip - a
- * pathless `.refine()` has nowhere else to land, and a field error outlives
- * the editor that found it. A parked row never offers a save: it has had its
- * submit, and `TMDataGrid.DraftActions` is what sends it.
+ * A row error turns the Save - or an entry row's ✓ - red with the message in
+ * its tooltip: a pathless `.refine()` has nowhere else to land, and a field
+ * error outlives the editor that found it. A parked row never offers a save:
+ * it has had its submit, and `TMDataGrid.DraftActions` is what sends it.
  *
  * The lane's controls take the tab index every body control does - see
  * useBodyControlTabIndex. The open row's save and cancel are the exception,
  * see where they are built.
  */
-function EditLaneCell<TData extends RowData>({
+export function EditLaneCell<TData extends RowData>({
   row,
 }: {
   row: Row<TMDataGridFeatures, TData>;
@@ -186,10 +186,10 @@ function EditLaneCell<TData extends RowData>({
     }
     return (
       <Group gap={0} wrap="nowrap">
-        <Tooltip label={labels.confirmNewRow} withArrow>
+        <Tooltip label={rowError ?? labels.confirmNewRow} withArrow>
           <ActionIcon
             variant="subtle"
-            color="green"
+            color={hasErrors ? "red" : "green"}
             size="sm"
             tabIndex={tabIndex}
             aria-label={labels.confirmNewRow}
@@ -239,7 +239,7 @@ function EditLaneCell<TData extends RowData>({
             data-row-id={rowId}
             onClick={(event) => {
               event.stopPropagation();
-              edit.deleteRow(rowId);
+              edit.restoreRow(rowId);
             }}
           >
             <RestoreIcon size={16} stroke={1.6} />
@@ -339,15 +339,9 @@ function EditLaneCell<TData extends RowData>({
 
   return (
     <Group gap={0} wrap="nowrap">
-      {rowError === null ? (
-        <Tooltip label={labels.saveRow} withArrow>
-          {save}
-        </Tooltip>
-      ) : (
-        <Tooltip label={rowError} withArrow>
-          {save}
-        </Tooltip>
-      )}
+      <Tooltip label={rowError ?? labels.saveRow} withArrow>
+        {save}
+      </Tooltip>
       <Tooltip label={labels.cancelRowEdit} withArrow>
         <ActionIcon
           variant="subtle"
@@ -368,44 +362,3 @@ function EditLaneCell<TData extends RowData>({
     </Group>
   );
 }
-
-/**
- * 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
- * `editing.draft`, mirroring the checkbox lane's build on the left.
- */
-export function createEditColumn<TData extends RowData>(
-  label = "Edit",
-  /** A draft lane holds three controls where the rest hold two. */
-  wide = false,
-): ColumnDef<TMDataGridFeatures, TData, unknown> {
-  const width = wide ? 88 : 64;
-  return {
-    id: EDIT_COLUMN_ID,
-    meta: {
-      label,
-      align: "center",
-      enableOrdering: false,
-    },
-    // 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,
-    cell: ({ row }) => <EditLaneCell row={row} />,
-    // Group rows: same reasoning as the checkbox lane - without this the
-    // cell renders blank on aggregated rows, but here blank is also correct,
-    // so the aggregated cell renders the same (null for groups).
-    aggregatedCell: ({ row }) => <EditLaneCell row={row} />,
-  };
-}

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

@@ -1,10 +1,12 @@
 import {
   flexRender,
   useTable,
+  type Cell,
   type Column,
   type Row,
 } from "@tanstack/react-table";
 import { useSelector } from "@tanstack/react-store";
+import { shallow } from "@tanstack/store";
 import { useLayoutEffect, useMemo, useRef } from "react";
 import classes from "./TMDataGridTable.module.css";
 import sticky from "./sticky.module.css";
@@ -14,7 +16,8 @@ import {
   isColumnEditableForRow,
   isControlColumn,
 } from "../core/columnUtils";
-import type { TMDataGridEditApi } from "../core/editEngine";
+import { draftCellContext } from "../core/draftCellContext";
+import { getEditFieldName, type TMDataGridEditApi } from "../core/editEngine";
 import { focusEditorContent } from "../core/editorFocus";
 import {
   tmDataGridFeatures,
@@ -25,6 +28,8 @@ import { EDIT_COLUMN_ID } from "./TMDataGridEditColumn";
 import type { TMDataGridColumnLayout } from "./TMDataGridTable";
 
 type ErasedColumn = Column<TMDataGridFeatures, TMDataGridRowData, unknown>;
+type EntryRow = Row<TMDataGridFeatures, TMDataGridRowData>;
+type EntryCellApi = Cell<TMDataGridFeatures, TMDataGridRowData, unknown>;
 
 /**
  * Whether an entry cell edits. `edit.canEditCell` asks the main table for
@@ -40,6 +45,115 @@ function isEntryCellEditable(
   return isColumnEditableForRow(column, row);
 }
 
+/**
+ * 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,
+  column,
+  cell,
+  committed,
+  layout,
+  rowHeight,
+  pinnedZ,
+}: {
+  entryRow: EntryRow;
+  column: ErasedColumn;
+  cell: EntryCellApi | undefined;
+  committed: boolean;
+  layout: TMDataGridColumnLayout;
+  rowHeight: number;
+  pinnedZ: string;
+}) {
+  const { edit } = useTMDataGridContext();
+  const fieldName = getEditFieldName(column);
+  const isInvalid = useSelector(edit.store, (state) => {
+    if (fieldName === null) return false;
+    const projection = state.rows[entryRow.id];
+    return projection !== undefined && projection.errorFields.includes(fieldName);
+  });
+  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) || 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
+      // takes no edit answers nothing.
+      onDoubleClick={
+        committed && editable
+          ? () => edit.begin({ rowId: entryRow.id, columnId: column.id })
+          : undefined
+      }
+      className={[
+        classes.entryCell,
+        layout.isBoundary && layout.pinnedAt === "left" ? sticky.stickyLeft : "",
+        layout.isBoundary && layout.pinnedAt === "right"
+          ? sticky.stickyRight
+          : "",
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      style={{
+        minHeight: rowHeight,
+        left: layout.pinnedAt === "left" ? layout.offset : undefined,
+        right: layout.pinnedAt === "right" ? layout.offset : undefined,
+        position: layout.pinnedAt ? "sticky" : undefined,
+        zIndex: layout.pinnedAt ? pinnedZ : undefined,
+      }}
+    >
+      {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 && editable ? (
+        <TMDataGridCellEditor
+          cell={cell}
+          row={entryRow}
+          takeSeedText={() => undefined}
+          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>
+  );
+}
+
 /**
  * The sticky entry block - one row of open editors per `edit.addRow()`,
  * pinned under the header. The one place stickiness is genuinely required:
@@ -66,7 +180,28 @@ export function TMDataGridEntryRows({
   rowHeight: number;
 }) {
   const { table, edit, features } = useTMDataGridContext();
-  const newRows = useSelector(edit.store, (state) => state.newRows);
+  const sticky = features.editNewRowsSticky;
+  // A row being *typed* into is always here - it exists nowhere else to
+  // scroll back to. A committed row is a body row, sorted and filtered with
+  // the rest (the hook feeds it to the table as `data`), unless
+  // `newRowsSticky` keeps it pinned here until the save. Only the rows the
+  // block renders go into its table: after an import `newRows` runs to
+  // thousands, every one of them committed and in the body.
+  const newRows = useSelector(
+    edit.store,
+    (state) =>
+      sticky
+        ? state.newRows
+        : state.newRows.filter((newRow) => !newRow.committed),
+    { compare: shallow },
+  );
+  // What a committed row renders from. It has no form - its values are the
+  // draft store's - and this is the same snapshot the table feeds a
+  // committed row in the body.
+  const committedValues = useSelector(
+    edit.store,
+    (state) => state.committedValues,
+  );
   // The reopen gesture: `begin` on a committed entry row flips it back to
   // editors and names the cell double-clicked - where the caret goes.
   const activeEntry = useSelector(edit.store, (state) =>
@@ -134,21 +269,22 @@ 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, so
-  // there the draft itself is the row; the memo recomputes on every
-  // commit/reopen because either flips `newRows`' identity.
+  // 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
-            ? edit.getForm(tempId)?.state.values
-            : edit.getForm(tempId)?.options.defaultValues) ??
+        ({ tempId }) =>
+          (committedValues[tempId] ??
+            edit.getForm(tempId)?.options.defaultValues ??
             {}) as TMDataGridRowData,
       ),
-    [newRows, edit],
+    [newRows, committedValues, edit],
   );
 
   const entryTable = useTable({
@@ -160,23 +296,12 @@ export function TMDataGridEntryRows({
 
   if (newRows.length === 0) return null;
 
-  const entryRows = entryTable.getCoreRowModel().rows;
+  const stickyRows = entryTable.getCoreRowModel().rows;
   const committedById = new Map(
     newRows.map((newRow) => [newRow.tempId, newRow.committed]),
   );
-  // A row being *typed* into is always here - it exists nowhere else to
-  // scroll back to. A committed row is a body row, sorted and filtered with
-  // the rest (the hook feeds it to the table as `data`), unless
-  // `newRowsSticky` keeps it pinned here until the save.
-  const stickyRows = entryRows.filter(
-    (entryRow) =>
-      features.editNewRowsSticky || committedById.get(entryRow.id) !== true,
-  );
 
-  const renderEntryRow = (
-    entryRow: (typeof entryRows)[number],
-    pinnedZ: string,
-  ) => {
+  const renderEntryRow = (entryRow: EntryRow, pinnedZ: string) => {
     const cellsById = new Map(
       entryRow.getAllCells().map((cell) => [cell.column.id, cell]),
     );
@@ -188,77 +313,24 @@ 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) => {
-          const cell = cellsById.get(column.id);
-          const layout = layoutFor(column.id);
-          const editable =
-            cell !== undefined && isEntryCellEditable(entryRow, column, edit);
-          return (
-            <div
-              key={column.id}
-              role="cell"
-              data-column-id={column.id}
-              data-align={getColumnAlign(column)}
-              data-control-column={isControlColumn(column.id)}
-              // 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 takes no edit answers nothing.
-              onDoubleClick={
-                committed && editable
-                  ? () =>
-                      edit.begin({
-                        rowId: entryRow.id,
-                        columnId: column.id,
-                      })
-                  : undefined
-              }
-              className={[
-                classes.entryCell,
-                layout.isBoundary && layout.pinnedAt === "left"
-                  ? sticky.stickyLeft
-                  : "",
-                layout.isBoundary && layout.pinnedAt === "right"
-                  ? sticky.stickyRight
-                  : "",
-              ]
-                .filter(Boolean)
-                .join(" ")}
-              style={{
-                minHeight: rowHeight,
-                left: layout.pinnedAt === "left" ? layout.offset : undefined,
-                right: layout.pinnedAt === "right" ? layout.offset : undefined,
-                position: layout.pinnedAt ? "sticky" : undefined,
-                zIndex: layout.pinnedAt ? pinnedZ : undefined,
-              }}
-            >
-              {cell !== undefined && 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 memo above
-                // fed this table.
-                <span className={classes.cellContent}>
-                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                </span>
-              ) : editable && cell !== undefined ? (
-                <TMDataGridCellEditor
-                  cell={cell}
-                  row={entryRow}
-                  takeSeedText={() => undefined}
-                  onClose={() => {}}
-                  inEntryBlock
-                />
-              ) : null}
-            </div>
-          );
-        })}
+        {orderedColumns.map((column) => (
+          <EntryCell
+            key={column.id}
+            entryRow={entryRow}
+            column={column}
+            cell={cellsById.get(column.id)}
+            committed={committed}
+            layout={layoutFor(column.id)}
+            rowHeight={rowHeight}
+            pinnedZ={pinnedZ}
+          />
+        ))}
       </div>
     );
   };