@azrico/reactgrid 1.6.0 → 1.6.2

package/CHANGELOG.md

@@ -1,10 +1,19 @@
-# 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`.
+# 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.1 (2026-10-14)
+
+* Fix two quick clicks on different rows firing `onRowDoubleClick`: the double-click check now keys clicks by the row's id instead of `undefined`.
+
+### 1.7.0 (2026-10-14)
+
+* Add `advancedFilterLabel` to rename the quick-search label (default "Search").
+* Add `advancedFilterPlaceholder` for the quick-search input. A string is the native placeholder; any other node (custom HTML) is shown over the empty input.
+
+### 1.6.0 (2026-10-14)
+
+* Pass `filterValue`, `sortInfo` and `groupBy` to a `dataSource` function next to `skip`, `limit`, `cached_data` and `last_cache_info`, so header filters can drive a server-side search.
+* With `gridOptions.remoteFilter` / `remoteSort`, a filter or sort change invalidates the data cache and calls `dataSource` again. Local filtering and sorting still reuse the cached rows.
+* Export the typed `AzDataSourceParams` and `AzDataSourceFunc` for the `dataSource` and `details_dataSource` props.
+* Re-export `SelectFilter`, `NumberFilter`, `DateFilter` and `BoolFilter` for `column.filterEditor`.

package/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/hooks/useGridEvents.js

@@ -60,15 +60,16 @@ function useGridEvents(grid, props) {
       onRowDoubleClick
     } = latestProps.current;
     const nowDate = Date.now();
-    const lastclick = click_data.current[(0, _func_grid.get_row_id)(rowProps)];
+    const rowId = (0, _func_grid.get_row_id)(rowProps.data);
+    const lastclick = click_data.current[rowId];
     if (lastclick) {
       const diffTime = Math.abs(nowDate - lastclick);
       if (diffTime < 400) {
-        click_data.current[(0, _func_grid.get_row_id)(rowProps)] = null;
+        click_data.current[rowId] = null;
         return onRowDoubleClick && onRowDoubleClick(rowProps.rowIndex, rowProps.data);
       }
     }
