@jielga/tmdatagrid 1.0.2 → 1.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jielga/tmdatagrid",
-  "version": "1.0.2",
+  "version": "1.1.1",
   "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

@@ -16,7 +16,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '1.0.2'
+  library_version: '1.1.1'
 sources:
   - 'Jielga/TMDataGrid:src/docs/styling.md'
   - 'Jielga/TMDataGrid:src/docs/toolbar.md'

package/skills/cell-selection/SKILL.md

@@ -14,7 +14,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '1.0.2'
+  library_version: '1.1.1'
 sources:
   - 'Jielga/TMDataGrid:src/docs/cell-selection.md'
   - 'Jielga/TMDataGrid:src/tmdatagrid/core/cellNavigation.ts'
@@ -125,7 +125,7 @@ Excel's own copy carries no header row either.
 
 Right-clicking inside the selection opens Copy, "Export as CSV for Excel" and an
 "Include headers" toggle. A right-click outside it moves the selection there
-first, the way a spreadsheet does. Your own `rowContextMenu` items are appended
+first, the way a spreadsheet does. Your own `renderRowContextMenu` items are appended
 below a divider, so nothing is lost by turning cell selection on.
 
 The CSV is written for a Nordic Excel: a `sep=;` first line, a UTF-8 BOM, CRLF
@@ -236,5 +236,5 @@ Source: `src/docs/cell-selection.md` (Copy and export).
 | `data-edge-top` · `-bottom` · `-left` · `-right` | Data attributes | – | – | On cells at the rectangle's border. |
 
 See also: the `editing` skill, which turns this on implicitly and takes over
-Enter and F2, and the `rows` skill for `rowContextMenu`, whose items are
-appended below the copy and export ones.
+Enter and F2, and the `rows` skill for `renderRowContextMenu`, whose
+`internalItems` are exactly the copy and export items described here.

package/skills/columns/SKILL.md

@@ -15,7 +15,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '1.0.2'
+  library_version: '1.1.1'
 sources:
   - 'Jielga/TMDataGrid:src/docs/columns.md'
   - 'Jielga/TMDataGrid:src/docs/column-layout.md'

package/skills/data/SKILL.md

@@ -3,19 +3,19 @@ name: data
 description: >
   How a TMDataGrid presents the rows it has: pagination, virtualization, and
   having nothing to show. Covers the three pagination modes (off,
-  enablePagination, manualPagination), the Footer's pagination render prop and
-  getTMDataGridPaginationApi, isPagingActive versus canPaginate, always-on
-  virtualization with overscan and meta.rowHeight, scrollToRow and scrollerRef,
-  the edge callbacks onScrollToBottom / onScrollToRight and why onReachEnd is
-  better for loading more, the header and pinned-lane depth shadows, and the
-  four empty states in precedence order with meta.loading, renderEmptyState,
-  hasActiveFilters, TMDataGrid.LoadingIndicator and TMDataGrid.SummaryCount.
-  Load when adding a pager, tuning scrolling, scrolling to a row, or deciding
-  what an empty grid should say.
+  enablePagination, manualPagination), the Footer's renderPagination slot over {
+  state, actions, Controls }, getTMDataGridPaginationApi, isPagingActive versus
+  canPaginate, always-on virtualization with overscan and meta.rowHeight,
+  scrollToRow and scrollerRef, the edge callbacks onScrollToBottom /
+  onScrollToRight and why onReachEnd is better for loading more, the header and
+  pinned-lane depth shadows, and the four empty states in precedence order with
+  meta.loading, renderEmptyState, hasActiveFilters, TMDataGrid.LoadingIndicator
+  and TMDataGrid.SummaryCount. Load when adding a pager, tuning scrolling,
+  scrolling to a row, or deciding what an empty grid should say.
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '1.0.2'
+  library_version: '1.1.1'
 sources:
   - 'Jielga/TMDataGrid:src/docs/pagination.md'
   - 'Jielga/TMDataGrid:src/docs/scrolling.md'
@@ -53,28 +53,39 @@ Initial page size is 25, through `initialState.pagination`. `enablePagination`
 is one of the two switches the grid defines itself, and the one switch that
 defaults to off.
 
