@jielga/tmdatagrid 2.0.0-beta.8 → 2.0.0

package/skills/appearance/SKILL.md

@@ -5,24 +5,27 @@ description: >
   xl) and what it drives, every --dg-* CSS variable for metrics, colours and the
   stacking ladder, the two stylesheets styles.css and styles.layer.css and why
   only one may be imported, the bounded-height layout rule with minHeight 0,
-  toolbar composition through children and TMDataGrid.Spacer, writing a toolbar
+  toolbar composition through children and TMDataGrid.Spacer, Mantine BoxProps
+  (mb, px, hiddenFrom) and withBottomBorder on the toolbar, writing a toolbar
   button with useTMDataGridContext, hiding it the way the built-ins do with
   getGridCapabilities and getColumnCapabilities, why capabilities take a
   features argument under the React Compiler, and localization through the
   labels option, TMDATAGRID_LABELS_EN, TMDATAGRID_LABELS_SV, mergeLabels and
   grid.labels. Load when styling or theming the grid, choosing a density,
-  building a toolbar, adding a button beside the built-in ones, or translating
-  the interface.
+  building a toolbar, adding a button beside the built-in ones, filling the grid
+  menu (TMDataGrid.Menu, the column chooser as menu items), or translating the
+  interface.
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '2.0.0-beta.8'
+  library_version: '2.0.0'
 sources:
-  - 'Jielga/TMDataGrid:src/docs/styling.md'
-  - 'Jielga/TMDataGrid:src/docs/toolbar.md'
-  - 'Jielga/TMDataGrid:src/docs/localization.md'
-  - 'Jielga/TMDataGrid:src/tmdatagrid/core/capabilities.ts'
-  - 'Jielga/TMDataGrid:src/tmdatagrid/core/labels.ts'
+  - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/styling.md'
+  - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/toolbar.md'
+  - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/menu.md'
+  - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/localization.md'
+  - 'Jielga/TMDataGrid:packages/tmdatagrid/src/core/capabilities.ts'
+  - 'Jielga/TMDataGrid:packages/tmdatagrid/src/core/labels.ts'
 ---
 
 # TMDataGrid - Appearance, toolbar and labels
@@ -118,7 +121,9 @@ element, and `TMDataGrid.Spacer` pushes what follows to the right.
   <TMDataGrid.LoadingIndicator />
   <ExportButton />
   <TMDataGrid.FilterButton />
-  <TMDataGrid.ColumnsButton />
+  <TMDataGrid.Menu>
+    <TMDataGrid.Menu.Columns />
+  </TMDataGrid.Menu>
 </TMDataGrid.Toolbar>
 ```
 
@@ -126,12 +131,60 @@ Each built-in renders nothing when its feature is off, so a read-only grid needs
 no conditionals: `FilterButton` under `enableColumnFilters: false` renders
 nothing at all.
 
+`TMDataGrid.Toolbar` and `TMDataGrid.Spacer` take Mantine's `BoxProps` - the
+style props (`mb`, `px`, `h`, `hiddenFrom`), `className`, `style` and `mod` -
+set on the element itself. `withBottomBorder` on the toolbar draws a 1px line in
+the theme's default border colour under it, the same line the header draws;
+default `false`. `TMDataGrid.Footer`, `FilterPanel`, `FilterPills` and
+`ColumnsPanel` take the same `BoxProps` on top of their own props.
+
+```tsx
+<TMDataGrid.Toolbar withBottomBorder px="sm" mb="xs">
+  <TMDataGrid.SummaryCount />
+  <TMDataGrid.Spacer hiddenFrom="sm" />
+  <TMDataGrid.FilterButton />
+</TMDataGrid.Toolbar>
+```
+
+### The grid menu
+
+`TMDataGrid.Menu` is the burger: a Mantine `Menu` whose children are the
+dropdown, so your own `Menu.Item`s sit beside the built-in items. It takes
+Mantine `MenuProps` (defaults `position="bottom-end"`, `shadow="md"`,
+`width={260}`, `withinPortal`), `icon` and `label` (default `labels.menuButton`).
+
+```tsx
+import { Menu } from "@mantine/core";
+
+<TMDataGrid.Menu>
+  <Menu.Item onClick={exportReport}>Export report</Menu.Item>
+  <Menu.Divider />
+  <Menu.Label>Columns</Menu.Label>
+  <TMDataGrid.Menu.Columns />
+</TMDataGrid.Menu>
+```
+
+`TMDataGrid.Menu.Columns` is the column chooser as menu items: `Menu.Search`,
+one checkbox item per hideable column, show/hide all and reset layout;
+it renders nothing when no column can be hidden. Its pieces
+`TMDataGrid.Menu.ColumnToggles` (`search` narrows the list),
+`.ShowHideAll` and `.ResetLayout` are exported for menus that want only some of
+them. Every piece needs a Mantine `Menu` around it and reads the grid from
+context, so it works in any Mantine menu rendered inside `TMDataGrid`, and in a
+`Menu.Sub` (pass `searchable={false}` there: `Menu.Search` registers on the
+root menu and switches off its type-ahead and arrow keys).
+
+The menu always renders, since it cannot see what its children render; a menu
+holding only `Menu.Columns` should be hidden with `canHideAny` under
+`enableHiding: false`. `TMDataGrid.ColumnsPanel` is the same chooser as plain
+controls, for a Popover, a Drawer or an inline layout.
+
 A button of your own reads the grid from context, which returns
 `{ table, ui, features, labels, controlSize, resetSettings }`:
 
 ```tsx
 import {
-  exportGridToCsv,
+  exportGrid,
   getGridCapabilities,
   useTMDataGridContext,
 } from "@jielga/tmdatagrid";
