@azrico/reactgrid 1.6.11 → 1.6.13

package/src/views/DataGrid.tsx

@@ -1,371 +1,405 @@
-import '@inovua/reactdatagrid-enterprise/index.css';
-import '../themes/base_styles.css';
-import '../themes/grid.css';
-import { get_default_key, get_row_id } from '../func/func_grid';
-import { ContextMenu } from '@azrico/controls/context-menu';
-import React from 'react';
-
-import ReactDataGrid from '@inovua/reactdatagrid-enterprise';
-import clsx from 'clsx';
-import { useComponentSize } from 'react-use-size';
-
-import { AzGridOptions, AzGridProps, DataGridWrapperProps } from '../types/types';
-import { useGridEvents } from '../hooks/useGridEvents';
-import { useColumnData } from '../hooks/useColumnData';
-import { useDataSource } from '../hooks/useDatasource';
-import { useGridSearch } from '../hooks/useGridSearch';
-import { apply_column_a11y } from '../func/func_a11y';
-import { id as rowIndexColumnId } from '@inovua/reactdatagrid-community/normalizeColumns/defaultRowIndexColumnId';
-import { id as checkboxColumnId } from '@inovua/reactdatagrid-community/normalizeColumns/defaultCheckColumnId';
-/* -------------------------------------------------------------------------- */
-
-/* -------------------------------------------------------------------------- */
-
-const defaultOptions: AzGridOptions = {
-	//filterTypes: defaultfilterTypes,
-	remoteFilter: false,
-	remoteSort: false,
-	editStartEvent: 'click',
-	rowReorderColumn: false,
-	resizable: true,
-	columnUserSelect: true,
-	rowIndexColumn: true,
-	rowHeight: 35,
-};
-const forcedOptions: AzGridOptions = {
-	idProperty: '__table_id',
-	nodesProperty: '__children',
-	theme: 'default-light',
-};
-
-const dynamic_option_names = ['selected', 'cellSelection', 'loading', 'limit', 'skip'];
-// consumer callbacks forwarded to the grid; wrapped so a new function doesn't re-render the grid
-const callback_option_names = [
-	'onSkipChange',
-	'onLimitChange',
-	'onEditComplete',
-	'onSelectionChange',
-	'onCellSelectionChange',
-];
-// props DataGridCore renders from, other props don't need to re-render the grid
-const core_prop_names = [
-	'className',
-	'static_gridOptions',
-	'dynamic_gridOptions',
-	'columns',
-	'dataSource',
-	'gridRef',
-	'liveGridRef',
-	'allowChildRows',
-	'theme',
-	'dark',
-	'children',
-];
-/* -------------------------------------------------------------------------- */
-export function AzGrid(props: AzGridProps) {
-	const gridRefBackup = React.useRef<any>(null);
-	const gridRef = props.gridRef || gridRefBackup;
-	const liveGridRef = React.useRef<any>(null);
-	const latestProps = React.useRef(props);
-	latestProps.current = props;
-
-	/* -------------------------------------------------------------------------- */
-	/*                                   Columns                                  */
-	/* -------------------------------------------------------------------------- */
-	const cached_columns = useColumnData(props);
-	const dataSource = useDataSource(props.dataSource, props);
-	const a11y_columns = React.useMemo(
-		() => cached_columns.map((col) => apply_column_a11y(col, { gridEditable: !!props.editable })),
-		[cached_columns, props.editable]
-	);
-	/* -------------------------------------------------------------------------- */
-	/*                                 Row changes                                */
-	/* -------------------------------------------------------------------------- */
-
-	const base_gridOptions = React.useMemo<AzGridOptions>(() => {
-		const firstcolumn = cached_columns[0];
-		const licenseKey = props.licenseKey || get_default_key();
-		// call the latest consumer callback, only passed when the consumer gave one
-		const events: AzGridOptions = {};
-		callback_option_names.forEach((name) => {
-			if (props[name])
-				events[name] = (...args: any[]) => latestProps.current[name]?.(...args);
-		});
-		const extra_ops: AzGridOptions = {
-			licenseKey: licenseKey,
-			editable: props.editable as any, //bug in types of the plugin
-			treeColumn: props.allowChildRows ? firstcolumn.name : undefined,
-			renderRowDetails: props.RowDetail,
-		};
-		return { ...defaultOptions, ...events, ...extra_ops };
-	}, [
-		cached_columns,
-		props.allowChildRows,
-		props.editable,
-		props.RowDetail,
-		props.licenseKey,
-		...callback_option_names.map((name) => !!props[name]),
-	]);
-
-	const static_gridOptions = React.useMemo<AzGridOptions>(() => {
-		const finalres = { ...base_gridOptions, ...props.gridOptions, ...forcedOptions };
-
-		//append filter types instead of replacing it
-		if (finalres.filterTypes)
-			finalres.filterTypes = Object.assign(
-				{},
-				ReactDataGrid.defaultProps.filterTypes,
-				finalres.filterTypes
-			);
-
-		return finalres;
-	}, [props.gridOptions, base_gridOptions, forcedOptions]);
-
-	const dynamic_gridOptions = React.useMemo<AzGridOptions>(
-		() => {
-			const res = {};
-			dynamic_option_names.map((r) => {
-				res[r] = props[r];
-			});
-			return res;
-		},
-		dynamic_option_names.map((r) => props[r])
-	);
-
-	return (
-		<DataGridEventsWrapper
-			{...props}
-			gridRef={gridRef}
-			liveGridRef={liveGridRef}
-			static_gridOptions={static_gridOptions}
-			dynamic_gridOptions={dynamic_gridOptions}
-			columns={a11y_columns}
-			dataSource={dataSource}
-			highlightedRow={props.highlightedRow}
-		/>
-	);
-}
-
-/* -------------------------------------------------------------------------- */
-/**
- * Wrapper for menu events
- * @param props
- * @returns
- */
-function DataGridEventsWrapper(props: DataGridWrapperProps) {
-	const themeClass = `azgrid-theme-${props.theme ?? (props.dark ? 'dark' : 'light')}`;
-	/* -------------------------------------------------------------------------- */
-	const {
-		onRowClick,
-		onRowContextMenu,
-		onRenderRow,
-		onRenderLoadMask,
-		update_menuRow,
-		menuAnchorEl,
-		menuRow,
-	} = useGridEvents(props.gridRef.current, props);
-	const menuRowId =
-		menuAnchorEl && !props.hideContextMenu && props.contextMenuItems
-			? get_row_id(menuRow)
-			: undefined;
-	const consumerRowClassName = props.static_gridOptions?.rowClassName;
-	const rowClassName = React.useCallback(
-		(rowProps) => clsx(
-			typeof consumerRowClassName === 'function'
-				? consumerRowClassName(rowProps)
-				: consumerRowClassName,
-			menuRowId != null && get_row_id(rowProps.data) === menuRowId && 'azgrid-row--menu-open'
-		),
-		[consumerRowClassName, menuRowId]
-	);
-	/* -------------------------------------------------------------------------- */
-	/**
-	 * Merge click events into grid options
-	 */
-	const static_gridOptions = React.useMemo<AzGridOptions>(() => {
-		const opts: any = props.static_gridOptions || {};
-		const events: AzGridOptions = {
-			onRowClick: onRowClick,
-			onRowContextMenu: onRowContextMenu,
-		};
-
-		// internal row attributes first, consumer's onRenderRow last so it can override them
-		const consumerOnRenderRow = opts.onRenderRow;
-		const renderProps: any = {
-			rowClassName,
-			onRenderRow: consumerOnRenderRow
-				? (rowProps) => {
-						onRenderRow(rowProps);
-						consumerOnRenderRow(rowProps);
-				  }
-				: onRenderRow,
-			// track loading for aria-busy, the consumer's renderLoadMask (if any) still renders the mask
-			renderLoadMask: (maskProps) => {
-				onRenderLoadMask(maskProps);
-				return opts.renderLoadMask ? opts.renderLoadMask(maskProps) : undefined;
-			},
-		};
-
-		const gridEditable = !!props.editable;
-		const a11yProps: any = {
-			headerProps: { role: 'row', 'aria-rowindex': 1, ...opts.headerProps },
-			rowIndexColumn: apply_column_a11y(
-				typeof opts.rowIndexColumn === 'object' ? opts.rowIndexColumn : {},
-				{ role: 'rowheader', gridEditable, id: rowIndexColumnId }
-			),
-		};
-		if (opts.checkboxColumn)
-			a11yProps.checkboxColumn = apply_column_a11y(
-				typeof opts.checkboxColumn === 'object' ? opts.checkboxColumn : {},
-				{ gridEditable, markReadonly: false, id: checkboxColumnId }
-			);
-
-		return {
-			...opts,
-			...events,
-			...renderProps,
-			...a11yProps,
-		};
-	}, [
-		props.static_gridOptions,
-		props.editable,
-		onRowClick,
-		onRowContextMenu,
-		onRenderRow,
-		onRenderLoadMask,
-		rowClassName,
-	]);
-
-	/* -------------------------------------------------------------------------- */
-	// The menu is portaled to <body>, so it carries the theme class itself to get the theme tokens.
-	return (
-		<div className={clsx('azgrid-scope azgrid-flexed azgrid-flexlayout', themeClass)}>
-			{!props.hideContextMenu && props.contextMenuItems && (
-				<ContextMenu
-					classname={clsx('azgrid-context-menu', themeClass, props.contextMenuClassName)}
-					menuAnchorEl={menuAnchorEl}
-					menuRow={menuRow}
-					close={update_menuRow}
-					dontAutoClose={props.dontAutoCloseContextMenu ?? false}
-					escapeClosesContextMenu={props.escapeClosesContextMenu ?? false}
-					menu_items={props.contextMenuItems as any}
-				/>
-			)}
-			{props.details_dataSource ? (
-				<DataGridDetailsWrapper {...props} static_gridOptions={static_gridOptions} />
-			) : (
-				<DataGridSizeWrapper {...props} static_gridOptions={static_gridOptions} />
-			)}
-		</div>
-	);
-}
-
-function DataGridDetailsWrapper(props: DataGridWrapperProps) {
-	const cached_details_columns = useColumnData(props.details_columns);
-	const details_dataSource = useDataSource(props.details_dataSource, props);
-	const renderDetailsGrid = ({ data }) => {
-		return (
-			<ReactDataGrid
-				theme="default-light"
-				className={clsx('azgrid', `azgrid-theme-${props.theme ?? (props.dark ? 'dark' : 'light')}`)}
-				defaultFilterValue={props.details_filter}
-				dataSource={details_dataSource}
-				columns={cached_details_columns}
-			/>
-		);
-	};
-
-	/**
-	 * Merge details into grid
-	 */
-	const static_gridOptions = React.useMemo<AzGridOptions>(() => {
-		const finalresult = props.static_gridOptions || {};
-		finalresult['renderDetailsGrid'] = renderDetailsGrid;
-		return finalresult;
-	}, [props.static_gridOptions, props.theme, props.dark]);
-
-	return <DataGridSizeWrapper {...props} static_gridOptions={static_gridOptions} />;
-}
-
-function DataGridSizeWrapper(props: DataGridWrapperProps) {
-	if (props.delayedSize) {
-		return <DataGridDelayedSizeWrapper {...props} />;
-	} else {
-		return <DataGridNormalSizeWrapper {...props} />;
-	}
-}
-
-/* -------------------------------------------------------------------------- */
-function DataGridNormalSizeWrapper(props: DataGridWrapperProps) {
-	return props.advancedFilterFields ? (
-		<DataGridSearchWrapper {...props} />
-	) : (
-		<DataGridCore {...props} />
-	);
-}
-function DataGridDelayedSizeWrapper(props: DataGridWrapperProps) {
-	const { ref, height, width } = useComponentSize();
-	return (
-		<div ref={ref} className={'azgrid-filler azgrid-nooverflow '}>
-			<div
-				className={'azgrid-delayedresize azgrid-flexlayout'}
-				style={{ height: height, width: width }}
-			>
-				{props.advancedFilterFields ? (
-					<DataGridSearchWrapper {...props} />
-				) : (
-					<DataGridCore {...props} />
-				)}
-			</div>
-		</div>
-	);
-}
-function DataGridSearchWrapper(props: DataGridWrapperProps) {
-	const { element, filteredData } = useGridSearch(props);
-
-	return (
-		<div className={'azgrid-flexed azgrid-flexlayout azgrid-nooverflow'}>
-			{element}
-			<DataGridCore {...props} dataSource={filteredData} />
-		</div>
-	);
-}
-const DataGridCore = React.memo(DataGridCoreView, (prev, next) =>
-	core_prop_names.every((name) => prev[name] === next[name])
-);
-function DataGridCoreView(props: DataGridWrapperProps) {
-	const { gridRef, liveGridRef } = props;
-	const handle = React.useCallback(
-		(ref) => {
-			if (ref) gridRef.current = ref.current as any;
-			if (liveGridRef) liveGridRef.current = ref as any;
-		},
-		[gridRef, liveGridRef]
-	);
-	return (
-		<div className={clsx(props.className, 'azgrid-flexed', 'azgrid-flexlayout')}>
-			<ReactDataGrid
-				{...props.static_gridOptions}
-				{...props.dynamic_gridOptions}
-				rowIndexColumn={props.static_gridOptions.rowIndexColumn || true}
-				handle={handle}
-				theme="default-light"
-				className={clsx(
-					'azgrid azgrid-flexed',
-					props.allowChildRows && 'azgrid-tree',
-					`azgrid-theme-${props.theme ?? (props.dark ? 'dark' : 'light')}`
-				)}
-				columns={props.columns}
-				dataSource={props.dataSource}
-			/>
-			{props.children}
-		</div>
-	);
-}
-/* -------------------------------------------------------------------------- */
-/* -------------------------------------------------------------------------- */
-/* -------------------------------------------------------------------------- */
-/* -------------------------------------------------------------------------- */
-
-/* -------------------------------------------------------------------------- */
-export default AzGrid;
+import '@inovua/reactdatagrid-enterprise/index.css';
+import '../themes/base_styles.css';
+import '../themes/grid.css';
+import { get_default_key, get_row_id } from '../func/func_grid';
+import { ContextMenu } from '@azrico/controls/context-menu';
+import React from 'react';
+
+import ReactDataGrid from '@inovua/reactdatagrid-enterprise';
+import clsx from 'clsx';
+import { useComponentSize } from 'react-use-size';
+
+import { AzGridOptions, AzGridProps, DataGridWrapperProps } from '../types/types';
+import { useGridEvents } from '../hooks/useGridEvents';
+import { useColumnData } from '../hooks/useColumnData';
+import { useDataSource } from '../hooks/useDatasource';
+import { useGridSearch } from '../hooks/useGridSearch';
+import { apply_column_a11y } from '../func/func_a11y';
+import {
+	apply_column_sizes,
+	ColumnSizes,
+	isValidWidth,
+	loadColumnSizes,
+	saveColumnSizes,
+} from '../func/func_colsizes';
+import debounce from 'lodash.debounce';
+import { id as rowIndexColumnId } from '@inovua/reactdatagrid-community/normalizeColumns/defaultRowIndexColumnId';
+import { id as checkboxColumnId } from '@inovua/reactdatagrid-community/normalizeColumns/defaultCheckColumnId';
+/* -------------------------------------------------------------------------- */
+
+/* -------------------------------------------------------------------------- */
+
+const defaultOptions: AzGridOptions = {
+	//filterTypes: defaultfilterTypes,
+	remoteFilter: false,
+	remoteSort: false,
+	editStartEvent: 'click',
+	rowReorderColumn: false,
+	resizable: true,
+	columnUserSelect: true,
+	rowIndexColumn: true,
+	rowHeight: 35,
+};
+const forcedOptions: AzGridOptions = {
+	idProperty: '__table_id',
+	nodesProperty: '__children',
+	theme: 'default-light',
+};
+
+const dynamic_option_names = ['selected', 'cellSelection', 'loading', 'limit', 'skip'];
+// consumer callbacks forwarded to the grid; wrapped so a new function doesn't re-render the grid
+const callback_option_names = [
+	'onSkipChange',
+	'onLimitChange',
+	'onEditComplete',
+	'onSelectionChange',
+	'onCellSelectionChange',
+];
+// props DataGridCore renders from, other props don't need to re-render the grid
+const core_prop_names = [
+	'className',
+	'static_gridOptions',
+	'dynamic_gridOptions',
+	'columns',
+	'dataSource',
+	'gridRef',
+	'liveGridRef',
+	'allowChildRows',
+	'theme',
+	'dark',
+	'children',
+];
+/* -------------------------------------------------------------------------- */
+export function AzGrid(props: AzGridProps) {
+	const gridRefBackup = React.useRef<any>(null);
+	const gridRef = props.gridRef || gridRefBackup;
+	const liveGridRef = React.useRef<any>(null);
+	const latestProps = React.useRef(props);
+	latestProps.current = props;
+
+	/* -------------------------------------------------------------------------- */
+	/*                                   Columns                                  */
+	/* -------------------------------------------------------------------------- */
+	const data_columns = useColumnData(props);
+	const dataSource = useDataSource(props.dataSource, props);
+	// saved widths are read once per grid id, resizing only updates this map so the columns aren't re-created mid-drag
+	const savedSizes = React.useRef<{ gridId?: string; sizes: ColumnSizes }>({ sizes: {} });
+	const saveSizesDebounced = React.useMemo(
+		() =>
+			props.gridId
+				? debounce(() => saveColumnSizes(props.gridId!, savedSizes.current.sizes), 300)
+				: null,
+		[props.gridId]
+	);
+	React.useEffect(() => () => saveSizesDebounced?.flush(), [saveSizesDebounced]);
+	const cached_columns = React.useMemo(() => {
+		if (!props.gridId) return data_columns;
+		if (savedSizes.current.gridId !== props.gridId)
+			savedSizes.current = { gridId: props.gridId, sizes: loadColumnSizes(props.gridId) };
+		return apply_column_sizes(data_columns, savedSizes.current.sizes);
+	}, [data_columns, props.gridId]);
+	const a11y_columns = React.useMemo(
+		() => cached_columns.map((col) => apply_column_a11y(col, { gridEditable: !!props.editable })),
+		[cached_columns, props.editable]
+	);
+	/* -------------------------------------------------------------------------- */
+	/*                                 Row changes                                */
+	/* -------------------------------------------------------------------------- */
+
+	const base_gridOptions = React.useMemo<AzGridOptions>(() => {
+		const firstcolumn = cached_columns[0];
+		const licenseKey = props.licenseKey || get_default_key();
+		// call the latest consumer callback, only passed when the consumer gave one
+		const events: AzGridOptions = {};
+		callback_option_names.forEach((name) => {
+			if (props[name])
+				events[name] = (...args: any[]) => latestProps.current[name]?.(...args);
+		});
+		const extra_ops: AzGridOptions = {
+			licenseKey: licenseKey,
+			editable: props.editable as any, //bug in types of the plugin
+			treeColumn: props.allowChildRows ? firstcolumn.name : undefined,
+			renderRowDetails: props.RowDetail,
+		};
+		return { ...defaultOptions, ...events, ...extra_ops };
+	}, [
+		cached_columns,
+		props.allowChildRows,
+		props.editable,
+		props.RowDetail,
+		props.licenseKey,
+		...callback_option_names.map((name) => !!props[name]),
+	]);
+
+	const static_gridOptions = React.useMemo<AzGridOptions>(() => {
+		const finalres = { ...base_gridOptions, ...props.gridOptions, ...forcedOptions };
+
+		//append filter types instead of replacing it
+		if (finalres.filterTypes)
+			finalres.filterTypes = Object.assign(
+				{},
+				ReactDataGrid.defaultProps.filterTypes,
+				finalres.filterTypes
+			);
+
+		if (saveSizesDebounced)
+			finalres.onColumnResize = (info, ...rest) => {
+				const name = info.column.name ?? info.column.id;
+				if (name != null && isValidWidth(info.width)) {
+					savedSizes.current.sizes[name] = info.width;
+					saveSizesDebounced();
+				}
+				latestProps.current.gridOptions?.onColumnResize?.(info, ...rest);
+			};
+
+		return finalres;
+	}, [props.gridOptions, base_gridOptions, forcedOptions, saveSizesDebounced]);
+
+	const dynamic_gridOptions = React.useMemo<AzGridOptions>(
+		() => {
+			const res = {};
+			dynamic_option_names.map((r) => {
+				res[r] = props[r];
+			});
+			return res;
+		},
+		dynamic_option_names.map((r) => props[r])
+	);
+
+	return (
+		<DataGridEventsWrapper
+			{...props}
+			gridRef={gridRef}
+			liveGridRef={liveGridRef}
+			static_gridOptions={static_gridOptions}
+			dynamic_gridOptions={dynamic_gridOptions}
+			columns={a11y_columns}
+			dataSource={dataSource}
+			highlightedRow={props.highlightedRow}
+		/>
+	);
+}
+
+/* -------------------------------------------------------------------------- */
+/**
+ * Wrapper for menu events
+ * @param props
+ * @returns
+ */
+function DataGridEventsWrapper(props: DataGridWrapperProps) {
+	const themeClass = `azgrid-theme-${props.theme ?? (props.dark ? 'dark' : 'light')}`;
+	/* -------------------------------------------------------------------------- */
+	const {
+		onRowClick,
+		onRowContextMenu,
+		onRenderRow,
+		onRenderLoadMask,
+		update_menuRow,
+		menuAnchorEl,
+		menuRow,
+	} = useGridEvents(props.gridRef.current, props);
+	const menuRowId =
+		menuAnchorEl && !props.hideContextMenu && props.contextMenuItems
+			? get_row_id(menuRow)
+			: undefined;
+	const consumerRowClassName = props.static_gridOptions?.rowClassName;
+	const rowClassName = React.useCallback(
+		(rowProps) => clsx(
+			typeof consumerRowClassName === 'function'
+				? consumerRowClassName(rowProps)
+				: consumerRowClassName,
+			menuRowId != null && get_row_id(rowProps.data) === menuRowId && 'azgrid-row--menu-open'
+		),
+		[consumerRowClassName, menuRowId]
+	);
+	/* -------------------------------------------------------------------------- */
+	/**
+	 * Merge click events into grid options
+	 */
+	const static_gridOptions = React.useMemo<AzGridOptions>(() => {
+		const opts: any = props.static_gridOptions || {};
+		const events: AzGridOptions = {
+			onRowClick: onRowClick,
+			onRowContextMenu: onRowContextMenu,
+		};
+
+		// internal row attributes first, consumer's onRenderRow last so it can override them
+		const consumerOnRenderRow = opts.onRenderRow;
+		const renderProps: any = {
+			rowClassName,
+			onRenderRow: consumerOnRenderRow
+				? (rowProps) => {
+						onRenderRow(rowProps);
+						consumerOnRenderRow(rowProps);
+				  }
+				: onRenderRow,
+			// track loading for aria-busy, the consumer's renderLoadMask (if any) still renders the mask
+			renderLoadMask: (maskProps) => {
+				onRenderLoadMask(maskProps);
+				return opts.renderLoadMask ? opts.renderLoadMask(maskProps) : undefined;
+			},
+		};
+
+		const gridEditable = !!props.editable;
+		const a11yProps: any = {
+			headerProps: { role: 'row', 'aria-rowindex': 1, ...opts.headerProps },
+			rowIndexColumn: apply_column_a11y(
+				typeof opts.rowIndexColumn === 'object' ? opts.rowIndexColumn : {},
+				{ role: 'rowheader', gridEditable, id: rowIndexColumnId }
+			),
+		};
+		if (opts.checkboxColumn)
+			a11yProps.checkboxColumn = apply_column_a11y(
+				typeof opts.checkboxColumn === 'object' ? opts.checkboxColumn : {},
+				{ gridEditable, markReadonly: false, id: checkboxColumnId }
+			);
+
+		return {
+			...opts,
+			...events,
+			...renderProps,
+			...a11yProps,
+		};
+	}, [
+		props.static_gridOptions,
+		props.editable,
+		onRowClick,
+		onRowContextMenu,
+		onRenderRow,
+		onRenderLoadMask,
+		rowClassName,
+	]);
+
+	/* -------------------------------------------------------------------------- */
+	// The menu is portaled to <body>, so it carries the theme class itself to get the theme tokens.
+	return (
+		<div className={clsx('azgrid-scope azgrid-flexed azgrid-flexlayout', themeClass)}>
+			{!props.hideContextMenu && props.contextMenuItems && (
+				<ContextMenu
+					classname={clsx('azgrid-context-menu', themeClass, props.contextMenuClassName)}
+					menuAnchorEl={menuAnchorEl}
+					menuRow={menuRow}
+					close={update_menuRow}
+					dontAutoClose={props.dontAutoCloseContextMenu ?? false}
+					escapeClosesContextMenu={props.escapeClosesContextMenu ?? false}
+					menu_items={props.contextMenuItems as any}
+				/>
+			)}
+			{props.details_dataSource ? (
+				<DataGridDetailsWrapper {...props} static_gridOptions={static_gridOptions} />
+			) : (
+				<DataGridSizeWrapper {...props} static_gridOptions={static_gridOptions} />
+			)}
+		</div>
+	);
+}
+
+function DataGridDetailsWrapper(props: DataGridWrapperProps) {
+	const cached_details_columns = useColumnData(props.details_columns);
+	const details_dataSource = useDataSource(props.details_dataSource, props);
+	const renderDetailsGrid = ({ data }) => {
+		return (
+			<ReactDataGrid
+				theme="default-light"
+				className={clsx('azgrid', `azgrid-theme-${props.theme ?? (props.dark ? 'dark' : 'light')}`)}
+				defaultFilterValue={props.details_filter}
+				dataSource={details_dataSource}
+				columns={cached_details_columns}
+			/>
+		);
+	};
+
+	/**
+	 * Merge details into grid
+	 */
+	const static_gridOptions = React.useMemo<AzGridOptions>(() => {
+		const finalresult = props.static_gridOptions || {};
+		finalresult['renderDetailsGrid'] = renderDetailsGrid;
+		return finalresult;
+	}, [props.static_gridOptions, props.theme, props.dark]);
+
+	return <DataGridSizeWrapper {...props} static_gridOptions={static_gridOptions} />;
+}
+
+function DataGridSizeWrapper(props: DataGridWrapperProps) {
+	if (props.delayedSize) {
+		return <DataGridDelayedSizeWrapper {...props} />;
+	} else {
+		return <DataGridNormalSizeWrapper {...props} />;
+	}
+}
+
+/* -------------------------------------------------------------------------- */
+function DataGridNormalSizeWrapper(props: DataGridWrapperProps) {
+	return props.advancedFilterFields ? (
+		<DataGridSearchWrapper {...props} />
+	) : (
+		<DataGridCore {...props} />
+	);
+}
+function DataGridDelayedSizeWrapper(props: DataGridWrapperProps) {
+	const { ref, height, width } = useComponentSize();
+	return (
+		<div ref={ref} className={'azgrid-filler azgrid-nooverflow '}>
+			<div
+				className={'azgrid-delayedresize azgrid-flexlayout'}
+				style={{ height: height, width: width }}
+			>
+				{props.advancedFilterFields ? (
+					<DataGridSearchWrapper {...props} />
+				) : (
+					<DataGridCore {...props} />
+				)}
+			</div>
+		</div>
+	);
+}
+function DataGridSearchWrapper(props: DataGridWrapperProps) {
+	const { element, filteredData } = useGridSearch(props);
+
+	return (
+		<div className={'azgrid-flexed azgrid-flexlayout azgrid-nooverflow'}>
+			{element}
+			<DataGridCore {...props} dataSource={filteredData} />
+		</div>
+	);
+}
+const DataGridCore = React.memo(DataGridCoreView, (prev, next) =>
+	core_prop_names.every((name) => prev[name] === next[name])
+);
+function DataGridCoreView(props: DataGridWrapperProps) {
+	const { gridRef, liveGridRef } = props;
+	const handle = React.useCallback(
+		(ref) => {
+			if (ref) gridRef.current = ref.current as any;
+			if (liveGridRef) liveGridRef.current = ref as any;
+		},
+		[gridRef, liveGridRef]
+	);
+	return (
+		<div className={clsx(props.className, 'azgrid-flexed', 'azgrid-flexlayout')}>
+			<ReactDataGrid
+				{...props.static_gridOptions}
+				{...props.dynamic_gridOptions}
+				rowIndexColumn={props.static_gridOptions.rowIndexColumn || true}
+				handle={handle}
+				theme="default-light"
+				className={clsx(
+					'azgrid azgrid-flexed',
+					props.allowChildRows && 'azgrid-tree',
+					`azgrid-theme-${props.theme ?? (props.dark ? 'dark' : 'light')}`
+				)}
+				columns={props.columns}
+				dataSource={props.dataSource}
+			/>
+			{props.children}
+		</div>
+	);
+}
+/* -------------------------------------------------------------------------- */
+/* -------------------------------------------------------------------------- */
+/* -------------------------------------------------------------------------- */
+/* -------------------------------------------------------------------------- */
+
+/* -------------------------------------------------------------------------- */
+export default AzGrid;