@azrico/reactgrid 1.5.1 → 1.6.0

package/CHANGELOG.md

@@ -0,0 +1,10 @@
+# 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.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

@@ -22,7 +22,7 @@ The grid exposes ARIA grid semantics, so screen readers and automation tools can
 
 | 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 |
+| 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` |

package/dist/index.d.ts

@@ -1,5 +1,9 @@
 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 { 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/dist/index.js

@@ -7,8 +7,36 @@ var _exportNames = {
   get_row_id: true,
   set_row_id: true,
   get_col_name: true,
-  get_col_header: true
+  get_col_header: true,
+  SelectFilter: true,
+  NumberFilter: true,
+  DateFilter: true,
+  BoolFilter: true
 };
+Object.defineProperty(exports, "BoolFilter", {
+  enumerable: true,
+  get: function () {
+    return _BoolFilter.default;
+  }
+});
+Object.defineProperty(exports, "DateFilter", {
+  enumerable: true,
+  get: function () {
+    return _DateFilter.default;
+  }
+});
+Object.defineProperty(exports, "NumberFilter", {
+  enumerable: true,
+  get: function () {
+    return _NumberFilter.default;
+  }
+});
+Object.defineProperty(exports, "SelectFilter", {
+  enumerable: true,
+  get: function () {
+    return _SelectFilter.default;
+  }
+});
 exports.default = void 0;
 Object.defineProperty(exports, "get_col_header", {
   enumerable: true,
@@ -59,4 +87,10 @@ Object.keys(_types).forEach(function (key) {
   });
 });
 var _func_grid = require("./src/func/func_grid");
+var _SelectFilter = _interopRequireDefault(require("@inovua/reactdatagrid-enterprise/SelectFilter"));
+var _NumberFilter = _interopRequireDefault(require("@inovua/reactdatagrid-enterprise/NumberFilter"));
+var _DateFilter = _interopRequireDefault(require("@inovua/reactdatagrid-enterprise/DateFilter"));
+var _BoolFilter = _interopRequireDefault(require("@inovua/reactdatagrid-enterprise/BoolFilter"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// filter editors for column.filterEditor, so consumers don't import @inovua directly
 var _default = exports.default = _DataGrid.AzGrid;

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

@@ -31,6 +31,11 @@ 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 declare function is_grid_busy(grid: GridType | null | undefined): boolean;
 /**
  * root element of the grid, null when it isn't mounted
  * @param grid computed props of the grid

package/dist/src/func/func_a11y.js

@@ -9,6 +9,7 @@ exports.apply_row_a11y = apply_row_a11y;
 exports.get_grid_root = get_grid_root;
 exports.get_grid_row_count = get_grid_row_count;
 exports.get_root_a11y_key = get_root_a11y_key;
+exports.is_grid_busy = is_grid_busy;
 function set_default(target, key, value) {
   if (target[key] === undefined && value !== undefined && value !== null) target[key] = value;
 }
@@ -100,6 +101,13 @@ function get_grid_row_count(grid) {
   const offset = g.computedLivePagination ? 0 : g.computedSkip || 0;
   return Math.max(g.paginationCount || 0, offset + rendered);
 }
+/**
+ * true while the grid is loading (loading prop or async datasource)
+ * @param grid computed props of the grid
+ */
+function is_grid_busy(grid) {
+  return !!(grid !== null && grid !== void 0 && grid.computedLoading);
+}
 /**
  * root element of the grid, null when it isn't mounted
  * @param grid computed props of the grid
@@ -117,7 +125,7 @@ function get_root_a11y_key(grid, options) {
   var _options$ariaLabel;
   const g = grid;
   if (!g) return '';
-  return [get_grid_row_count(g), (g.visibleColumns || []).length, (_options$ariaLabel = options.ariaLabel) !== null && _options$ariaLabel !== void 0 ? _options$ariaLabel : '', options.editable ? 1 : 0].join('|');
+  return [get_grid_row_count(g), (g.visibleColumns || []).length, (_options$ariaLabel = options.ariaLabel) !== null && _options$ariaLabel !== void 0 ? _options$ariaLabel : '', options.editable ? 1 : 0, is_grid_busy(g) ? 1 : 0].join('|');
 }
 /**
  * sets ARIA attributes on the grid root element
@@ -135,5 +143,6 @@ function apply_root_a11y(grid, options) {
   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/dist/src/func/func_child.js

@@ -27,23 +27,31 @@ function fix_parent_child_relations(rows) {
     };
   });
   const top_level_rows = converted_rows.filter(r => !r.parent);
-  const any_child = converted_rows.find(r => Boolean(r.parent));
-  if (any_child) {
+  //group rows by parent id once, instead of scanning all rows for every parent
+  const children_by_parent = new Map();
+  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, converted_rows);
+      assign_children(mrow, children_by_parent);
     }
   }
   return top_level_rows.map(r => r.data);
 }
-function assign_children(row, all_rows) {
-  const my_children = all_rows.filter(s => row.self == s.parent);
-  if (my_children.length > 0) {
+function assign_children(row, children_by_parent) {
+  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, all_rows);
+      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;

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

@@ -3,7 +3,10 @@ export type MakeWriteable<Type> = {
     -readonly [Key in keyof Type]: Type[Key];
 };
 export type ModifyFields<T, R> = Omit<T, keyof R> & R;
-export declare function ApplyDataSource(datasource: any, props: any): Promise<any>;
+export declare function ApplyDataSource(datasource: any, props: any, remote?: {
+    remoteFilter?: boolean;
+    remoteSort?: boolean;
+}): Promise<any>;
 /**
  * merges together all different props for columns
  * to build a single final column data array

package/dist/src/func/func_grid.js

@@ -25,13 +25,17 @@ const defaultColumnOptions = {
   lockable: false,
   editable: false
 };
-async function ApplyDataSource(datasource, props) {
+async function ApplyDataSource(datasource, props, remote = {}) {
   let result_data = undefined;
   let isUsingCache = false;
+  //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
+    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
@@ -284,7 +288,10 @@ function get_default_key() {
 }
 //check if two cache objects are the same
 function validateCache(current, old, looseCheck = false) {
-  if (!old || !(0, _object.object_equals)(current, old)) return false;
+  //deep compare skip/limit/filterValue/sortInfo, array order matters (sort priority)
+  if (!old || !(0, _object.object_equals)(current, old, {
+    strictArrayCheck: true
+  })) return false;
   if (looseCheck) return true;
   if (current.ds != old.ds) return false;
   return true;

package/dist/src/hooks/useColumnData.d.ts

@@ -1,2 +1,2 @@
 import { AzGridProps, LooseColumnDefinition } from '../types/types';
-export declare function useColumnData(inputOrProps: undefined | any[] | LooseColumnDefinition[] | AzGridProps): import("@inovua/reactdatagrid-community/types").TypeColumn[];
+export declare function useColumnData(inputOrProps: undefined | any[] | LooseColumnDefinition[] | AzGridProps): any[];

package/dist/src/hooks/useColumnData.js

@@ -7,18 +7,14 @@ exports.useColumnData = useColumnData;
 var _react = _interopRequireDefault(require("react"));
 var _func_grid = require("../func/func_grid");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const EMPTY_COLUMNS = [];
 function useColumnData(inputOrProps) {
-  if (inputOrProps == null) return [];
-  if (Array.isArray(inputOrProps)) return useThisColumnData(inputOrProps);
-  return usePropsColumnData(inputOrProps);
-}
-function useThisColumnData(cols) {
+  // 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 : {};
+  const deps = isProps ? [props.columns, props.leftColumns, props.rightColumns, props.editableColumns, props.columnExtensions, props.customColumns] : [inputOrProps, null, null, null, null, null];
   return _react.default.useMemo(() => {
-    return (0, _func_grid.applyColumnData)(cols);
-  }, [cols]);
-}
-function usePropsColumnData(props) {
-  return _react.default.useMemo(() => {
-    return (0, _func_grid.applyColumnData)(props);
-  }, [props.columns, props.leftColumns, props.rightColumns, props.editableColumns, props.columnExtensions, props.customColumns]);
+    if (inputOrProps == null) return EMPTY_COLUMNS;
+    return (0, _func_grid.applyColumnData)(inputOrProps);
+  }, [isProps, ...deps]);
 }

package/dist/src/hooks/useDatasource.js

@@ -8,14 +8,25 @@ var _react = _interopRequireDefault(require("react"));
 var _func_grid = require("../func/func_grid");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function useDataSource(ds, props) {
+  var _props$gridOptions, _props$gridOptions2;
   const cached_data = _react.default.useRef();
   const last_cache_info = _react.default.useRef();
+  // filter/sort only change the result when the grid sends them to the dataSource
+  const remoteFilter = !!(props !== null && props !== void 0 && (_props$gridOptions = props.gridOptions) !== null && _props$gridOptions !== void 0 && _props$gridOptions.remoteFilter);
+  const remoteSort = !!(props !== null && props !== void 0 && (_props$gridOptions2 = props.gridOptions) !== null && _props$gridOptions2 !== void 0 && _props$gridOptions2.remoteSort);
   return _react.default.useCallback(async dt => {
-    return await (0, _func_grid.ApplyDataSource)(ds, {
+    const params = {
       skip: dt === null || dt === void 0 ? void 0 : dt.skip,
       limit: dt === null || dt === void 0 ? void 0 : dt.limit,
+      filterValue: dt === null || dt === void 0 ? void 0 : dt.filterValue,
+      sortInfo: dt === null || dt === void 0 ? void 0 : dt.sortInfo,
+      groupBy: dt === null || dt === void 0 ? void 0 : dt.groupBy,
       cached_data: cached_data,
       last_cache_info: last_cache_info
+    };
+    return await (0, _func_grid.ApplyDataSource)(ds, params, {
+      remoteFilter,
+      remoteSort
     });
-  }, [ds]);
+  }, [ds, remoteFilter, remoteSort]);
 }

package/dist/src/hooks/useGridEvents.d.ts

@@ -1,6 +1,9 @@
 import { DataGridWrapperProps, GridType } from '../types/types';
 export declare function useGridEvents(grid: GridType, props: DataGridWrapperProps): {
     onRowClick: (rowProps: any, event: any) => void | undefined;
+    onRenderLoadMask: (maskProps: {
+        visible?: boolean;
+    }) => void;
     onRowContextMenu: (rowProps: any, event: any) => boolean;
     onRenderRow: (rowProps: any) => void;
     update_menuRow: (r?: any, el?: any) => void;

package/dist/src/hooks/useGridEvents.js

@@ -24,6 +24,9 @@ function useGridMenuRow() {
 }
 function useGridEvents(grid, props) {
   const click_data = _react.default.useRef(null);
+  // latest props, so the callbacks below stay stable and don't re-render the grid
+  const latestProps = _react.default.useRef(props);
+  latestProps.current = props;
   const {
     update_menuRow,
     menuAnchorEl,
@@ -52,18 +55,22 @@ function useGridEvents(grid, props) {
   /*                                   events                                   */
   /* -------------------------------------------------------------------------- */
   const onRowClick = _react.default.useCallback((rowProps, event) => {
+    const {
+      onRowClick,
+      onRowDoubleClick
+    } = latestProps.current;
     const nowDate = Date.now();
     const lastclick = click_data.current[(0, _func_grid.get_row_id)(rowProps)];
     if (lastclick) {
       const diffTime = Math.abs(nowDate - lastclick);
       if (diffTime < 400) {
         click_data.current[(0, _func_grid.get_row_id)(rowProps)] = null;
-        return props.onRowDoubleClick && props.onRowDoubleClick(rowProps.rowIndex, rowProps.data);
+        return onRowDoubleClick && onRowDoubleClick(rowProps.rowIndex, rowProps.data);
       }
     }
     click_data.current[(0, _func_grid.get_row_id)(rowProps)] = nowDate;
-    return props.onRowClick && props.onRowClick(rowProps.rowIndex, rowProps.data);
-  }, [props.onRowClick, props.onRowDoubleClick]);
+    return onRowClick && onRowClick(rowProps.rowIndex, rowProps.data);
+  }, []);
   _react.default.useEffect(() => {
     click_data.current = {};
   }, [props.dataSource]);
@@ -81,25 +88,24 @@ function useGridEvents(grid, props) {
   }, []);
   /* -------------------------------------------------------------------------- */
   /* ------------------------------ Accessibility ----------------------------- */
-  const latestProps = _react.default.useRef(props);
-  latestProps.current = props;
   const rootSyncFrame = _react.default.useRef(0);
   // last applied root values, so row renders (e.g. while scrolling) don't re-apply them
   const lastRoot = _react.default.useRef({
     el: null,
-    key: ''
+    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.default.useCallback(() => {
+  const scheduleRootSync = _react.default.useCallback((force = false) => {
     var _latestProps$current$;
     if (rootSyncFrame.current || typeof requestAnimationFrame === 'undefined') return;
     const grid = (_latestProps$current$ = latestProps.current.liveGridRef) === null || _latestProps$current$ === void 0 || (_latestProps$current$ = _latestProps$current$.current) === null || _latestProps$current$ === void 0 ? void 0 : _latestProps$current$.current;
     const key = (0, _func_a11y.get_root_a11y_key)(grid, getRootOptions());
-    if (key && key === lastRoot.current.key && (0, _func_a11y.get_grid_root)(grid) === lastRoot.current.el) return;
+    if (!force && key && key === lastRoot.current.key && (0, _func_a11y.get_grid_root)(grid) === lastRoot.current.el) return;
     rootSyncFrame.current = requestAnimationFrame(() => {
       var _latestProps$current$2;
       rootSyncFrame.current = 0;
@@ -108,7 +114,8 @@ function useGridEvents(grid, props) {
       const el = (0, _func_a11y.apply_root_a11y)(liveGrid, options);
       lastRoot.current = {
         el,
-        key: el ? (0, _func_a11y.get_root_a11y_key)(liveGrid, options) : ''
+        key: el ? (0, _func_a11y.get_root_a11y_key)(liveGrid, options) : '',
+        busy: el ? (0, _func_a11y.is_grid_busy)(liveGrid) : false
       };
     });
   }, []);
@@ -127,8 +134,13 @@ function useGridEvents(grid, props) {
     (0, _func_a11y.apply_row_a11y)(rowProps, !!(liveGrid !== null && liveGrid !== void 0 && liveGrid.computedRowSelectionEnabled));
     scheduleRootSync();
   }, []);
+  // called by the grid on every render with the load mask state, keeps aria-busy in sync
+  const onRenderLoadMask = _react.default.useCallback(maskProps => {
+    if (!!(maskProps !== null && maskProps !== void 0 && maskProps.visible) !== lastRoot.current.busy) scheduleRootSync(true);
+  }, []);
   return {
     onRowClick,
+    onRenderLoadMask,
     onRowContextMenu,
     onRenderRow,
     update_menuRow,

package/dist/src/hooks/useGridSearch.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { DataGridWrapperProps, GridType } from '../types/types';
-export declare function useGridSearch(grid: GridType, props: DataGridWrapperProps): {
-    filteredData: any;
+import { DataGridWrapperProps } from '../types/types';
+export declare function useGridSearch(props: DataGridWrapperProps): {
+    filteredData: any[] | ((args: any) => Promise<any>);
     element: React.JSX.Element;
 };

package/dist/src/hooks/useGridSearch.js

@@ -8,51 +8,77 @@ var _react = _interopRequireDefault(require("react"));
 var _lodash = _interopRequireDefault(require("lodash.debounce"));
 var _object = require("@azrico/object");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function useGridSearch(grid, props) {
+const SEARCH_DELAY = 300;
+function to_rows(result) {
+  return result && typeof result === 'object' ? result.data || result : result;
+}
+//false when the result is only a page of the data (remote pagination)
+function is_complete(result) {
+  if (!result || typeof result !== 'object' || Array.isArray(result)) return true;
+  const loaded = Array.isArray(result.data) ? result.data.length : 0;
+  return !(result.count > loaded);
+}
+function useGridSearch(props) {
   const [search, set_search] = _react.default.useState('');
-  const [filteredData, set_filteredData] = _react.default.useState([]);
-  const currentSearch = _react.default.useRef('');
-  const currentDS = _react.default.useRef([]);
-  const try_search = _react.default.useCallback((0, _lodash.default)(() => {
-    if (!Array.isArray(currentDS.current)) {
-      return;
-    }
-    let newData = [];
-    if (currentSearch.current) {
-      const visibleColumns = grid.visibleColumns;
-      const columns_to_search = (0, _object.array_intersection)(props.advancedFilterFields || [], visibleColumns.map(r => r.id));
-      const lowerSearchText = currentSearch.current.toLowerCase().trim();
-      if (!lowerSearchText || columns_to_search.length === 0) newData = currentDS.current;else {
-        newData = currentDS.current.filter(p => {
-          for (let index = 0; index < columns_to_search.length; index++) {
-            const col = columns_to_search[index];
-            const v = (p[col] + '').toLowerCase(); //value of column
-            if (v && v.indexOf(lowerSearchText) != -1) {
-              //if one column is matching then the row is a match
-              return true;
-            }
-          }
-          return false;
-        });
+  // null shows the datasource itself, an array shows search results
+  const [searchResult, set_searchResult] = _react.default.useState(null);
+  const latestProps = _react.default.useRef(props);
+  latestProps.current = props;
+  // last result the grid loaded, reused by search instead of loading the data again
+  const loaded = _react.default.useRef(null);
+  const searchId = _react.default.useRef(0);
+  const trackedDataSource = _react.default.useCallback(async args => {
+    const result = await (0, _object.fn_eval)(props.dataSource, args);
+    loaded.current = {
+      ds: props.dataSource,
+      result
+    };
+    return result;
+  }, [props.dataSource]);
+  const get_search_rows = _react.default.useCallback(async () => {
+    const ds = latestProps.current.dataSource;
+    const last = loaded.current;
+    if (last && last.ds === ds && is_complete(last.result)) return to_rows(last.result);
+    return to_rows(await (0, _object.fn_eval)(ds));
+  }, []);
+  const filter_rows = _react.default.useCallback((rows, text) => {
+    var _gridRef$current;
+    const {
+      gridRef,
+      advancedFilterFields
+    } = latestProps.current;
+    const visibleColumns = (_gridRef$current = gridRef.current) === null || _gridRef$current === void 0 ? void 0 : _gridRef$current.visibleColumns;
+    const columns_to_search = visibleColumns ? (0, _object.array_intersection)(advancedFilterFields || [], visibleColumns.map(r => r.id)) : advancedFilterFields || [];
+    const lowerSearchText = text.toLowerCase().trim();
+    if (!lowerSearchText || columns_to_search.length === 0) return rows;
+    return rows.filter(p => {
+      for (let index = 0; index < columns_to_search.length; index++) {
+        const col = columns_to_search[index];
+        const v = (p[col] + '').toLowerCase(); //value of column
+        if (v && v.indexOf(lowerSearchText) != -1) {
+          //if one column is matching then the row is a match
+          return true;
+        }
       }
-    } else newData = currentDS.current;
-    set_filteredData(newData);
-  }, 1000), [grid]);
-  _react.default.useEffect(() => {
-    (0, _object.fn_eval)(props.dataSource).then(r => {
-      currentDS.current = typeof r === 'object' ? r.data || r : r;
-      searchIfNeeded();
+      return false;
     });
-  }, [props.dataSource]);
+  }, []);
+  const run_search = _react.default.useMemo(() => (0, _lodash.default)(async text => {
+    const id = ++searchId.current;
+    const rows = await get_search_rows();
+    if (id !== searchId.current || !Array.isArray(rows)) return; //a newer search started
+    set_searchResult(filter_rows(rows, text));
+  }, SEARCH_DELAY), []);
+  _react.default.useEffect(() => () => run_search.cancel(), [run_search]);
   _react.default.useEffect(() => {
-    currentSearch.current = search;
-    searchIfNeeded();
-  }, [search]);
-  function searchIfNeeded() {
-    if (!search) {
-      set_filteredData(props.dataSource);
-    } else try_search();
-  }
+    if (search) {
+      run_search(search);
+      return;
+    }
+    run_search.cancel();
+    searchId.current++;
+    set_searchResult(null);
+  }, [search, props.dataSource]);
   const element = _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("form", {
     className: 'azgrid-searcharea'
   }, _react.default.createElement("label", null, "Search", _react.default.createElement("input", {
@@ -62,7 +88,7 @@ function useGridSearch(grid, props) {
     onChange: e => set_search(e.target.value)
   }))));
   return {
-    filteredData,
+    filteredData: searchResult !== null && searchResult !== void 0 ? searchResult : trackedDataSource,
     element
   };
 }

package/dist/src/types/types.d.ts

@@ -1,7 +1,7 @@
 import { ModifyFields } from '../func/func_grid';
 import { ConvertableToMenuItem } from '@azrico/controls/context-menu';
 import React from 'react';
-import { TypeCellSelection, TypeColumn, TypeDataGridProps, TypeDataSource, TypeEditInfo, TypeFilterTypes, TypeFilterValue, TypeRowDetailsInfo, TypeRowProps, TypeRowSelection, TypeComputedProps } from '@inovua/reactdatagrid-community/types';
+import { TypeCellSelection, TypeColumn, TypeDataGridProps, TypeDataSource, TypeEditInfo, TypeFilterTypes, TypeFilterValue, TypeRowDetailsInfo, TypeRowProps, TypeRowSelection, TypeComputedProps, TypeSortInfo, TypeGroupBy } from '@inovua/reactdatagrid-community/types';
 import { TypeOnSelectionChangeArg } from '@inovua/reactdatagrid-community/types/TypeDataGridProps';
 export type ColumnDefinition = TypeColumn;
 export type CellDefinition = any;
@@ -44,9 +44,21 @@ export type AzGridOptions = Partial<TypeDataGridProps> & {
         [key: string]: any;
     };
 };
+/** arguments passed to a dataSource function */
+export type AzDataSourceParams = {
+    skip?: number;
+    limit?: number;
+    /** current header filters, filter.value is an array of selected ids for a multi-select SelectFilter */
+    filterValue?: TypeFilterValue;
+    sortInfo?: TypeSortInfo;
+    groupBy?: TypeGroupBy;
+    cached_data: React.MutableRefObject<any>;
+    last_cache_info: React.MutableRefObject<any>;
+};
+export type AzDataSourceFunc = (args: AzDataSourceParams) => any[] | Promise<any[] | any>;
 export type AzGridProps = {
-    dataSource?: any[] | ((args: any) => any[] | Promise<any[] | any>);
-    details_dataSource?: any[] | ((args: any) => any[] | Promise<any[] | any>);
+    dataSource?: any[] | AzDataSourceFunc;
+    details_dataSource?: any[] | AzDataSourceFunc;
     details_columns?: LooseColumnDefinition[];
     details_filter?: FilterValues;
     licenseKey?: string;