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

package/skills/rows/SKILL.md

@@ -17,14 +17,14 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '2.0.0-beta.2'
+  library_version: '2.0.0-beta.21'
 sources:
-  - 'Jielga/TMDataGrid:src/docs/row-selection.md'
-  - 'Jielga/TMDataGrid:src/docs/row-interaction.md'
-  - 'Jielga/TMDataGrid:src/docs/row-styling.md'
-  - 'Jielga/TMDataGrid:src/docs/row-details.md'
-  - 'Jielga/TMDataGrid:src/docs/row-pinning.md'
-  - 'Jielga/TMDataGrid:src/tmdatagrid/core/rowSelection.ts'
+  - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/row-selection.md'
+  - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/row-interaction.md'
+  - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/row-styling.md'
+  - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/row-details.md'
+  - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/row-pinning.md'
+  - 'Jielga/TMDataGrid:packages/tmdatagrid/src/core/rowSelection.ts'
 ---
 
 # TMDataGrid - Rows
@@ -193,8 +193,8 @@ Returning an empty list leaves the column with no menu button at all.
 <TMDataGrid.Table<Employee>
   striped
   rowStyle={(row) =>
-    row.original.status === "Terminated"
-      ? { "--row-bg": "var(--mantine-color-red-0)" }
+    !row.getIsGrouped() && row.original.status === "Terminated"
+      ? { "--row-bg": "color-mix(in srgb, var(--mantine-color-red-6) 12%, transparent)" }
       : undefined
   }
   rowClassName={(row) => (row.original.overdue ? classes.overdue : undefined)}
@@ -210,7 +210,11 @@ are not striped.
 
 Rows carry `data-selected`, `data-selected-bg`, `data-highlighted`,
 `data-grouped`, `data-depth`, `data-context-menu` and `data-row-id`, so a
-stylesheet can target any of it without a callback.
+stylesheet can target any of it without a callback. The boolean attributes are
+published on every row as `"true"` or `"false"`, so match the value
+(`[data-grouped="true"]`), not the bare attribute. Pick a `--row-bg` that
+reads under both colour schemes - a `-0` Mantine shade is near-white and
+unreadable in dark mode; mix a mid shade into transparency instead.
 
 ## The details panel
 
@@ -291,7 +295,7 @@ Correct:
 rowStyle={() => ({ "--row-bg": "pink" })}
 ```
 
-Source: `src/docs/row-styling.md` (Set `--row-bg`, not `background`).
+Source: `packages/tmdatagrid/docs/row-styling.md` (Set `--row-bg`, not `background`).
 
 ### CRITICAL Reading the selection without subscribing
 
@@ -313,7 +317,7 @@ const selected = useSelector(grid.table.store, () =>
 );
 ```
 
-Source: `src/docs/row-selection.md` (Acting on a selection).
+Source: `packages/tmdatagrid/docs/row-selection.md` (Acting on a selection).
 
 ### HIGH Looking for the highlight in `rowSelection`
 
@@ -334,7 +338,7 @@ Correct:
 const current = useSelector(grid.ui, (state) => state.highlightedRowId);
 ```
 
-Source: `src/docs/row-selection.md` (The highlight is not a selection).
+Source: `packages/tmdatagrid/docs/row-selection.md` (The highlight is not a selection).
 
 ### HIGH Expecting a click handler to replace the built-in behaviour
 
@@ -349,7 +353,7 @@ Correct, when the click should only navigate:
 useTMDataGrid({ data, columns, selectionMode: "highlight" });
 ```
 
-Source: `src/docs/row-interaction.md`.
+Source: `packages/tmdatagrid/docs/row-interaction.md`.
 
 ### HIGH Reading `row.getIsExpanded()` in a cell without subscribing
 
@@ -362,7 +366,7 @@ Correct:
 const expanded = useSelector(row.table.store, () => row.getIsExpanded());
 ```
 
-Source: `src/docs/row-details.md` (Opening a row from elsewhere).
+Source: `packages/tmdatagrid/docs/row-details.md` (Opening a row from elsewhere).
 
 ### MEDIUM Assuming group rows behave like data rows
 
@@ -371,7 +375,7 @@ Group rows are built on their first child's record. They do not fire
 never pin, they take no row number, and they have no details panel. A handler
 written as though every row reaches it silently skips them.
 
-Source: `src/docs/row-interaction.md`, `src/docs/row-pinning.md`.
+Source: `packages/tmdatagrid/docs/row-interaction.md`, `packages/tmdatagrid/docs/row-pinning.md`.
 
 ### MEDIUM Open panels closing when `data` is replaced
 
@@ -384,7 +388,7 @@ Correct:
 useTMDataGrid({ data, columns, renderDetails, autoResetExpanded: false });
 ```
 
