@azrico/reactgrid 1.6.1 → 1.6.4

package/CHANGELOG.md

@@ -1,15 +1,29 @@
-# Changelog
-
-All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
-
-### 1.7.0 (2026-10-14)
-
-* Add `advancedFilterLabel` to rename the quick-search label (default "Search").
-* Add `advancedFilterPlaceholder` for the quick-search input. A string is the native placeholder; any other node (custom HTML) is shown over the empty input.
-
-### 1.6.0 (2026-10-14)
-
-* Pass `filterValue`, `sortInfo` and `groupBy` to a `dataSource` function next to `skip`, `limit`, `cached_data` and `last_cache_info`, so header filters can drive a server-side search.
-* With `gridOptions.remoteFilter` / `remoteSort`, a filter or sort change invalidates the data cache and calls `dataSource` again. Local filtering and sorting still reuse the cached rows.
-* Export the typed `AzDataSourceParams` and `AzDataSourceFunc` for the `dataSource` and `details_dataSource` props.
-* Re-export `SelectFilter`, `NumberFilter`, `DateFilter` and `BoolFilter` for `column.filterEditor`.
+# Changelog
+
+All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+
+### Unreleased
+
+* Fix columns with a `type` (`number`, `select`, `bool`, ...) staying read-only unless they were listed in `editableColumns`. A typed column is editable unless you set `editable: false`.
+* Fix a typed column's `editable` function being replaced by `true`. Functions and booleans are kept, so per-cell editability works again.
+* Fix select `items` given as plain strings storing a lowercased value (`"Shelf A"` was saved as `"shelf a"`). The item id is now the original string.
+* Fix the "Failed prop type: Invalid prop `headerDOMProps` of type `function`" warning on every grid. `headerDOMProps` is now an object; `aria-colindex` and `aria-sort` are set on the header cells from the grid state. Header cells also get `data-column`.
+* Add `children` to `AzGridProps`, rendered after the grid.
+* Fix the row context menu ignoring the grid theme with `@azrico/controls` 1.6.2, whose menu is no longer MUI-based and is portaled to `<body>`. The menu now gets the grid's theme class (`azgrid-theme-<name>`) and is styled through the controls' `--azrico-contextmenu-*` variables from the `--azgrid-menu-*` tokens. The MUI `ThemeProvider` around the menu is removed.
+* Add `contextMenuClassName` to add your own classes to the context menu. Use it to bring host variables set on a wrapper element, which the portaled menu no longer inherits.
+
+### 1.7.1 (2026-10-14)
+
+* Fix two quick clicks on different rows firing `onRowDoubleClick`: the double-click check now keys clicks by the row's id instead of `undefined`.
+
+### 1.7.0 (2026-10-14)
+
+* Add `advancedFilterLabel` to rename the quick-search label (default "Search").
+* Add `advancedFilterPlaceholder` for the quick-search input. A string is the native placeholder; any other node (custom HTML) is shown over the empty input.
+
+### 1.6.0 (2026-10-14)
+
+* Pass `filterValue`, `sortInfo` and `groupBy` to a `dataSource` function next to `skip`, `limit`, `cached_data` and `last_cache_info`, so header filters can drive a server-side search.
+* With `gridOptions.remoteFilter` / `remoteSort`, a filter or sort change invalidates the data cache and calls `dataSource` again. Local filtering and sorting still reuse the cached rows.
+* Export the typed `AzDataSourceParams` and `AzDataSourceFunc` for the `dataSource` and `details_dataSource` props.
+* Re-export `SelectFilter`, `NumberFilter`, `DateFilter` and `BoolFilter` for `column.filterEditor`.

package/README.md