@@ -143,7 +196,7 @@ function ExportButton() {
   if (!canFilterAny) return null;
 
   return (
-    <Button size={controlSize} onClick={() => exportGridToCsv({ table })}>
+    <Button size={controlSize} onClick={() => void exportGrid({ table })}>
       Export
     </Button>
   );
@@ -206,7 +259,7 @@ own uses the same strings as the built-in parts.
 so an application that ordered its layers to put the grid underneath its own
 overrides silently gets the opposite.
 
-Source: `src/docs/styling.md` (The stylesheet).
+Source: `packages/tmdatagrid/docs/styling.md` (The stylesheet).
 
 ### CRITICAL A grid with no bounded height
 
@@ -226,7 +279,7 @@ Correct:
 <TMDataGrid {...grid} style={{ flex: 1, minHeight: 0 }} />
 ```
 
-Source: `src/docs/styling.md` (Layout).
+Source: `packages/tmdatagrid/docs/styling.md` (Layout).
 
 ### HIGH Setting `--dg-row-height` to change density
 
@@ -241,7 +294,7 @@ Correct:
 useTMDataGrid({ data, columns, meta: { rowHeight: 64 } });
 ```
 
-Source: `src/docs/styling.md` (The size scale).
+Source: `packages/tmdatagrid/docs/styling.md` (The size scale).
 
 ### HIGH A capability check without `features`
 
@@ -264,7 +317,7 @@ const { canSort } = getColumnCapabilities(column, features);
 if (!canSort) return null;
 ```
 
-Source: `src/docs/toolbar.md` (Why `features` is a second argument).
+Source: `packages/tmdatagrid/docs/toolbar.md` (Why `features` is a second argument).
 
 ### MEDIUM An inline `labels` object
 
@@ -286,7 +339,7 @@ const labels = { noResults: "Inga träffar" } satisfies TMDataGridLabelsOverride
 useTMDataGrid({ data, columns, labels });
 ```
 
-Source: `src/docs/localization.md` (Keep the object stable).
+Source: `packages/tmdatagrid/docs/localization.md` (Keep the object stable).
 
 ### MEDIUM Conditionally rendering built-in toolbar parts
 
@@ -294,7 +347,7 @@ Each built-in already renders nothing when its feature is off. Wrapping them in
 your own checks duplicates the capability logic, and the two drift apart the
 first time an option changes.
 
-Source: `src/docs/toolbar.md` (The built-in parts).
+Source: `packages/tmdatagrid/docs/toolbar.md` (The built-in parts).
 
 ## Reference
 
@@ -306,7 +359,7 @@ Source: `src/docs/toolbar.md` (The built-in parts).
 | `SIZE_ROW_HEIGHT` | Export | `Record<MantineSize, number>` | – | The row heights the scale table lists. |
 | `SIZE_CONTROL_SIZE` | Export | `Record<MantineSize, MantineSize>` | – | Which control size each grid size uses. |
 | `DEFAULT_TMDATAGRID_SIZE` | Export | `"md"` | – | The default size. |
-| `TMDataGrid.Toolbar` · `Spacer` | Components | `children` | – | The flex row, and the push-right. |
+| `TMDataGrid.Toolbar` · `Spacer` | Components | `children`, `withBottomBorder`, Mantine `BoxProps` | `withBottomBorder: false` | The flex row, and the push-right. Style props set on the element. |
 | `useTMDataGridContext` | Hook | `() => TMDataGridContextValue` | – | `{ table, ui, features, labels, controlSize, resetSettings }`. |
 | `getGridCapabilities` | Export | `(table, features) => TMDataGridCapabilities` | – | What this grid can do, reactively. |
 | `getColumnCapabilities` | Export | `(column, features) => TMDataGridColumnCapabilities` | – | The same for one column. |

package/skills/cell-selection/SKILL.md

@@ -1,25 +1,25 @@
 ---
 name: cell-selection
 description: >
-  Cell cursor, ranges, clipboard and CSV export in TMDataGrid. Covers the
-  cellSelection option and its none / single / range modes, the keyboard map
-  (arrows, Shift+arrows, PageUp/PageDown, Home/End, Enter, F2, Escape, Space,
-  Ctrl+C), the one-tab-stop rule and useCellControlTabIndex for controls inside
-  cells, the role flip from table/cell to grid/gridcell, ui.state.focusedCell
-  and ui.state.cellRange keyed by id, onFocusedCellChange, the copy and export
-  context menu, the cellExport options and their Nordic Excel defaults, and
-  exportGridToCsv over every filtered row. Load when adding keyboard cell
-  navigation, selecting blocks of cells, copying to a spreadsheet, exporting
-  CSV, or when Tab walks through controls inside the grid body.
+  Cell cursor, ranges and the clipboard in TMDataGrid. Covers the cellSelection
+  option and its none / single / range modes, the keyboard map (arrows,
+  Shift+arrows, PageUp/PageDown, Home/End, Enter, F2, Escape, Space, Ctrl+C),
+  the one-tab-stop rule and the in-row Tab walk over controls inside cells, the
+  role flip from table/cell to grid/gridcell, ui.state.focusedCell and
+  ui.state.cellRange keyed by id, onFocusedCellChange, and the Copy / Export
+  cells / Include headers context menu that writes the rectangle in the grid's
+  exportOptions format. Load when adding keyboard cell navigation, selecting
+  blocks of cells, copying to a spreadsheet, or when Tab walks through controls
+  inside the grid body. Exporting whole rows is the data skill.
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '2.0.0-beta.8'
+  library_version: '2.0.0'
 sources:
-  - 'Jielga/TMDataGrid:src/docs/cell-selection.md'
-  - 'Jielga/TMDataGrid:src/tmdatagrid/core/cellNavigation.ts'
-  - 'Jielga/TMDataGrid:src/tmdatagrid/core/cellRange.ts'
-  - 'Jielga/TMDataGrid:src/tmdatagrid/core/cellExport.ts'
+  - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/cell-selection.md'
+  - 'Jielga/TMDataGrid:packages/tmdatagrid/src/core/cellNavigation.ts'
+  - 'Jielga/TMDataGrid:packages/tmdatagrid/src/core/cellRange.ts'
+  - 'Jielga/TMDataGrid:packages/tmdatagrid/src/core/export.ts'
 ---
 
 # TMDataGrid - Cell selection
@@ -70,29 +70,21 @@ a cell's contents own their own keys.
 
 ## One tab stop
 
-Tab from a cell leaves the grid. What makes that true is that controls inside
-body cells - the checkbox, the tree chevron, the details chevron - take
-`tabindex="-1"` while cell selection is on. Left tabbable, Tab would walk through
-one per mounted row, and how many that is depends on the scroll position.
+The body is one tab stop in each direction. Tab from a cell leaves the grid and
+Shift+Tab leaves it backwards, however many rows are mounted and whatever those
+rows hold.
 
-They stay reachable: Enter or F2 steps in, Escape steps out, and Space ticks the
-row from any of its cells. Header controls are untouched - the header row is not
-part of cell navigation.
+A control inside a body cell needs no `tabIndex`. Enter or F2 steps into the
+cell and onto its first control, Escape steps back out to the cell, and Space
+ticks the row from any of its cells without stepping in.
 
-A custom cell with a control in it wants the same treatment:
+Once the focus is on a control, Tab walks the rest of that row's controls - its
+open editors, the buttons in its cells, and on an open row the edit lane's save
+and cancel. Past the row's last control the cursor moves to the next row's first
+cell, and Shift+Tab before its first control moves to the previous row's last
+cell; neither opens the row it lands on. From the last row, Tab leaves the grid.
 
-```tsx
-import { useCellControlTabIndex } from "@jielga/tmdatagrid";
-
-const OpenButton = ({ row }) => (
-  <Button tabIndex={useCellControlTabIndex()} onClick={() => open(row.id)}>
-    Open
-  </Button>
-);
-```
-
-The hook returns `-1` while cell selection is on and `0` otherwise, so the same
-cell works either way.
+Header controls are untouched - the header row is not part of cell navigation.
 
 ## Where the selection lives
 
@@ -123,57 +115,60 @@ Ctrl+C puts the block on the clipboard as tab-separated text with CRLF between
 rows, the format Excel, Sheets and Numbers all produce themselves. Values only:
 Excel's own copy carries no header row either.
 
-Right-clicking inside the selection opens Copy, "Export as CSV for Excel" and an
+Right-clicking inside the selection opens Copy, "Export cells" and an
 "Include headers" toggle. A right-click outside it moves the selection there
 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
-endings, semicolons between fields and a comma as the decimal mark. That
-combination opens straight into columns with å ä ö intact.
+"Export cells" writes the rectangle in the grid's export format - by default a
+CSV for a Nordic Excel: a `sep=;` first line, a UTF-8 BOM, CRLF endings,
+semicolons between fields and a comma as the decimal mark. The format, the file
+name and the header row are the grid's `exportOptions`:
 
 ```tsx
-<TMDataGrid.Table
-  cellExport={{ separator: ",", decimalComma: false, fileName: "employees" }}
-/>
+const grid = useTMDataGrid({
+  data,
+  columns,
+  cellSelection: "range",
+  exportOptions: { format: csvFormat(), fileName: "employees" },
+});
 ```
 
-What gets written is the cell's **value**, not what it renders. Dates come out
-in the `sv-SE` form (`2026-07-31`), which Excel reads as a date.
-
-`exportGridToCsv({ table, options })` takes **every filtered row** instead of the
-selected block, with the same options and defaults. There is no built-in button
-for it:
+What gets written is the cell's **value**, not what it renders, for the file and
+for Ctrl+C alike; `meta.exportValue` substitutes a value and
+`meta.enableExport: false` drops a column from both. Ctrl+C writes numbers with
+the format's decimal mark, so what is pasted matches what is exported.
 
-```tsx
-<Button onClick={() => exportGridToCsv({ table: grid.table })}>Export</Button>
-```
+Exporting every filtered row rather than the rectangle is
+`TMDataGrid.Menu.Export`, `TMDataGrid.Menu.ExportSelected` and
+`useTMDataGridExport`, covered by the data skill.
 
 ## Common mistakes
 
-### CRITICAL A custom cell control that breaks the single tab stop
+### CRITICAL A cell control given a tab index of its own
 
-A `<Button>` or `<Checkbox>` rendered in a body cell keeps its default tab index,
-so Tab walks through one per mounted row. How many that is depends on the scroll
-position, which makes the bug look intermittent.
+The grid keeps every control in a body cell out of the page's tab order and
+reaches them by stepping into the cell. A `<Button>` or `<Checkbox>` handed
+`tabIndex={0}` puts one tab stop per mounted row back, and how many that is
+depends on the scroll position, which makes the bug look intermittent.
 
 Wrong:
 
 ```tsx
-const OpenButton = ({ row }) => <Button onClick={() => open(row.id)}>Open</Button>;
+const OpenButton = ({ row }) => (
+  <Button tabIndex={0} onClick={() => open(row.id)}>
+    Open
+  </Button>
+);
 ```
 
 Correct:
 
 ```tsx
-const OpenButton = ({ row }) => (
-  <Button tabIndex={useCellControlTabIndex()} onClick={() => open(row.id)}>
-    Open
-  </Button>
-);
+const OpenButton = ({ row }) => <Button onClick={() => open(row.id)}>Open</Button>;
 ```
 
-Source: `src/docs/cell-selection.md` (One tab stop).
+Source: `packages/tmdatagrid/docs/cell-selection.md` (One tab stop).
 
 ### HIGH Selectors written for `table` / `cell` roles
 
@@ -181,7 +176,7 @@ The grid reports `grid` and `gridcell` once cell selection is on, so a test or a
 query written against `getByRole("cell")` stops resolving the moment the option
 is set - including when `editing` turns it on implicitly.
 
-Source: `src/docs/cell-selection.md`, and the `testing` skill.
+Source: `packages/tmdatagrid/docs/cell-selection.md`, and the `testing` skill.
 
 ### HIGH Reading the selection as row and column indices
 
@@ -196,23 +191,23 @@ const row = grid.table.getRow(focusedCell.rowId);
 const value = row.getValue(focusedCell.columnId);
 ```
 
-Source: `src/docs/cell-selection.md` (Where the selection lives).
+Source: `packages/tmdatagrid/docs/cell-selection.md` (Where the selection lives).
 
 ### MEDIUM Expecting the export to match what the cells show
 
 A cell renders React - often a badge, a link or a formatted string - and the
 export writes the underlying value. A currency cell showing `32 000 kr` exports
-`32000`. Format in the data, or post-process the matrix from `buildCellMatrix`,
-if the file must match the screen.
+`32000`. Set `meta.exportValue` on the column, or post-process the data from
+`buildExportData`, if the file must match the screen.
 
-Source: `src/docs/cell-selection.md` (The CSV).
+Source: `packages/tmdatagrid/docs/cell-selection.md` (The file).
 
 ### MEDIUM Expecting headers in the clipboard
 
 Ctrl+C copies values only, matching Excel's own copy. Headers are an option of
-the export menu and of `cellExport`, not of the clipboard path.
+the export menu and of `exportOptions`, not of the clipboard path.
 
-Source: `src/docs/cell-selection.md` (Copy and export).
+Source: `packages/tmdatagrid/docs/cell-selection.md` (Copy and export).
 
 ## Reference
 
@@ -220,18 +215,14 @@ Source: `src/docs/cell-selection.md` (Copy and export).
 | --- | --- | --- | --- | --- |
 | `cellSelection` | Option | `"none" \| "single" \| "range"` | `"none"`, or `"single"` under `editing` | Turns the cursor, and the rectangle, on. |
 | `onFocusedCellChange` | Callback | `(cell \| null) => void` | – | Follows the cursor. |
-| `cellExport` | Table prop | `TMDataGridCellExportOptions` | Nordic Excel | Separator, decimal mark, headers, file name. |
+| `exportOptions` | Option | `TMDataGridExportOptions` | `DEFAULT_EXPORT_OPTIONS` | Format, file name and header row of the Export cells item. |
 | `ui.state.focusedCell` | UI state | `{ rowId, columnId } \| null` | `null` | The cursor. |
 | `ui.state.cellRange` | UI state | `{ anchor, focus } \| null` | `null` | The rectangle's two corners. |
 | `ui.actions.setFocusedCell` · `setCellRange` | UI actions | – | – | Move either from your own code. |
-| `useCellControlTabIndex` | Hook | `() => 0 \| -1` | – | The tab index a control inside a body cell wants. |
-| `exportGridToCsv` | Export | `({ table, options? }) => void` | – | Downloads every filtered row as CSV. |
-| `buildGridCellMatrix` · `buildCellMatrix` | Exports | – | – | The value matrix behind the file, for post-processing. |
-| `toClipboardText` · `toExcelCsv` · `writeClipboardText` · `downloadTextFile` | Exports | – | – | The pieces behind Ctrl+C and the file. |
-| `formatExportValue` | Export | `(value, options) => string` | – | One value, formatted as the export would. |
-| `DEFAULT_CELL_EXPORT_OPTIONS` | Export | object | – | The Nordic Excel defaults, to spread over. |
-| `isSameCell` · `resolveCellMove` | Exports | – | – | The cursor arithmetic, for a custom navigator. |
-| `resolveRangeBounds` · `isWithinBounds` · `boundsEdges` · `boundsCellCount` | Exports | – | – | The rectangle arithmetic. |
+| `buildExportData` | Export | `({ table, rows, bounds }) => TMDataGridExportData` | – | The rectangle's values, with `bounds`; the whole grid without. |
+| `toClipboardText` · `writeClipboardText` | Exports | – | – | The pieces behind Ctrl+C. |
+| `formatExportValue` | Export | `(value, options) => string` | – | One value, formatted as the text formats would. |
+| `resolveRangeBounds` | Export | `({ range, rowIndexOf, columnIndexOf }) => TMDataGridRangeBounds \| null` | – | The range as row and column indices - the `bounds` for `buildExportData`, over `getDisplayedRows`. |
 | `data-focused` | Data attribute | – | – | On the focused cell. |
 | `data-edge-top` · `-bottom` · `-left` · `-right` | Data attributes | – | – | On cells at the rectangle's border. |
 

package/skills/columns/SKILL.md

@@ -4,26 +4,26 @@ description: >
   Define and arrange TMDataGrid columns. Covers createTMDataGridColumnHelper,
   every column meta field (label, type, options, flex, align, autoSize,
   enableOrdering, and the meta.filter and meta.edit namespaces holding
-  defaultOperator, control, enabled, field, editor, validate and mapValue), the
-  six column types, fluid minmax sizing versus fixed width with minSize /
-  maxSize / size, autosizing and autosizeColumn, hiding through enableHiding and
-  the columns panel, pinning and why a pinned column becomes fixed-width,
-  ordering with enableColumnOrdering, meta.enableOrdering, moveColumn,
-  moveColumnByStep, getStepTargetColumn and the pinned regions, resetSettings,
-  sorting with multi-sort through isMultiSortEvent and a custom sortFn, and the
-  generated lanes. Load when adding or changing columns, controlling widths,
-  hiding, pinning, reordering or sorting them.
+  operators, defaultOperator, control, enabled, field, editor, validate and
+  mapValue), the six column types, fluid minmax sizing versus fixed width with
+  minSize / maxSize / size, autosizing and autosizeColumn, hiding through
+  enableHiding and the columns panel, pinning and why a pinned column becomes
+  fixed-width, ordering with enableColumnOrdering, meta.enableOrdering,
+  moveColumn, moveColumnByStep, getStepTargetColumn and the pinned regions,
+  resetSettings, sorting with multi-sort through isMultiSortEvent and a custom
+  sortFn, and the generated lanes. Load when adding or changing columns,
+  controlling widths, hiding, pinning, reordering or sorting them.
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '2.0.0-beta.8'
+  library_version: '2.0.0'
 sources:
-  - 'Jielga/TMDataGrid:src/docs/columns.md'
-  - 'Jielga/TMDataGrid:src/docs/column-layout.md'
-  - 'Jielga/TMDataGrid:src/docs/sorting.md'
-  - 'Jielga/TMDataGrid:src/tmdatagrid/core/columnUtils.ts'
-  - 'Jielga/TMDataGrid:src/tmdatagrid/core/columnOrdering.ts'
-  - 'Jielga/TMDataGrid:src/tmdatagrid/core/autosize.ts'
+  - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/columns.md'
+  - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/column-layout.md'
+  - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/sorting.md'
+  - 'Jielga/TMDataGrid:packages/tmdatagrid/src/core/columnUtils.ts'
+  - 'Jielga/TMDataGrid:packages/tmdatagrid/src/core/columnOrdering.ts'
+  - 'Jielga/TMDataGrid:packages/tmdatagrid/src/core/autosize.ts'
 ---
 
 # TMDataGrid - Columns
@@ -97,7 +97,8 @@ which is why they are in neither.
 
 | Field | Type | Default | What it does |
 | --- | --- | --- | --- |
-| `defaultOperator` | `TMDataGridFilterOperator` | The type's default | The operator a fresh filter on this column starts with. |
+| `operators` | `readonly TMDataGridFilterOperator[]` | The type's list | The operators this column offers, a subset of its type's. For a backend that answers only some. |
+| `defaultOperator` | `TMDataGridFilterOperator` | The type's default, else the first offered | The operator a fresh filter on this column starts with. |
 | `control` | `TMDataGridFilterControlComponent` | By `meta.type` | Replaces the value control in this column's filter row. Module scope. |
 
 `meta.edit`:
@@ -174,21 +175,26 @@ consumer code.
 
 All three write state that persists together, so a grid comes back arranged the
 way it was left. `resetSettings()` from the hook clears visibility, order,
-pinning and widths in one go, and the columns panel offers it as **Reset
+pinning and widths in one go, and the column chooser offers it as **Reset
 layout**.
 
 **Hiding** is `columnVisibility`, driven by "Hide column" in a column menu and by
-`TMDataGrid.ColumnsButton` with the panel behind it.
+the column chooser: `TMDataGrid.Menu.Columns` in the grid menu, **Manage
+columns** as a submenu of every column menu, and `TMDataGrid.ColumnsPanel` as
+plain controls for a host that is not a menu. See the `appearance` skill.
 
 **Pinning** is "Pin to left" / "Pin to right" in the column menu. A pinned
 column also becomes fixed-width: sticky offsets are computed from `getSize()`,
 which cannot resolve an `fr` value, so the grid stores the rendered width in
-`columnSizing` at the moment it is pinned and nothing jumps.
+`columnSizing` at the moment it is pinned and nothing jumps. A column pinned
+from `initialState.columnPinning` has no rendered width to store, so it takes
+its `size` - TanStack's default of `150` where none is set - and `minSize`
+does not apply.
 
 **Ordering** is header dragging plus "Move left" / "Move right". A column can
 only move **within its own pinned region** - pinning splits the grid into left,
 centre and right, then `columnOrder` sequences the centre while
-`columnPinning.left` and `.right` sequence the pinned lanes. Unpin a column
+`columnPinning.start` and `.end` sequence the pinned lanes. Unpin a column
 first to move it out of one. A neighbour that cannot move acts as a wall rather
 than being stepped over, and columns inside a header group are not movable in
 either direction, because `columnOrder` sequences leaf columns.
@@ -244,7 +250,7 @@ Standard TanStack column options. Each also removes the corresponding interface.
 | Option | Effect when `false` |
 | --- | --- |
 | `enableSorting` | No sort indicator, no sort menu items, no click-to-sort. |
-| `enableColumnFilter` | No filter menu item. Excluded from the filter panel's column list. |
+| `enableColumnFilter` | No filter menu item. Excluded from the filter panel's column list, and its header filter cell is empty. |
 | `enableHiding` | No hide menu item. Checkbox disabled in the column manager. |
 | `enablePinning` | No pin menu items. |
 | `enableResizing` | The divider is displayed but cannot be dragged. |
@@ -299,7 +305,33 @@ columnHelper.accessor("email", {
 });
 ```
 
-Source: `src/docs/column-layout.md` (Sizing).
+The corollary is that a pinned column is fixed-width and does use `size`, so a
+column that is pinned needs one.
+
+Source: `packages/tmdatagrid/docs/column-layout.md` (Sizing).
+
+### HIGH Pinning a column at mount without size
+
+A column pinned interactively keeps the width it was rendering, which the grid
+writes into `columnSizing`. A column pinned from `initialState.columnPinning`
+has no rendered width, so it takes `size` - TanStack's default of `150` where
+none is set - and `minSize` does not apply.
+
+Wrong:
+
+```tsx
+columnHelper.accessor("name", { header: "Name", minSize: 220 });
+initialState: { columnPinning: { start: ["name"], end: [] } },
+```
+
+Correct:
+
+```tsx
+columnHelper.accessor("name", { header: "Name", minSize: 220, size: 220 });
+initialState: { columnPinning: { start: ["name"], end: [] } },
+```
+
+Source: `packages/tmdatagrid/docs/column-layout.md` (Pinning).
 
 ### HIGH Addressing a dotted column by its accessor key
 
@@ -321,7 +353,7 @@ initialState: { columnVisibility: { address_city: false } },
 The edit path is the exception: `meta.edit.field` and validation issue paths
 stay dotted, because they address the data, not the column.
 
-Source: `src/docs/columns.md` (The column helper).
+Source: `packages/tmdatagrid/docs/columns.md` (The column helper).
 
 ### CRITICAL A component header without `meta.label`
 
@@ -344,7 +376,7 @@ columnHelper.accessor("fullName", {
 });
 ```
 
-Source: `src/tmdatagrid/core/columnUtils.ts`.
+Source: `packages/tmdatagrid/src/core/columnUtils.ts`.
 
 ### HIGH A numeric column without `meta.type`
 
@@ -353,7 +385,7 @@ Source: `src/tmdatagrid/core/columnUtils.ts`.
 as text - `"9"` above `"10"`. The column still sorts and filters, which is why
 it is easy to miss.
 
-Source: `src/tmdatagrid/core/filterOperators.ts`.
+Source: `packages/tmdatagrid/src/core/filterOperators.ts`.
 
 ### HIGH Expecting a move across pinned regions to work
 
@@ -368,7 +400,7 @@ table.getColumn("salary")?.pin(false);
 moveColumn({ table, columnId: "salary", targetId: "age", side: "before" });
 ```
 
-Source: `src/docs/column-layout.md` (Regions).
+Source: `packages/tmdatagrid/docs/column-layout.md` (Regions).
 
 ### HIGH Reaching for the v8 name of a v9 option
 
@@ -390,7 +422,7 @@ columnHelper.accessor("priority", { header: "Priority", sortFn: byRank });
 ```
 
 Source: `@tanstack/table-core` `rowSortingFeature.types.d.ts`, and
-`src/tmdatagrid/useTMDataGrid.tsx` (the registered `sortFns`).
+`packages/tmdatagrid/src/useTMDataGrid.tsx` (the registered `sortFns`).
 
 ### MEDIUM Expecting autosize to measure every row
 
@@ -398,7 +430,7 @@ Autosizing fits the **mounted** rows plus overscan, not every row, because
 virtualization leaves the rest with no DOM to measure. A column autosized at the
 top of a long list can be too narrow for a value further down.
 
-Source: `src/docs/column-layout.md` (Autosizing).
+Source: `packages/tmdatagrid/docs/column-layout.md` (Autosizing).
 
 ### MEDIUM Reordering a column inside a header group
 
@@ -407,7 +439,32 @@ the group header spanning columns that no longer belong to it. Grouped-header
 columns are therefore immovable in both directions, whatever `meta.enableOrdering`
 says.
 
-Source: `src/docs/column-layout.md` (Regions).
+Source: `packages/tmdatagrid/docs/column-layout.md` (Regions).
+
+### MEDIUM Computing a cross-row value in accessorFn
+
+`accessorFn` is handed one row, so a share of a total, a rank or a running
+total has nothing to compute against. Derive the collection once and give the
+grid the finished shape.
+
+Wrong:
+
+```tsx
+columnHelper.accessor((row) => (row.value / total) * 100, { id: "pctOfTotal" });
+```
+
+Correct:
+
+```tsx
+const rows = useMemo(() => {
+  const total = holdings.reduce((sum, h) => sum + h.value, 0);
+  return holdings.map((h) => ({ ...h, pctOfTotal: (h.value / total) * 100 }));
+}, [holdings]);
+
+columnHelper.accessor("pctOfTotal", { header: "Share" });
+```
+
+Source: `packages/tmdatagrid/docs/columns.md` (Columns derived from the other rows).
 
 ## Reference
 
@@ -425,13 +482,12 @@ Source: `src/docs/column-layout.md` (Regions).
 | `moveColumn` | Export | `({ table, columnId, targetId, side }) => void` | – | Moves a column beside another. |
 | `moveColumnByStep` | Export | `({ table, columnId, direction }) => void` | – | Moves it one place. |
 | `getStepTargetColumn` | Export | `(args) => Column \| null` | – | What a step would swap with, or `null` at a region edge. |
-| `getColumnRegion` | Export | `(column) => "left" \| "center" \| "right"` | – | Which pinned region a column is in. |
-| `isColumnReorderable` | Export | `(column, features) => boolean` | – | Whether this column may move at all. |
+| `getColumnRegion` | Export | `(columnPinning, columnId) => "start" \| "center" \| "end"` | – | Which pinned region a column is in. |
+| `getColumnCapabilities(column, features).canReorder` | Export | `boolean` | – | Whether this column may move at all. |
 | `autosizeColumn` | Export | `({ table, columnId, container }) => void` | – | Fits a column to its mounted content. |
-| `measureColumnContentWidth` | Export | `(args) => number` | – | The measurement behind it. |
 | `getColumnLabel` · `getColumnType` · `getColumnDefaultOperator` · `isControlColumn` | Exports | – | – | What the built-in controls read off a column. |
 | `SELECT_COLUMN_ID` · `GROUP_COLUMN_ID` · `DETAILS_COLUMN_ID` · `EDIT_COLUMN_ID` · `ROW_NUMBER_COLUMN_ID` | Exports | ids | – | The generated lanes. |
-| `TMDataGrid.ColumnsButton` · `TMDataGrid.ColumnsPanel` | Components | – | – | Manage columns, and Reset layout. |
+| `TMDataGrid.Menu.Columns` · `TMDataGrid.ColumnsPanel` | Components | `searchable` · Mantine `BoxProps` | – | The column chooser, as menu items and as plain controls. Style props set on the panel. |
 
 See also: the `filtering` skill for operators and filter controls, the `editing`
 skill for the editing meta fields, and the `grouping` skill for what grouping