-Source: `src/docs/row-details.md`.
+Source: `packages/tmdatagrid/docs/row-details.md`.
 
 ### MEDIUM Expecting pinned rows to persist
 
@@ -392,7 +396,7 @@ Source: `src/docs/row-details.md`.
 layout store outlives any one data set. A pinned id whose row leaves `data` is
 not shown, and returns to its edge if the data comes back.
 
-Source: `src/docs/row-pinning.md`.
+Source: `packages/tmdatagrid/docs/row-pinning.md`.
 
 ## References
 

package/skills/server-side/SKILL.md

@@ -4,16 +4,22 @@ description: >
   Drive TMDataGrid from a server with TanStack manual modes - manualPagination,
   manualSorting, manualFiltering, rowCount, controlled state and onXChange
   callbacks. Covers the loading and totalRowCount meta fields, forwarding the
-  plain-JSON columnFilters model to an API with isFilterActive, persistence
-  interaction, and row selection across pages. Load when the grid is backed by a
-  paginated API rather than a local array.
+  plain-JSON columnFilters model to an API with activeColumnFilters, mapping
+  filters, sorting and the page index onto an endpoint's own query language
+  (field table, operator table, the three value shapes, meta.filter.operators
+  for an endpoint that answers only some operators, keying the fetch on the
+  request, paging against a page envelope), the first-page reset on a query
+  change, persistence interaction, and row selection across pages. Load when the
+  grid is backed by a paginated API rather than a local array, or when
+  translating grid filters into server-side queries.
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '2.0.0-beta.2'
+  library_version: '2.0.0-beta.21'
 sources:
-  - 'Jielga/TMDataGrid:src/docs/server-side.md'
-  - 'Jielga/TMDataGrid:src/tmdatagrid/useTMDataGrid.tsx'
+  - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/server-side.md'
+  - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/server-query.md'
+  - 'Jielga/TMDataGrid:packages/tmdatagrid/src/useTMDataGrid.tsx'
 ---
 
 # TMDataGrid - Server-side data
