@azrico/reactgrid 1.6.2 → 1.6.5

package/src/example.tsx

@@ -1,186 +1,202 @@
-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;
+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,
+	},
+	{
+		// typed columns are editable without editableColumns, items keep their case
+		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`,
+	},
+	{
+		// editable only for rows that are not saved yet (no id)
+		name: 'location',
+		title: 'Location',
+		type: 'select',
+		items: ['Shelf A', 'Shelf B', 'Back Room'],
+		editable: (value: any, cellProps: any) => !cellProps?.data?.id,
+		defaultFlex: 1,
+	},
+];
+
+// plain columns still need editableColumns
+const editableColumns = ['name'];
+
+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',
+			location: 'Shelf A',
+			// every third row is saved, its location is readonly
+			id: index % 3 == 0 ? 'saved-' + index : undefined,
+		};
+		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,
+			},
+			{ title: 'Log row', onClick: (row) => console.log('context menu: log', row) },
+			{ title: 'Copy name', onClick: (row) => navigator.clipboard?.writeText(String(row?.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_a11y.ts

@@ -5,6 +5,8 @@ import { GridType } from '../types/types';
  * Inovua's grid renders anonymous divs, so we fill in ARIA grid semantics here.
  * Cell/header DOM attributes go through the column's cellDOMProps/headerDOMProps
  * (attributes set on cellProps inside onRender are not forwarded to the DOM).
+ * Inovua's prop types only accept an object for headerDOMProps, so the header's
+ * aria-colindex/aria-sort are set on the DOM by apply_header_a11y.
  */
 
 export type ColumnA11yOptions = {
@@ -14,6 +16,8 @@ export type ColumnA11yOptions = {
 	gridEditable?: boolean;
 	/** false skips aria-readonly (for interactive special columns like the checkbox column) */
 	markReadonly?: boolean;
+	/** column id when the column object has no id/name (inovua's special columns) */
+	id?: string;
 };
 
 function set_default(target: any, key: string, value: any) {
@@ -47,6 +51,7 @@ export function apply_column_a11y<T extends Record<string, any>>(
 	options: ColumnA11yOptions = {}
 ): T {
 	const { role = 'gridcell', gridEditable = false, markReadonly = true } = options;
+	const id = col.id ?? col.name ?? options.id;
 	const consumerCellDOMProps = col.cellDOMProps;
 	const consumerHeaderDOMProps = col.headerDOMProps;
 	const ariaLabel = col.ariaLabel;
@@ -66,15 +71,32 @@ export function apply_column_a11y<T extends Record<string, any>>(
 				set_default(res, 'aria-label', ariaLabel(cellProps.value, data));
 			return res;
 		},
-		headerDOMProps: (cellProps: any) => {
-			const res = resolve_dom_props(consumerHeaderDOMProps, cellProps);
+		headerDOMProps: get_header_dom_props(consumerHeaderDOMProps, id),
+	};
+}
+
+/**
+ * header DOM props as an object (inovua's prop types reject a function),
+ * aria-colindex/aria-sort change with the grid state and are set by apply_header_a11y
+ * @param consumer consumer's headerDOMProps
+ * @param id column id, looked up in the grid's columnsMap
+ */
+function get_header_dom_props(consumer: any, id: string | undefined) {
+	//a consumer function is kept (inovua runs it), it gets the attributes from the cell props
+	if (typeof consumer === 'function')
+		return (cellProps: any) => {
+			const res = resolve_dom_props(consumer, cellProps);
 			set_default(res, 'role', 'columnheader');
+			set_default(res, 'data-column', id);
 			set_default(res, 'aria-colindex', cellProps.computedVisibleIndex + 1);
 			if (cellProps.computedSortable)
 				set_default(res, 'aria-sort', get_sort_dir(cellProps.computedSortInfo));
 			return res;
-		},
-	};
+		};
+	const res = resolve_dom_props(consumer, undefined);
+	set_default(res, 'role', 'columnheader');
+	set_default(res, 'data-column', id);
+	return res;
 }
 
 /**
@@ -115,6 +137,39 @@ export function get_grid_row_count(grid: GridType): number {
 
 export type RootA11yOptions = { ariaLabel?: string; editable?: boolean };
 
+const HEADER_CELL_SELECTOR = '[role="columnheader"][data-column]';
+
+/**
+ * sets aria-colindex/aria-sort on the header cells of the grid,
+ * attributes the consumer set in an object headerDOMProps are left alone
+ * @param grid computed props of the grid
+ * @param root root element of the grid
+ */
+export function apply_header_a11y(grid: GridType | null | undefined, root: Element) {
+	const columnsMap = (grid as any)?.columnsMap;
+	if (!columnsMap) return;
+	root.querySelectorAll(HEADER_CELL_SELECTOR).forEach((el) => {
+		//skip headers of grids nested in row details
+		if (el.closest('[role="grid"]') !== root) return;
+		const col = columnsMap[el.getAttribute('data-column') as string];
+		const own = col?.headerDOMProps;
+		//a function headerDOMProps sets the attributes itself
+		if (!own || typeof own !== 'object') return;
+		if (own['aria-colindex'] === undefined)
+			set_attr(el, 'aria-colindex', col.computedVisibleIndex + 1);
+		if (own['aria-sort'] === undefined)
+			set_attr(el, 'aria-sort', col.computedSortable ? get_sort_dir(col.computedSortInfo) : undefined);
+	});
+}
+
+/**
+ * true when a header cell was (re)mounted without its aria-colindex
+ * @param root root element of the grid
+ */
+export function has_unsynced_header(root: Element | null) {
+	return !!root?.querySelector(`${HEADER_CELL_SELECTOR}:not([aria-colindex])`);
+}
+
 /**
  * true while the grid is loading (loading prop or async datasource)
  * @param grid computed props of the grid
@@ -145,6 +200,8 @@ export function get_root_a11y_key(grid: GridType | null | undefined, options: Ro
 		options.ariaLabel ?? '',
 		options.editable ? 1 : 0,
 		is_grid_busy(g) ? 1 : 0,
+		//header cells: order and sort direction
+		(g.visibleColumns || []).map((c) => `${c.id}:${c.computedSortInfo?.dir || 0}`).join(','),
 	].join('|');
 }
 
@@ -165,5 +222,6 @@ export function apply_root_a11y(grid: GridType | null | undefined, options: Root
 	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);
+	apply_header_a11y(g, el);
 	return el;
 }