@azrico/reactgrid 1.6.11 → 1.6.13

package/CHANGELOG.md

@@ -1,37 +1,39 @@
-# 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 rows stopping 3px short of the grid's right and bottom edges. The grid's native scroller is now hidden (`scrollbar-width: none`) in the base theme stylesheet; `scrollbar-color` made Chrome use a 15px standard scrollbar that overflowed the 12px offset. The custom scrollbars are unaffected.
-* Make closing the row context menu with Escape opt-in through `escapeClosesContextMenu` (default `false`).
-* Keep the right-clicked row highlighted with the theme's hover colours while its context menu is open, preserving caller row classes and clearing the highlight on close. Correct row hover rules to use hover tokens instead of empty-state tokens.
-* Add `dontAutoCloseContextMenu` to keep the row context menu open on outside clicks, and `hideContextMenu` to hide it while leaving the browser's context menu available.
-* 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.6.5 (2026-10-15)
-
-* Leave the browser's context menu available when a row has no resolved `contextMenuItems`, and close any previously open grid menu. Respect right-clicks already handled by nested row details.
-
-### 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`.
+# 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
+
+* Add `gridId` to save the column widths a user resizes in `localStorage` and restore them on the next load. A saved width replaces the column's `width`/`flex`, saved names that are no longer columns are ignored, and storage errors are ignored. With a `gridId`, a column's `width` is used as `defaultWidth` so the column can be resized. Without it nothing changes.
+* Export `setGridStorageScope(scope)` to scope saved sizes per user (call it before the grids render) and `clearColumnSizes(gridId)` to reset a grid's saved sizes.
+* Fix rows stopping 3px short of the grid's right and bottom edges. The grid's native scroller is now hidden (`scrollbar-width: none`) in the base theme stylesheet; `scrollbar-color` made Chrome use a 15px standard scrollbar that overflowed the 12px offset. The custom scrollbars are unaffected.
+* Make closing the row context menu with Escape opt-in through `escapeClosesContextMenu` (default `false`).
+* Keep the right-clicked row highlighted with the theme's hover colours while its context menu is open, preserving caller row classes and clearing the highlight on close. Correct row hover rules to use hover tokens instead of empty-state tokens.
+* Add `dontAutoCloseContextMenu` to keep the row context menu open on outside clicks, and `hideContextMenu` to hide it while leaving the browser's context menu available.
+* 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.6.5 (2026-10-15)
+
+* Leave the browser's context menu available when a row has no resolved `contextMenuItems`, and close any previously open grid menu. Respect right-clicks already handled by nested row details.
+
+### 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

@@ -16,6 +16,22 @@ const rows = [{ __table_id: '1', name: 'Alice' }];
 
 The token stylesheet is optional. Without it, the grid uses Inovua's default-light appearance.
 
+## Saved column widths
+
+Set `gridId` to keep the column widths a user resizes across reloads. Widths are saved in `localStorage` and matched to columns by name.
+
+```tsx
+import { AzGrid, setGridStorageScope, clearColumnSizes } from '@azrico/reactgrid';
+
+setGridStorageScope(user.id); // once, before the grids render, so users of one browser don't share widths
+
+<AzGrid gridId="current-stock" columns={columns} dataSource={rows} />;
+
+clearColumnSizes('current-stock'); // reset, takes effect when the grid remounts
+```
+
+A column's `width` is used as its `defaultWidth` when `gridId` is set, so it can be resized.
+
 ## Accessibility
 
 The grid exposes ARIA grid semantics, so screen readers and automation tools can read it from the accessibility tree.

package/config/theme-extras.css

