@azrico/reactgrid 1.5.1 → 1.6.0

package/dist/src/views/DataGrid.js

@@ -40,11 +40,17 @@ const forcedOptions = {
   theme: 'default-light'
 };
 const dynamic_option_names = ['selected', 'cellSelection', 'loading', 'limit', 'skip'];
+// consumer callbacks forwarded to the grid; wrapped so a new function doesn't re-render the grid
+const callback_option_names = ['onSkipChange', 'onLimitChange', 'onEditComplete', 'onSelectionChange', 'onCellSelectionChange'];
+// props DataGridCore renders from, other props don't need to re-render the grid
+const core_prop_names = ['className', 'static_gridOptions', 'dynamic_gridOptions', 'columns', 'dataSource', 'gridRef', 'liveGridRef', 'allowChildRows', 'theme', 'dark', 'children'];
 /* -------------------------------------------------------------------------- */
 function AzGrid(props) {
   const gridRefBackup = _react.default.useRef(null);
   const gridRef = props.gridRef || gridRefBackup;
   const liveGridRef = _react.default.useRef(null);
+  const latestProps = _react.default.useRef(props);
+  latestProps.current = props;
   /* -------------------------------------------------------------------------- */
   /*                                   Columns                                  */
   /* -------------------------------------------------------------------------- */
@@ -59,14 +65,15 @@ function AzGrid(props) {
   const base_gridOptions = _react.default.useMemo(() => {
     const firstcolumn = cached_columns[0];
     const licenseKey = props.licenseKey || (0, _func_grid.get_default_key)();
-    const events = {
-      onSkipChange: props.onSkipChange,
-      onLimitChange: props.onLimitChange,
-      onEditComplete: props.onEditComplete
-    };
+    // call the latest consumer callback, only passed when the consumer gave one
+    const events = {};
+    callback_option_names.forEach(name => {
+      if (props[name]) events[name] = (...args) => {
+        var _latestProps$current$, _latestProps$current;
+        return (_latestProps$current$ = (_latestProps$current = latestProps.current)[name]) === null || _latestProps$current$ === void 0 ? void 0 : _latestProps$current$.call(_latestProps$current, ...args);
+      };
+    });
     const extra_ops = {
-      onSelectionChange: props.onSelectionChange,
-      onCellSelectionChange: props.onCellSelectionChange,
       licenseKey: licenseKey,
       editable: props.editable,
       treeColumn: props.allowChildRows ? firstcolumn.name : undefined,
@@ -77,7 +84,7 @@ function AzGrid(props) {
       ...events,
       ...extra_ops
     };
-  }, [cached_columns, props.allowChildRows, props.editable, props.RowDetail, props.onEditComplete]);
+  }, [cached_columns, props.allowChildRows, props.editable, props.RowDetail, props.licenseKey, ...callback_option_names.map(name => !!props[name])]);
   const static_gridOptions = _react.default.useMemo(() => {
     const finalres = {
       ...base_gridOptions,
@@ -132,6 +139,7 @@ function DataGridEventsWrapper(props) {
     onRowClick,
     onRowContextMenu,
     onRenderRow,
+    onRenderLoadMask,
     update_menuRow,
     menuAnchorEl,
     menuRow
@@ -152,7 +160,12 @@ function DataGridEventsWrapper(props) {
       onRenderRow: consumerOnRenderRow ? rowProps => {
         onRenderRow(rowProps);
         consumerOnRenderRow(rowProps);
-      } : onRenderRow
+      } : onRenderRow,
+      // track loading for aria-busy, the consumer's renderLoadMask (if any) still renders the mask
+      renderLoadMask: maskProps => {
+        onRenderLoadMask(maskProps);
+        return opts.renderLoadMask ? opts.renderLoadMask(maskProps) : undefined;
+      }
     };
     const gridEditable = !!props.editable;
     const a11yProps = {
@@ -176,7 +189,7 @@ function DataGridEventsWrapper(props) {
       ...renderProps,
       ...a11yProps
     };
-  }, [props.static_gridOptions, props.editable, onRowClick, onRowContextMenu, onRenderRow]);
+  }, [props.static_gridOptions, props.editable, onRowClick, onRowContextMenu, onRenderRow, onRenderLoadMask]);
   /* -------------------------------------------------------------------------- */
   //TODO ContextMenu not from mui...
   return _react.default.createElement("div", {
@@ -271,7 +284,7 @@ function DataGridSearchWrapper(props) {
   const {
     element,
     filteredData
-  } = (0, _useGridSearch.useGridSearch)(props.gridRef.current, props);
+  } = (0, _useGridSearch.useGridSearch)(props);
   return _react.default.createElement("div", {
     className: 'azgrid-flexed azgrid-flexlayout azgrid-nooverflow'
   }, element, _react.default.createElement(DataGridCore, {
@@ -279,18 +292,24 @@ function DataGridSearchWrapper(props) {
     dataSource: filteredData
   }));
 }
-function DataGridCore(props) {
+const DataGridCore = _react.default.memo(DataGridCoreView, (prev, next) => core_prop_names.every(name => prev[name] === next[name]));
+function DataGridCoreView(props) {
   var _props$theme3;
+  const {
+    gridRef,
+    liveGridRef
+  } = props;
+  const handle = _react.default.useCallback(ref => {
+    if (ref) gridRef.current = ref.current;
+    if (liveGridRef) liveGridRef.current = ref;
+  }, [gridRef, liveGridRef]);
   return _react.default.createElement("div", {
     className: (0, _clsx.default)(props.className, 'azgrid-flexed', 'azgrid-flexlayout')
   }, _react.default.createElement(_reactdatagridEnterprise.default, {
     ...props.static_gridOptions,
     ...props.dynamic_gridOptions,
     rowIndexColumn: props.static_gridOptions.rowIndexColumn || true,
-    handle: ref => {
-      if (ref) props.gridRef.current = ref.current;
-      if (props.liveGridRef) props.liveGridRef.current = ref;
-    },
+    handle: handle,
     theme: "default-light",
     className: (0, _clsx.default)('azgrid azgrid-flexed', props.allowChildRows && 'azgrid-tree', `azgrid-theme-${(_props$theme3 = props.theme) !== null && _props$theme3 !== void 0 ? _props$theme3 : props.dark ? 'dark' : 'light'}`),
     columns: props.columns,

package/index.ts

@@ -1,6 +1,11 @@
 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';
+// 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';
+export { default as DateFilter } from '@inovua/reactdatagrid-enterprise/DateFilter';
+export { default as BoolFilter } from '@inovua/reactdatagrid-enterprise/BoolFilter';
 
 import { AzGrid } from './src/views/DataGrid';
 export default AzGrid;

package/package.json

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

package/src/func/func_a11y.ts

@@ -115,6 +115,14 @@ export function get_grid_row_count(grid: GridType): number {
 
 export type RootA11yOptions = { ariaLabel?: string; editable?: boolean };
 
+/**
+ * true while the grid is loading (loading prop or async datasource)
+ * @param grid computed props of the grid
+ */
+export function is_grid_busy(grid: GridType | null | undefined) {
+	return !!(grid as any)?.computedLoading;
+}
+
 /**
  * root element of the grid, null when it isn't mounted
  * @param grid computed props of the grid
@@ -136,6 +144,7 @@ export function get_root_a11y_key(grid: GridType | null | undefined, options: Ro
 		(g.visibleColumns || []).length,
 		options.ariaLabel ?? '',
 		options.editable ? 1 : 0,
+		is_grid_busy(g) ? 1 : 0,
 	].join('|');
 }
 
@@ -155,5 +164,6 @@ export function apply_root_a11y(grid: GridType | null | undefined, options: Root
 	set_attr(el, 'aria-colcount', (g.visibleColumns || []).length);
 	set_attr(el, 'aria-label', options.ariaLabel);
 	set_attr(el, 'aria-readonly', options.editable ? undefined : 'true');
+	set_attr(el, 'aria-busy', is_grid_busy(g) ? 'true' : undefined);
 	return el;
 }

package/src/func/func_child.ts

@@ -1,83 +1,92 @@
-type mrow = { __parent__table_id: any; __table_id: any; __children?: any[] };
-type converted_row = { parent: any; self: any; data: mrow };
-
-function getParentId(obj) {
-	return obj.__parent__table_id ?? obj.parentid ?? obj.parent;
-}
-function getSelfId(obj) {
-	return obj.__table_id ?? obj._id;
-}
-//given an array of rows, fixes parent,child relations
-export function fix_parent_child_relations<T extends mrow>(rows: T[]): T[] {
-	if (!Array.isArray(rows)) rows = [];
-	const anyparentid = rows.find((r) => getParentId(r));
-	const anyselfid = rows.find((r) => getSelfId(r));
-	if (!anyparentid || !anyselfid) return rows;
-
-	const converted_rows: converted_row[] = rows
-		.filter((r) => r != null)
-		.map((r) => {
-			return { parent: getParentId(r), self: getSelfId(r), data: r };
-		});
-
-	const top_level_rows: converted_row[] = converted_rows.filter((r) => !r.parent);
-	const any_child = converted_rows.find((r) => Boolean(r.parent));
-	if (any_child) {
-		//find children of top-level parents:
-		for (let index = 0; index < top_level_rows.length; index++) {
-			const mrow = top_level_rows[index];
-			assign_children(mrow, converted_rows);
-		}
-	}
-	return top_level_rows.map((r) => r.data) as T[];
-}
-
-function assign_children(row: converted_row, all_rows: converted_row[]) {
-	const my_children = all_rows.filter((s) => row.self == s.parent);
-	if (my_children.length > 0) {
-		//find children of my children:
-		for (let index = 0; index < my_children.length; index++) {
-			const child = my_children[index];
-			assign_children(child, all_rows);
-		}
-		row.data.__children = my_children.map((r) => r.data);
-	} else if (!Array.isArray(row.data.__children) || row.data.__children.length == 0)
-		row.data.__children = undefined;
-}
-export class func_selection {
-	static getVirtualElement(x = 0, y = 0) {
-		const boundsRect = func_selection.generateGetBoundingClientRect(x, y); 
-		return {
-			getBoundingClientRect: boundsRect,
-		};
-	}
-	static generateGetBoundingClientRect(x = 0, y = 0) {
-		return () => ({
-			width: 0,
-			height: 0,
-			top: y,
-			right: x,
-			bottom: y,
-			left: x,
-		});
-	}
-	static get_selectedText(): string {
-		var text: any = '';
-		if (window.getSelection) {
-			text = window.getSelection()?.toString();
-		} else if (
-			(document as any).selection &&
-			(document as any).selection.type != 'Control'
-		) {
-			text = (document as any).selection.createRange()?.text;
-		}
-		return text || '';
-	}
-	static has_selection(): boolean {
-		const slct = window.getSelection();
-		if (slct == null) return false;
-		if (slct.type == null) return func_selection.get_selectedText().length !== 0;
-		if (slct.type === 'Range') return true;
-		return false;
-	}
-}
+type mrow = { __parent__table_id: any; __table_id: any; __children?: any[] };
+type converted_row = { parent: any; self: any; data: mrow };
+
+function getParentId(obj) {
+	return obj.__parent__table_id ?? obj.parentid ?? obj.parent;
+}
+function getSelfId(obj) {
+	return obj.__table_id ?? obj._id;
+}
+//given an array of rows, fixes parent,child relations
+export function fix_parent_child_relations<T extends mrow>(rows: T[]): T[] {
+	if (!Array.isArray(rows)) rows = [];
+	const anyparentid = rows.find((r) => getParentId(r));
+	const anyselfid = rows.find((r) => getSelfId(r));
+	if (!anyparentid || !anyselfid) return rows;
+
+	const converted_rows: converted_row[] = rows
+		.filter((r) => r != null)
+		.map((r) => {
+			return { parent: getParentId(r), self: getSelfId(r), data: r };
+		});
+
+	const top_level_rows: converted_row[] = converted_rows.filter((r) => !r.parent);
+	//group rows by parent id once, instead of scanning all rows for every parent
+	const children_by_parent = new Map<string, converted_row[]>();
+	for (let index = 0; index < converted_rows.length; index++) {
+		const r = converted_rows[index];
+		if (!r.parent) continue;
+		const key = String(r.parent);
+		const siblings = children_by_parent.get(key);
+		if (siblings) siblings.push(r);
+		else children_by_parent.set(key, [r]);
+	}
+	if (children_by_parent.size > 0) {
+		//find children of top-level parents:
+		for (let index = 0; index < top_level_rows.length; index++) {
+			const mrow = top_level_rows[index];
+			assign_children(mrow, children_by_parent);
+		}
+	}
+	return top_level_rows.map((r) => r.data) as T[];
+}
+
+function assign_children(row: converted_row, children_by_parent: Map<string, converted_row[]>) {
+	const my_children = row.self == null ? undefined : children_by_parent.get(String(row.self));
+	if (my_children && my_children.length > 0) {
+		//find children of my children:
+		for (let index = 0; index < my_children.length; index++) {
+			const child = my_children[index];
+			assign_children(child, children_by_parent);
+		}
+		row.data.__children = my_children.map((r) => r.data);
+	} else if (!Array.isArray(row.data.__children) || row.data.__children.length == 0)
+		row.data.__children = undefined;
+}
+export class func_selection {
+	static getVirtualElement(x = 0, y = 0) {
+		const boundsRect = func_selection.generateGetBoundingClientRect(x, y); 
+		return {
+			getBoundingClientRect: boundsRect,
+		};
+	}
+	static generateGetBoundingClientRect(x = 0, y = 0) {
+		return () => ({
+			width: 0,
+			height: 0,
+			top: y,
+			right: x,
+			bottom: y,
+			left: x,
+		});
+	}
+	static get_selectedText(): string {
+		var text: any = '';
+		if (window.getSelection) {
+			text = window.getSelection()?.toString();
+		} else if (
+			(document as any).selection &&
+			(document as any).selection.type != 'Control'
+		) {
+			text = (document as any).selection.createRange()?.text;
+		}
+		return text || '';
+	}
+	static has_selection(): boolean {
+		const slct = window.getSelection();
+		if (slct == null) return false;
+		if (slct.type == null) return func_selection.get_selectedText().length !== 0;
+		if (slct.type === 'Range') return true;
+		return false;
+	}
+}

package/src/func/func_grid.ts

@@ -17,12 +17,24 @@ const defaultColumnOptions: ColumnDefinition = {
 	editable: false,
 };
 
-export async function ApplyDataSource(datasource, props) {
+export async function ApplyDataSource(
+	datasource,
+	props,
+	remote: { remoteFilter?: boolean; remoteSort?: boolean } = {}
+) {
 	let result_data: any = undefined;
 
 	let isUsingCache = false;
 
-	const cacheInfo = { ds: datasource, skip: props.skip, limit: props.limit };
+	//filter/sort are only part of the key when they are sent to a remote dataSource,
+	//local filtering/sorting keeps reusing the cached rows
+	const cacheInfo = {
+		ds: datasource,
+		skip: props.skip,
+		limit: props.limit,
+		filterValue: remote.remoteFilter ? props.filterValue : undefined,
+		sortInfo: remote.remoteSort ? props.sortInfo : undefined,
+	};
 	//check if we can used cached data
 	//if the datasource is changed since last render, we should invalidate cache
 	if (!validateCache(props.last_cache_info.current, cacheInfo, props.looseCacheCheck)) {
@@ -289,7 +301,8 @@ export function get_default_key() {
 
 //check if two cache objects are the same
 export function validateCache(current: any, old: any, looseCheck = false) {
-	if (!old || !object_equals(current, old)) return false;
+	//deep compare skip/limit/filterValue/sortInfo, array order matters (sort priority)
+	if (!old || !object_equals(current, old, { strictArrayCheck: true })) return false;
 
 	if (looseCheck) return true;
 

package/src/hooks/useColumnData.ts

@@ -1,34 +1,28 @@
-import React from 'react';
-import {
-	AzGridProps,
-	DataGridWrapperProps,
-	GridType,
-	LooseColumnDefinition,
-} from '../types/types';
-import { applyColumnData, find_realData, get_row_id } from '../func/func_grid';
-import { func_selection } from '../func/func_child';
-
-export function useColumnData(
-	inputOrProps: undefined | any[] | LooseColumnDefinition[] | AzGridProps
-) {
-	if (inputOrProps == null) return [];
-	if (Array.isArray(inputOrProps)) return useThisColumnData(inputOrProps);
-	return usePropsColumnData(inputOrProps);
-}
-function useThisColumnData(cols: any[]) {
-	return React.useMemo(() => {
-		return applyColumnData(cols);
-	}, [cols]);
-}
-function usePropsColumnData(props: AzGridProps) {
-	return React.useMemo(() => {
-		return applyColumnData(props);
-	}, [
-		props.columns,
-		props.leftColumns,
-		props.rightColumns,
-		props.editableColumns,
-		props.columnExtensions,
-		props.customColumns,
-	]);
-}
+import React from 'react';
+import { AzGridProps, LooseColumnDefinition } from '../types/types';
+import { applyColumnData } from '../func/func_grid';
+
+const EMPTY_COLUMNS: any[] = [];
+
+export function useColumnData(
+	inputOrProps: undefined | any[] | LooseColumnDefinition[] | AzGridProps
+) {
+	// one useMemo for every input kind, so switching between them keeps the hook order
+	const isProps = inputOrProps != null && !Array.isArray(inputOrProps);
+	const props = (isProps ? inputOrProps : {}) as AzGridProps;
+	const deps = isProps
+		? [
+				props.columns,
+				props.leftColumns,
+				props.rightColumns,
+				props.editableColumns,
+				props.columnExtensions,
+				props.customColumns,
+		  ]
+		: [inputOrProps, null, null, null, null, null];
+
+	return React.useMemo(() => {
+		if (inputOrProps == null) return EMPTY_COLUMNS;
+		return applyColumnData(inputOrProps);
+	}, [isProps, ...deps]);
+}

package/src/hooks/useDatasource.ts

@@ -1,25 +1,32 @@
-import React from 'react';
-import { AzGridProps, DataGridWrapperProps, GridType } from '../types/types';
-import {
-	applyColumnData,
-	ApplyDataSource,
-	find_realData,
-	get_row_id,
-} from '../func/func_grid';
-import { func_selection } from '../func/func_child';
-
-export function useDataSource(ds: any, props: AzGridProps) {
-	const cached_data = React.useRef<any>();
-	const last_cache_info = React.useRef<any>();
-	return React.useCallback(
-		async (dt) => {
-			return await ApplyDataSource(ds, {
-				skip: dt?.skip,
-				limit: dt?.limit,
-				cached_data: cached_data,
-				last_cache_info: last_cache_info,
-			});
-		},
-		[ds]
-	);
-}
+import React from 'react';
+import { AzDataSourceParams, AzGridProps, DataGridWrapperProps, GridType } from '../types/types';
+import {
+	applyColumnData,
+	ApplyDataSource,
+	find_realData,
+	get_row_id,
+} from '../func/func_grid';
+import { func_selection } from '../func/func_child';
+
+export function useDataSource(ds: any, props: AzGridProps) {
+	const cached_data = React.useRef<any>();
+	const last_cache_info = React.useRef<any>();
+	// filter/sort only change the result when the grid sends them to the dataSource
+	const remoteFilter = !!props?.gridOptions?.remoteFilter;
+	const remoteSort = !!props?.gridOptions?.remoteSort;
+	return React.useCallback(
+		async (dt) => {
+			const params: AzDataSourceParams = {
+				skip: dt?.skip,
+				limit: dt?.limit,
+				filterValue: dt?.filterValue,
+				sortInfo: dt?.sortInfo,
+				groupBy: dt?.groupBy,
+				cached_data: cached_data,
+				last_cache_info: last_cache_info,
+			};
+			return await ApplyDataSource(ds, params, { remoteFilter, remoteSort });
+		},
+		[ds, remoteFilter, remoteSort]
+	);
+}

package/src/hooks/useGridEvents.ts

@@ -7,6 +7,7 @@ import {
 	apply_row_a11y,
 	get_grid_root,
 	get_root_a11y_key,
+	is_grid_busy,
 } from '../func/func_a11y';
 
 function useGridMenuRow() {
@@ -20,6 +21,9 @@ function useGridMenuRow() {
 }
 export function useGridEvents(grid: GridType, props: DataGridWrapperProps) {
 	const click_data = React.useRef<any>(null);
+	// latest props, so the callbacks below stay stable and don't re-render the grid
+	const latestProps = React.useRef(props);
+	latestProps.current = props;
 	const { update_menuRow, menuAnchorEl, menuRow } = useGridMenuRow();
 
 	const refreshColumn = React.useCallback(
@@ -46,26 +50,21 @@ export function useGridEvents(grid: GridType, props: DataGridWrapperProps) {
 	/* -------------------------------------------------------------------------- */
 	/*                                   events                                   */
 	/* -------------------------------------------------------------------------- */
-	const onRowClick = React.useCallback(
-		(rowProps, event) => {
-			const nowDate = Date.now();
-			const lastclick: number = click_data.current[get_row_id(rowProps)];
-			if (lastclick) {
-				const diffTime = Math.abs(nowDate - lastclick);
-				if (diffTime < 400) {
-					click_data.current[get_row_id(rowProps)] = null;
-					return (
-						props.onRowDoubleClick &&
-						props.onRowDoubleClick(rowProps.rowIndex, rowProps.data)
-					);
-				}
+	const onRowClick = React.useCallback((rowProps, event) => {
+		const { onRowClick, onRowDoubleClick } = latestProps.current;
+		const nowDate = Date.now();
+		const lastclick: number = click_data.current[get_row_id(rowProps)];
+		if (lastclick) {
+			const diffTime = Math.abs(nowDate - lastclick);
+			if (diffTime < 400) {
+				click_data.current[get_row_id(rowProps)] = null;
+				return onRowDoubleClick && onRowDoubleClick(rowProps.rowIndex, rowProps.data);
 			}
+		}
 
-			click_data.current[get_row_id(rowProps)] = nowDate;
-			return props.onRowClick && props.onRowClick(rowProps.rowIndex, rowProps.data);
-		},
-		[props.onRowClick, props.onRowDoubleClick]
-	);
+		click_data.current[get_row_id(rowProps)] = nowDate;
+		return onRowClick && onRowClick(rowProps.rowIndex, rowProps.data);
+	}, []);
 
 	React.useEffect(() => {
 		click_data.current = {};
@@ -87,28 +86,39 @@ export function useGridEvents(grid: GridType, props: DataGridWrapperProps) {
 
 	/* -------------------------------------------------------------------------- */
 	/* ------------------------------ Accessibility ----------------------------- */
-	const latestProps = React.useRef(props);
-	latestProps.current = props;
 	const rootSyncFrame = React.useRef(0);
 	// last applied root values, so row renders (e.g. while scrolling) don't re-apply them
-	const lastRoot = React.useRef<{ el: Element | null; key: string }>({ el: null, key: '' });
+	const lastRoot = React.useRef<{ el: Element | null; key: string; busy: boolean }>({
+		el: null,
+		key: '',
+		busy: false,
+	});
 	const getRootOptions = () => ({
 		ariaLabel: latestProps.current.ariaLabel,
 		editable: !!latestProps.current.editable,
 	});
 	// root attributes are set on the DOM node, batched to once per frame
-	const scheduleRootSync = React.useCallback(() => {
+	const scheduleRootSync = React.useCallback((force = false) => {
 		if (rootSyncFrame.current || typeof requestAnimationFrame === 'undefined') return;
 		const grid = latestProps.current.liveGridRef?.current?.current;
 		const key = get_root_a11y_key(grid, getRootOptions());
-		if (key && key === lastRoot.current.key && get_grid_root(grid) === lastRoot.current.el)
+		if (
+			!force &&
+			key &&
+			key === lastRoot.current.key &&
+			get_grid_root(grid) === lastRoot.current.el
+		)
 			return;
 		rootSyncFrame.current = requestAnimationFrame(() => {
 			rootSyncFrame.current = 0;
 			const liveGrid = latestProps.current.liveGridRef?.current?.current;
 			const options = getRootOptions();
 			const el = apply_root_a11y(liveGrid, options);
-			lastRoot.current = { el, key: el ? get_root_a11y_key(liveGrid, options) : '' };
+			lastRoot.current = {
+				el,
+				key: el ? get_root_a11y_key(liveGrid, options) : '',
+				busy: el ? is_grid_busy(liveGrid) : false,
+			};
 		});
 	}, []);
 	React.useEffect(() => {
@@ -130,8 +140,14 @@ export function useGridEvents(grid: GridType, props: DataGridWrapperProps) {
 		scheduleRootSync();
 	}, []);
 
+	// called by the grid on every render with the load mask state, keeps aria-busy in sync
+	const onRenderLoadMask = React.useCallback((maskProps: { visible?: boolean }) => {
+		if (!!maskProps?.visible !== lastRoot.current.busy) scheduleRootSync(true);
+	}, []);
+
 	return {
 		onRowClick,
+		onRenderLoadMask,
 		onRowContextMenu,
 		onRenderRow,
 		update_menuRow,