@jielga/tmdatagrid 1.0.2 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jielga/tmdatagrid",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "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.0'
 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.0'
 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.0'
 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.0'
 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.0'
 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,13 +81,10 @@ 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
@@ -153,21 +128,15 @@ 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" },
 });
 ```
 
@@ -241,11 +210,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,6 +224,22 @@ 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.
 
+`renderActions` replaces the pair while handing over its pieces:
+
+```tsx
+<TMDataGrid.EditActions
+  renderActions={({ state, Controls }) => (
+    <Group>
+      {state.pendingCount > 0 && <Badge>{state.pendingCount}</Badge>}
+      <Controls.Save />
+      <Controls.Discard />
+    </Group>
+  )}
+/>
+```
+
+`state` is `{ pendingCount, isSubmitting }`, `actions` is `{ save, discard }`.
+
 ## The engine: `edit`
 
 `grid.edit` is public, and everything the chrome does goes through it.
@@ -290,6 +272,20 @@ list, `clearCell`, `deactivate` and the gates included, is in
 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 +446,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

@@ -85,7 +85,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/filtering/SKILL.md

@@ -15,7 +15,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '1.0.2'
+  library_version: '1.1.0'
 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.0'
 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.0'
 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.0'
 sources:
   - 'Jielga/TMDataGrid:src/docs/use-tm-data-grid.md'
   - 'Jielga/TMDataGrid:src/tmdatagrid/useTMDataGrid.tsx'

package/skills/rows/SKILL.md

@@ -6,17 +6,18 @@ description: >
   highlight as state of its own with defaultHighlightedRowId and
   onHighlightedRowChange, showSelectedBackground and --dg-row-selected-bg,
   reading a selection through the table store, onRowClick / onCellClick /
-  onCellDoubleClick / onCellContextMenu, the rowContextMenu render prop and
-  rowContextMenuProps, per-row styling with rowStyle, rowClassName, striped and
-  the --row-bg rule, the row details panel through renderDetails and
-  DETAILS_COLUMN_ID, row pinning with enableRowPinning and row.pin, and the
-  row-number gutter through enableRowNumbers. Load when selecting rows, reacting
-  to a click, opening a detail panel, colouring rows by their data, pinning rows
-  to an edge, or numbering them.
+  onCellDoubleClick / onCellContextMenu, the renderRowContextMenu slot with its
+  internalItems handback, renderColumnMenuItems and rowContextMenuProps, per-row
+  styling with rowStyle, rowClassName, striped and the --row-bg rule, the row
+  details panel through renderDetails and DETAILS_COLUMN_ID, row pinning with
+  enableRowPinning and row.pin, and the row-number gutter through
+  enableRowNumbers. Load when selecting rows, reacting to a click, opening a
+  detail panel, colouring rows by their data, pinning rows to an edge, or
+  numbering them.
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '1.0.2'
+  library_version: '1.1.0'
 sources:
   - 'Jielga/TMDataGrid:src/docs/row-selection.md'
   - 'Jielga/TMDataGrid:src/docs/row-interaction.md'
@@ -117,7 +118,7 @@ not replace selection or the highlight; yours runs in addition.
 | `onRowClick` | `row` | Rows show a pointer cursor when set |
 | `onCellClick` | `{ cell, row, column, event }` | The cell cursor still moves |
 | `onCellDoubleClick` | same | A double-click that opens an editor still does |
-| `onCellContextMenu` | same | `rowContextMenu` still opens |
+| `onCellContextMenu` | same | `renderRowContextMenu` still opens |
 
 ```tsx
 <TMDataGrid.Table<Employee> onRowClick={(row) => open(row.original.id)} />
@@ -127,13 +128,13 @@ Pass the row type, as above, and `row.original` is typed. Group rows sit out all
 four: TanStack builds a group row on top of its first child's record, so a
 handler would receive a real-looking row that is the wrong one.
 
-`rowContextMenu` is a render prop saying what goes inside the menu. The grid
+`renderRowContextMenu` is a slot saying what goes inside the menu. The grid
 owns the Mantine `Menu`, opening it at the pointer and closing it on Escape, an
 outside click, a body scroll and after an item is picked.
 
 ```tsx
 <TMDataGrid.Table<Employee>
-  rowContextMenu={({ table, row, cell }) => (
+  renderRowContextMenu={({ table, row, cell }) => (
     <>
       <Menu.Label>{row.original.firstName}</Menu.Label>
       <Menu.Item onClick={() => open(row.original.id)}>Open</Menu.Item>
@@ -156,6 +157,35 @@ a pure function of its arguments and do the work in the item handlers. Return
 the row with `data-context-menu` while its menu is open, so an action meant for
 a multi-selection reads `table` and falls back to the clicked row.
 
+Under `cellSelection: "range"` the grid has its own items for this menu - copy,
+export, include headers. `internalItems` is those items, and **reading it hands
+the composition over**: place it and the menu is exactly what you returned;
+never mention it and the grid keeps its half above a divider and yours below.
+
+```tsx
+renderRowContextMenu={({ row, internalItems }) => (
+  <>
+    <Menu.Item onClick={() => open(row.id)}>Open</Menu.Item>
+    <Menu.Divider />
+    {internalItems}
+  </>
+)}
+```
+
+`renderColumnMenuItems` is the same idea for a column's menu, and returns an
+array rather than a node:
+
+```tsx
+<TMDataGrid.Table
+  renderColumnMenuItems={({ column, internalItems }) => [
+    ...internalItems,
+    <Menu.Item key="stats" onClick={() => showStats(column.id)}>Stats</Menu.Item>,
+  ]}
+/>
+```
+
+Returning an empty list leaves the column with no menu button at all.
+
 ## Row styling
 
 ```tsx

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

@@ -31,11 +31,12 @@ All are props of `TMDataGrid.Table`, not hook options.
 | `onCellClick` | `(args) => void` | Cell click. `args` is `TMDataGridCellEventArgs`. |
 | `onCellDoubleClick` | `(args) => void` | Cell double-click. |
 | `onCellContextMenu` | `(args) => void` | Cell right-click. |
-| `rowContextMenu` | `({ table, row, cell, close }) => ReactNode` | Contents of the row's context menu. `null` for no menu. |
+| `renderRowContextMenu` | `({ table, row, cell, close, internalItems }) => ReactNode` | Contents of the row's context menu. `null` for no menu. Reading `internalItems` hands the composition over. |
+| `renderColumnMenuItems` | `({ column, table, internalItems }) => ReactNode[]` | Contents of a column's menu. An empty list removes the button. |
 | `rowContextMenuProps` | `MenuProps` | Passed to the Mantine `Menu` untouched apart from its open state. |
 
 `TMDataGridCellEventArgs` is `{ cell, row, column, event }`. The context-menu
-render prop's `cell` is `null` only when a custom cell renderer stopped the
+slot's `cell` is `null` only when a custom cell renderer stopped the
 event. One `Menu` serves the whole body: a closed Mantine `Popover` still runs
 its hooks on every render, and the virtualized body re-renders every scroll
 frame.

package/skills/server-side/SKILL.md

@@ -10,7 +10,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '1.0.2'
+  library_version: '1.1.0'
 sources:
   - 'Jielga/TMDataGrid:src/docs/server-side.md'
   - 'Jielga/TMDataGrid:src/tmdatagrid/useTMDataGrid.tsx'

package/skills/testing/SKILL.md

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