@@ -1,164 +1,165 @@
-# @azrico/reactgrid
-
-Private React data grid package for Azrideus' projects.
-
-## Usage
-
-```tsx
-import { AzGrid } from '@azrico/reactgrid';
-import '@azrico/reactgrid/dist/src/themes/azgrid-theme.css';
-
-const columns = [{ name: 'name', header: 'Name', defaultFlex: 1 }];
-const rows = [{ __table_id: '1', name: 'Alice' }];
-
-<AzGrid theme="light" columns={columns} dataSource={rows} />;
-```
-
-The token stylesheet is optional. Without it, the grid uses Inovua's default-light appearance.
-
-## Accessibility
-
-The grid exposes ARIA grid semantics, so screen readers and automation tools can read it from the accessibility tree.
-
-| Element | Attributes |
-| --- | --- |
-| Grid root | `role="grid"`, `aria-rowcount` (total rows incl. header; the full data count when paginated), `aria-colcount` (visible columns), `aria-label`, `aria-readonly="true"` when the grid isn't editable, `aria-busy="true"` while loading |
-| Header row | `role="row"`, `aria-rowindex="1"` |
-| Header cells | `role="columnheader"`, `aria-colindex`, `aria-sort` (`ascending` / `descending` / `none`, sortable columns only) |
-| Rows | `role="row"`, `aria-rowindex` (1-based, header is 1, includes the page offset), `aria-selected` when selection is enabled, `data-row-id` |
-| Body cells | `role="gridcell"`, `aria-colindex`, `data-column="<column name>"`, `aria-readonly="true"` when the cell can't be edited |
-| Row-number cells | `role="rowheader"` |
-
-New props:
-
-- `ariaLabel?: string` on the grid sets the accessible name of the grid.
-- `ariaLabel?: (value, data) => string` on a column sets `aria-label` on its cells. Use it for icons, badges or values whose visible text isn't descriptive.
-
-```tsx
-const columns = [{ name: 'status', header: 'Status', ariaLabel: (value) => `Status: ${value}` }];
-
-<AzGrid ariaLabel="Orders" columns={columns} dataSource={rows} />;
-```
-
-Override any cell attribute with the column's `cellDOMProps` / `headerDOMProps`. Values you set there are kept.
-A `gridOptions.onRenderRow` runs after the grid's own row attributes are set, so it can change them too.
-
-## Themes
-
-Use `theme="light"` (default), `theme="dark"`, or a custom name. Custom names apply
-`azgrid-theme-<name>` to the grid and use light defaults for unspecified variables.
-
-`dark` remains a deprecated alias. `theme` takes precedence; `gridOptions.theme` is ignored.
-
-Set `--azgrid-*` variables on a wrapper, `:root`, or a theme class. Each grid can use a different palette.
-
-```tsx
-<div className="my-grid">
-  <AzGrid theme="light" columns={columns} dataSource={rows} />
-</div>
-```
-
-```css
-.my-grid {
-  --azgrid-accent: #345b93;
-  --azgrid-header-bg: #edf2f8;
-  --azgrid-row-bg-hover: #e4ecf7;
-}
-```
-
-## CSS variables
-
-All variables have light/dark defaults. Use valid CSS values for the named property.
-`--azgrid-locked-column-shadow` accepts a complete `box-shadow` value.
-
-<!-- azgrid-tokens -->
-| Variable | Controls |
-| --- | --- |
-| `--azgrid-bg` | Grid background |
-| `--azgrid-fg` | Grid text |
-| `--azgrid-border` | Grid border and separators |
-| `--azgrid-font-family` | Grid and control fonts |
-| `--azgrid-radius` | Grid, input and menu corner radius; default `0` |
-| `--azgrid-accent` | Focus, sort arrows, checkboxes and selection handles |
-| `--azgrid-transparent` | Transparent structural surfaces |
-| `--azgrid-muted-fg` | Disabled text and secondary icons |
-| `--azgrid-shadow-color` | Menu and input shadow colour |
-| `--azgrid-header-bg` | Header background |
-| `--azgrid-header-fg` | Header text |
-| `--azgrid-header-border` | Header separators |
-| `--azgrid-header-font-size` | Header font size |
-| `--azgrid-header-text-transform` | Header text transform |
-| `--azgrid-header-letter-spacing` | Header letter spacing |
-| `--azgrid-header-font-weight` | Header font weight |
-| `--azgrid-row-bg-even` | Even and non-zebra rows |
-| `--azgrid-row-bg-odd` | Odd rows |
-| `--azgrid-row-bg-hover` | Hovered rows and cells |
-| `--azgrid-row-fg-hover` | Hovered row text |
-| `--azgrid-row-bg-selected` | Selected rows and cells |
-| `--azgrid-row-fg-selected` | Selected row text |
-| `--azgrid-row-bg-active` | Active rows |
-| `--azgrid-cell-border` | Cell border colour |
-| `--azgrid-cell-border-width` | Cell border width |
-| `--azgrid-cell-padding` | Data cell padding |
-| `--azgrid-filter-bg` | Filter row, input, editor and search background |
-| `--azgrid-filter-fg` | Filter input and editor text |
-| `--azgrid-filter-border` | Filter input borders |
-| `--azgrid-filter-placeholder` | Input placeholder text |
-| `--azgrid-filter-focus-ring` | Focused input border and ring |
-| `--azgrid-pagination-bg` | Pagination toolbar and control background |
-| `--azgrid-pagination-fg` | Pagination text and icons |
-| `--azgrid-pagination-border` | Pagination control borders |
-| `--azgrid-menu-bg` | Menu, select dropdown and date picker background |
-| `--azgrid-menu-fg` | Menu text and icons |
-| `--azgrid-menu-border` | Menu borders and separators |
-| `--azgrid-menu-bg-hover` | Hovered and focused menu entries |
-| `--azgrid-scrollbar-track` | Scrollbar tracks |
-| `--azgrid-scrollbar-thumb` | Scrollbar thumbs |
-| `--azgrid-empty-bg` | Empty state background |
-| `--azgrid-empty-fg` | Empty state text |
-| `--azgrid-loading-bg` | Loading overlay background |
-| `--azgrid-loading-fg` | Loading text and spinner |
-| `--azgrid-tree-bg` | Tree and group row background |
-| `--azgrid-tree-fg` | Tree and group text and expand icons |
-| `--azgrid-details-bg` | Row details background |
-| `--azgrid-locked-column-shadow` | Locked column shadow |
-<!-- /azgrid-tokens -->
-
-## Art Deco example
-
-Use dark defaults with an obsidian background, gold accents, square corners and uppercase headers.
-
-```tsx
-<div className="deco-grid">
-  <AzGrid theme="dark" columns={columns} dataSource={rows} />
-</div>
-```
-
-```css
-.deco-grid {
-  --azgrid-bg: #0A0A0A;
-  --azgrid-fg: #eee7d6;
-  --azgrid-border: #6b5824;
-  --azgrid-accent: #D4AF37;
-  --azgrid-radius: 0;
-  --azgrid-header-bg: var(--azgrid-bg);
-  --azgrid-header-fg: var(--azgrid-accent);
-  --azgrid-header-text-transform: uppercase;
-  --azgrid-header-letter-spacing: .1em;
-  --azgrid-header-font-weight: 600;
-  --azgrid-cell-border: var(--azgrid-border);
-  --azgrid-cell-border-width: 1px;
-  --azgrid-row-bg-odd: #12110e;
-  --azgrid-row-bg-hover: #282211;
-  --azgrid-row-bg-selected: #423619;
-  --azgrid-row-bg-active: #332a15;
-  --azgrid-scrollbar-track: var(--azgrid-bg);
-  --azgrid-scrollbar-thumb: var(--azgrid-border);
-  --azgrid-loading-bg: rgba(10, 10, 10, .85);
-}
-```
-
-See [src/example.tsx](src/example.tsx) for light, dark and a complete custom `deco` palette.
-
-Custom renderers must style their own content. External menu portal containers need
-`azgrid-scope`, the matching `azgrid-theme-<name>` class and the host variables.
+# @azrico/reactgrid
+
+Private React data grid package for Azrideus' projects.
+
+## Usage
+
+```tsx
+import { AzGrid } from '@azrico/reactgrid';
+import '@azrico/reactgrid/dist/src/themes/azgrid-theme.css';
+
+const columns = [{ name: 'name', header: 'Name', defaultFlex: 1 }];
+const rows = [{ __table_id: '1', name: 'Alice' }];
+
+<AzGrid theme="light" columns={columns} dataSource={rows} />;
+```
+
+The token stylesheet is optional. Without it, the grid uses Inovua's default-light appearance.
+
+## Accessibility
+
+The grid exposes ARIA grid semantics, so screen readers and automation tools can read it from the accessibility tree.
+
+| Element | Attributes |
+| --- | --- |
+| Grid root | `role="grid"`, `aria-rowcount` (total rows incl. header; the full data count when paginated), `aria-colcount` (visible columns), `aria-label`, `aria-readonly="true"` when the grid isn't editable, `aria-busy="true"` while loading |
+| Header row | `role="row"`, `aria-rowindex="1"` |
+| Header cells | `role="columnheader"`, `aria-colindex`, `aria-sort` (`ascending` / `descending` / `none`, sortable columns only), `data-column="<column id>"` |
+| Rows | `role="row"`, `aria-rowindex` (1-based, header is 1, includes the page offset), `aria-selected` when selection is enabled, `data-row-id` |
+| Body cells | `role="gridcell"`, `aria-colindex`, `data-column="<column name>"`, `aria-readonly="true"` when the cell can't be edited |
+| Row-number cells | `role="rowheader"` |
+
+New props:
+
+- `ariaLabel?: string` on the grid sets the accessible name of the grid.
+- `ariaLabel?: (value, data) => string` on a column sets `aria-label` on its cells. Use it for icons, badges or values whose visible text isn't descriptive.
+
+```tsx
+const columns = [{ name: 'status', header: 'Status', ariaLabel: (value) => `Status: ${value}` }];
+
+<AzGrid ariaLabel="Orders" columns={columns} dataSource={rows} />;
+```
+
+Override any cell attribute with the column's `cellDOMProps` / `headerDOMProps`. Values you set there are kept.
+Pass `headerDOMProps` as an object: Inovua's prop types reject a function there. A function still works but logs a prop-type warning.
+A `gridOptions.onRenderRow` runs after the grid's own row attributes are set, so it can change them too.
+
+## Themes
+
+Use `theme="light"` (default), `theme="dark"`, or a custom name. Custom names apply
+`azgrid-theme-<name>` to the grid and use light defaults for unspecified variables.
+
+`dark` remains a deprecated alias. `theme` takes precedence; `gridOptions.theme` is ignored.
+
+Set `--azgrid-*` variables on a wrapper, `:root`, or a theme class. Each grid can use a different palette.
+
+```tsx
+<div className="my-grid">
+  <AzGrid theme="light" columns={columns} dataSource={rows} />
+</div>
+```
+
+```css
+.my-grid {
+  --azgrid-accent: #345b93;
+  --azgrid-header-bg: #edf2f8;
+  --azgrid-row-bg-hover: #e4ecf7;
+}
+```
+
+## CSS variables
+
+All variables have light/dark defaults. Use valid CSS values for the named property.
+`--azgrid-locked-column-shadow` accepts a complete `box-shadow` value.
+
+<!-- azgrid-tokens -->
+| Variable | Controls |
+| --- | --- |
+| `--azgrid-bg` | Grid background |
+| `--azgrid-fg` | Grid text |
+| `--azgrid-border` | Grid border and separators |
+| `--azgrid-font-family` | Grid and control fonts |
+| `--azgrid-radius` | Grid, input and menu corner radius; default `0` |
+| `--azgrid-accent` | Focus, sort arrows, checkboxes and selection handles |
+| `--azgrid-transparent` | Transparent structural surfaces |
+| `--azgrid-muted-fg` | Disabled text and secondary icons |
+| `--azgrid-shadow-color` | Menu and input shadow colour |
+| `--azgrid-header-bg` | Header background |
+| `--azgrid-header-fg` | Header text |
+| `--azgrid-header-border` | Header separators |
+| `--azgrid-header-font-size` | Header font size |
+| `--azgrid-header-text-transform` | Header text transform |
+| `--azgrid-header-letter-spacing` | Header letter spacing |
+| `--azgrid-header-font-weight` | Header font weight |
+| `--azgrid-row-bg-even` | Even and non-zebra rows |
+| `--azgrid-row-bg-odd` | Odd rows |
+| `--azgrid-row-bg-hover` | Hovered rows and cells |
+| `--azgrid-row-fg-hover` | Hovered row text |
+| `--azgrid-row-bg-selected` | Selected rows and cells |
+| `--azgrid-row-fg-selected` | Selected row text |
+| `--azgrid-row-bg-active` | Active rows |
+| `--azgrid-cell-border` | Cell border colour |
+| `--azgrid-cell-border-width` | Cell border width |
+| `--azgrid-cell-padding` | Data cell padding |
+| `--azgrid-filter-bg` | Filter row, input, editor and search background |
+| `--azgrid-filter-fg` | Filter input and editor text |
+| `--azgrid-filter-border` | Filter input borders |
+| `--azgrid-filter-placeholder` | Input placeholder text |
+| `--azgrid-filter-focus-ring` | Focused input border and ring |
+| `--azgrid-pagination-bg` | Pagination toolbar and control background |
+| `--azgrid-pagination-fg` | Pagination text and icons |
+| `--azgrid-pagination-border` | Pagination control borders |
+| `--azgrid-menu-bg` | Menu, select dropdown and date picker background |
+| `--azgrid-menu-fg` | Menu text and icons |
+| `--azgrid-menu-border` | Menu borders and separators |
+| `--azgrid-menu-bg-hover` | Hovered and focused menu entries |
+| `--azgrid-scrollbar-track` | Scrollbar tracks |
+| `--azgrid-scrollbar-thumb` | Scrollbar thumbs |
+| `--azgrid-empty-bg` | Empty state background |
+| `--azgrid-empty-fg` | Empty state text |
+| `--azgrid-loading-bg` | Loading overlay background |
+| `--azgrid-loading-fg` | Loading text and spinner |
+| `--azgrid-tree-bg` | Tree and group row background |
+| `--azgrid-tree-fg` | Tree and group text and expand icons |
+| `--azgrid-details-bg` | Row details background |
+| `--azgrid-locked-column-shadow` | Locked column shadow |
+<!-- /azgrid-tokens -->
+
+## Art Deco example
+
+Use dark defaults with an obsidian background, gold accents, square corners and uppercase headers.
+
+```tsx
+<div className="deco-grid">
+  <AzGrid theme="dark" columns={columns} dataSource={rows} />
+</div>
+```
+
+```css
+.deco-grid {
+  --azgrid-bg: #0A0A0A;
+  --azgrid-fg: #eee7d6;
+  --azgrid-border: #6b5824;
+  --azgrid-accent: #D4AF37;
+  --azgrid-radius: 0;
+  --azgrid-header-bg: var(--azgrid-bg);
+  --azgrid-header-fg: var(--azgrid-accent);
+  --azgrid-header-text-transform: uppercase;
+  --azgrid-header-letter-spacing: .1em;
+  --azgrid-header-font-weight: 600;
+  --azgrid-cell-border: var(--azgrid-border);
+  --azgrid-cell-border-width: 1px;
+  --azgrid-row-bg-odd: #12110e;
+  --azgrid-row-bg-hover: #282211;
+  --azgrid-row-bg-selected: #423619;
+  --azgrid-row-bg-active: #332a15;
+  --azgrid-scrollbar-track: var(--azgrid-bg);
+  --azgrid-scrollbar-thumb: var(--azgrid-border);
+  --azgrid-loading-bg: rgba(10, 10, 10, .85);
+}
+```
+
+See [src/example.tsx](src/example.tsx) for light, dark and a complete custom `deco` palette.
+
+Custom renderers must style their own content. External menu portal containers need
+`azgrid-scope`, the matching `azgrid-theme-<name>` class and the host variables.