-`TMDataGrid.Footer` takes a `pagination` render prop handed the same API the
-built-in pager is built on, and `getTMDataGridPaginationApi(table)` returns that
-object outside the Footer:
+`TMDataGrid.Footer` takes a `renderPagination` slot handed three things: the
+`state` the pager shows, the `actions` it can take, and `Controls` - the
+built-in pieces, already wired.
 
 ```tsx
 <TMDataGrid.Footer
-  pagination={(api) => (
+  renderPagination={({ state, actions, Controls }) => (
     <Group>
-      <Button onClick={api.previousPage} disabled={!api.canPreviousPage}>
+      <Controls.PageSize />
+      <Button onClick={actions.previousPage} disabled={!state.canPreviousPage}>
         Back
       </Button>
       <Text>
-        {api.pageIndex + 1} / {api.pageCount}
+        {state.pageIndex + 1} / {state.pageCount}
       </Text>
-      <Button onClick={api.nextPage} disabled={!api.canNextPage}>
-        Next
-      </Button>
+      <Controls.Pager />
     </Group>
   )}
 />
 ```
 
+`Controls.PageSize`, `Controls.Range` and `Controls.Pager` are exactly what the
+default footer renders, in that order - so a custom layout keeps the parts it
+likes rather than rebuilding them to look the same, greying out under a
+suspended pager included.
+
+`state` carries `pageIndex`, `pageSize`, `pageCount`, `rowCount`,
+`canPreviousPage`, `canNextPage`, `from`, `to` and `isPagingActive`. `actions`
+carries `setPageIndex`, `setPageSize`, `previousPage`, `nextPage`, `firstPage`
+and `lastPage`. `getTMDataGridPaginationApi(table)` returns the same
+`{ state, actions }` outside the Footer; `Controls` are bound to the grid
+context, so they exist only inside the slot.
+
 Grouping suspends the pager and wins: it greys out and the range becomes
 `Grouped · all N rows`. `isPagingActive(table, features)` is the live state -
 whether the pager is slicing anything right now - while
@@ -268,7 +279,9 @@ Source: `src/docs/pagination.md` (Grouping suspends it).
 | `initialState.pagination` | Table option | `{ pageIndex, pageSize }` | `{ 0, 25 }` | Where paging starts. A `data` slice, so it persists. |
 | `onPaginationChange` | Table option | `OnChangeFn` | – | Controls the pagination state. |
 | `TMDataGrid.Footer` | Component | `pageSizeOptions`, `pagination` | `[10, 25, 50, 100]` | The footer bar. Renders nothing when paging is off. |
-| `getTMDataGridPaginationApi` | Export | `(table) => TMDataGridPaginationApi` | – | The pager API, outside the Footer. |
+| `Footer` `renderPagination` | Slot | `({ state, actions, Controls }) => ReactNode` | Built-in pager | Replaces the pager, and hands over its pieces. |
+| `getTMDataGridPaginationApi` | Export | `(table) => { state, actions }` | – | The pager API, outside the Footer. |
+| `TMDataGridPaginationState` · `TMDataGridPaginationActions` · `TMDataGridPaginationControls` | Exports | types | – | The three halves of the slot argument. |
 | `isPagingActive` | Export | `(table, features) => boolean` | – | Whether the pager is slicing anything right now. |
 | `overscan` | Option | `number` | `6` | Rows kept mounted beyond each edge of the viewport. |
 | `meta.rowHeight` | Option | `number` | From `size` | Row height in pixels. The virtualizer needs a number. |

package/skills/editing/SKILL.md

@@ -8,16 +8,18 @@ description: >
   meta.type, custom editors through meta.editor, field validation with
   meta.validate and cross-field rules with rowValidators (Standard Schema and
   Zod), adding and deleting rows with edit.addRow, newRowDefaults, onRowAdd,
-  onRowDelete, the generated edit lane, TMDataGrid.EditActions, and the public
-  edit engine (begin, commit, cancel, submitAll, getForm, store). Load when
-  making a grid editable, choosing an edit mode, wiring a save, writing a cell
-  editor, validating an edit, or when cells will not open for editing.
+  onRowDelete, the generated edit lane, TMDataGrid.EditActions with its
+  renderActions slot, and the public edit engine (begin, commit, cancel,
+  submitAll, getForm, store). Load when making a grid editable, choosing an edit
+  mode, wiring a save, writing a cell editor, validating an edit, or when cells
+  will not open for editing.
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '1.0.2'
+  library_version: '1.1.1'
 sources:
   - 'Jielga/TMDataGrid:src/docs/editing.md'
