@azrico/reactgrid 1.1.12 → 1.1.14

package/src/views/DataGrid.tsx

@@ -1,478 +1,552 @@
-import '@inovua/reactdatagrid-enterprise/index.css';
-import '@inovua/reactdatagrid-enterprise/theme/default-dark.css';
-import '@inovua/reactdatagrid-enterprise/theme/amber-dark.css';
-import '../themes/base_styles.css';
-import '../themes/grid.css';
-
-import { ContextMenu, ConvertableToMenuItem } from '@azrico/controls';
-import React, { useCallback, useState } from 'react';
-import {
-	TypeColumn,
-	TypeDataGridProps,
-	TypeDataSource,
-	TypeFilterTypes,
-	TypeRowDetailsInfo,
-	TypeRowProps,
-	TypeRowSelection,
-} from '@inovua/reactdatagrid-community/types';
-import { fix_parent_child_relations, func_selection } from '../func/helpers';
-
-import ReactDataGrid from '@inovua/reactdatagrid-enterprise';
-import { TypeOnSelectionChangeArg } from '@inovua/reactdatagrid-community/types/TypeDataGridProps';
-import clsx from 'clsx';
-import { object_equals } from '@azrico/object';
-import { useResizeDetector } from 'react-resize-detector';
-
-/* -------------------------------------------------------------------------- */
-type ModifyFields<T, R> = Omit<T, keyof R> & R;
-type MakeWriteable<Type> = {
-	-readonly [Key in keyof Type]: Type[Key];
-};
-/* -------------------------------------------------------------------------- */
-export type ColumnDefinition = TypeColumn;
-export type CellDefinition = any;
-export type RowDefinition = any;
-export type RowProps = TypeRowProps;
-export type RowSelectionValue = TypeRowSelection;
-export type DataRowDefinition = any;
-export type FilterTypes = TypeFilterTypes;
-export type DataSourceDefinition = TypeDataSource;
-export type OnSelectionChangeFunc = (config: TypeOnSelectionChangeArg) => void;
-export type RowDetailsFunc = (rowDetailsInfo: TypeRowDetailsInfo) => React.ReactNode;
-/* -------------------------------------------------------------------------- */
-type loose_column_names = {
-	key: string;
-	field: string;
-	columnName: string;
-	name: string;
-};
-type loose_column_fields = loose_column_names & { title: string };
-export type LooseColumnDefinition = Partial<loose_column_fields & ColumnDefinition>;
-//
-type columnOrString = string | LooseColumnDefinition;
-type customColumnData = {
-	name: string;
-	render: (cell: any, formatterParams, onRendered) => React.ReactNode | undefined | null;
-};
-type GridOptions = Partial<TypeDataGridProps>;
-/* -------------------------------------------------------------------------- */
-export type AzGridProps = {
-	columns?: columnOrString[];
-	dataSource?: any[] | ((args: any) => any[] | Promise<any[] | any>);
-
-	licenseKey?: string;
-
-	gridOptions?: GridOptions;
-
-	columnExtensions?: Array<{ name: string } & Partial<ColumnDefinition>>;
-	editableColumns?: string[];
-	leftColumns?: string[];
-	rightColumns?: string[];
-	customColumns?: customColumnData[];
-
-	contextMenuItems?: ConvertableToMenuItem[];
-
-	highlightedRow?: any;
-	RowDetail?: RowDetailsFunc;
-
-	selected?: RowSelectionValue;
-	/* -------------------------------------------------------------------------- */
-	onSelectionChange?: OnSelectionChangeFunc;
-
-	onRowClick?: (rowIndex: number, row: any) => void;
-	onRowDoubleClick?: (rowIndex: number, row: any) => void;
-	onLimitChange?: (v: number) => void;
-	onSkipChange?: (v: number) => void;
-	/* -------------------------------------------------------------------------- */
-	skip?: number;
-	limit?: number;
-	//
-	loading?: boolean;
-	dark?: boolean;
-	allowChildRows?: boolean;
-	looseCacheCheck?: boolean;
-	className?: string;
-};
-
-type DataGridProps = ModifyFields<
-	AzGridProps,
-	{
-		columns: ColumnDefinition[];
-		dataSource: any;
-	}
->;
-/* -------------------------------------------------------------------------- */
-// const defaultfilterTypes: FilterTypes = {
-// 	string: {
-// 		type: 'string',
-// 		emptyValue: '',
-// 		operators: [
-// 			{
-// 				name: 'contains',
-// 				fn: ({ value, filterValue, data }) => {
-// 					console.log('fn');
-// 					return !filterValue ? true : value.indexOf(filterValue) != -1;
-// 				},
-// 			},
-// 		],
-// 	},
-// };
-const defaultOptions: GridOptions = {
-	//filterTypes: defaultfilterTypes,
-	remoteFilter: false,
-	remoteSort: false,
-
-	rowReorderColumn: false,
-	resizable: true,
-	rowIndexColumn: true,
-};
-const forcedOptions: GridOptions = {
-	idProperty: '__table_id',
-	nodesProperty: '__children',
-};
-const defaultColumnOptions: ColumnDefinition = {
-	draggable: false,
-	lockable: false,
-};
-const dynamic_option_names = ['selected', 'loading', 'limit', 'skip'];
-/* -------------------------------------------------------------------------- */
-export function AzGrid(props: AzGridProps) {
-	/* -------------------------------------------------------------------------- */
-	/*                                   Columns                                  */
-	/* -------------------------------------------------------------------------- */
-	const cached_columns = React.useMemo(() => {
-		return ApplyColumnData(props);
-	}, [
-		props.columns,
-		props.leftColumns,
-		props.rightColumns,
-		props.editableColumns,
-		props.columnExtensions,
-		props.customColumns,
-	]);
-	/* -------------------------------------------------------------------------- */
-	/*                                 Row changes                                */
-	/* -------------------------------------------------------------------------- */
-
-	const cached_data = React.useRef<any>();
-	const last_cache_info = React.useRef<any>();
-
-	const dataSource = React.useCallback(
-		async (dt) => {
-			let result_data: any = undefined;
-
-			let isUsingCache = false;
-
-			const cacheInfo = { ds: props.dataSource, skip: dt.skip, limit: dt.limit };
-			//check if we can used cached data
-			//if the datasource is changed since last render, we should invalidate cache
-			if (!validateCache(last_cache_info.current, cacheInfo, props.looseCacheCheck)) {
-				cached_data.current = undefined;
-				last_cache_info.current = cacheInfo;
-			}
-
-			if (cached_data.current) {
-				//cache is valid, use the cache
-				isUsingCache = true;
-				result_data = cached_data.current;
-			} else {
-				//cache is invalid, use the datasource again
-
-				isUsingCache = false;
-				if (typeof props.dataSource === 'function') {
-					result_data = await props.dataSource(dt);
-				} else result_data = props.dataSource;
-			}
-
-			//making sure the datasource is a valid object :
-			if (!result_data) result_data = [];
-			if (Array.isArray(result_data) || typeof result_data !== 'object')
-				result_data = { data: result_data };
-
-			if (!Array.isArray(result_data.data)) result_data.data = [result_data.data];
-
-			//no need to fix parent/child when using cache (it should be already fixed)
-			if (!isUsingCache && props.allowChildRows)
-				result_data.data = fix_parent_child_relations(result_data.data);
-
-			if (!result_data.count) result_data.count = (result_data.data as Array<any>).length;
-
-			//update cache
-			cached_data.current = result_data;
-			return result_data;
-		},
-		[props.dataSource]
-	);
-
-	return (
-		<DataGrid
-			{...props}
-			columns={cached_columns}
-			dataSource={dataSource}
-			highlightedRow={props.highlightedRow}
-		/>
-	);
-}
-
-/* -------------------------------------------------------------------------- */
-function DataGrid(props: DataGridProps) {
-	const { columns, dataSource, dark, contextMenuItems } = props;
-
-	/* -------------------------------------------------------------------------- */
-	const gridRef = React.useRef<any>(null);
-	const click_data = React.useRef<any>(null);
-
-	const [menuAnchorEl, set_menuAnchorEl] = React.useState<any>(null);
-	const [menuRow, set_menuRow] = React.useState<any>(null);
-
-	React.useEffect(() => {
-		click_data.current = {};
-	}, [dataSource]);
-
-	/* --------------------------------- events --------------------------------- */
-
-	const onRowContextMenu = React.useCallback((rowProps, event) => {
-		if (func_selection.has_selection()) return;
-		update_menuRow(rowProps.data);
-		update_menuAnchorEl(func_selection.getVirtualElement(event.clientX, event.clientY));
-		event.preventDefault();
-	}, []);
-	const onRowClick = React.useCallback((rowProps, event) => {
-		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) {
-				props.onRowDoubleClick &&
-					props.onRowDoubleClick(rowProps.rowIndex, rowProps.data);
-			}
-		}
-
-		click_data.current[get_row_id(rowProps)] = nowDate;
-		props.onRowClick && props.onRowClick(rowProps.rowIndex, rowProps.data);
-	}, []);
-	/* ------------------------------- ContextMenu ------------------------------ */
-
-	const update_menuAnchorEl = React.useCallback((el) => {
-		if (el) {
-			set_menuAnchorEl(el);
-		} else set_menuAnchorEl(null);
-	}, []);
-	const update_menuRow = React.useCallback((r) => {
-		if (r) {
-			set_menuRow(r);
-		} else set_menuRow(null);
-	}, []);
-
-	/* -------------------------------------------------------------------------- */
-	/*                               Create the grid                              */
-	/* -------------------------------------------------------------------------- */
-
-	const base_gridOptions = React.useMemo<GridOptions>(() => {
-		const firstcolumn = columns[0];
-		const licenseKey = props.licenseKey || get_default_key();
-		const events: GridOptions = {
-			onRowClick: onRowClick,
-			onSkipChange: props.onSkipChange,
-			onLimitChange: props.onLimitChange,
-			onRowContextMenu: onRowContextMenu,
-		};
-		const extra_ops: GridOptions = {
-			onSelectionChange: props.onSelectionChange,
-			licenseKey: licenseKey,
-			treeColumn: props.allowChildRows ? firstcolumn.name : undefined,
-			renderRowDetails: props.RowDetail,
-			theme: dark ? 'amber-dark' : 'default-light',
-		};
-		return { ...defaultOptions, ...events, ...extra_ops };
-	}, [columns, props.allowChildRows, props.RowDetail]);
-
-	const static_gridOptions = React.useMemo<GridOptions>(() => {
-		return { ...base_gridOptions, ...props.gridOptions, ...forcedOptions };
-	}, [props.gridOptions, base_gridOptions, forcedOptions]);
-
-	const dynamic_gridOptions = React.useMemo<GridOptions>(
-		() => {
-			const res = {};
-			dynamic_option_names.map((r) => {
-				res[r] = props[r];
-			});
-			return res;
-		},
-		dynamic_option_names.map((r) => props[r])
-	);
-
-	// const { width, height, ref: resize_ref } = useResizeDetector();
-
-	return (
-		<div className={clsx(props.className, 'azgrid-nooverflow', 'azgrid-filler')}>
-			<ReactDataGrid
-				{...static_gridOptions}
-				{...dynamic_gridOptions}
-				handle={(ref) => (gridRef.current = ref ? ref.current : null)}
-				className={'azgrid-filler'}
-				columns={columns}
-				dataSource={dataSource}
-			/>
-			<ContextMenu
-				menuAnchorEl={menuAnchorEl}
-				set_menuAnchorEl={update_menuAnchorEl}
-				menuRow={menuRow}
-				items={contextMenuItems}
-			/>
-		</div>
-	);
-}
-
-/* -------------------------------------------------------------------------- */
-/* -------------------------------------------------------------------------- */
-/* -------------------------------------------------------------------------- */
-/* -------------------------------------------------------------------------- */
-
-/**
- * Gets name of a column from its column object
- * @param obj
- * @returns
- */
-function get_col_name(obj: any): string {
-	if (!obj) return 'default';
-	if (typeof obj == 'string') return obj;
-	if (typeof obj != 'object') return 'default';
-	return obj.name || obj.field || obj.key || obj.columnName || 'default';
-}
-/**
- * Gets name of a column from its column object
- * @param obj
- * @returns
- */
-function get_row_id(obj: any): any {
-	if (!obj) return 'default';
-	if (typeof obj == 'string') return obj;
-	if (typeof obj != 'object') return 'default';
-	return obj.__table_id || obj.id || 'default';
-}
-
-/**
- * Gets default activation key for grid plugin
- * @returns
- */
-function get_default_key() {
-	return 'ExpiryDate=2999-01-01,Z=1040577552';
-}
-
-//check if two cache objects are the same
-function validateCache(current: any, old: any, looseCheck = false) {
-	if (!old || !object_equals(current, old)) return false;
-
-	if (looseCheck) return true;
-
-	if (current.ds != old.ds) return false;
-	return true;
-}
-/**
- * merges together all different props for columns
- * to build a single final column data array
- * @param props
- * @returns
- */
-function ApplyColumnData(props: any) {
-	const final_columns: MakeWriteable<ColumnDefinition>[] = [];
-	let mcols = props.columns || [];
-	let mcolExts = props.columnExtensions || [];
-	let rightColumns = props.rightColumns || [];
-	let leftColumns = props.leftColumns || [];
-	let editableColumns = props.editableColumns || [];
-	let customColumns = props.customColumns || [];
-
-	if (!Array.isArray(mcols)) return [];
-	/* ------------------------------- fix columns ------------------------------ */
-
-	mcols
-		.map((r) => {
-			if (r == null) return null;
-			if (typeof r === 'string') return { field: r, header: r };
-			if (typeof r === 'object') {
-				let final_cl: MakeWriteable<ColumnDefinition> = {
-					name: get_col_name(r),
-					header: r.header || r.title || r.name || '-',
-					width: r.width || undefined,
-				};
-				delete r.field;
-				delete r.key;
-				delete r.columnName;
-				final_cl = {
-					...defaultColumnOptions,
-					...r,
-					...final_cl,
-				};
-				return final_cl;
-			}
-			return null;
-		})
-		.forEach((r) => {
-			if (r != null) final_columns.push(r);
-		});
-
-	/* ---------------------------- apply extensions ---------------------------- */
-	if (mcolExts && Array.isArray(mcolExts))
-		for (let index = 0; index < mcolExts.length; index++) {
-			const ext = mcolExts[index];
-			const ext_cl = get_col_name(ext);
-			const mcol = final_columns.find((s) => s.name === ext_cl);
-			if (mcol) {
-				for (const key in ext) {
-					if (!mcol[key] && key != 'name') mcol[key] = ext[key];
-				}
-			}
-			// if (ext.widthGrow) mcol.widthGrow = ext.widthGrow;
-		}
-
-	/* ------------------------------- frozen cols ------------------------------ */
-	if (Array.isArray(leftColumns)) {
-		for (let index = 0; index < leftColumns.length; index++) {
-			const r = get_col_name(leftColumns[index]);
-			const mcol = final_columns.find((s) => s.name === r);
-			if (mcol) {
-				mcol.locked = 'start';
-			}
-		}
-	}
-	if (Array.isArray(rightColumns)) {
-		for (let index = 0; index < rightColumns.length; index++) {
-			const r = get_col_name(rightColumns[index]);
-			const mcol = final_columns.find((s) => s.name === r);
-			if (mcol) {
-				mcol.locked = 'end';
-			}
-		}
-	}
-	/* -------------------------------- ediatable ------------------------------- */
-	if (Array.isArray(editableColumns)) {
-		for (let index = 0; index < editableColumns.length; index++) {
-			const r = get_col_name(editableColumns[index]);
-			const mcol = final_columns.find((s) => s.name === r);
-			if (mcol) {
-				// mcol.editor = editorWrapper;
-				// mcol.editorOptions = {
-				//     editOnClick: true,
-				// };
-			}
-		}
-	}
-	if (Array.isArray(customColumns)) {
-		for (let index = 0; index < customColumns.length; index++) {
-			const r = customColumns[index];
-			const rn = get_col_name(r);
-			const mcol = final_columns.find((s) => s.name === rn);
-			if (mcol) {
-				//@ts-ignore
-				mcol.render = r.render;
-			}
-		}
-	}
-	if (!Array.isArray(final_columns) || final_columns.length <= 0) return [];
-	return final_columns;
-}
-
-/* -------------------------------------------------------------------------- */
-export default AzGrid;
+import '@inovua/reactdatagrid-enterprise/index.css';
+import '@inovua/reactdatagrid-enterprise/theme/default-dark.css';
+import '@inovua/reactdatagrid-enterprise/theme/amber-dark.css';
+import '../themes/base_styles.css';
+import '../themes/grid.css';
+
+import { ContextMenu, ConvertableToMenuItem } from '@azrico/controls';
+import React, { useCallback, useState } from 'react';
+import {
+	TypeColumn,
+	TypeDataGridProps,
+	TypeDataSource,
+	TypeFilterTypes,
+	TypeRowDetailsInfo,
+	TypeRowProps,
+	TypeRowSelection,
+} from '@inovua/reactdatagrid-community/types';
+import { fix_parent_child_relations, func_selection } from '../func/helpers';
+
+import BoolEditor from '@inovua/reactdatagrid-community/BoolEditor';
+import NumericEditor from '@inovua/reactdatagrid-community/NumericEditor';
+import ReactDataGrid from '@inovua/reactdatagrid-enterprise';
+import SelectEditor from '@inovua/reactdatagrid-community/SelectEditor';
+import { TypeOnSelectionChangeArg } from '@inovua/reactdatagrid-community/types/TypeDataGridProps';
+import clsx from 'clsx';
+import { object_equals } from '@azrico/object';
+import { useResizeDetector } from 'react-resize-detector';
+
+/* -------------------------------------------------------------------------- */
+type ModifyFields<T, R> = Omit<T, keyof R> & R;
+type MakeWriteable<Type> = {
+	-readonly [Key in keyof Type]: Type[Key];
+};
+/* -------------------------------------------------------------------------- */
+export type ColumnDefinition = TypeColumn;
+export type CellDefinition = any;
+export type RowDefinition = any;
+export type RowProps = TypeRowProps;
+export type RowSelectionValue = TypeRowSelection;
+export type DataRowDefinition = any;
+export type FilterTypes = TypeFilterTypes;
+export type DataSourceDefinition = TypeDataSource;
+export type OnSelectionChangeFunc = (config: TypeOnSelectionChangeArg) => void;
+export type RowDetailsFunc = (rowDetailsInfo: TypeRowDetailsInfo) => React.ReactNode;
+/* -------------------------------------------------------------------------- */
+type loose_column_names = {
+	key: string;
+	field: string;
+	columnName: string;
+	name: string;
+};
+type loose_column_fields = loose_column_names & {
+	title: string;
+	type: string;
+	items: any[];
+};
+export type LooseColumnDefinition = Partial<loose_column_fields & ColumnDefinition>;
+//
+type columnOrString = string | LooseColumnDefinition;
+type customColumnData = {
+	name: string;
+	render: (cell: any, formatterParams, onRendered) => React.ReactNode | undefined | null;
+};
+type GridOptions = Partial<TypeDataGridProps>;
+/* -------------------------------------------------------------------------- */
+export type AzGridProps = {
+	columns?: columnOrString[];
+	dataSource?: any[] | ((args: any) => any[] | Promise<any[] | any>);
+
+	licenseKey?: string;
+
+	gridOptions?: GridOptions;
+
+	columnExtensions?: Array<{ name: string } & Partial<ColumnDefinition>>;
+	editableColumns?: string[];
+	leftColumns?: string[];
+	rightColumns?: string[];
+	customColumns?: customColumnData[];
+
+	contextMenuItems?: ConvertableToMenuItem[];
+
+	highlightedRow?: any;
+	RowDetail?: RowDetailsFunc;
+
+	selected?: RowSelectionValue;
+	/* -------------------------------------------------------------------------- */
+	onSelectionChange?: OnSelectionChangeFunc;
+
+	onRowClick?: (rowIndex: number, row: any) => void;
+	onRowDoubleClick?: (rowIndex: number, row: any) => void;
+	onLimitChange?: (v: number) => void;
+	onSkipChange?: (v: number) => void;
+	/* -------------------------------------------------------------------------- */
+	skip?: number;
+	limit?: number;
+	//
+	loading?: boolean;
+	dark?: boolean;
+	allowChildRows?: boolean;
+	looseCacheCheck?: boolean;
+	className?: string;
+};
+
+type DataGridProps = ModifyFields<
+	AzGridProps,
+	{
+		columns: ColumnDefinition[];
+		dataSource: any;
+	}
+>;
+/* -------------------------------------------------------------------------- */
+// const defaultfilterTypes: FilterTypes = {
+// 	string: {
+// 		type: 'string',
+// 		emptyValue: '',
+// 		operators: [
+// 			{
+// 				name: 'contains',
+// 				fn: ({ value, filterValue, data }) => {
+// 					console.log('fn');
+// 					return !filterValue ? true : value.indexOf(filterValue) != -1;
+// 				},
+// 			},
+// 		],
+// 	},
+// };
+const defaultOptions: GridOptions = {
+	//filterTypes: defaultfilterTypes,
+	remoteFilter: false,
+	remoteSort: false,
+
+	rowReorderColumn: false,
+	resizable: true,
+	rowIndexColumn: true,
+};
+const forcedOptions: GridOptions = {
+	idProperty: '__table_id',
+	nodesProperty: '__children',
+};
+const defaultColumnOptions: ColumnDefinition = {
+	draggable: false,
+	lockable: false,
+};
+const dynamic_option_names = ['selected', 'loading', 'limit', 'skip'];
+/* -------------------------------------------------------------------------- */
+export function AzGrid(props: AzGridProps) {
+	/* -------------------------------------------------------------------------- */
+	/*                                   Columns                                  */
+	/* -------------------------------------------------------------------------- */
+	const cached_columns = React.useMemo(() => {
+		return ApplyColumnData(props);
+	}, [
+		props.columns,
+		props.leftColumns,
+		props.rightColumns,
+		props.editableColumns,
+		props.columnExtensions,
+		props.customColumns,
+	]);
+	/* -------------------------------------------------------------------------- */
+	/*                                 Row changes                                */
+	/* -------------------------------------------------------------------------- */
+
+	const cached_data = React.useRef<any>();
+	const last_cache_info = React.useRef<any>();
+
+	const dataSource = React.useCallback(
+		async (dt) => {
+			let result_data: any = undefined;
+
+			let isUsingCache = false;
+
+			const cacheInfo = { ds: props.dataSource, skip: dt.skip, limit: dt.limit };
+			//check if we can used cached data
+			//if the datasource is changed since last render, we should invalidate cache
+			if (!validateCache(last_cache_info.current, cacheInfo, props.looseCacheCheck)) {
+				cached_data.current = undefined;
+				last_cache_info.current = cacheInfo;
+			}
+
+			if (cached_data.current) {
+				//cache is valid, use the cache
+				isUsingCache = true;
+				result_data = cached_data.current;
+			} else {
+				//cache is invalid, use the datasource again
+
+				isUsingCache = false;
+				if (typeof props.dataSource === 'function') {
+					result_data = await props.dataSource(dt);
+				} else result_data = props.dataSource;
+			}
+
+			//making sure the datasource is a valid object :
+			if (!result_data) result_data = [];
+			if (Array.isArray(result_data) || typeof result_data !== 'object')
+				result_data = { data: result_data };
+
+			if (!Array.isArray(result_data.data)) result_data.data = [result_data.data];
+
+			//no need to fix parent/child when using cache (it should be already fixed)
+			if (!isUsingCache && props.allowChildRows)
+				result_data.data = fix_parent_child_relations(result_data.data);
+
+			if (!result_data.count) result_data.count = (result_data.data as Array<any>).length;
+
+			//update cache
+			cached_data.current = result_data;
+			return result_data;
+		},
+		[props.dataSource]
+	);
+
+	return (
+		<DataGrid
+			{...props}
+			columns={cached_columns}
+			dataSource={dataSource}
+			highlightedRow={props.highlightedRow}
+		/>
+	);
+}
+
+/* -------------------------------------------------------------------------- */
+function DataGrid(props: DataGridProps) {
+	const { columns, dataSource, dark, contextMenuItems } = props;
+
+	/* -------------------------------------------------------------------------- */
+	const gridRef = React.useRef<any>(null);
+	const click_data = React.useRef<any>(null);
+
+	const [menuAnchorEl, set_menuAnchorEl] = React.useState<any>(null);
+	const [menuRow, set_menuRow] = React.useState<any>(null);
+
+	React.useEffect(() => {
+		click_data.current = {};
+	}, [dataSource]);
+
+	/* --------------------------------- events --------------------------------- */
+
+	const onRowContextMenu = React.useCallback((rowProps, event) => {
+		if (func_selection.has_selection()) return;
+		update_menuRow(rowProps.data);
+		update_menuAnchorEl(func_selection.getVirtualElement(event.clientX, event.clientY));
+		event.preventDefault();
+	}, []);
+	const onRowClick = React.useCallback((rowProps, event) => {
+		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) {
+				props.onRowDoubleClick &&
+					props.onRowDoubleClick(rowProps.rowIndex, rowProps.data);
+			}
+		}
+
+		click_data.current[get_row_id(rowProps)] = nowDate;
+		props.onRowClick && props.onRowClick(rowProps.rowIndex, rowProps.data);
+	}, []);
+	/* ------------------------------- ContextMenu ------------------------------ */
+
+	const update_menuAnchorEl = React.useCallback((el) => {
+		if (el) {
+			set_menuAnchorEl(el);
+		} else set_menuAnchorEl(null);
+	}, []);
+	const update_menuRow = React.useCallback((r) => {
+		if (r) {
+			set_menuRow(r);
+		} else set_menuRow(null);
+	}, []);
+
+	/* -------------------------------------------------------------------------- */
+	/*                               Create the grid                              */
+	/* -------------------------------------------------------------------------- */
+
+	const base_gridOptions = React.useMemo<GridOptions>(() => {
+		const firstcolumn = columns[0];
+		const licenseKey = props.licenseKey || get_default_key();
+		const events: GridOptions = {
+			onRowClick: onRowClick,
+			onSkipChange: props.onSkipChange,
+			onLimitChange: props.onLimitChange,
+			onRowContextMenu: onRowContextMenu,
+		};
+		const extra_ops: GridOptions = {
+			onSelectionChange: props.onSelectionChange,
+			licenseKey: licenseKey,
+			treeColumn: props.allowChildRows ? firstcolumn.name : undefined,
+			renderRowDetails: props.RowDetail,
+			theme: dark ? 'amber-dark' : 'default-light',
+		};
+		return { ...defaultOptions, ...events, ...extra_ops };
+	}, [columns, props.allowChildRows, props.RowDetail]);
+
+	const static_gridOptions = React.useMemo<GridOptions>(() => {
+		return { ...base_gridOptions, ...props.gridOptions, ...forcedOptions };
+	}, [props.gridOptions, base_gridOptions, forcedOptions]);
+
+	const dynamic_gridOptions = React.useMemo<GridOptions>(
+		() => {
+			const res = {};
+			dynamic_option_names.map((r) => {
+				res[r] = props[r];
+			});
+			return res;
+		},
+		dynamic_option_names.map((r) => props[r])
+	);
+
+	// const { width, height, ref: resize_ref } = useResizeDetector();
+
+	return (
+		<div className={clsx(props.className, 'azgrid-nooverflow', 'azgrid-filler')}>
+			<ReactDataGrid
+				{...static_gridOptions}
+				{...dynamic_gridOptions}
+				handle={(ref) => (gridRef.current = ref ? ref.current : null)}
+				className={'azgrid-filler'}
+				columns={columns}
+				dataSource={dataSource}
+			/>
+			<ContextMenu
+				menuAnchorEl={menuAnchorEl}
+				set_menuAnchorEl={update_menuAnchorEl}
+				menuRow={menuRow}
+				items={contextMenuItems}
+			/>
+		</div>
+	);
+}
+
+/* -------------------------------------------------------------------------- */
+/* -------------------------------------------------------------------------- */
+/* -------------------------------------------------------------------------- */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * merges together all different props for columns
+ * to build a single final column data array
+ * @param props
+ * @returns
+ */
+function ApplyColumnData(props: any) {
+	const final_columns: MakeWriteable<ColumnDefinition>[] = [];
+	let mcols = props.columns || [];
+	let mcolExts = props.columnExtensions || [];
+	let rightColumns = props.rightColumns || [];
+	let leftColumns = props.leftColumns || [];
+	let editableColumns = props.editableColumns || [];
+	let customColumns = props.customColumns || [];
+
+	if (!Array.isArray(mcols)) return [];
+	/* ------------------------------- fix columns ------------------------------ */
+
+	mcols
+		.map((r) => {
+			if (r == null) return null;
+			if (typeof r === 'string') return { field: r, header: r };
+			if (typeof r === 'object') {
+				let final_cl: MakeWriteable<ColumnDefinition> = {
+					name: get_col_name(r),
+					header: get_col_header(r),
+					width: r.width || undefined,
+				};
+				final_cl = {
+					...defaultColumnOptions,
+					...r,
+					...final_cl,
+				};
+				return final_cl;
+			}
+			return null;
+		})
+		.forEach((r) => {
+			if (r != null) final_columns.push(r);
+		});
+
+	/* ---------------------------- apply extensions ---------------------------- */
+	if (mcolExts && Array.isArray(mcolExts))
+		for (let index = 0; index < mcolExts.length; index++) {
+			const ext = mcolExts[index];
+			const ext_cl = get_col_name(ext);
+			const mcol = final_columns.find((s) => get_col_name(s) === ext_cl);
+			if (mcol) {
+				for (const key in ext) {
+					if (!mcol[key] && key != 'name') mcol[key] = ext[key];
+				}
+			}
+			// if (ext.widthGrow) mcol.widthGrow = ext.widthGrow;
+		}
+
+	/* ------------------------------- frozen cols ------------------------------ */
+	if (Array.isArray(leftColumns)) {
+		for (let index = 0; index < leftColumns.length; index++) {
+			const r = get_col_name(leftColumns[index]);
+			const mcol = final_columns.find((s) => get_col_name(s) === r);
+			if (mcol) {
+				mcol.locked = 'start';
+			}
+		}
+	}
+	if (Array.isArray(rightColumns)) {
+		for (let index = 0; index < rightColumns.length; index++) {
+			const r = get_col_name(rightColumns[index]);
+			const mcol = final_columns.find((s) => get_col_name(s) === r);
+			if (mcol) {
+				mcol.locked = 'end';
+			}
+		}
+	}
+	/* -------------------------------- ediatable ------------------------------- */
+	if (Array.isArray(editableColumns)) {
+		for (let index = 0; index < editableColumns.length; index++) {
+			const r = get_col_name(editableColumns[index]);
+			const mcol = final_columns.find((s) => get_col_name(s) === r);
+			if (mcol) {
+				// mcol.editor = editorWrapper;
+				// mcol.editorOptions = {
+				//     editOnClick: true,
+				// };
+			}
+		}
+	}
+	for (let index = 0; index < final_columns.length; index++) {
+		const col: ColumnDefinition = final_columns[index];
+
+		if (col.type) {
+			switch (col.type) {
+				case 'combo':
+				case 'select':
+					col.editor = SelectEditor;
+					break;
+				case 'number':
+				case 'numberic':
+					col.editor = NumericEditor;
+					break;
+				case 'truefalse':
+				case 'bool':
+					col.editor = BoolEditor;
+					break;
+			}
+			delete col.type;
+		}
+		if (!col.editorProps) col.editorProps = {};
+
+		if (col.items) {
+			if (!col.editorProps.idProperty) col.editorProps.idProperty = 'id';
+			if (!col.editorProps.collapseOnSelect) col.editorProps.collapseOnSelect = true;
+			col.editorProps.dataSource = to_datasource(col.items, col.editorProps.idProperty);
+
+			delete col.items;
+		}
+	}
+
+	/* -------------------------------------------------------------------------- */
+	if (Array.isArray(customColumns)) {
+		for (let index = 0; index < customColumns.length; index++) {
+			const r = customColumns[index];
+			const rn = get_col_name(r);
+			const mcol = final_columns.find((s) => get_col_name(s) === rn);
+			if (mcol) {
+				//@ts-ignore
+				mcol.render = r.render;
+			}
+		}
+	}
+
+	/* ------------------------------ apply renames ----------------------------- */
+	for (let index = 0; index < final_columns.length; index++) {
+		const col = final_columns[index];
+		if (!col.name) {
+			col.name = get_col_name(col);
+			delete col.field;
+			delete col.key;
+			delete col.columnName;
+		}
+	}
+	/* -------------------------------------------------------------------------- */
+
+	return final_columns;
+}
+
+function to_datasource(arr: any[], idProperty: string) {
+	const res: any[] = [];
+	let index = 0;
+	if (Array.isArray(arr)) {
+		arr.map((s: any) => {
+			let elem = {};
+			elem[idProperty] = '_cid_' + index;
+			elem = { ...elem, ...s };
+			res.push(elem);
+			index++;
+		});
+	}
+	return res;
+}
+/**
+ * Gets name of a column from its column object
+ * @param obj
+ * @returns
+ */
+function get_col_name(obj: any): string {
+	if (!obj) return 'default';
+	if (typeof obj == 'string') return obj;
+	if (typeof obj != 'object') return 'default';
+	return obj.name || obj.field || obj.key || obj.columnName || 'default';
+}
+/**
+ * Gets header of a column
+ * @param obj
+ * @returns
+ */
+function get_col_header(obj: any): string {
+	if (!obj) return 'default';
+	if (typeof obj == 'string') return obj;
+	if (typeof obj != 'object') return 'default';
+	return obj.header || obj.title || get_col_name(obj);
+}
+/**
+ * Gets name of a column from its column object
+ * @param obj
+ * @returns
+ */
+function get_row_id(obj: any): any {
+	if (!obj) return 'default';
+	if (typeof obj == 'string') return obj;
+	if (typeof obj != 'object') return 'default';
+	return obj.__table_id || obj.id || 'default';
+}
+
+/**
+ * Gets default activation key for grid plugin
+ * @returns
+ */
+function get_default_key() {
+	return 'ExpiryDate=2999-01-01,Z=1040577552';
+}
+
+//check if two cache objects are the same
+function validateCache(current: any, old: any, looseCheck = false) {
+	if (!old || !object_equals(current, old)) return false;
+
+	if (looseCheck) return true;
+
+	if (current.ds != old.ds) return false;
+	return true;
+}
+
+/* -------------------------------------------------------------------------- */
+export default AzGrid;