package/config/generate-theme.cjs

@@ -93,7 +93,7 @@ function tokenFor(selector, prop, literal) {
 	return bg ? 'bg' : /fill|stroke/.test(prop) ? 'muted-fg' : 'fg';
 }
 let css = '/* Token overrides for Inovua 5.10.2. Generated by config/generate-theme.cjs.\n * index.css retains layout and icons. Public tokens are inherited; preset tokens\n * are fallback implementation details. Do not set public defaults on the root. */\n';
-for (const [index, selector] of [[0, '.azgrid-scope, .azgrid, .azgrid-theme-light'], [1, '.azgrid-theme-dark']]) {
+for (const [index, selector] of [[0, '.azgrid-scope, .azgrid, .azgrid-theme-light, .azgrid-context-menu'], [1, '.azgrid-theme-dark']]) {
 	css += `${selector} {\n`;
 	for (const [name, values] of Object.entries(tokens)) css += `\t--azgrid-preset-${name}: ${values[index]};\n`;
 	css += '}\n\n';

package/config/theme-extras.css

@@ -74,23 +74,18 @@
 .azgrid-scope .inovua-react-toolkit-menu {
 	border-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
 }
-/* Three classes exceed MUI's generated Paper/MenuItem selector specificity. */
-.azgrid-scope .azgrid-context-menu.MuiPaper-root {
-	background: var(--azgrid-menu-bg, var(--azgrid-preset-menu-bg));
-	color: var(--azgrid-menu-fg, var(--azgrid-preset-menu-fg));
+/* The row context menu is portaled to <body>, outside .azgrid-scope: these rules stay
+ * unscoped and read the tokens from the theme class DataGrid puts on the menu.
+ * Two classes exceed @azrico/controls' single-class menu rules. */
+.azgrid-context-menu.azrico-controls-contextmenu {
+	--azrico-contextmenu-color: var(--azgrid-menu-fg, var(--azgrid-preset-menu-fg));
+	--azrico-contextmenu-background: var(--azgrid-menu-bg, var(--azgrid-preset-menu-bg));
+	--azrico-contextmenu-hover: var(--azgrid-menu-bg-hover, var(--azgrid-preset-menu-bg-hover));
+	--azrico-contextmenu-focus: var(--azgrid-accent, var(--azgrid-preset-accent));
+	--azrico-contextmenu-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
+	--azrico-contextmenu-shadow: 0 3px 8px var(--azgrid-shadow-color, var(--azgrid-preset-shadow-color));
+	--azrico-contextmenu-font: var(--azgrid-font-family, var(--azgrid-preset-font-family));
 	border: 1px solid var(--azgrid-menu-border, var(--azgrid-preset-menu-border));
-	border-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
-	box-shadow: 0 3px 8px var(--azgrid-shadow-color, var(--azgrid-preset-shadow-color));
-	font-family: var(--azgrid-font-family, var(--azgrid-preset-font-family));
-}
-.azgrid-scope .azgrid-context-menu .MuiTypography-root,
-.azgrid-scope .azgrid-context-menu .MuiMenuItem-root {
-	color: inherit;
-	font-family: inherit;
-}
-.azgrid-scope .azgrid-context-menu .MuiMenuItem-root:hover,
-.azgrid-scope .azgrid-context-menu .MuiMenuItem-root.Mui-focusVisible {
-	background: var(--azgrid-menu-bg-hover, var(--azgrid-preset-menu-bg-hover));
 }
 .azgrid-scope, .azgrid-scope * {
 	accent-color: var(--azgrid-accent, var(--azgrid-preset-accent));

package/dist/src/example.js

@@ -30,6 +30,7 @@ const columns = [{
   title: 'Name',
   defaultFlex: 1
 }, {
+  // typed columns are editable without editableColumns, items keep their case
   name: 'job',
   title: 'Job',
   type: 'combo',
@@ -41,8 +42,20 @@ const columns = [{
   type: 'number',
   defaultFlex: 1,
   ariaLabel: value => `${value} years`
+}, {
+  // editable only for rows that are not saved yet (no id)
+  name: 'location',
+  title: 'Location',
+  type: 'select',
+  items: ['Shelf A', 'Shelf B', 'Back Room'],
+  editable: (value, cellProps) => {
+    var _cellProps$data;
+    return !(cellProps !== null && cellProps !== void 0 && (_cellProps$data = cellProps.data) !== null && _cellProps$data !== void 0 && _cellProps$data.id);
+  },
+  defaultFlex: 1
 }];
-const editableColumns = ['job', 'age'];
+// plain columns still need editableColumns
+const editableColumns = ['name'];
 function getData(delta, max = 200) {
   const fd = [];
   for (let index = 0; index < max; index++) {
@@ -50,7 +63,10 @@ function getData(delta, max = 200) {
       __table_id: String(index),
       name: 'user-' + index,
       age: 5 + index,
-      job: 'None'
+      job: 'None',
+      location: 'Shelf A',
+      // every third row is saved, its location is readonly
+      id: index % 3 == 0 ? 'saved-' + index : undefined
     };
     if (delta[index] && typeof delta[index] === 'object') {
       for (const key in delta[index]) {
@@ -139,6 +155,15 @@ function ExampleGrid() {
     return [{
       type: 'text',
       content: product.name
+    }, {
+      title: 'Log row',
+      onClick: row => console.log('context menu: log', row)
+    }, {
+      title: 'Copy name',
+      onClick: row => {
+        var _navigator$clipboard, _row$name;
+        return (_navigator$clipboard = navigator.clipboard) === null || _navigator$clipboard === void 0 ? void 0 : _navigator$clipboard.writeText(String((_row$name = row === null || row === void 0 ? void 0 : row.name) !== null && _row$name !== void 0 ? _row$name : ''));
+      }
     }];
   }, []);
   return _react.default.createElement("div", {

package/dist/src/func/func_a11y.d.ts

@@ -6,6 +6,8 @@ export type ColumnA11yOptions = {
     gridEditable?: boolean;
     /** false skips aria-readonly (for interactive special columns like the checkbox column) */
     markReadonly?: boolean;
+    /** column id when the column object has no id/name (inovua's special columns) */
+    id?: string;
 };
 /**
  * wraps column dom props to add ARIA attributes,
@@ -31,6 +33,18 @@ export type RootA11yOptions = {
     ariaLabel?: string;
     editable?: boolean;
 };
+/**
+ * sets aria-colindex/aria-sort on the header cells of the grid,
+ * attributes the consumer set in an object headerDOMProps are left alone
+ * @param grid computed props of the grid
+ * @param root root element of the grid
+ */
+export declare function apply_header_a11y(grid: GridType | null | undefined, root: Element): void;
+/**
+ * true when a header cell was (re)mounted without its aria-colindex
+ * @param root root element of the grid
+ */
+export declare function has_unsynced_header(root: Element | null): boolean;
 /**
  * true while the grid is loading (loading prop or async datasource)
  * @param grid computed props of the grid