+  - 'Jielga/TMDataGrid:src/docs/query-builder.md'
   - 'Jielga/TMDataGrid:src/docs/editors.md'
   - 'Jielga/TMDataGrid:src/tmdatagrid/core/editEngine.ts'
   - 'Jielga/TMDataGrid:src/tmdatagrid/useTMDataGrid.tsx'
@@ -41,50 +43,26 @@ every wiring question below:
 ## Setup
 
 ```tsx
-import { useState } from "react";
-import {
-  createTMDataGridColumnHelper,
-  TMDataGrid,
-  useTMDataGrid,
-} from "@jielga/tmdatagrid";
-
-type Employee = { id: number; firstName: string; salary: number };
-
-const columnHelper = createTMDataGridColumnHelper<Employee>();
-
-const columns = columnHelper.columns([
-  columnHelper.accessor("firstName", { header: "First name", minSize: 140 }),
-  columnHelper.accessor("salary", {
-    header: "Salary",
-    minSize: 130,
-    meta: { type: "number", align: "right" },
-  }),
-]);
-
-export function Employees({ initial }: { initial: Array<Employee> }) {
-  const [employees, setEmployees] = useState(initial);
-
-  const grid = useTMDataGrid({
-    data: employees,
-    columns,
-    getRowId: (row) => String(row.id),
-    editMode: "cell",
-    // The grid writes nothing: apply the change, and the edited row arrives
-    // back through `data`.
-    onEditCommit: ({ rowId, value }) =>
-      setEmployees((previous) =>
-        previous.map((employee) =>
-          String(employee.id) === rowId ? value : employee,
-        ),
+const [employees, setEmployees] = useState(initial);
+
+const grid = useTMDataGrid({
+  data: employees,
+  columns,
+  getRowId: (row) => String(row.id),
+  editMode: "cell",
+  // The grid writes nothing: apply the change, and the edited row arrives
+  // back through `data`.
+  onEditCommit: ({ rowId, value }) =>
+    setEmployees((previous) =>
+      previous.map((employee) =>
+        String(employee.id) === rowId ? value : employee,
       ),
-  });
+    ),
+});
 
-  return (
-    <TMDataGrid {...grid} style={{ flex: 1, minHeight: 0 }}>
-      <TMDataGrid.Table<Employee> />
-    </TMDataGrid>
-  );
-}
+<TMDataGrid {...grid} style={{ flex: 1, minHeight: 0 }}>
+  <TMDataGrid.Table<Employee> />
+</TMDataGrid>;
 ```
 
 The editing options travel together, and the types say so: passing any of them
@@ -103,19 +81,23 @@ One axis, four policies over the same engine.
 | `"row"` | Save in the edit lane, or Ctrl+Enter | Cancel, or Escape | generated edit lane |
 | `"batch"` | `edit.submitAll()` | `edit.cancelAll()` | `TMDataGrid.EditActions` |
 
-Which to pick:
-
-- One field at a time, saved as you go, spreadsheet feel: `"cell"`.
-- The same, but every commit costs a request you do not want fired by a stray
-  click: `"cellConfirm"`.
-- The row is the unit of the save, or a rule spans two columns: `"row"`.
-- Many edits reviewed and sent as one transaction: `"batch"`.
+Which to pick: `"cell"` for saved-as-you-go spreadsheet feel; `"cellConfirm"`
+when a stray click must not fire a request; `"row"` when the row is the unit of
+the save or a rule spans two columns; `"batch"` for many edits sent as one
+transaction.
 
 An editor opens on double-click, or with the cell cursor on the cell: Enter, F2,
 or just typing, where the character replaces the value. Delete or Backspace
 clears the value and commits without opening an editor. Editing brings cell
 selection with it: `cellSelection` defaults to `"single"` while `editMode` is