@@ -1,120 +1,121 @@
-/* Keep the menu row in its hover state while the pointer is in the portaled menu.
- * Match the strongest selected-row :hover selectors, including their cells. */
-.azgrid.InovuaReactDataGrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row.azgrid-row--menu-open:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty) .InovuaReactDataGrid__row-hover-target,
-.azgrid.InovuaReactDataGrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row.azgrid-row--menu-open:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty) .InovuaReactDataGrid__row-hover-target .InovuaReactDataGrid__cell,
-.azgrid.InovuaReactDataGrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row.azgrid-row--menu-open:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty) .InovuaReactDataGrid__row-hover-target .InovuaReactDataGrid__row-index-column {
-	background: var(--azgrid-row-bg-hover, var(--azgrid-preset-row-bg-hover));
-	color: var(--azgrid-row-fg-hover, var(--azgrid-preset-row-fg-hover));
-}
-
-/* Additional surfaces and typography not assigned colours by Inovua. */
-.azgrid.InovuaReactDataGrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__row--active:not(.InovuaReactDataGrid__row--selected) .InovuaReactDataGrid__cell:not(.InovuaReactDataGrid__cell--no-background) {
-	background: var(--azgrid-row-bg-active, var(--azgrid-preset-row-bg-active));
-}
-.azgrid.azgrid-tree .InovuaReactDataGrid__row:not(.InovuaReactDataGrid__row--selected):not(.InovuaReactDataGrid__row--active) .InovuaReactDataGrid__row-hover-target:not(:hover),
-.azgrid .InovuaReactDataGrid__row--group-row:not(.InovuaReactDataGrid__row--selected):not(.InovuaReactDataGrid__row--active) .InovuaReactDataGrid__row-hover-target:not(:hover) {
-	background: var(--azgrid-tree-bg, var(--azgrid-preset-tree-bg));
-	color: var(--azgrid-tree-fg, var(--azgrid-preset-tree-fg));
-}
-.azgrid.azgrid-tree .InovuaReactDataGrid__cell__content > svg,
-.azgrid .InovuaReactDataGrid__cell--group-expand-cell svg {
-	fill: var(--azgrid-tree-fg, var(--azgrid-preset-tree-fg));
-}
-.azgrid.InovuaReactDataGrid {
-	background: var(--azgrid-bg, var(--azgrid-preset-bg));
-	color: var(--azgrid-fg, var(--azgrid-preset-fg));
-	border-color: var(--azgrid-border, var(--azgrid-preset-border));
-	border-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
-	font-family: var(--azgrid-font-family, var(--azgrid-preset-font-family));
-}
-.azgrid .InovuaReactDataGrid__column-header__content,
-.azgrid .InovuaReactDataGrid__header-group__title {
-	color: var(--azgrid-header-fg, var(--azgrid-preset-header-fg));
-	font-size: var(--azgrid-header-font-size, var(--azgrid-preset-header-font-size));
-	font-weight: var(--azgrid-header-font-weight, var(--azgrid-preset-header-font-weight));
-	text-transform: var(--azgrid-header-text-transform, var(--azgrid-preset-header-text-transform));
-	letter-spacing: var(--azgrid-header-letter-spacing, var(--azgrid-preset-header-letter-spacing));
-}
-.azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__cell {
-	border: var(--azgrid-cell-border-width, var(--azgrid-preset-cell-border-width)) solid var(--azgrid-cell-border, var(--azgrid-preset-cell-border));
-}
-.azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__row--first .InovuaReactDataGrid__cell {
-	/* Inovua's first-row border-top is !important. Keep the same border API on this row. */
-	border-top: var(--azgrid-cell-border-width, var(--azgrid-preset-cell-border-width)) solid var(--azgrid-cell-border, var(--azgrid-preset-cell-border)) !important;
-}
-.azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__cell:not(.InovuaReactDataGrid__cell--group-expand-cell):not(.InovuaReactDataGrid__cell--expand-cell):not(.InovuaReactDataGrid__cell--reorder) {
-	padding: var(--azgrid-cell-padding, var(--azgrid-preset-cell-padding));
-}
-.azgrid .InovuaReactDataGrid__empty-wrapper {
-	background: var(--azgrid-empty-bg, var(--azgrid-preset-empty-bg));
-	color: var(--azgrid-empty-fg, var(--azgrid-preset-empty-fg));
-}
-.azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__row-details {
-	background: var(--azgrid-details-bg, var(--azgrid-preset-details-bg));
-}
-.azgrid .InovuaReactDataGrid__cell--locked-start.InovuaReactDataGrid__cell--last-in-section:after,
-.azgrid .InovuaReactDataGrid__cell--locked-end.InovuaReactDataGrid__cell--first-in-section:after {
-	box-shadow: var(--azgrid-locked-column-shadow, var(--azgrid-preset-locked-column-shadow));
-}
-.azgrid-scope input,
-.azgrid-scope select,
-.azgrid-scope .azgrid-searcharea {
-	color: var(--azgrid-filter-fg, var(--azgrid-preset-filter-fg));
-	background-color: var(--azgrid-filter-bg, var(--azgrid-preset-filter-bg));
-	border-color: var(--azgrid-filter-border, var(--azgrid-preset-filter-border));
-	border-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
-	font-family: var(--azgrid-font-family, var(--azgrid-preset-font-family));
-}
-.azgrid-scope input::placeholder {
-	color: var(--azgrid-filter-placeholder, var(--azgrid-preset-filter-placeholder));
-}
-.azgrid-scope input:focus-visible,
-.azgrid-scope select:focus-visible {
-	outline: 1px solid var(--azgrid-filter-focus-ring, var(--azgrid-preset-filter-focus-ring));
-}
-.azgrid-scope .inovua-react-pagination-toolbar input,
-.azgrid-scope .inovua-react-pagination-toolbar select {
-	background: var(--azgrid-pagination-bg, var(--azgrid-preset-pagination-bg));
-	color: var(--azgrid-pagination-fg, var(--azgrid-preset-pagination-fg));
-	border-color: var(--azgrid-pagination-border, var(--azgrid-preset-pagination-border));
-}
-.azgrid-scope .inovua-react-toolkit-text-input,
-.azgrid-scope .inovua-react-toolkit-combo-box,
-.azgrid-scope .inovua-react-toolkit-menu {
-	border-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
-}
-/* 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));
-}
-.azgrid-scope, .azgrid-scope * {
-	accent-color: var(--azgrid-accent, var(--azgrid-preset-accent));
-	scrollbar-color: var(--azgrid-scrollbar-thumb, var(--azgrid-preset-scrollbar-thumb)) var(--azgrid-scrollbar-track, var(--azgrid-preset-scrollbar-track));
-}
-.azgrid-scope ::-webkit-scrollbar-track {
-	background: var(--azgrid-scrollbar-track, var(--azgrid-preset-scrollbar-track));
-}
-.azgrid-scope ::-webkit-scrollbar-thumb {
-	background: var(--azgrid-scrollbar-thumb, var(--azgrid-preset-scrollbar-thumb));
-}
-/* The grid draws its own scrollbars and pushes the native one out of view by a
-   fixed offset. Setting scrollbar-color switches Chrome to the standard (wider)
-   scrollbar, which then overlaps the last pixels of the viewport. Hide it. */
-.azgrid-scope .inovua-react-scroll-container__wrapper > div {
-	scrollbar-width: none;
-}
-.azgrid-scope .inovua-react-scroll-container__wrapper > div::-webkit-scrollbar {
-	display: none;
-}
-.azgrid .InovuaReactDataGrid__row.deleted:after {
-	border-color: var(--azgrid-muted-fg, var(--azgrid-preset-muted-fg));
-}
+/* Keep the menu row in its hover state while the pointer is in the portaled menu.
+ * Match the strongest selected-row :hover selectors, including their cells. */
+.azgrid.InovuaReactDataGrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row.azgrid-row--menu-open:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty) .InovuaReactDataGrid__row-hover-target,
+.azgrid.InovuaReactDataGrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row.azgrid-row--menu-open:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty) .InovuaReactDataGrid__row-hover-target .InovuaReactDataGrid__cell,
+.azgrid.InovuaReactDataGrid.InovuaReactDataGrid--theme-default-light.InovuaReactDataGrid--show-hover-rows .InovuaReactDataGrid__row.azgrid-row--menu-open:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty) .InovuaReactDataGrid__row-hover-target .InovuaReactDataGrid__row-index-column {
+	background: var(--azgrid-row-bg-hover, var(--azgrid-preset-row-bg-hover));
+	color: var(--azgrid-row-fg-hover, var(--azgrid-preset-row-fg-hover));
+}
+
+/* Additional surfaces and typography not assigned colours by Inovua. */
+.azgrid.InovuaReactDataGrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__row--active:not(.InovuaReactDataGrid__row--selected) .InovuaReactDataGrid__cell:not(.InovuaReactDataGrid__cell--no-background) {
+	background: var(--azgrid-row-bg-active, var(--azgrid-preset-row-bg-active));
+}
+.azgrid.azgrid-tree .InovuaReactDataGrid__row:not(.InovuaReactDataGrid__row--selected):not(.InovuaReactDataGrid__row--active) .InovuaReactDataGrid__row-hover-target:not(:hover),
+.azgrid .InovuaReactDataGrid__row--group-row:not(.InovuaReactDataGrid__row--selected):not(.InovuaReactDataGrid__row--active) .InovuaReactDataGrid__row-hover-target:not(:hover) {
+	background: var(--azgrid-tree-bg, var(--azgrid-preset-tree-bg));
+	color: var(--azgrid-tree-fg, var(--azgrid-preset-tree-fg));
+}
+.azgrid.azgrid-tree .InovuaReactDataGrid__cell__content > svg,
+.azgrid .InovuaReactDataGrid__cell--group-expand-cell svg {
+	fill: var(--azgrid-tree-fg, var(--azgrid-preset-tree-fg));
+}
+.azgrid.InovuaReactDataGrid {
+	background: var(--azgrid-bg, var(--azgrid-preset-bg));
+	color: var(--azgrid-fg, var(--azgrid-preset-fg));
+	border-color: var(--azgrid-border, var(--azgrid-preset-border));
+	border-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
+	font-family: var(--azgrid-font-family, var(--azgrid-preset-font-family));
+}
+.azgrid .InovuaReactDataGrid__column-header__content,
+.azgrid .InovuaReactDataGrid__header-group__title {
+	color: var(--azgrid-header-fg, var(--azgrid-preset-header-fg));
+	font-size: var(--azgrid-header-font-size, var(--azgrid-preset-header-font-size));
+	font-weight: var(--azgrid-header-font-weight, var(--azgrid-preset-header-font-weight));
+	text-transform: var(--azgrid-header-text-transform, var(--azgrid-preset-header-text-transform));
+	letter-spacing: var(--azgrid-header-letter-spacing, var(--azgrid-preset-header-letter-spacing));
+}
+.azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__cell {
+	border: var(--azgrid-cell-border-width, var(--azgrid-preset-cell-border-width)) solid var(--azgrid-cell-border, var(--azgrid-preset-cell-border));
+}
+.azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__row--first .InovuaReactDataGrid__cell {
+	/* Inovua's first-row border-top is !important. Keep the same border API on this row. */
+	border-top: var(--azgrid-cell-border-width, var(--azgrid-preset-cell-border-width)) solid var(--azgrid-cell-border, var(--azgrid-preset-cell-border)) !important;
+}
+.azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__cell:not(.InovuaReactDataGrid__cell--group-expand-cell):not(.InovuaReactDataGrid__cell--expand-cell):not(.InovuaReactDataGrid__cell--reorder) {
+	padding: var(--azgrid-cell-padding, var(--azgrid-preset-cell-padding));
+}
+.azgrid .InovuaReactDataGrid__empty-wrapper {
+	background: var(--azgrid-empty-bg, var(--azgrid-preset-empty-bg));
+	color: var(--azgrid-empty-fg, var(--azgrid-preset-empty-fg));
+}
+.azgrid.InovuaReactDataGrid--theme-default-light .InovuaReactDataGrid__row-details {
+	background: var(--azgrid-details-bg, var(--azgrid-preset-details-bg));
+}
+.azgrid .InovuaReactDataGrid__cell--locked-start.InovuaReactDataGrid__cell--last-in-section:after,
+.azgrid .InovuaReactDataGrid__cell--locked-end.InovuaReactDataGrid__cell--first-in-section:after {
+	box-shadow: var(--azgrid-locked-column-shadow, var(--azgrid-preset-locked-column-shadow));
+}
+.azgrid-scope input,
+.azgrid-scope select,
+.azgrid-scope .azgrid-searcharea {
+	color: var(--azgrid-filter-fg, var(--azgrid-preset-filter-fg));
+	background-color: var(--azgrid-filter-bg, var(--azgrid-preset-filter-bg));
+	border-color: var(--azgrid-filter-border, var(--azgrid-preset-filter-border));
+	border-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
+	font-family: var(--azgrid-font-family, var(--azgrid-preset-font-family));
+}
+.azgrid-scope input::placeholder {
+	color: var(--azgrid-filter-placeholder, var(--azgrid-preset-filter-placeholder));
+}
+.azgrid-scope input:focus-visible,
+.azgrid-scope select:focus-visible {
+	outline: 1px solid var(--azgrid-filter-focus-ring, var(--azgrid-preset-filter-focus-ring));
+}
+.azgrid-scope .inovua-react-pagination-toolbar input,
+.azgrid-scope .inovua-react-pagination-toolbar select {
+	background: var(--azgrid-pagination-bg, var(--azgrid-preset-pagination-bg));
+	color: var(--azgrid-pagination-fg, var(--azgrid-preset-pagination-fg));
+	border-color: var(--azgrid-pagination-border, var(--azgrid-preset-pagination-border));
+}
+.azgrid-scope .inovua-react-toolkit-text-input,
+.azgrid-scope .inovua-react-toolkit-combo-box,
+.azgrid-scope .inovua-react-toolkit-menu {
+	border-radius: var(--azgrid-radius, var(--azgrid-preset-radius));
+}
+/* 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));
+}
+.azgrid-scope, .azgrid-scope * {
+	accent-color: var(--azgrid-accent, var(--azgrid-preset-accent));
+	scrollbar-color: var(--azgrid-scrollbar-thumb, var(--azgrid-preset-scrollbar-thumb)) var(--azgrid-scrollbar-track, var(--azgrid-preset-scrollbar-track));
+}
+.azgrid-scope ::-webkit-scrollbar-track {
+	background: var(--azgrid-scrollbar-track, var(--azgrid-preset-scrollbar-track));
+}
+.azgrid-scope ::-webkit-scrollbar-thumb {
+	background: var(--azgrid-scrollbar-thumb, var(--azgrid-preset-scrollbar-thumb));
+}
+/* The grid draws its own scrollbars and pushes the native one out of view by a
+   fixed offset. Setting scrollbar-color switches Chrome to the standard (wider)
+   scrollbar, which then overlaps the last pixels of the viewport. Hide it only
+   in the row viewport; toolbars need the native scrollbar for correct sizing. */
+.azgrid-scope .InovuaReactDataGrid__virtual-list > .inovua-react-scroll-container__wrapper > div {
+	scrollbar-width: none;
+}
+.azgrid-scope .InovuaReactDataGrid__virtual-list > .inovua-react-scroll-container__wrapper > div::-webkit-scrollbar {
+	display: none;
+}
+.azgrid .InovuaReactDataGrid__row.deleted:after {
+	border-color: var(--azgrid-muted-fg, var(--azgrid-preset-muted-fg));
+}

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 export * from './src/views/DataGrid';
 export * from './src/types/types';
 export { get_row_id, set_row_id, get_col_name, get_col_header } from './src/func/func_grid';
