@azrico/reactgrid 1.6.11 → 1.6.13

package/dist/src/themes/azgrid-theme.css

@@ -1934,123 +1934,124 @@
 	fill: var(--azgrid-row-fg-hover, var(--azgrid-preset-row-fg-hover));
 }
 
-/* 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/src/types/types.d.ts

@@ -62,6 +62,13 @@ export type AzGridProps = {
     details_columns?: LooseColumnDefinition[];
     details_filter?: FilterValues;
     licenseKey?: string;
+    /**
+     * Stable id of this grid. When set, the column widths the user resizes are saved in localStorage
+     * (see `setGridStorageScope`) and restored on the next load. Leave it out to keep the columns' own widths.
+     * Saved widths are matched to columns by name, so grids showing different column sets can share an id.
+     * Columns with `width` become resizable (`width` is used as `defaultWidth`).
+     */
+    gridId?: string;
     /** accessible name of the grid, set as aria-label on the grid root */
     ariaLabel?: string;
     gridRef?: React.MutableRefObject<TypeComputedProps>;

package/dist/src/views/DataGrid.js

@@ -19,6 +19,8 @@ var _useColumnData = require("../hooks/useColumnData");
 var _useDatasource = require("../hooks/useDatasource");
 var _useGridSearch = require("../hooks/useGridSearch");
 var _func_a11y = require("../func/func_a11y");
+var _func_colsizes = require("../func/func_colsizes");
+var _lodash = _interopRequireDefault(require("lodash.debounce"));
 var _defaultRowIndexColumnId = require("@inovua/reactdatagrid-community/normalizeColumns/defaultRowIndexColumnId");
 var _defaultCheckColumnId = require("@inovua/reactdatagrid-community/normalizeColumns/defaultCheckColumnId");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -55,8 +57,22 @@ function AzGrid(props) {
   /* -------------------------------------------------------------------------- */
   /*                                   Columns                                  */
   /* -------------------------------------------------------------------------- */
-  const cached_columns = (0, _useColumnData.useColumnData)(props);
+  const data_columns = (0, _useColumnData.useColumnData)(props);
   const dataSource = (0, _useDatasource.useDataSource)(props.dataSource, props);
+  // saved widths are read once per grid id, resizing only updates this map so the columns aren't re-created mid-drag
+  const savedSizes = _react.default.useRef({
+    sizes: {}
+  });
+  const saveSizesDebounced = _react.default.useMemo(() => props.gridId ? (0, _lodash.default)(() => (0, _func_colsizes.saveColumnSizes)(props.gridId, savedSizes.current.sizes), 300) : null, [props.gridId]);
+  _react.default.useEffect(() => () => saveSizesDebounced === null || saveSizesDebounced === void 0 ? void 0 : saveSizesDebounced.flush(), [saveSizesDebounced]);
+  const cached_columns = _react.default.useMemo(() => {
+    if (!props.gridId) return data_columns;
+    if (savedSizes.current.gridId !== props.gridId) savedSizes.current = {
+      gridId: props.gridId,
+      sizes: (0, _func_colsizes.loadColumnSizes)(props.gridId)
+    };
+    return (0, _func_colsizes.apply_column_sizes)(data_columns, savedSizes.current.sizes);
+  }, [data_columns, props.gridId]);
   const a11y_columns = _react.default.useMemo(() => cached_columns.map(col => (0, _func_a11y.apply_column_a11y)(col, {
     gridEditable: !!props.editable
   })), [cached_columns, props.editable]);
@@ -94,8 +110,17 @@ function AzGrid(props) {
     };
     //append filter types instead of replacing it
     if (finalres.filterTypes) finalres.filterTypes = Object.assign({}, _reactdatagridEnterprise.default.defaultProps.filterTypes, finalres.filterTypes);
+    if (saveSizesDebounced) finalres.onColumnResize = (info, ...rest) => {
+      var _info$column$name, _latestProps$current$2, _latestProps$current$3;
+      const name = (_info$column$name = info.column.name) !== null && _info$column$name !== void 0 ? _info$column$name : info.column.id;
+      if (name != null && (0, _func_colsizes.isValidWidth)(info.width)) {
+        savedSizes.current.sizes[name] = info.width;
+        saveSizesDebounced();
+      }
+      (_latestProps$current$2 = latestProps.current.gridOptions) === null || _latestProps$current$2 === void 0 || (_latestProps$current$3 = _latestProps$current$2.onColumnResize) === null || _latestProps$current$3 === void 0 || _latestProps$current$3.call(_latestProps$current$2, info, ...rest);
+    };
     return finalres;
-  }, [props.gridOptions, base_gridOptions, forcedOptions]);
+  }, [props.gridOptions, base_gridOptions, forcedOptions, saveSizesDebounced]);
   const dynamic_gridOptions = _react.default.useMemo(() => {
     const res = {};
     dynamic_option_names.map(r => {

package/index.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';
 // filter editors for column.filterEditor, so consumers don't import @inovua directly
 export { default as SelectFilter } from '@inovua/reactdatagrid-enterprise/SelectFilter';
 export { default as NumberFilter } from '@inovua/reactdatagrid-enterprise/NumberFilter';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@azrico/reactgrid",
-	"version": "1.6.11",
+	"version": "1.6.13",
 	"main": "dist/index.js",
 	"description": "React Datagrid",
 	"author": "Azrideus <MehrdadTavangar@gmail.com>",

package/src/func/func_colsizes.ts

@@ -0,0 +1,74 @@
+import { ColumnDefinition } from '../types/types';
+
+/** column name -> width in px */
+export type ColumnSizes = { [columnName: string]: number };
+
+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.
+ */
+export function setGridStorageScope(scope: string | undefined) {
+	storageScope = scope == null ? '' : String(scope);
+}
+
+function storageKey(gridId: string) {
+	return `${KEY_PREFIX}:${storageScope}:${gridId}`;
+}
+
+/** Saved column widths of a grid, an empty object when there are none or storage is unavailable. */
+export function loadColumnSizes(gridId: string): ColumnSizes {
+	const sizes: ColumnSizes = {};
+	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;
+}
+
+export function saveColumnSizes(gridId: string, sizes: ColumnSizes) {
+	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. */
+export function clearColumnSizes(gridId: string) {
+	try {
+		localStorage.removeItem(storageKey(gridId));
+	} catch (e) {
+		//nothing to clear
+	}
+}
+
+export function isValidWidth(width: any): width is number {
+	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.
+ */
+export function apply_column_sizes(columns: ColumnDefinition[], sizes: ColumnSizes) {
+	return columns.map((col: any) => {
+		const saved = sizes[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 } as ColumnDefinition;
+		}
+		const { width, ...rest } = col;
+		return { ...rest, defaultWidth: width } as ColumnDefinition;
+	});
+}

package/src/index.tsx

@@ -2,6 +2,7 @@ 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';
 import React from 'react';