-set.
+set. Every open gesture puts the caret in the cell it named, and the grid places
+it rather than the editor - a `meta.editor` needs no `autoFocus` wiring.
+
+Under `"row"` the pencil - or a double-click on any cell, which puts the caret
+in the cell clicked - opens every editable cell of the row, and ✓ saves them as
+one commit. Rows accumulate: opening a second row leaves the first open, and
+each row's ✓ and ✕ act on that row alone, so no row is closed or saved to make
+space for the next.
 
 Under `"batch"` nothing leaves the grid until `submitAll`. Enter and Tab park
 the draft, dirty-marked, Escape drops that one draft, and drafts accumulate
@@ -153,37 +135,25 @@ Group rows and the generated lanes (checkbox, row number, details, edit) never
 edit.
 
 ```tsx
-// Computed column: writes back to a real field.
+// Computed column writing back to a real field, and per-row gating.
 columnHelper.accessor((row) => `${row.firstName} ${row.lastName}`, {
   id: "fullName",
   header: "Full name",
   meta: { label: "Full name", editField: "lastName" },
 });
-
-// Editable only while the employee is active.
 columnHelper.accessor("salary", {
   header: "Salary",
-  meta: {
-    type: "number",
-    align: "right",
-    editable: (row) => row.original.status !== "Terminated",
-  },
+  meta: { editable: (row) => row.original.status !== "Terminated" },
 });
 ```
 
 ## Editors and validation
 
-`meta.type` picks the editor, and `meta.options` feeds the select editors from
-the same declaration the filter panel reads.
-
-| `meta.type` | Editor |
-| --- | --- |
-| `"string"` (default) | Text input |
-| `"number"` | Number input |
-| `"boolean"` | Checkbox |
-| `"date"` | Native `<input type="date">`, ISO `YYYY-MM-DD` |
-| `"select"` | Searchable select from `meta.options`; commits on pick under `"cell"` |
-| `"multiSelect"` | Multi-select, same source |
+`meta.type` picks the editor - `"string"` (the default), `"number"`,
+`"boolean"`, `"date"`, `"select"` and `"multiSelect"` - and `meta.options` feeds
+the two select editors from the same declaration the filter panel reads. Each
+one, with the export that wraps it, is in
+[references/editors-and-validation.md](references/editors-and-validation.md#the-built-in-editors).
 
 `meta.editor` replaces one, `meta.validate` guards the field, and
 `rowValidators` carries cross-field rules. The validators are TanStack Form's
@@ -241,11 +211,8 @@ const grid = useTMDataGrid({
 the immediate modes, so a confirmation belongs inside that callback. Under batch
 it toggles a mark instead: the row renders struck through and inert
 (`data-deleted`), the lane's trash becomes a restore, and `submitAll` reports
-the ids in `deleted`.
-
-Adds and deletes are applied by you, the same as edits. The engine's `tempId`
-(`__new__1`, `__new__2`, …) never needs to become a real id: mint one when you
-create the record.
+the ids in `deleted`. Adds and deletes are applied by you, the same as edits -
+the engine's `tempId` (`__new__1`, …) never needs to become a real id.
 
 ## The chrome
 
@@ -258,19 +225,29 @@ chrome at all by design.
 out while nothing is pending, spins while a submit is in flight, renders nothing
 while editing is off, and works under any mode, not only batch.
 
-## The engine: `edit`
+`renderActions` replaces the pair while handing over its pieces:
 
-`grid.edit` is public, and everything the chrome does goes through it.
+```tsx
+<TMDataGrid.EditActions
+  renderActions={({ state, Controls }) => (
+    <Group>
+      {state.pendingCount > 0 && <Badge>{state.pendingCount}</Badge>}
+      <Controls.Save />
+      <Controls.Discard />
+    </Group>
+  )}
+/>
+```
 
-| Member | Does |
-| --- | --- |
-| `edit.begin({ rowId, columnId })` | Opens an editor. `columnId: null` opens the whole row |
-| `edit.commit(rowId)` | Commits one row. `Promise<boolean>`, `false` when blocked |
-| `edit.cancel(rowId)` / `edit.cancelAll()` | Drops one draft, or every draft |
-| `edit.submitAll()` | Commits every open row. `Promise<boolean>` |
-| `edit.addRow()` / `edit.deleteRow(rowId)` | Rows in and out |
-| `edit.getForm(rowId)` | The row's live TanStack Form `FormApi` |
-| `edit.store` | The projection store, for `useSelector` |
+`state` is `{ pendingCount, isSubmitting }`, `actions` is `{ save, discard }`.
+
+## The engine: `edit`
+
+`grid.edit` is public, and everything the chrome does goes through it:
+`begin` and `commit`, `cancel` / `cancelAll`, `submitAll`, `addRow` /
+`deleteRow`, `getForm`, and `store` for `useSelector`. Every member with its
+signature, the gates, `clearCell`, `deactivate`, and the `edit.store` shape are
+in [references/editing-api.md](references/editing-api.md#the-edit-engine).
 
 ```tsx
 import { useSelector } from "@tanstack/react-store";
@@ -281,15 +258,24 @@ const pendingCount = useSelector(
 );
 ```
 
-`edit.store` holds `active`, `openRowIds`, `rows` (per row `dirtyFields`,
-`errorFields`, `isSubmitting`), `newRows` and `deletedRowIds`. The full member
-list, `clearCell`, `deactivate` and the gates included, is in
-[references/editing-api.md](references/editing-api.md).
-
 `getForm` is the *one row, one form* promise made public: render that same form
 in a drawer and it shares values, dirty state and errors with the inline cells,
 because it is the same `FormApi`.
 
+## Inside an outer form
+
+A `@tanstack/react-form` form can own the row array, with the grid as a
+controlled field: `data` from `field.state.value`, and `onEditCommit` /
+`onRowAdd` / `onRowDelete` composing the next array into `field.handleChange`.
+Use `editMode: "row"` so a row reaches the form on approval, map by row id
+(never index), and mint negative ids for new rows.
+
+The validation split is structural, not stylistic: **a rule decidable from one
+row belongs to the grid (`meta.validate`, `rowValidators`); a rule needing the
+other rows or the collection ("has rows", "no duplicates") belongs to the
+form's field validator.** A row's form cannot see the array, and `edit.store`
+publishes field names, never values, so the form cannot see a draft.
+
 ## Common mistakes
 
 ### CRITICAL Expecting the grid to write into `data`
@@ -450,20 +436,31 @@ onEditCommit: async ({ rowId, changes }) => {
 
 Source: `src/tmdatagrid/useTMDataGrid.tsx` (`onEditCommit`).
 
-### MEDIUM Reading a commit's result as the saved value
+### HIGH Submitting an outer form while the grid holds a draft
 
-`edit.commit(rowId)` and `edit.submitAll()` resolve to a `boolean` saying
-whether the form closed, and resolve `false` when validation or a rejected save
-kept it open. Ignoring the result reports a save that did not happen.
+The outer form's array contains only committed rows. Under any mode a mid-edit
+row is invisible to it, and under `"batch"` *every* edit is until
+`submitAll()` - so a form submit saves stale rows and collection rules pass
+over pending values.
 
-Wrong:
+Correct:
 
 ```tsx
-await grid.edit.submitAll();
-notifications.show({ message: "Saved" });
+const hasOpenDraft = useSelector(grid.edit.store, (s) => s.openRowIds.length > 0);
+
+<Button type="submit" disabled={!canSubmit || hasOpenDraft}>Save</Button>
+// or flush instead of blocking:
+const flushed = await grid.edit.submitAll();
+if (flushed) await form.handleSubmit();
 ```
 
-Correct:
+Source: `src/docs/query-builder.md` (Which mode, Submitting).
+
+### MEDIUM Reading a commit's result as the saved value
+
+`edit.commit(rowId)` and `edit.submitAll()` resolve to a `boolean` saying
+whether the form closed, and resolve `false` when validation or a rejected save
+kept it open. Ignoring the result reports a save that did not happen.
 
 ```tsx
 const saved = await grid.edit.submitAll();

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

@@ -46,7 +46,7 @@ path, which may be dotted.
 
 | Member | Signature | Notes |
 | --- | --- | --- |
-| `begin` | `({ rowId, columnId }) => void` | `columnId: null` opens the whole row (row mode). |
+| `begin` | `({ rowId, columnId }) => void` | Row mode opens the whole row either way; `columnId` says which cell takes the caret, `null` (the pencil) its first editable one. |
 | `commit` | `(rowId) => Promise<boolean>` | `false` keeps the form open with its errors. |
 | `cancel` | `(rowId) => void` | Drops one draft. |
 | `cancelAll` | `() => void` | Drops every draft. |
@@ -66,7 +66,10 @@ path, which may be dotted.
 
 ```ts
 type TMDataGridEditState = {
+  // The cell the last open gesture named - where the caret goes.
   active: { rowId: string; columnId: string | null } | null;
+  // Rows with a live form. One under `"cell"`; as many as the user opened
+  // under `"row"`, `"cellConfirm"` and `"batch"` - which rows are editing.
   openRowIds: ReadonlyArray<string>;
   rows: Record<
     string,
@@ -85,7 +88,7 @@ type TMDataGridEditState = {
 
 | Name | Kind | What it is |
 | --- | --- | --- |
-| `TMDataGrid.EditActions` | Component | Save with the pending count, and Discard. Any mode; renders nothing while editing is off. |
+| `TMDataGrid.EditActions` | Component | Save with the pending count, and Discard. Any mode; renders nothing while editing is off. Takes `renderActions` over `{ state, actions, Controls }`. |
 | `TMDataGridEditActions` | Export | The same component, for use outside the namespace. |
 | `EDIT_COLUMN_ID` | Export | `"__edit__"`, the generated edit lane's id. |
 | `clearedValueForType` | Export | `(type) => unknown` - what Delete writes per column type. |

package/skills/editing/references/editors-and-validation.md

@@ -43,11 +43,17 @@ type TMDataGridEditorArgs = {
   commit: () => Promise<boolean>; // what Enter would do
   cancel: () => void; // what Escape would do
   size: TMDataGridSize;
-  autoFocus: boolean; // take focus on mount
+  autoFocus: boolean; // deprecated - the grid places the caret itself
   seedText?: string; // set when typing opened the editor
 };
 ```
 
+The grid places the caret itself, once per open gesture: it focuses
+`data-dg-part="editor-input"` when the editor publishes it, and the first
+focusable element inside the editor otherwise. So a custom editor gets the caret
+without honouring `autoFocus` - set `editor-input` only to name which of several
+inputs should take it.
+
 Bind any control to `field` exactly as inside any TanStack Form:
 `field.state.value`, `field.state.meta.errors`, `field.handleChange`,
 `field.handleBlur`.

package/skills/filtering/SKILL.md

@@ -15,7 +15,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '1.0.2'
+  library_version: '1.1.1'
 sources:
   - 'Jielga/TMDataGrid:src/docs/filtering.md'
   - 'Jielga/TMDataGrid:src/docs/quick-search.md'

package/skills/getting-started/SKILL.md

@@ -11,7 +11,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '1.0.2'
+  library_version: '1.1.1'
 sources:
   - 'Jielga/TMDataGrid:src/docs/getting-started.md'
   - 'Jielga/TMDataGrid:src/docs/anatomy.md'
@@ -149,14 +149,14 @@ flex column.
 | Component | Props | Notes |
 | --- | --- | --- |
 | `TMDataGrid` | `table`, `ui`, `features`, `size`, `className`, `style` | Root. Provides context. `style` also takes CSS variables: `--dg-row-selected-bg`, `--dg-row-height`, `--dg-header-height`, `--dg-font-size`, `--dg-padding`. |
-| `TMDataGrid.Table` | `onRowClick(row)`, `rowContextMenu` render prop, `rowContextMenuProps` | Header, virtualized body, filter panel. `onRowClick` runs in addition to selection under `selectionMode: "row"`. |
+| `TMDataGrid.Table` | `onRowClick(row)`, `renderRowContextMenu`, `renderColumnMenuItems`, `rowContextMenuProps` | Header, virtualized body, filter panel. `onRowClick` runs in addition to selection under `selectionMode: "row"`. |
 | `TMDataGrid.Footer` | `pageSizeOptions` (default `[10, 25, 50, 100]`), `pagination` render prop | Pagination controls. Renders nothing unless pagination is enabled. |
 | `TMDataGrid.Toolbar` | `children` | Flex row above the grid. |
 | `TMDataGrid.Spacer` | - | Pushes later toolbar items right. |
 | `TMDataGrid.SummaryCount` | `children` | Visible rows out of total. |
 | `TMDataGrid.Search` | `placeholder`, `debounce` (default `250`), `w` (default `220`) | Quick search over every column, debounced into `globalFilter`. Renders nothing under `enableGlobalFilter: false`. |
 | `TMDataGrid.LoadingIndicator` | - | Small spinner while `meta.loading` is `true` and rows stay on screen. |
-| `TMDataGrid.EditActions` | - | Save with the pending count, and Discard. Renders nothing while editing is off - see the `editing` skill. |
+| `TMDataGrid.EditActions` | `renderActions` | Save with the pending count, and Discard. Renders nothing while editing is off - see the `editing` skill. |
 | `TMDataGrid.FilterButton` | - | Toggles filter panel. Renders nothing if no column is filterable. |
 | `TMDataGrid.ColumnsButton` | - | Opens column manager. Renders nothing if no column is hideable. |
 | `TMDataGrid.FilterPanel` | - | Rendered by `.Table`; exported for custom layouts. Header close button, Escape, click-away, "Add filter" and "Clear all". |
@@ -169,14 +169,14 @@ Pass the row type so `onRowClick` stays typed:
 <TMDataGrid.Table<Employee> onRowClick={(row) => open(row.original.id)} />
 ```
 
-`rowContextMenu` fills the dropdown of a Mantine `Menu` the grid opens at the
+`renderRowContextMenu` fills the dropdown of a Mantine `Menu` the grid opens at the
 pointer on a right-click (or a long press). The grid owns the `Menu` - opening,
 positioning, and closing on Escape, outside click, body scroll or an item pick -
 so the render prop only says what goes in it:
 
 ```tsx
 <TMDataGrid.Table<Employee>
-  rowContextMenu={({ table, row, cell, close }) => (
+  renderRowContextMenu={({ table, row, cell, close }) => (
     <>
       <Menu.Label>{row.original.firstName}</Menu.Label>
       <Menu.Item onClick={() => open(row.original.id)}>Open</Menu.Item>
@@ -204,25 +204,31 @@ highlight; the row carries `data-context-menu` while its menu is open. Pass
 `options.rowCount`. `TMDataGrid.SummaryCount` uses `meta.totalRowCount` when
 provided, otherwise the pre-filtered row count.
 
-The Footer's `pagination` render prop replaces the built-in pager with your own
-UI, fed by the distilled pagination API:
+The Footer's `renderPagination` slot replaces the built-in pager, and hands
+over the pieces of it - `state`, `actions`, and `Controls` as the built-in
+parts:
 
 ```tsx
 <TMDataGrid.Footer
-  pagination={(api) => (
-    <Pagination
-      total={api.pageCount}
-      value={api.pageIndex + 1}
-      onChange={(page) => api.setPageIndex(page - 1)}
-    />
+  renderPagination={({ state, actions, Controls }) => (
+    <>
+      <Controls.PageSize />
+      <Pagination
+        total={state.pageCount}
+        value={state.pageIndex + 1}
+        onChange={(page) => actions.setPageIndex(page - 1)}
+      />
+    </>
   )}
 />
 ```
 
-`TMDataGridPaginationApi` carries `pageIndex`, `pageSize`, `pageCount`,
-`rowCount`, `canPreviousPage`, `canNextPage` and the actions `setPageIndex`,
-`setPageSize`, `previousPage`, `nextPage`, `firstPage`, `lastPage`. Outside the
-Footer, `getTMDataGridPaginationApi(grid.table)` returns the same object.
+`state` carries `pageIndex`, `pageSize`, `pageCount`, `rowCount`,
+`canPreviousPage`, `canNextPage`, `from`, `to` and `isPagingActive`; `actions`
+carries `setPageIndex`, `setPageSize`, `previousPage`, `nextPage`, `firstPage`
+and `lastPage`. Outside the Footer,
+`getTMDataGridPaginationApi(grid.table)` returns the same `{ state, actions }`.
+See the `data` skill.
 
 ## size
 

package/skills/grouping/SKILL.md

@@ -14,7 +14,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '1.0.2'
+  library_version: '1.1.1'
 sources:
   - 'Jielga/TMDataGrid:src/docs/grouping.md'
   - 'Jielga/TMDataGrid:src/docs/summary-row.md'

package/skills/options/SKILL.md

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