-    click_data.current[(0, _func_grid.get_row_id)(rowProps)] = nowDate;
+    click_data.current[rowId] = nowDate;
     return onRowClick && onRowClick(rowProps.rowIndex, rowProps.data);
   }, []);
   _react.default.useEffect(() => {

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

@@ -88,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/package.json

@@ -1,68 +1,68 @@
-{
-	"name": "@azrico/reactgrid",
-	"version": "1.6.0",
-	"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.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"
 }

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/hooks/useGridEvents.ts

@@ -1,157 +1,158 @@
-import React from 'react';
-import { DataGridWrapperProps, GridType } from '../types/types';
-import { find_realData, get_row_id } from '../func/func_grid';
-import { func_selection } from '../func/func_child';
-import {
-	apply_root_a11y,
-	apply_row_a11y,
-	get_grid_root,
-	get_root_a11y_key,
-	is_grid_busy,
-} from '../func/func_a11y';
-
-function useGridMenuRow() {
-	const [menuAnchorEl, set_menuAnchorEl] = React.useState<any>(null);
-	const [menuRow, set_menuRow] = React.useState<any>(null);
-	const update_menuRow = React.useCallback((r: any = null, el: any = null) => {
-		set_menuRow(r || null);
-		set_menuAnchorEl(el || null);
-	}, []);
-	return { update_menuRow, menuAnchorEl, menuRow };
-}
-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(
-		(col: string) => {
-			const dt = grid.ungroupedData;
-			for (let index = 0; index < dt.length; index++) {
-				(grid as any).setItemPropertyAt(index, col, dt[index][col]);
-			}
-		},
-		[grid]
-	);
-	const refresh = React.useCallback(() => {
-		const dt = grid.ungroupedData;
-		for (let index = 0; index < dt.length; index++) {
-			(grid as any).setItemAt(index, {}, { replace: false });
-		}
-	}, [grid]);
-
-	React.useEffect(() => {
-		if (!grid) return;
-		grid['refresh'] = refresh;
-		grid['refreshColumn'] = refreshColumn;
-	}, [grid, props.dataSource, refresh, refreshColumn]);
-	/* -------------------------------------------------------------------------- */
-	/*                                   events                                   */
-	/* -------------------------------------------------------------------------- */
-	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 onRowClick && onRowClick(rowProps.rowIndex, rowProps.data);
-	}, []);
-
-	React.useEffect(() => {
-		click_data.current = {};
-	}, [props.dataSource]);
-
-	/* ------------------------------- ContextMenu ------------------------------ */
-	const onRowContextMenu = React.useCallback((rowProps, event) => {
-		if (!rowProps || !rowProps.data || func_selection.has_selection()) {
-			update_menuRow(null, null);
-			return true;
-		}
-		event.preventDefault();
-
-		const realRow = find_realData(rowProps.dataSourceArray, event.target, rowProps.data);
-		const anEl = func_selection.getVirtualElement(event.clientX, event.clientY);
-		update_menuRow(realRow, anEl);
-		return false;
-	}, []);
-
-	/* -------------------------------------------------------------------------- */
-	/* ------------------------------ Accessibility ----------------------------- */
-	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; 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((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 (
-			!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) : '',
-				busy: el ? is_grid_busy(liveGrid) : false,
-			};
-		});
-	}, []);
-	React.useEffect(() => {
-		scheduleRootSync();
-	}, [scheduleRootSync, props.ariaLabel, props.editable, props.columns, props.dataSource]);
-	React.useEffect(
-		() => () => {
-			if (rootSyncFrame.current) cancelAnimationFrame(rootSyncFrame.current);
-			rootSyncFrame.current = 0;
-		},
-		[]
-	);
-
-	const onRenderRow = React.useCallback((rowProps) => {
-		// save the original handlers to be called later
-		rowProps['data-row-id'] = get_row_id(rowProps.data);
-		const liveGrid: any = latestProps.current.liveGridRef?.current?.current;
-		apply_row_a11y(rowProps, !!liveGrid?.computedRowSelectionEnabled);
-		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,
-		menuAnchorEl,
-		menuRow,
-	};
-}
+import React from 'react';
+import { DataGridWrapperProps, GridType } from '../types/types';
+import { find_realData, get_row_id } from '../func/func_grid';
+import { func_selection } from '../func/func_child';
+import {
+	apply_root_a11y,
+	apply_row_a11y,
+	get_grid_root,
+	get_root_a11y_key,
+	is_grid_busy,
+} from '../func/func_a11y';
+
+function useGridMenuRow() {
+	const [menuAnchorEl, set_menuAnchorEl] = React.useState<any>(null);
+	const [menuRow, set_menuRow] = React.useState<any>(null);
+	const update_menuRow = React.useCallback((r: any = null, el: any = null) => {
+		set_menuRow(r || null);
+		set_menuAnchorEl(el || null);
+	}, []);
+	return { update_menuRow, menuAnchorEl, menuRow };
+}
+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(
+		(col: string) => {
+			const dt = grid.ungroupedData;
+			for (let index = 0; index < dt.length; index++) {
+				(grid as any).setItemPropertyAt(index, col, dt[index][col]);
+			}
+		},
+		[grid]
+	);
+	const refresh = React.useCallback(() => {
+		const dt = grid.ungroupedData;
+		for (let index = 0; index < dt.length; index++) {
+			(grid as any).setItemAt(index, {}, { replace: false });
+		}
+	}, [grid]);
+
+	React.useEffect(() => {
+		if (!grid) return;
+		grid['refresh'] = refresh;
+		grid['refreshColumn'] = refreshColumn;
+	}, [grid, props.dataSource, refresh, refreshColumn]);
+	/* -------------------------------------------------------------------------- */
+	/*                                   events                                   */
+	/* -------------------------------------------------------------------------- */
+	const onRowClick = React.useCallback((rowProps, event) => {
+		const { onRowClick, onRowDoubleClick } = latestProps.current;
+		const nowDate = Date.now();
+		const rowId = get_row_id(rowProps.data);
+		const lastclick: number = click_data.current[rowId];
+		if (lastclick) {
+			const diffTime = Math.abs(nowDate - lastclick);
+			if (diffTime < 400) {
+				click_data.current[rowId] = null;
+				return onRowDoubleClick && onRowDoubleClick(rowProps.rowIndex, rowProps.data);
+			}
+		}
+
+		click_data.current[rowId] = nowDate;
+		return onRowClick && onRowClick(rowProps.rowIndex, rowProps.data);
+	}, []);
+
+	React.useEffect(() => {
+		click_data.current = {};
+	}, [props.dataSource]);
+
+	/* ------------------------------- ContextMenu ------------------------------ */
+	const onRowContextMenu = React.useCallback((rowProps, event) => {
+		if (!rowProps || !rowProps.data || func_selection.has_selection()) {
+			update_menuRow(null, null);
+			return true;
+		}
+		event.preventDefault();
+
+		const realRow = find_realData(rowProps.dataSourceArray, event.target, rowProps.data);
+		const anEl = func_selection.getVirtualElement(event.clientX, event.clientY);
+		update_menuRow(realRow, anEl);
+		return false;
+	}, []);
+
+	/* -------------------------------------------------------------------------- */
+	/* ------------------------------ Accessibility ----------------------------- */
+	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; 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((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 (
+			!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) : '',
+				busy: el ? is_grid_busy(liveGrid) : false,
+			};
+		});
+	}, []);
+	React.useEffect(() => {
+		scheduleRootSync();
+	}, [scheduleRootSync, props.ariaLabel, props.editable, props.columns, props.dataSource]);
+	React.useEffect(
+		() => () => {
+			if (rootSyncFrame.current) cancelAnimationFrame(rootSyncFrame.current);
+			rootSyncFrame.current = 0;
+		},
+		[]
+	);
+
+	const onRenderRow = React.useCallback((rowProps) => {
+		// save the original handlers to be called later
+		rowProps['data-row-id'] = get_row_id(rowProps.data);
+		const liveGrid: any = latestProps.current.liveGridRef?.current?.current;
+		apply_row_a11y(rowProps, !!liveGrid?.computedRowSelectionEnabled);
+		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,
+		menuAnchorEl,
+		menuRow,
+	};
+}

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

@@ -116,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;