@azrico/reactgrid 1.5.2 → 1.6.1

package/CHANGELOG.md

@@ -0,0 +1,15 @@
+# Changelog
+
+All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+
+### 1.7.0 (2026-10-14)
+
+* Add `advancedFilterLabel` to rename the quick-search label (default "Search").
+* Add `advancedFilterPlaceholder` for the quick-search input. A string is the native placeholder; any other node (custom HTML) is shown over the empty input.
+
+### 1.6.0 (2026-10-14)
+
+* Pass `filterValue`, `sortInfo` and `groupBy` to a `dataSource` function next to `skip`, `limit`, `cached_data` and `last_cache_info`, so header filters can drive a server-side search.
+* With `gridOptions.remoteFilter` / `remoteSort`, a filter or sort change invalidates the data cache and calls `dataSource` again. Local filtering and sorting still reuse the cached rows.
+* Export the typed `AzDataSourceParams` and `AzDataSourceFunc` for the `dataSource` and `details_dataSource` props.
+* Re-export `SelectFilter`, `NumberFilter`, `DateFilter` and `BoolFilter` for `column.filterEditor`.

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/example.js

@@ -175,6 +175,8 @@ function ExampleGrid() {
     editable: true,
     onEditComplete: onEditComplete,
     advancedFilterFields: ['name'],
+    advancedFilterLabel: "Search Name",
+    advancedFilterPlaceholder: _react.default.createElement("i", null, "Type a name"),
     // leftColumns={leftColumns}
     gridOptions: {
       defaultFilterValue: [{

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/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/useGridSearch.js

@@ -79,14 +79,39 @@ function useGridSearch(props) {
     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", {
+  const {
+    advancedFilterLabel,
+    advancedFilterPlaceholder
+  } = props;
+  const textPlaceholder = typeof advancedFilterPlaceholder === 'string' || typeof advancedFilterPlaceholder === 'number' ? String(advancedFilterPlaceholder) : undefined;
+  // custom HTML cannot go in the native placeholder attribute, so it is shown over the empty input
+  const nodePlaceholder = textPlaceholder === undefined && advancedFilterPlaceholder !== undefined && advancedFilterPlaceholder !== null && typeof advancedFilterPlaceholder !== 'boolean' ? advancedFilterPlaceholder : undefined;
+  const input = _react.default.createElement("input", {
     type: "text",
     name: "name",
     value: search,
+    placeholder: textPlaceholder,
     onChange: e => set_search(e.target.value)
-  }))));
+  });
+  const element = _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("form", {
+    className: 'azgrid-searcharea'
+  }, _react.default.createElement("label", null, advancedFilterLabel !== null && advancedFilterLabel !== void 0 ? advancedFilterLabel : 'Search', nodePlaceholder === undefined ? input : _react.default.createElement("span", {
+    style: {
+      position: 'relative',
+      display: 'inline-block'
+    }
+  }, input, search ? null : _react.default.createElement("span", {
+    style: {
+      position: 'absolute',
+      left: 8,
+      top: 0,
+      bottom: 0,
+      display: 'flex',
+      alignItems: 'center',
+      pointerEvents: 'none',
+      opacity: 0.6
+    }
+  }, nodePlaceholder)))));
   return {
     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;
@@ -76,6 +88,10 @@ export type AzGridProps = {
     limit?: number;
     editable?: boolean | ((editValue: any, cellProps: any) => boolean);
     advancedFilterFields?: string[];
+    /** Label of the quick-search box shown with `advancedFilterFields`. Default "Search". */
+    advancedFilterLabel?: React.ReactNode;
+    /** Placeholder of the quick-search input. A string is used as the native placeholder, any other node (custom HTML) is shown over the empty input. */
+    advancedFilterPlaceholder?: React.ReactNode;
     loading?: boolean;
     theme?: 'light' | 'dark' | (string & {});
     /** @deprecated Use theme="dark" or theme="light" instead. */

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,68 +1,68 @@
-{
-	"name": "@azrico/reactgrid",
-	"version": "1.5.2",
-	"main": "dist/index.js",
-	"description": "React Datagrid",
-	"author": "Azrideus <MehrdadTavangar@gmail.com>",
-	"homepage": ".",
-	"scripts": {
-		"start": "react-scripts start",
-		"build": "tsc && yarn cp_themes && babel dist --out-dir dist",
-		"test": "rem",
-		"check:theme": "node config/check-theme.cjs",
-		"theme:generate": "node config/generate-theme.cjs",
-		"cp_themes": "copyfiles ./src/themes/* ./dist/"
-	},
-	"config-overrides-path": "../../config/config-overrides.js",
-	"devDependencies": {
-		"@babel/cli": "^7.13.14",
-		"@babel/core": "^7.13.15",
-		"@babel/eslint-parser": "^7.12.17",
-		"@babel/node": "^7.13.13",
-		"@babel/plugin-proposal-class-properties": "^7.12.13",
-		"@babel/plugin-proposal-nullish-coalescing-operator": "^7.14.5",
-		"@babel/preset-env": "^7.13.15",
-		"@babel/preset-typescript": "^7.14.5",
-		"@mui/material": "*",
-		"@types/react": "^18.0.25",
-		"@types/react-dom": "^18.0.8",
-		"react-dom": "^18.2.0",
-		"react-scripts": "^5.0.1",
-		"typescript": "^4.8.4"
-	},
-	"dependencies": {
-		"@azrico/controls": "1.6.1",
-		"@azrico/object": "^1.4.97",
-		"@emotion/react": "^11.9.3",
-		"@emotion/styled": "^11.9.3",
-		"@inovua/reactdatagrid-enterprise": "^5.10.2",
-		"clsx": "^2.0.0",
-		"lodash.debounce": "^4.0.8",
-		"react": "^18.2.0",
-		"react-use-size": "^3.0.1"
-	},
-	"peerDependencies": {
-		"@azrico/controls": ">=1.6.1",
-		"@azrico/object": ">=1.4.97",
-		"@emotion/react": ">=11.9.3",
-		"@emotion/styled": ">=11.9.3",
-		"@inovua/reactdatagrid-enterprise": ">=5.10.2",
-		"@mui/material": ">=5.0.0 <8.0.0",
-		"clsx": ">=1.2.1",
-		"react": ">=18.2.0",
-		"react-use-size": ">=3.0.1"
-	},
-	"browserslist": {
-		"production": [
-			">0.2%",
-			"not dead",
-			"not op_mini all"
-		],
-		"development": [
-			"last 1 chrome version",
-			"last 1 firefox version",
-			"last 1 safari version"
-		]
-	},
-	"packageManager": "yarn@4.10.2"
+{
+	"name": "@azrico/reactgrid",
+	"version": "1.6.1",
+	"main": "dist/index.js",
+	"description": "React Datagrid",
+	"author": "Azrideus <MehrdadTavangar@gmail.com>",
+	"homepage": ".",
+	"scripts": {
+		"start": "react-scripts start",
+		"build": "tsc && yarn cp_themes && babel dist --out-dir dist",
+		"test": "rem",
+		"check:theme": "node config/check-theme.cjs",
+		"theme:generate": "node config/generate-theme.cjs",
+		"cp_themes": "copyfiles ./src/themes/* ./dist/"
+	},
+	"config-overrides-path": "../../config/config-overrides.js",
+	"devDependencies": {
+		"@babel/cli": "^7.13.14",
+		"@babel/core": "^7.13.15",
+		"@babel/eslint-parser": "^7.12.17",
+		"@babel/node": "^7.13.13",
+		"@babel/plugin-proposal-class-properties": "^7.12.13",
+		"@babel/plugin-proposal-nullish-coalescing-operator": "^7.14.5",
+		"@babel/preset-env": "^7.13.15",
+		"@babel/preset-typescript": "^7.14.5",
+		"@mui/material": "*",
+		"@types/react": "^18.0.25",
+		"@types/react-dom": "^18.0.8",
+		"react-dom": "^18.2.0",
+		"react-scripts": "^5.0.1",
+		"typescript": "^4.8.4"
+	},
+	"dependencies": {
+		"@azrico/controls": "1.6.1",
+		"@azrico/object": "^1.4.97",
+		"@emotion/react": "^11.9.3",
+		"@emotion/styled": "^11.9.3",
+		"@inovua/reactdatagrid-enterprise": "^5.10.2",
+		"clsx": "^2.0.0",
+		"lodash.debounce": "^4.0.8",
+		"react": "^18.2.0",
+		"react-use-size": "^3.0.1"
+	},
+	"peerDependencies": {
+		"@azrico/controls": ">=1.6.1",
+		"@azrico/object": ">=1.4.97",
+		"@emotion/react": ">=11.9.3",
+		"@emotion/styled": ">=11.9.3",
+		"@inovua/reactdatagrid-enterprise": ">=5.10.2",
+		"@mui/material": ">=5.0.0 <8.0.0",
+		"clsx": ">=1.2.1",
+		"react": ">=18.2.0",
+		"react-use-size": ">=3.0.1"
+	},
+	"browserslist": {
+		"production": [
+			">0.2%",
+			"not dead",
+			"not op_mini all"
+		],
+		"development": [
+			"last 1 chrome version",
+			"last 1 firefox version",
+			"last 1 safari version"
+		]
+	},
+	"packageManager": "yarn@4.10.2"
 }

package/src/example.tsx

@@ -1,184 +1,186 @@
-export * from './views/DataGrid';
-
-import AzGrid from './views/DataGrid';
-import React from 'react';
-import './themes/azgrid-theme.css';
-import './themes/example-palettes.css';
-
-const columns = [
-	{
-		name: 'name',
-		title: 'Name',
-		defaultFlex: 1,
-	},
-	{
-		name: 'job',
-		title: 'Job',
-		type: 'combo',
-		items: ['None', 'Engineer', 'Doctor'],
-		defaultFlex: 1,
-	},
-	{
-		name: 'age',
-		title: 'Age',
-		type: 'number',
-		defaultFlex: 1,
-		ariaLabel: (value: any) => `${value} years`,
-	},
-];
-
-const editableColumns = ['job', 'age'];
-
-function getData(delta: any, max = 200) {
-	const fd: any[] = [];
-	for (let index = 0; index < max; index++) {
-		const currentObject = {
-			__table_id: String(index),
-			name: 'user-' + index,
-			age: 5 + index,
-			job: 'None',
-		};
-		if (delta[index] && typeof delta[index] === 'object') {
-			for (const key in delta[index]) {
-				currentObject[key] = delta[index][key];
-			}
-		}
-
-		const childrows: any[] = [];
-		if (index % 5 == 0) {
-			const sub_selfid = 's' + index;
-			childrows.push({
-				__table_id: sub_selfid,
-				__parent__table_id: String(index),
-				name: 'sub-' + index,
-				age: 20,
-			});
-		}
-
-		currentObject['__children'] = childrows;
-		fd.push(currentObject);
-	}
-	return fd;
-}
-
-export function ExampleGrid() {
-	const [ds_reset, set_ds_reset] = React.useState(0);
-	const [delta, set_delta] = React.useState({});
-	const [delayed_reload, set_delayed_reload] = React.useState(false);
-
-	const dataSource = React.useMemo(() => getData(delta), []);
-	// const dataSource = React.useCallback(
-	// 	async (dt) => {
-	// 		//console.log('Start loading');
-	// 		return await new Promise((resolve) => {
-	// 			setTimeout(() => {
-	// 				resolve(getData(delta));
-	// 			}, 1000);
-	// 		});
-	// 	},
-	// 	[ds_reset, delta]
-	// );
-	// const details_dataSource = React.useCallback(
-	// 	async (dt) => {
-	// 		//console.log('Start loading');
-	// 		return await new Promise((resolve) => {
-	// 			setTimeout(() => {
-	// 				resolve(getData(delta, 5));
-	// 			}, 1000);
-	// 		});
-	// 	},
-	// 	[ds_reset, delta]
-	// );
-
-	function onEditComplete(params) {
-		const { value, columnId, rowId, ...rest } = params;
-		let new_rd = delta[rowId];
-		if (!new_rd) new_rd = {};
-		new_rd[columnId] = value;
-		set_delta((d) => {
-			return { ...d, [rowId]: new_rd };
-		});
-	}
-
-	const onRowDoubleClick = React.useCallback((index: number, rowdata: any) => {
-		console.log('dbl', rowdata?.data || rowdata);
-		alert('dbl: ' + index);
-	}, []);
-	const onRowClick = React.useCallback((index: number, rowdata: any) => {
-		console.log('click:', rowdata?.data || rowdata);
-	}, []);
-
-	React.useEffect(() => {
-		setTimeout(() => {
-			set_delayed_reload(true);
-		}, 2000);
-	}, []);
-	const customColumns = React.useMemo(() => {
-		if (!delayed_reload) return [];
-		return [{ name: 'name', render: (r) => r.value + '^' }];
-	}, [delayed_reload]);
-
-	const contextMenuItems = React.useCallback((product: any) => {
-		return [
-			{
-				type: 'text',
-				content: product.name,
-			},
-		];
-	}, []);
-
-	return (
-		<div style={{ display: 'grid', gap: 20, height: '100%', overflow: 'auto' }}>
-			{['light', 'dark', 'deco'].map((theme) => (
-				<section key={theme} className={theme === 'deco' ? 'azgrid-example-deco' : undefined} style={{ height: 360, display: 'flex', flexDirection: 'column' }}>
-					<h3>{theme === 'deco' ? 'Art Deco (host variables)' : `Default ${theme}`}</h3>
-					<AzGrid
-						theme={theme}
-						ariaLabel={`Users (${theme})`}
-						delayedSize
-						// details_dataSource={details_dataSource}
-						dataSource={dataSource}
-						details_columns={columns}
-						onRowClick={onRowClick}
-						onRowDoubleClick={onRowDoubleClick}
-						allowChildRows
-						// onSelectionChange={onSelectionChange}
-						// selected={selected}
-						contextMenuItems={contextMenuItems as any}
-						customColumns={customColumns}
-						columns={columns}
-						editableColumns={editableColumns}
-						editable={true}
-						onEditComplete={onEditComplete}
-						advancedFilterFields={['name']}
-						// leftColumns={leftColumns}
-						gridOptions={
-							{
-								defaultFilterValue: [{ name: 'name', operator: 'contains', type: 'string', value: '' }],
-								pagination: 'local',
-								defaultLimit: 10,
-								pageSizes: [10, 25, 50],
-								checkboxColumn: true,
-								multiSelect: true,
-								// consumer onRenderRow runs after the internal one
-								onRenderRow: (rowProps: any) => {
-									rowProps['data-example-row'] = 'true';
-								},
-								// defaultFilterValue: filterValue,
-								// remoteFilter: false,
-								// multiSelect: true,
-								// pagination: 'local',
-								// defaultLimit: 100,
-								// limit: 100,
-								// pageSizes: [100],
-								// rowIndexColumn: true,
-								// checkboxColumn: true,
-							}
-						}
-					/>
-				</section>
-			))}
-		</div>
-	);
-}
-export default ExampleGrid;
+export * from './views/DataGrid';
+
+import AzGrid from './views/DataGrid';
+import React from 'react';
+import './themes/azgrid-theme.css';
+import './themes/example-palettes.css';
+
+const columns = [
+	{
+		name: 'name',
+		title: 'Name',
+		defaultFlex: 1,
+	},
+	{
+		name: 'job',
+		title: 'Job',
+		type: 'combo',
+		items: ['None', 'Engineer', 'Doctor'],
+		defaultFlex: 1,
+	},
+	{
+		name: 'age',
+		title: 'Age',
+		type: 'number',
+		defaultFlex: 1,
+		ariaLabel: (value: any) => `${value} years`,
+	},
+];
+
+const editableColumns = ['job', 'age'];
+
+function getData(delta: any, max = 200) {
+	const fd: any[] = [];
+	for (let index = 0; index < max; index++) {
+		const currentObject = {
+			__table_id: String(index),
+			name: 'user-' + index,
+			age: 5 + index,
+			job: 'None',
+		};
+		if (delta[index] && typeof delta[index] === 'object') {
+			for (const key in delta[index]) {
+				currentObject[key] = delta[index][key];
+			}
+		}
+
+		const childrows: any[] = [];
+		if (index % 5 == 0) {
+			const sub_selfid = 's' + index;
+			childrows.push({
+				__table_id: sub_selfid,
+				__parent__table_id: String(index),
+				name: 'sub-' + index,
+				age: 20,
+			});
+		}
+
+		currentObject['__children'] = childrows;
+		fd.push(currentObject);
+	}
+	return fd;
+}
+
+export function ExampleGrid() {
+	const [ds_reset, set_ds_reset] = React.useState(0);
+	const [delta, set_delta] = React.useState({});
+	const [delayed_reload, set_delayed_reload] = React.useState(false);
+
+	const dataSource = React.useMemo(() => getData(delta), []);
+	// const dataSource = React.useCallback(
+	// 	async (dt) => {
+	// 		//console.log('Start loading');
+	// 		return await new Promise((resolve) => {
+	// 			setTimeout(() => {
+	// 				resolve(getData(delta));
+	// 			}, 1000);
+	// 		});
+	// 	},
+	// 	[ds_reset, delta]
+	// );
+	// const details_dataSource = React.useCallback(
+	// 	async (dt) => {
+	// 		//console.log('Start loading');
+	// 		return await new Promise((resolve) => {
+	// 			setTimeout(() => {
+	// 				resolve(getData(delta, 5));
+	// 			}, 1000);
+	// 		});
+	// 	},
+	// 	[ds_reset, delta]
+	// );
+
+	function onEditComplete(params) {
+		const { value, columnId, rowId, ...rest } = params;
+		let new_rd = delta[rowId];
+		if (!new_rd) new_rd = {};
+		new_rd[columnId] = value;
+		set_delta((d) => {
+			return { ...d, [rowId]: new_rd };
+		});
+	}
+
+	const onRowDoubleClick = React.useCallback((index: number, rowdata: any) => {
+		console.log('dbl', rowdata?.data || rowdata);
+		alert('dbl: ' + index);
+	}, []);
+	const onRowClick = React.useCallback((index: number, rowdata: any) => {
+		console.log('click:', rowdata?.data || rowdata);
+	}, []);
+
+	React.useEffect(() => {
+		setTimeout(() => {
+			set_delayed_reload(true);
+		}, 2000);
+	}, []);
+	const customColumns = React.useMemo(() => {
+		if (!delayed_reload) return [];
+		return [{ name: 'name', render: (r) => r.value + '^' }];
+	}, [delayed_reload]);
+
+	const contextMenuItems = React.useCallback((product: any) => {
+		return [
+			{
+				type: 'text',
+				content: product.name,
+			},
+		];
+	}, []);
+
+	return (
+		<div style={{ display: 'grid', gap: 20, height: '100%', overflow: 'auto' }}>
+			{['light', 'dark', 'deco'].map((theme) => (
+				<section key={theme} className={theme === 'deco' ? 'azgrid-example-deco' : undefined} style={{ height: 360, display: 'flex', flexDirection: 'column' }}>
+					<h3>{theme === 'deco' ? 'Art Deco (host variables)' : `Default ${theme}`}</h3>
+					<AzGrid
+						theme={theme}
+						ariaLabel={`Users (${theme})`}
+						delayedSize
+						// details_dataSource={details_dataSource}
+						dataSource={dataSource}
+						details_columns={columns}
+						onRowClick={onRowClick}
+						onRowDoubleClick={onRowDoubleClick}
+						allowChildRows
+						// onSelectionChange={onSelectionChange}
+						// selected={selected}
+						contextMenuItems={contextMenuItems as any}
+						customColumns={customColumns}
+						columns={columns}
+						editableColumns={editableColumns}
+						editable={true}
+						onEditComplete={onEditComplete}
+						advancedFilterFields={['name']}
+						advancedFilterLabel="Search Name"
+						advancedFilterPlaceholder={<i>Type a name</i>}
+						// leftColumns={leftColumns}
+						gridOptions={
+							{
+								defaultFilterValue: [{ name: 'name', operator: 'contains', type: 'string', value: '' }],
+								pagination: 'local',
+								defaultLimit: 10,
+								pageSizes: [10, 25, 50],
+								checkboxColumn: true,
+								multiSelect: true,
+								// consumer onRenderRow runs after the internal one
+								onRenderRow: (rowProps: any) => {
+									rowProps['data-example-row'] = 'true';
+								},
+								// defaultFilterValue: filterValue,
+								// remoteFilter: false,
+								// multiSelect: true,
+								// pagination: 'local',
+								// defaultLimit: 100,
+								// limit: 100,
+								// pageSizes: [100],
+								// rowIndexColumn: true,
+								// checkboxColumn: true,
+							}
+						}
+					/>
+				</section>
+			))}
+		</div>
+	);
+}
+export default ExampleGrid;

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/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/useGridSearch.tsx

@@ -1,106 +1,146 @@
-import React from 'react';
-import { DataGridWrapperProps } from '../types/types';
-import debounce from 'lodash.debounce';
-import { array_intersection, fn_eval } from '@azrico/object';
-
-const SEARCH_DELAY = 300;
-
-function to_rows(result: any): any[] {
-	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: any) {
-	if (!result || typeof result !== 'object' || Array.isArray(result)) return true;
-	const loaded = Array.isArray(result.data) ? result.data.length : 0;
-	return !(result.count > loaded);
-}
-
-export function useGridSearch(props: DataGridWrapperProps) {
-	const [search, set_search] = React.useState('');
-	// null shows the datasource itself, an array shows search results
-	const [searchResult, set_searchResult] = React.useState<any[] | null>(null);
-	const latestProps = React.useRef(props);
-	latestProps.current = props;
-	// last result the grid loaded, reused by search instead of loading the data again
-	const loaded = React.useRef<{ ds: any; result: any } | null>(null);
-	const searchId = React.useRef(0);
-
-	const trackedDataSource = React.useCallback(
-		async (args: any) => {
-			const result = await fn_eval(props.dataSource, args);
-			loaded.current = { ds: props.dataSource, result };
-			return result;
-		},
-		[props.dataSource]
-	);
-
-	const get_search_rows = React.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 fn_eval(ds));
-	}, []);
-
-	const filter_rows = React.useCallback((rows: any[], text: string) => {
-		const { gridRef, advancedFilterFields } = latestProps.current;
-		const visibleColumns = gridRef.current?.visibleColumns;
-		const columns_to_search: string[] = visibleColumns
-			? 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;
-				}
-			}
-			return false;
-		});
-	}, []);
-
-	const run_search = React.useMemo(
-		() =>
-			debounce(async (text: string) => {
-				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.useEffect(() => () => run_search.cancel(), [run_search]);
-
-	React.useEffect(() => {
-		if (search) {
-			run_search(search);
-			return;
-		}
-		run_search.cancel();
-		searchId.current++;
-		set_searchResult(null);
-	}, [search, props.dataSource]);
-
-	const element = (
-		<>
-			<form className={'azgrid-searcharea'}>
-				<label>
-					Search
-					<input
-						type="text"
-						name="name"
-						value={search}
-						onChange={(e) => set_search(e.target.value)}
-					/>
-				</label>
-			</form>
-		</>
-	);
-	return { filteredData: searchResult ?? trackedDataSource, element };
-}
+import React from 'react';
+import { DataGridWrapperProps } from '../types/types';
+import debounce from 'lodash.debounce';
+import { array_intersection, fn_eval } from '@azrico/object';
+
+const SEARCH_DELAY = 300;
+
+function to_rows(result: any): any[] {
+	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: any) {
+	if (!result || typeof result !== 'object' || Array.isArray(result)) return true;
+	const loaded = Array.isArray(result.data) ? result.data.length : 0;
+	return !(result.count > loaded);
+}
+
+export function useGridSearch(props: DataGridWrapperProps) {
+	const [search, set_search] = React.useState('');
+	// null shows the datasource itself, an array shows search results
+	const [searchResult, set_searchResult] = React.useState<any[] | null>(null);
+	const latestProps = React.useRef(props);
+	latestProps.current = props;
+	// last result the grid loaded, reused by search instead of loading the data again
+	const loaded = React.useRef<{ ds: any; result: any } | null>(null);
+	const searchId = React.useRef(0);
+
+	const trackedDataSource = React.useCallback(
+		async (args: any) => {
+			const result = await fn_eval(props.dataSource, args);
+			loaded.current = { ds: props.dataSource, result };
+			return result;
+		},
+		[props.dataSource]
+	);
+
+	const get_search_rows = React.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 fn_eval(ds));
+	}, []);
+
+	const filter_rows = React.useCallback((rows: any[], text: string) => {
+		const { gridRef, advancedFilterFields } = latestProps.current;
+		const visibleColumns = gridRef.current?.visibleColumns;
+		const columns_to_search: string[] = visibleColumns
+			? 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;
+				}
+			}
+			return false;
+		});
+	}, []);
+
+	const run_search = React.useMemo(
+		() =>
+			debounce(async (text: string) => {
+				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.useEffect(() => () => run_search.cancel(), [run_search]);
+
+	React.useEffect(() => {
+		if (search) {
+			run_search(search);
+			return;
+		}
+		run_search.cancel();
+		searchId.current++;
+		set_searchResult(null);
+	}, [search, props.dataSource]);
+
+	const { advancedFilterLabel, advancedFilterPlaceholder } = props;
+	const textPlaceholder =
+		typeof advancedFilterPlaceholder === 'string' || typeof advancedFilterPlaceholder === 'number'
+			? String(advancedFilterPlaceholder)
+			: undefined;
+	// custom HTML cannot go in the native placeholder attribute, so it is shown over the empty input
+	const nodePlaceholder =
+		textPlaceholder === undefined &&
+		advancedFilterPlaceholder !== undefined &&
+		advancedFilterPlaceholder !== null &&
+		typeof advancedFilterPlaceholder !== 'boolean'
+			? advancedFilterPlaceholder
+			: undefined;
+	const input = (
+		<input
+			type="text"
+			name="name"
+			value={search}
+			placeholder={textPlaceholder}
+			onChange={(e) => set_search(e.target.value)}
+		/>
+	);
+
+	const element = (
+		<>
+			<form className={'azgrid-searcharea'}>
+				<label>
+					{advancedFilterLabel ?? 'Search'}
+					{nodePlaceholder === undefined ? (
+						input
+					) : (
+						<span style={{ position: 'relative', display: 'inline-block' }}>
+							{input}
+							{search ? null : (
+								<span
+									style={{
+										position: 'absolute',
+										left: 8,
+										top: 0,
+										bottom: 0,
+										display: 'flex',
+										alignItems: 'center',
+										pointerEvents: 'none',
+										opacity: 0.6,
+									}}
+								>
+									{nodePlaceholder}
+								</span>
+							)}
+						</span>
+					)}
+				</label>
+			</form>
+		</>
+	);
+	return { filteredData: searchResult ?? trackedDataSource, element };
+}

package/src/types/types.ts

@@ -13,6 +13,8 @@ import {
 	TypeRowProps,
 	TypeRowSelection,
 	TypeComputedProps,
+	TypeSortInfo,
+	TypeGroupBy,
 } from '@inovua/reactdatagrid-community/types';
 
 import { TypeOnSelectionChangeArg } from '@inovua/reactdatagrid-community/types/TypeDataGridProps';
@@ -58,10 +60,22 @@ export type AzGridOptions = Partial<TypeDataGridProps> & {
 	/** extra DOM props for the header row */
 	headerProps?: { [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>); //details is rendered under each row
+	dataSource?: any[] | AzDataSourceFunc;
+	details_dataSource?: any[] | AzDataSourceFunc; //details is rendered under each row
 	details_columns?: LooseColumnDefinition[];
 	details_filter?: FilterValues;
 
@@ -102,6 +116,10 @@ export type AzGridProps = {
 	//
 	editable?: boolean | ((editValue: any, cellProps: any) => boolean);
 	advancedFilterFields?: string[];
+	/** Label of the quick-search box shown with `advancedFilterFields`. Default "Search". */
+	advancedFilterLabel?: React.ReactNode;
+	/** Placeholder of the quick-search input. A string is used as the native placeholder, any other node (custom HTML) is shown over the empty input. */
+	advancedFilterPlaceholder?: React.ReactNode;
 	//
 
 	loading?: boolean;