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

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.2'
+  library_version: '2.0.0-beta.21'
 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,61 @@ 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. The `cellExport` Table prop is
+deprecated: it is converted and merged over `exportOptions` for this menu only.
 
 ## 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 +177,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 +192,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,16 +216,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. |
+| `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. |
+| `cellExport` | Table prop | `TMDataGridCellExportOptions` | – | Deprecated; merged over `exportOptions` for the cell-range menu only. |
 | `isSameCell` · `resolveCellMove` | Exports | – | – | The cursor arithmetic, for a custom navigator. |
 | `resolveRangeBounds` · `isWithinBounds` · `boundsEdges` · `boundsCellCount` | Exports | – | – | The rectangle arithmetic. |
 | `data-focused` | Data attribute | – | – | On the focused cell. |

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.2'
+  library_version: '2.0.0-beta.21'
 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
@@ -55,6 +55,26 @@ const columns = columnHelper.columns([
 Define columns at module scope. A new array on every render rebuilds the table's
 column model.
 
+A dotted `accessorKey` reads a nested field, and the column id it derives
+replaces the dots: `accessorKey: "address.city"` makes column id
+`address_city`, while the edit path stays `"address.city"`. Anything that
+addresses the column by id - `initialState`, `editing.columns`, `moveColumn`,
+a test selector - takes the underscore form.
+
+`columnHelper.group` nests columns under a shared header; `columns` takes
+another `columnHelper.columns` call, not a bare array:
+
+```tsx
+columnHelper.group({
+  id: "person",
+  header: "Person",
+  columns: columnHelper.columns([
+    columnHelper.accessor("firstName", { header: "First" }),
+    columnHelper.accessor("lastName", { header: "Last" }),
+  ]),
+});
+```
+
 ## meta
 
 | Field | Type | Default | Description |
@@ -77,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`:
@@ -154,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.
@@ -224,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. |
@@ -246,7 +272,7 @@ asks for it.
 | Checkbox | `SELECT_COLUMN_ID` | Selection is on and the mode has checkboxes |
 | Tree | `GROUP_COLUMN_ID` | A column is grouped |
 | Details | `DETAILS_COLUMN_ID` | `renderDetails` is set |
-| Edit | `EDIT_COLUMN_ID` | Row mode, draft mode, or `editing.onRowDelete` |
+| Edit | `EDIT_COLUMN_ID` | Row mode, `editing.draft`, or `editing.onRowDelete` |
 
 They are structural: fixed width, no column menu, and they cannot be sorted,
 filtered, resized, re-pinned or moved. The checkbox lane anchors the left pinned
@@ -279,7 +305,55 @@ 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
+
+A dotted `accessorKey` produces a column id with underscores, so state and
+calls keyed by column id silently match nothing when given the dotted form.
+
+Wrong:
+
+```tsx
+initialState: { columnVisibility: { "address.city": false } },
+```
+
+Correct:
+
+```tsx
+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: `packages/tmdatagrid/docs/columns.md` (The column helper).
 
 ### CRITICAL A component header without `meta.label`
 
@@ -302,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`
 
@@ -311,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
 
@@ -326,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
 
@@ -348,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
 
@@ -356,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
 
@@ -365,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
 
@@ -383,13 +482,13 @@ 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. |
+| `getColumnRegion` | Export | `(column) => "start" \| "center" \| "end"` | – | Which pinned region a column is in. |
 | `isColumnReorderable` | Export | `(column, features) => 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