@@ -68,12 +74,32 @@ const grid = useTMDataGrid({
 | --- | --- | --- |
 | Rendered rows | The current page, sliced locally | The rows returned by the server |
 | Footer total | Pre-paginated row count | `options.rowCount` |
-| `SummaryCount` total | Pre-filtered row count | `meta.totalRowCount` |
+| `SummaryCount` total | Pre-filtered row count | `meta.totalRowCount`; the count alone without it |
 | Loading state | Not applicable | `meta.loading` |
 
 Column menus, the filter panel and the column manager behave identically in both
 modes.
 
+## The page index
+
+Under `manualPagination` the grid resets `pageIndex` to 0 whenever the query
+changes - a column filter, the quick search or the sort - so the next request
+never asks for page 8 of a result set that now has three. The reset lands in
+the same event as the change, so one request goes out. Pass the plain setters
+as the change callbacks; do not pair them with a page reset of your own.
+
+`resetPageOnQueryChange: false` switches it off. TanStack's
+`autoResetPageIndex` is a different rule: it defaults to `!manualPagination`
+and fires on a change to `data`, which server-side is the response landing.
+
+## Column options
+
+`meta.options: "faceted"` reads the distinct values in `data`, which
+server-side is one page of them - the dropdown then offers whatever was on the
+page the user is looking at. Declare the set as a list or a function instead.
+The grid warns once per column when a faceted column resolves under
+`manualFiltering` or `manualPagination`.
+
 ## Sending filters
 
 Filter values are plain JSON, so `columnFilters` forwards without transformation:
@@ -85,17 +111,136 @@ Filter values are plain JSON, so `columnFilters` forwards without transformation
 ]
 ```
 
-Translate at the API boundary, and skip entries whose value is still empty -
-those match all rows:
+Translate at the API boundary. `activeColumnFilters` hands back the entries
+that narrow anything, typed - `ColumnFiltersState` types `value` as `unknown`,
+and an entry whose value is still empty matches all rows:
 
 ```ts
-import { isFilterActive } from "@jielga/tmdatagrid";
+import { activeColumnFilters } from "@jielga/tmdatagrid";
 
-const active = columnFilters.filter((filter) => isFilterActive(filter.value));
+const active = activeColumnFilters(columnFilters);
+// [{ id: "lastName", value: { operator: "contains", value: "holm" } }]
 ```
 
+It takes the `columnFilters` array, or the table where the grid owns the slice.
+`isFilterActive(value)` is the single-value test it is built on. Only the
+grid's own `{ operator, value }` shape is read: an entry holding some other
+value - a custom filter control writing raw values - is dropped.
+
 Debounce requests. The filter value input updates on every keystroke.
 
+## Mapping onto the endpoint's query language
+
+An API takes a request body of its own: its own field names, its own operator
+set, its own status codes, and pages counted from 1. The layer between the
+grid's state and that body is one function over two lookup tables, plus one
+function on the way back:
+
+- **A field table** keyed by column id, giving the API field and the cast from
+  the string every filter control writes to the type the field holds
+  (`Number`, an enum code). A column missing from the table is one the API
+  cannot query: the mapping drops the filter rather than sending a field the
+  endpoint would reject.
+- **An operator table** from `TMDataGridFilterOperator` to the API's operators.
+  Several grid operators collapse onto one - a date `before` and a number
+  `lessThan` are both `lt` once the value is cast. Declare it as a `Record`, not
+  a `Partial`, so an operator added by a later grid version fails the build
+  here rather than reaching the server unmapped.
+- **`toRow`** from the API's record to the grid's row type.
+
+```ts
+const QUERY_FIELDS: Record<string, { field: string; cast: (raw: string) => string | number }> = {
+  id: { field: "orderRef", cast: Number },
+  amount: { field: "totalAmount", cast: Number },
+  status: { field: "status", cast: (raw) => STATUS_CODES[raw] ?? raw },
+};
+
+const PREDICATE_OPS: Record<TMDataGridFilterOperator, PredicateOp> = {
+  contains: "like",
+  between: "range",
+  before: "lt",
+  lessThan: "lt",
+  isAnyOf: "in",
+  isEmpty: "isNull",
+  // ...one line for every remaining operator.
+};
+```
+
+### The three value shapes
+
+`TMDataGridFilterValue` is `{ operator, value }`, and the operator decides what
+`value` holds. Branch on all four cases, in this order:
+
+| Operator | `value` | Sent as |
+| --- | --- | --- |
+| `isEmpty`, `isNotEmpty` | Not used | `{ field, op }` |
+| `isAnyOf`, `isNoneOf` | `ReadonlyArray<string>` | `{ field, op, values }` |
+| `between` | `[min, max]`, either end possibly `""` | `{ field, op, from?, to? }` |
+| Everything else | `string` | `{ field, op, value }` |
+
+An empty end of a `between` pair leaves that side open: an absent bound, not an
+empty string. Run `activeColumnFilters` over the slice first so a half-typed
+filter is not sent as a predicate that narrows the result to nothing.
+
+### An endpoint that answers only some operators
+
+Most endpoints do not have every operator the grid has - `like` and `eq` but no
+prefix match is common. Do not offer what you would have to drop.
+`meta.filter.operators` narrows the column to the operators the query can
+express, and the mapping table is declared over exactly that list, so one
+cannot be offered without a mapping or mapped without being offered:
+
+```ts
+const TEXT_OPERATORS = [
+  "contains",
+  "equals",
+  "isEmpty",
+  "isNotEmpty",
+] as const satisfies readonly TMDataGridFilterOperator[];
+
+const TEXT_OPS: Record<(typeof TEXT_OPERATORS)[number], PredicateOp> = {
+  contains: "like",
+  equals: "eq",
+  isEmpty: "isNull",
+  isNotEmpty: "isNotNull",
+};
+
+columnHelper.accessor("customer", {
+  header: "Customer",
+  meta: { filter: { operators: TEXT_OPERATORS } },
+});
+```
+
+A fresh filter opens on `meta.filter.defaultOperator` when set, else on the
+type's default when the list holds it, else on the first entry. The lookup at
+the boundary still returns `undefined` for an unmapped operator: a filter
+restored by `persist` from before the list was narrowed can carry one.
+
+### Keying the fetch on the request
+
+Serialize the request with `JSON.stringify` inside `useMemo` over
+`columnFilters`, `sorting` and `pagination`, and key the fetch effect (or the
+TanStack Query `queryKey`) on that string. Opening the panel and adding an
+empty row moves `columnFilters` but leaves the request unchanged, so nothing is
+sent. The effect owes the server a debounce (the value input updates on every
+keystroke) and a cancel (a `cancelled` flag in the cleanup, or an
+`AbortController` on a real `fetch`).
+
+### Paging against a page envelope
+
+| The API's | The grid's | Written as |
+| --- | --- | --- |
+| `page.number`, counted from 1 | `pagination.pageIndex`, counted from 0 | `number: pageIndex + 1` |
+| `page.totalItems`, the matched count | `rowCount` | `rowCount: page?.totalItems ?? 0` |
+| `page.totalPages` | `state.pageCount`, derived from `rowCount / pageSize` | Nothing; the grid computes it |
+
+Forward `totalPages` only when the server pages by something other than the
+size the grid asked for. `pageCount: -1` when the total is unknown. Show the
+page number through the Footer's `renderPagination` slot with
+`<Controls.PageSize /><Controls.PageNumber /><Controls.Pager />`.
+`meta.totalRowCount` is the unfiltered total, which no filtered response
+carries: take it from a separate count call.
+
 ## Persistence
 
 `persist` works unchanged. `dataKey` restores filters, sorting and pagination
@@ -126,18 +271,26 @@ Without `rowCount` the table derives the total from the rows it was handed -
 one page - so `getPageCount()` returns 1. The footer shows "1–25 of 25" and the
 next-page button is disabled, with no error. Pass the server total.
 
-### Filters sent without isFilterActive
+### Filters sent without activeColumnFilters
 
 An empty filter value stays in `columnFilters` while the user is still typing.
 Forwarded verbatim it becomes `operator: "contains", value: ""` at the API,
-which most backends translate into a real predicate. Filter with
-`isFilterActive` first.
+which most backends translate into a real predicate. Map over
+`activeColumnFilters(columnFilters)` instead of over the slice.
 
 ### SummaryCount without meta.totalRowCount
 
-`SummaryCount` falls back to the pre-filtered row count, which under manual
-filtering is just the current page. It reads "25 of 25" regardless of how many
-rows the server holds. Pass the unfiltered total as `meta.totalRowCount`.
+Without it there is no denominator to show: the pre-filtered row count is the
+current page, so the grid renders the matched count alone rather than a
+plausible-looking wrong total. Pass the unfiltered total as
+`meta.totalRowCount` to get the "42 / 5000" form back.
+
+### Offering operators the endpoint cannot answer
+
+The panel offers every operator of the column's type, and a mapping that drops
+`startsWith` leaves the user with a filter that silently does nothing. Declare
+`meta.filter.operators` on the column with the operators the endpoint answers,
+and type the operator table over that same list.
 
 ### Unstable getRowId across pages
 

package/skills/testing/SKILL.md

@@ -11,11 +11,11 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '2.0.0-beta.2'
+  library_version: '2.0.0-beta.21'
 sources:
-  - 'Jielga/TMDataGrid:src/docs/testing.md'
-  - 'Jielga/TMDataGrid:src/tmdatagrid/components/TMDataGrid.tsx'
-  - 'Jielga/TMDataGrid:src/tmdatagrid/components/TMDataGridTable.tsx'
+  - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/testing.md'
+  - 'Jielga/TMDataGrid:packages/tmdatagrid/src/components/TMDataGrid.tsx'
+  - 'Jielga/TMDataGrid:packages/tmdatagrid/src/components/TMDataGridTable.tsx'
 ---
 
 # TMDataGrid - Testing
@@ -62,8 +62,9 @@ Body cells carry no `data-dg-part` - the coordinate pair already names them.
 
 **Whole-grid** (unique, no coordinate needed): `toolbar`, `summary-count`,
 `loading`, `search`, `search-clear`, `filter-button`, `filter-panel`,
-`filter-panel-close`, `filter-add`, `filter-clear-all`, `filter-pills`,
-`columns-button`, `columns-panel`, `columns-search`, `columns-toggle-all`,
+`filter-popup`, `filter-sidebar`, `filter-panel-close`, `filter-add`,
+`filter-clear-all`, `filter-pills`, `header-filter-row`,
+`menu-button`, `columns-panel`, `columns-search`, `columns-toggle-all`,
 `columns-reset`, `footer`, `page-size`, `page-range`, `page-prev`, `page-next`,
 `summary-row`, `pinned-top`, `pinned-bottom`, `select-all`,
 `details-toggle-all`, `save-all`, `discard-all`, `editor-confirm`,
@@ -75,7 +76,9 @@ Body cells carry no `data-dg-part` - the coordinate pair already names them.
 `discard-new-row`.
 
 **Keyed by `data-column-id`**: `header`, `header-sort`, `header-menu`,
-`header-filter`, `filter-row`, `filter-pill`, `columns-toggle`.
+`header-filter` (absent under `filters.inHeader`), `header-filter-cell`,
+`header-filter-operator`, `filter-row`,
+`filter-pill`, `columns-toggle`.
 
 **Keyed by both**: `editor`.
 

package/src/{tmdatagrid/TMDataGridContext.ts → TMDataGridContext.ts}

@@ -32,27 +32,15 @@ export function useTMDataGridContext(): TMDataGridContextValue {
 }
 
 /**
- * What a control inside a *body* cell should put in its `tabIndex`.
+ * What a control inside a body cell puts in its `tabIndex`. Internal: a
+ * consumer's own control needs nothing, the tab guards keep the body one stop.
  *
- * `-1` once cell selection is on, and this is what makes the promise of one tab
- * stop true. Without it the browser walks Tab into the checkbox of every
- * mounted row - a grid showing twenty rows would be twenty tab stops, and
- * scrolling would change how many. Enter or F2 steps into the cell instead,
- * which reaches a `-1` control perfectly well.
- *
- * Header controls are not covered: the header row is not part of cell
- * navigation, so its sort buttons and menus stay in the tab order, where they
- * are the only way to reach them.
- *
- * A custom cell renderer with a control in it wants the same:
- *
- * ```tsx
- * cell: ({ row }) => (
- *   <Button tabIndex={useCellControlTabIndex()} onClick={...}>Open</Button>
- * )
- * ```
+ * `-1` under cell selection: the control is reached by stepping into the cell
+ * with Enter or by the Tab walk within the row, never by the page's tab order,
+ * so a row does not add one tab stop per mounted row. `0` without it - there
+ * is no cursor to step in from, so the page's tab order is the only route.
  */
-export function useCellControlTabIndex(): 0 | -1 {
+export function useBodyControlTabIndex(): 0 | -1 {
   const { features } = useTMDataGridContext();
   return features.cellSelection ? -1 : 0;
 }

package/src/{tmdatagrid/components → components}/TMDataGrid.module.css

@@ -82,8 +82,14 @@
   /* The stacking ladder, stated once. Body cells sit at auto (0); everything
      sticky stacks over them in this order, and a sticky row crossing a sticky
      column takes the row's slot plus one. */
+  /* The focus ring is drawn inside the focused cell's own box, so the cell
+     takes a slot of its own - above the plain cells beside it, but under the
+     pinned lanes, which a scrolling row has to pass beneath ring and all. A
+     focused cell that is itself pinned goes above them instead, so its ring
+     stays whole while the rest of the row slides under it. */
+  --dg-z-focused-cell: 1;
   --dg-z-pinned-cell: 2;
-  --dg-z-focused-cell: 3;
+  --dg-z-pinned-focused-cell: 3;
   /* The pinned-row slot serves both sticky rows: the summary along the
      bottom and the entry block under the header. */
   --dg-z-pinned-row: 4;

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

@@ -3,20 +3,21 @@ import { type CSSProperties, type ReactNode, useMemo } from "react";
 import classes from "./TMDataGrid.module.css";
 import { TMDataGridColumnsPanel } from "./TMDataGridColumnsPanel";
 import { TMDataGridContextProvider } from "../TMDataGridContext";
-import { TMDataGridEditActions } from "./TMDataGridEditActions";
+import { TMDataGridDraftActions } from "./TMDataGridDraftActions";
 import { TMDataGridFilterPanel } from "./TMDataGridFilterPanel";
 import { TMDataGridFilterPills } from "./TMDataGridFilterPills";
 import { TMDataGridFooter } from "./TMDataGridFooter";
+import { TMDataGridMenu } from "./TMDataGridMenu";
 import { TMDataGridSearch } from "./TMDataGridSearch";
 import { TMDataGridTable } from "./TMDataGridTable";
 import {
-  TMDataGridColumnsButton,
   TMDataGridFilterButton,
   TMDataGridLoadingIndicator,
   TMDataGridSummaryCount,
   TMDataGridToolbar,
   TMDataGridToolbarSpacer,
 } from "./TMDataGridToolbar";
+import { TMDataGridExportPicker } from "./TMDataGridExportPicker";
 import {
   DEFAULT_TMDATAGRID_SIZE,
   SIZE_CONTROL_SIZE,
@@ -55,29 +56,14 @@ export type TMDataGridProps<TData extends RowData> = TMDataGridApi<TData> & {
   "data-testid"?: string;
 };
 
-/**
- * Root of the grid. Takes the object returned by `useTMDataGrid` - spread it -
- * and publishes it to the compound components below it:
- *
- * ```tsx
- * const grid = useTMDataGrid({ data, columns });
- *
- * <TMDataGrid {...grid}>
- *   <TMDataGrid.Toolbar>
- *     <TMDataGrid.SummaryCount />
- *     <TMDataGrid.Spacer />
- *     <TMDataGrid.ColumnsButton />
- *   </TMDataGrid.Toolbar>
- *   <TMDataGrid.Table />
- *   <TMDataGrid.Footer />
- * </TMDataGrid>
- * ```
- */
+// Documented on the `TMDataGrid` export below.
 function TMDataGridRoot<TData extends RowData>({
   table,
   ui,
   edit,
   features,
+  filters,
+  exportOptions,
   labels,
   renderDetails,
   renderDetailsEstHeight,
@@ -100,6 +86,8 @@ function TMDataGridRoot<TData extends RowData>({
       ui,
       edit,
       features,
+      filters,
+      exportOptions,
       labels,
       renderDetails,
       renderDetailsEstHeight,
@@ -116,6 +104,8 @@ function TMDataGridRoot<TData extends RowData>({
       ui,
       edit,
       features,
+      filters,
+      exportOptions,
       labels,
       renderDetails,
       renderDetailsEstHeight,
@@ -141,18 +131,41 @@ function TMDataGridRoot<TData extends RowData>({
       >
         {children}
       </div>
+      {/* Portaled by Mantine, so outside the root element; inside the
+          provider, since it reads the grid. */}
+      <TMDataGridExportPicker />
     </TMDataGridContextProvider>
   );
 }
 
+/**
+ * Root of the grid. Takes the object returned by `useTMDataGrid` - spread it -
+ * and publishes it to the compound components below it:
+ *
+ * ```tsx
+ * const grid = useTMDataGrid({ data, columns });
+ *
+ * <TMDataGrid {...grid}>
+ *   <TMDataGrid.Toolbar>
+ *     <TMDataGrid.SummaryCount />
+ *     <TMDataGrid.Spacer />
+ *     <TMDataGrid.Menu>
+ *       <TMDataGrid.Menu.Columns />
+ *     </TMDataGrid.Menu>
+ *   </TMDataGrid.Toolbar>
+ *   <TMDataGrid.Table />
+ *   <TMDataGrid.Footer />
+ * </TMDataGrid>
+ * ```
+ */
 export const TMDataGrid = Object.assign(TMDataGridRoot, {
   Toolbar: TMDataGridToolbar,
   Spacer: TMDataGridToolbarSpacer,
   SummaryCount: TMDataGridSummaryCount,
   LoadingIndicator: TMDataGridLoadingIndicator,
   Search: TMDataGridSearch,
-  EditActions: TMDataGridEditActions,
-  ColumnsButton: TMDataGridColumnsButton,
+  DraftActions: TMDataGridDraftActions,
+  Menu: TMDataGridMenu,
   FilterButton: TMDataGridFilterButton,
   Table: TMDataGridTable,
   Footer: TMDataGridFooter,
@@ -163,6 +176,9 @@ export const TMDataGrid = Object.assign(TMDataGridRoot, {
    * rendered outside `<TMDataGrid>` - a page header, for instance.
    */
   FilterPills: TMDataGridFilterPills,
-  /** Rendered by `TMDataGrid.ColumnsButton`; exported for custom layouts. */
+  /**
+   * The column chooser as plain controls, for a Popover, a Drawer or an
+   * inline layout; `TMDataGrid.Menu.Columns` is the same thing as menu items.
+   */
   ColumnsPanel: TMDataGridColumnsPanel,
 });