+export { setGridStorageScope, clearColumnSizes } from './src/func/func_colsizes';
 export { default as SelectFilter } from '@inovua/reactdatagrid-enterprise/SelectFilter';
 export { default as NumberFilter } from '@inovua/reactdatagrid-enterprise/NumberFilter';
 export { default as DateFilter } from '@inovua/reactdatagrid-enterprise/DateFilter';

package/dist/index.js

@@ -8,6 +8,8 @@ var _exportNames = {
   set_row_id: true,
   get_col_name: true,
   get_col_header: true,
+  setGridStorageScope: true,
+  clearColumnSizes: true,
   SelectFilter: true,
   NumberFilter: true,
   DateFilter: true,
@@ -37,6 +39,12 @@ Object.defineProperty(exports, "SelectFilter", {
     return _SelectFilter.default;
   }
 });
+Object.defineProperty(exports, "clearColumnSizes", {
+  enumerable: true,
+  get: function () {
+    return _func_colsizes.clearColumnSizes;
+  }
+});
 exports.default = void 0;
 Object.defineProperty(exports, "get_col_header", {
   enumerable: true,
@@ -56,6 +64,12 @@ Object.defineProperty(exports, "get_row_id", {
     return _func_grid.get_row_id;
   }
 });
+Object.defineProperty(exports, "setGridStorageScope", {
+  enumerable: true,
+  get: function () {
+    return _func_colsizes.setGridStorageScope;
+  }
+});
 Object.defineProperty(exports, "set_row_id", {
   enumerable: true,
   get: function () {
@@ -87,6 +101,7 @@ Object.keys(_types).forEach(function (key) {
   });
 });
 var _func_grid = require("./src/func/func_grid");
+var _func_colsizes = require("./src/func/func_colsizes");
 var _SelectFilter = _interopRequireDefault(require("@inovua/reactdatagrid-enterprise/SelectFilter"));
 var _NumberFilter = _interopRequireDefault(require("@inovua/reactdatagrid-enterprise/NumberFilter"));
 var _DateFilter = _interopRequireDefault(require("@inovua/reactdatagrid-enterprise/DateFilter"));

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

@@ -0,0 +1,22 @@
+import { ColumnDefinition } from '../types/types';
+/** column name -> width in px */
+export type ColumnSizes = {
+    [columnName: string]: number;
+};
+/**
+ * Scope the saved column sizes, usually by user id, so different users of one browser don't share them.
+ * Grids read their sizes when they mount, so call this before the grids render.
+ */
+export declare function setGridStorageScope(scope: string | undefined): void;
+/** Saved column widths of a grid, an empty object when there are none or storage is unavailable. */
+export declare function loadColumnSizes(gridId: string): ColumnSizes;
+export declare function saveColumnSizes(gridId: string, sizes: ColumnSizes): void;
+/** Forget the saved column widths of a grid. Grids already on screen keep their current sizes until they remount. */
+export declare function clearColumnSizes(gridId: string): void;
+export declare function isValidWidth(width: any): width is number;
+/**
+ * Make the columns resizable and restore the saved widths.
+ * A column with `width` is controlled by the grid, so it could not be resized: `width` becomes `defaultWidth`.
+ * A saved width replaces the column's width and flex. Saved names that are not columns any more are ignored.
+ */
+export declare function apply_column_sizes(columns: ColumnDefinition[], sizes: ColumnSizes): any[];

package/dist/src/func/func_colsizes.js

@@ -0,0 +1,86 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.apply_column_sizes = apply_column_sizes;
+exports.clearColumnSizes = clearColumnSizes;
+exports.isValidWidth = isValidWidth;
+exports.loadColumnSizes = loadColumnSizes;
+exports.saveColumnSizes = saveColumnSizes;
+exports.setGridStorageScope = setGridStorageScope;
+const KEY_PREFIX = 'azgrid:colsizes';
+let storageScope = '';
+/**
+ * Scope the saved column sizes, usually by user id, so different users of one browser don't share them.
+ * Grids read their sizes when they mount, so call this before the grids render.
+ */
+function setGridStorageScope(scope) {
+  storageScope = scope == null ? '' : String(scope);
+}
+function storageKey(gridId) {
+  return `${KEY_PREFIX}:${storageScope}:${gridId}`;
+}
+/** Saved column widths of a grid, an empty object when there are none or storage is unavailable. */
+function loadColumnSizes(gridId) {
+  const sizes = {};
+  try {
+    const parsed = JSON.parse(localStorage.getItem(storageKey(gridId)) || 'null');
+    if (parsed && typeof parsed === 'object') Object.keys(parsed).forEach(name => {
+      if (isValidWidth(parsed[name])) sizes[name] = parsed[name];
+    });
+  } catch (e) {
+    //private mode, blocked storage or corrupt JSON: behave as if nothing was saved
+  }
+  return sizes;
+}
+function saveColumnSizes(gridId, sizes) {
+  try {
+    localStorage.setItem(storageKey(gridId), JSON.stringify(sizes));
+  } catch (e) {
+    //quota or blocked storage: the sizes just won't persist
+  }
+}
+/** Forget the saved column widths of a grid. Grids already on screen keep their current sizes until they remount. */
+function clearColumnSizes(gridId) {
+  try {
+    localStorage.removeItem(storageKey(gridId));
+  } catch (e) {
+    //nothing to clear
+  }
+}
+function isValidWidth(width) {
+  return typeof width === 'number' && isFinite(width) && width > 0;
+}
+/**
+ * Make the columns resizable and restore the saved widths.
+ * A column with `width` is controlled by the grid, so it could not be resized: `width` becomes `defaultWidth`.
+ * A saved width replaces the column's width and flex. Saved names that are not columns any more are ignored.
+ */
+function apply_column_sizes(columns, sizes) {
+  return columns.map(col => {
+    var _col$name;
+    const saved = sizes[(_col$name = col.name) !== null && _col$name !== void 0 ? _col$name : col.id];
+    if (!isValidWidth(saved) && col.width == null) return col;
+    if (isValidWidth(saved)) {
+      const {
+        width,
+        flex,
+        defaultFlex,
+        ...rest
+      } = col;
+      return {
+        ...rest,
+        defaultWidth: saved
+      };
+    }
+    const {
+      width,
+      ...rest
+    } = col;
+    return {
+      ...rest,
+      defaultWidth: width
+    };
+  });
+}

package/dist/src/index.d.ts

@@ -1,5 +1,6 @@
 export * from './views/DataGrid';
 export * from './types/types';
 export { get_row_id, set_row_id, get_col_name, get_col_header } from './func/func_grid';
+export { setGridStorageScope, clearColumnSizes } from './func/func_colsizes';
 import AzGrid from './views/DataGrid';
 export default AzGrid;

package/dist/src/index.js

@@ -7,8 +7,16 @@ var _exportNames = {
   get_row_id: true,
   set_row_id: true,
   get_col_name: true,
-  get_col_header: true
+  get_col_header: true,
+  setGridStorageScope: true,
+  clearColumnSizes: true
 };
+Object.defineProperty(exports, "clearColumnSizes", {
+  enumerable: true,
+  get: function () {
+    return _func_colsizes.clearColumnSizes;
+  }
+});
 exports.default = void 0;
 Object.defineProperty(exports, "get_col_header", {
   enumerable: true,
@@ -28,6 +36,12 @@ Object.defineProperty(exports, "get_row_id", {
     return _func_grid.get_row_id;
   }
 });
+Object.defineProperty(exports, "setGridStorageScope", {
+  enumerable: true,
+  get: function () {
+    return _func_colsizes.setGridStorageScope;
+  }
+});
 Object.defineProperty(exports, "set_row_id", {
   enumerable: true,
   get: function () {
@@ -59,6 +73,7 @@ Object.keys(_types).forEach(function (key) {
   });
 });
 var _func_grid = require("./func/func_grid");
+var _func_colsizes = require("./func/func_colsizes");
 var _react = _interopRequireDefault(require("react"));
 var _client = _interopRequireDefault(require("react-dom/client"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }