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

package/docs/grouping.md

@@ -56,7 +56,7 @@ grouped columns to the front. Note that the kept column's data cells render as
 TanStack's grouped-cell placeholder - blank - with the value only on group
 rows, so it repeats what the tree lane already shows and cannot be typed into.
 To set the grouped field on a new row, seed it through `edit.addRow(values)` -
-see [Editing](/docs/editing#adding-and-deleting-rows).
+see [Editing](/docs/editing#adding-rows).
 
 ## Aggregation
 

package/docs/styling.md

@@ -50,7 +50,7 @@ The wrapper components - `Toolbar`, `Spacer`, `Footer`, `FilterPanel`, `FilterPi
 | `--dg-row-height` | From `size` | Row height. Prefer `meta.rowHeight` - the virtualizer needs the number. |
 | `--dg-header-height` | From `size` | Header row height |
 | `--dg-summary-height` | From `size` | [Summary row](/docs/summary-row) height |
-| `--dg-entry-height` | From `size` | The sticky [entry block](/docs/editing#adding-and-deleting-rows) |
+| `--dg-entry-height` | From `size` | The sticky [entry block](/docs/editing#adding-rows) |
 | `--dg-font-size` | From `size` | Cell and header font size |
 | `--dg-padding` | From `size` | Horizontal cell padding. The generated lanes are excluded: they are fixed 36px tracks that centre their control. |
 | `--dg-radius` | `--mantine-radius-md` | The frame's corner radius. `0` squares the grid off. The root clips its overflow, so the header and the last row follow it. |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jielga/tmdatagrid",
-  "version": "2.0.0-beta.21",
+  "version": "2.0.0-beta.22",
   "description": "A React data grid built on TanStack Table v9 and Mantine - always virtualized, with resizable, reorderable, sortable, filterable, hideable and pinnable columns.",
   "license": "MIT",
   "type": "module",

package/skills/appearance/SKILL.md

@@ -18,7 +18,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '2.0.0-beta.21'
+  library_version: '2.0.0-beta.22'
 sources:
   - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/styling.md'
   - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/toolbar.md'

package/skills/cell-selection/SKILL.md

@@ -14,7 +14,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '2.0.0-beta.21'
+  library_version: '2.0.0-beta.22'
 sources:
   - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/cell-selection.md'
   - 'Jielga/TMDataGrid:packages/tmdatagrid/src/core/cellNavigation.ts'

package/skills/columns/SKILL.md

@@ -16,7 +16,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '2.0.0-beta.21'
+  library_version: '2.0.0-beta.22'
 sources:
   - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/columns.md'
   - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/column-layout.md'

package/skills/data/SKILL.md

@@ -18,7 +18,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '2.0.0-beta.21'
+  library_version: '2.0.0-beta.22'
 sources:
   - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/pagination.md'
   - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/scrolling.md'

package/skills/editing/SKILL.md

@@ -18,7 +18,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '2.0.0-beta.21'
+  library_version: '2.0.0-beta.22'
 sources:
   - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/editing.md'
   - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/query-builder.md'
@@ -385,8 +385,9 @@ row it reaches.
 `deleteRow`, `getForm`, and `store` for `useSelector` (an example is under
 [Submitting an outer form](#high-submitting-an-outer-form-while-the-grid-holds-a-draft)).
 `edit.store` publishes each open or committed row's drafted values as
-`rows[rowId].values`, which is what a computed cell or a cross-row check reads
-- `useTMDataGridContext()` reaches the engine from inside a cell renderer.
+`rows[rowId].values`, which is what a cross-row check reads. A `cell`
+renderer needs no lookup: its `row.original` is already the row as shown, and
+`getRowValues(rowId)` is the same row for a handler with no cell context.
 Every member with its signature, the gates, `isColumnEditable`, `deactivate`,
 and the `edit.store` shape are in
 [references/editing-api.md](references/editing-api.md#the-edit-engine).

package/skills/editing/references/common-mistakes.md

@@ -187,24 +187,23 @@ A refused value leaves the row open carrying its errors and the call resolves `f
 
 Source: `packages/tmdatagrid/src/core/editEngine.ts` (`begin`, `writeFields`).
 
-## MEDIUM A computed column frozen while a row is edited
+## MEDIUM Reading an open row's values off `row.original` outside a cell
 
-A held draft is displayed by the column that owns the field. A column computed
-from other fields - `accessorFn` or `display` - reads `row.original`, which is
-`data`, so it keeps showing the saved record while the values it derives from
-are being typed.
+Inside a `cell` renderer, `row.original` and `getValue()` are the row as
+shown: the open form's values while the row is edited, the committed draft
+after ✓, and `data` otherwise - a computed column follows the draft as it is
+typed, and a button in a cell sends the draft the user sees. Outside it, the
+row callbacks (`onRowClick`, `renderRowContextMenu`, `rowClassName`) and any
+code holding a row id see `data`, or the committed draft, and never an open
+form's values.
 
-Correct: read the drafted row from `edit.store` inside the cell renderer:
+Correct: reach the row as shown by id:
 
 ```tsx
-function useDraftedRow(rowId: string, original: Product): Product {
-  const { edit } = useTMDataGridContext();
-  const values = useSelector(edit.store, (state) => state.rows[rowId]?.values);
-  return (values as Product | undefined) ?? original;
-}
+const shown = grid.edit.getRowValues(row.id) ?? row.original;
 ```
 
-Source: `packages/tmdatagrid/docs/editing.md` (Draft lifetime).
+Source: `packages/tmdatagrid/docs/editing.md` (How a draft renders).
 
 ## MEDIUM Reading a commit's result as the saved value
 

package/skills/editing/references/editing-api.md

@@ -72,6 +72,8 @@ path, which may be dotted.
 | `isColumnEditable` | `(column) => boolean` | The column's half alone, with no row in hand: it maps to a field, `editing.columns` lists it when that is set, and `meta.edit.enabled` is not `false`. |
 | `canDeleteRows` | `() => boolean` | Whether the delete control should be shown. |
 | `getForm` | `(rowId) => TMDataGridRowEditForm \| undefined` | The open row's live `FormApi`; `undefined` for a committed row. |
+| `getRowValues` | `(rowId) => TData \| undefined` | The row as shown: the open form's values, else the committed draft, else the `data` value. `undefined` for an unknown row. |
+| `getRows` | `() => ReadonlyArray<TMDataGridEditRowSnapshot>` | Every row as shown, from the core row model: drafts overlaid, entry rows appended, deletion-marked rows included and flagged `deleted`. |
 | `state` | `TMDataGridEditState` | Snapshot, for reads outside React. |
 | `store` | `Store<TMDataGridEditState>` | For `useSelector`. |
 

package/skills/filtering/SKILL.md

@@ -18,7 +18,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '2.0.0-beta.21'
+  library_version: '2.0.0-beta.22'
 sources:
   - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/filtering.md'
   - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/quick-search.md'

package/skills/getting-started/SKILL.md

@@ -11,7 +11,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '2.0.0-beta.21'
+  library_version: '2.0.0-beta.22'
 sources:
   - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/getting-started.md'
   - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/anatomy.md'

package/skills/grouping/SKILL.md

@@ -14,7 +14,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '2.0.0-beta.21'
+  library_version: '2.0.0-beta.22'
 sources:
   - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/grouping.md'
   - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/summary-row.md'

package/skills/options/SKILL.md

@@ -14,7 +14,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '2.0.0-beta.21'
+  library_version: '2.0.0-beta.22'
 sources:
   - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/use-tm-data-grid.md'
   - 'Jielga/TMDataGrid:packages/tmdatagrid/src/useTMDataGrid.tsx'

package/skills/rows/SKILL.md

@@ -17,7 +17,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '2.0.0-beta.21'
+  library_version: '2.0.0-beta.22'
 sources:
   - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/row-selection.md'
   - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/row-interaction.md'

package/skills/server-side/SKILL.md

@@ -15,7 +15,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '2.0.0-beta.21'
+  library_version: '2.0.0-beta.22'
 sources:
   - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/server-side.md'
   - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/server-query.md'

package/skills/testing/SKILL.md

@@ -11,7 +11,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '2.0.0-beta.21'
+  library_version: '2.0.0-beta.22'
 sources:
   - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/testing.md'
   - 'Jielga/TMDataGrid:packages/tmdatagrid/src/components/TMDataGrid.tsx'

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,6 +78,16 @@ 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"
@@ -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],