@azrico/reactgrid 1.2.7 → 1.2.11

package/CHANGELOG.md

@@ -2,9 +2,7 @@
 
 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.2.7](https://github.com/Azrideus/azrico-reactgrid/compare/v1.2.6...v1.2.7) (2023-02-26)
-
-### 1.2.6 (2023-02-26)
+### 1.2.11 (2023-03-31)
 
 
 ### Features
@@ -13,6 +11,7 @@ All notable changes to this project will be documented in this file. See [standa
 * added inovua grid ([a178208](https://github.com/Azrideus/azrico-reactgrid/commit/a178208975212d16ce9feff359b09a6d8926b54d))
 * added onLimitChange ([4b16681](https://github.com/Azrideus/azrico-reactgrid/commit/4b1668194776ebec51cdf9af0969132d5883d79a))
 * added skip and limit values ([87a975c](https://github.com/Azrideus/azrico-reactgrid/commit/87a975cad9803b4d41d770c0758d6b4d09946a53))
+* editable can be a function ([6ea857e](https://github.com/Azrideus/azrico-reactgrid/commit/6ea857e4f403d2a334dc5e74065f6b8033277ca4))
 * fixed dataSource ([ce5a4fe](https://github.com/Azrideus/azrico-reactgrid/commit/ce5a4fe09809aeddeeb0305d48b5294b1e9654b2))
 
 
@@ -25,3 +24,33 @@ All notable changes to this project will be documented in this file. See [standa
 * fixed package for publish ([95b8f46](https://github.com/Azrideus/azrico-reactgrid/commit/95b8f46e672174928aa4d8cd6c4924553eb025e5))
 * no null rows ([e85511b](https://github.com/Azrideus/azrico-reactgrid/commit/e85511beb98c884a3820dfae7c2c57891910b6d1))
 * removed extra styles from maincode ([7ee097e](https://github.com/Azrideus/azrico-reactgrid/commit/7ee097e4b7db1209490ce29bdb25fc605dfa7db3))
+
+### [1.2.10](https://github.com/Azrideus/azrico-reactgrid/compare/v1.2.9...v1.2.10) (2023-03-05)
+
+### [1.2.9](https://github.com/Azrideus/azrico-reactgrid/compare/v1.2.8...v1.2.9) (2023-02-26)
+
+### [1.2.8](https://github.com/Azrideus/azrico-reactgrid/compare/v1.2.7...v1.2.8) (2023-02-26)
+
+### [1.2.7](https://github.com/Azrideus/azrico-reactgrid/compare/v1.2.6...v1.2.7) (2023-02-26)
+
+### 1.2.6 (2023-02-26)
+
+
+### Features
+
+* added datasource Support ([4270ac1](https://github.com/Azrideus/azrico-reactgrid/commit/4270ac19623ef4c7404f0475825647c63ca98ffb))
+* added inovua grid ([a178208](https://github.com/Azrideus/azrico-reactgrid/commit/a178208975212d16ce9feff359b09a6d8926b54d))
+* added onLimitChange ([4b16681](https://github.com/Azrideus/azrico-reactgrid/commit/4b1668194776ebec51cdf9af0969132d5883d79a))
+* added skip and limit values ([87a975c](https://github.com/Azrideus/azrico-reactgrid/commit/87a975cad9803b4d41d770c0758d6b4d09946a53))
+* fixed dataSource ([ce5a4fe](https://github.com/Azrideus/azrico-reactgrid/commit/ce5a4fe09809aeddeeb0305d48b5294b1e9654b2))
+
+
+### Bug Fixes
+
+* added get_col_name ([c7ff2da](https://github.com/Azrideus/azrico-reactgrid/commit/c7ff2daab8bf2ddf3c5fcbe6b47c7876d9ed9f88))
+* added support for promise DS ([b684c26](https://github.com/Azrideus/azrico-reactgrid/commit/b684c2635d59f5d5dde129ed6425ce30abbeebed))
+* coyp styles to dist ([23694f2](https://github.com/Azrideus/azrico-reactgrid/commit/23694f23634eb0b4038f399b1b2cd5c57992b64b))
+* fixed fix_parent_child_relations ([f165179](https://github.com/Azrideus/azrico-reactgrid/commit/f1651797e2adfc2dfbe1905b8c858b150c842dfa))
+* fixed package for publish ([95b8f46](https://github.com/Azrideus/azrico-reactgrid/commit/95b8f46e672174928aa4d8cd6c4924553eb025e5))
+* no null rows ([e85511b](https://github.com/Azrideus/azrico-reactgrid/commit/e85511beb98c884a3820dfae7c2c57891910b6d1))
+* removed extra styles from maincode ([7ee097e](https://github.com/Azrideus/azrico-reactgrid/commit/7ee097e4b7db1209490ce29bdb25fc605dfa7db3))

package/dist/src/example.js

@@ -56,27 +56,19 @@ function getData(delta, max = 200) {
         currentObject[key] = delta[index][key];
       }
     }
+    const childrows = [];
+    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);
-    //if (index % 5 == 0) {
-    //	const sub_selfid = 's' + index;
-    //	fd.push({
-    //		__table_id: sub_selfid,
-    //		__parent__table_id: String(index),
-    //		name: 'sub-' + index,
-    //		age: 20,
-    //	});
-    //	if (index % 2 == 0) {
-    //		const sub2_selfid = 'ss' + index;
-    //		fd.push({
-    //			__table_id: sub2_selfid,
-    //			__parent__table_id: sub_selfid,
-    //			name: 'sub2-' + index,
-    //			age: 20,
-    //		});
-    //	}
-    //}
   }
-
   return fd;
 }
 function ExampleGrid() {
@@ -141,7 +133,7 @@ function ExampleGrid() {
     details_columns: columns,
     onRowClick: onRowClick,
     onRowDoubleClick: onRowDoubleClick,
-    // allowChildRows
+    allowChildRows: true,
     // onSelectionChange={onSelectionChange}
     // selected={selected}
     contextMenuItems: contextMenuItems,

package/dist/src/func/func_grid.js

@@ -14,6 +14,7 @@ exports.validateCache = validateCache;
 var _BoolEditor = _interopRequireDefault(require("@inovua/reactdatagrid-community/BoolEditor"));
 var _NumericEditor = _interopRequireDefault(require("@inovua/reactdatagrid-community/NumericEditor"));
 var _SelectEditor = _interopRequireDefault(require("@inovua/reactdatagrid-community/SelectEditor"));
+var _func_child = require("./func_child");
 var _object = require("@azrico/object");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const defaultColumnOptions = {
@@ -53,9 +54,12 @@ async function ApplyDataSource(datasource, props) {
   };
   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) if (!result_data.count)
-    //result_data.data = fix_parent_child_relations(result_data.data);
+  if (!isUsingCache && props.allowChildRows) {
+    result_data.data = (0, _func_child.fix_parent_child_relations)(result_data.data);
+  }
+  if (!result_data.count) {
     result_data.count = result_data.data.length;
+  }
   //update cache
   props.cached_data.current = result_data;
   return result_data;

package/dist/src/views/DataGrid.d.ts

@@ -61,9 +61,9 @@ export type AzGridProps = {
     onSkipChange?: (v: number) => void;
     skip?: number;
     limit?: number;
+    editable?: boolean | ((editValue: any, cellProps: any) => boolean);
     loading?: boolean;
     dark?: boolean;
-    editable?: boolean;
     delayedSize?: boolean;
     allowChildRows?: boolean;
     looseCacheCheck?: boolean;

package/dist/src/views/DataGrid.js

@@ -28,9 +28,7 @@ const defaultOptions = {
   resizable: true,
   columnUserSelect: true,
   rowIndexColumn: true,
-  rowHeight: 35,
-  maxRowHeight: 40,
-  minRowHeight: 30
+  rowHeight: 35
 };
 const forcedOptions = {
   idProperty: '__table_id',
@@ -168,7 +166,7 @@ function DataGridEventsWrapper(props) {
     menuAnchorEl: menuAnchorEl,
     set_menuAnchorEl: update_menuAnchorEl,
     menuRow: menuRow,
-    menu_items: props.contextMenuItems
+    items: props.contextMenuItems
   });
   if (props.details_dataSource) {
     return _react.default.createElement(DataGridDetailsWrapper, {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@azrico/reactgrid",
-	"version": "1.2.7",
+	"version": "1.2.11",
 	"main": "dist/index.js",
 	"description": "React Datagrid",
 	"author": "Azrideus <MehrdadTavangar@gmail.com>",

package/public/manifest.json

@@ -1,9 +1,9 @@
-{
-	"short_name": "AzGrid",
-	"name": "React Grid Wrapper",
-	"icons": [],
-	"start_url": "./index.html",
-	"display": "standalone",
-	"theme_color": "#000000",
-	"background_color": "#ffffff"
-}
+{
+	"short_name": "AzGrid",
+	"name": "React Grid Wrapper",
+	"icons": [],
+	"start_url": "./index.html",
+	"display": "standalone",
+	"theme_color": "#000000",
+	"background_color": "#ffffff"
+}

package/src/example.tsx

@@ -45,25 +45,19 @@ function getData(delta: any, max = 200) {
 			}
 		}
 
+		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);
-		//if (index % 5 == 0) {
-		//	const sub_selfid = 's' + index;
-		//	fd.push({
-		//		__table_id: sub_selfid,
-		//		__parent__table_id: String(index),
-		//		name: 'sub-' + index,
-		//		age: 20,
-		//	});
-		//	if (index % 2 == 0) {
-		//		const sub2_selfid = 'ss' + index;
-		//		fd.push({
-		//			__table_id: sub2_selfid,
-		//			__parent__table_id: sub_selfid,
-		//			name: 'sub2-' + index,
-		//			age: 20,
-		//		});
-		//	}
-		//}
 	}
 	return fd;
 }
@@ -131,7 +125,7 @@ export function ExampleGrid() {
 			details_columns={columns}
 			onRowClick={onRowClick}
 			onRowDoubleClick={onRowDoubleClick}
-			// allowChildRows
+			allowChildRows
 			// onSelectionChange={onSelectionChange}
 			// selected={selected}
 			contextMenuItems={contextMenuItems}

package/src/func/func_grid.ts

@@ -1,288 +1,289 @@
-import { ColumnDefinition, LooseColumnDefinition } from '../views/DataGrid';
-
-import BoolEditor from '@inovua/reactdatagrid-community/BoolEditor';
-import NumericEditor from '@inovua/reactdatagrid-community/NumericEditor';
-import SelectEditor from '@inovua/reactdatagrid-community/SelectEditor';
-import { fix_parent_child_relations } from './func_child';
-import { object_equals } from '@azrico/object';
-
-export type MakeWriteable<Type> = {
-	-readonly [Key in keyof Type]: Type[Key];
-};
-export type ModifyFields<T, R> = Omit<T, keyof R> & R;
-
-const defaultColumnOptions: ColumnDefinition = {
-	draggable: false,
-	lockable: false,
-	editable: false,
-};
-
-export async function ApplyDataSource(datasource, props) {
-	let result_data: any = undefined;
-
-	let isUsingCache = false;
-
-	const cacheInfo = { ds: datasource, skip: props.skip, limit: props.limit };
-	//check if we can used cached data
-	//if the datasource is changed since last render, we should invalidate cache
-	if (!validateCache(props.last_cache_info.current, cacheInfo, props.looseCacheCheck)) {
-		props.cached_data.current = undefined;
-		props.last_cache_info.current = cacheInfo;
-	}
-
-	if (props.cached_data.current) {
-		//cache is valid, use the cache
-		isUsingCache = true;
-		result_data = props.cached_data.current;
-	} else {
-		//cache is invalid, use the datasource again
-
-		isUsingCache = false;
-		if (typeof datasource === 'function') {
-			result_data = await datasource(props);
-		} else result_data = 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)
-		if (!result_data.count)
-			//result_data.data = fix_parent_child_relations(result_data.data);
-
-			result_data.count = (result_data.data as Array<any>).length;
-
-	//update cache
-	props.cached_data.current = result_data;
-	return result_data;
-}
-/**
- * merges together all different props for columns
- * to build a single final column data array
- * @param column_data
- * @returns
- */
-export function ApplyColumnData(column_data: any): ColumnDefinition[] {
-	const final_columns: MakeWriteable<LooseColumnDefinition>[] = [];
-	if (!column_data) column_data = {};
-	if (Array.isArray(column_data)) column_data = { columns: column_data };
-	let mcols = column_data.columns || [];
-	let mcolExts = column_data.columnExtensions || [];
-	let rightColumns = column_data.rightColumns || [];
-	let leftColumns = column_data.leftColumns || [];
-	let editableColumns = column_data.editableColumns || [];
-	let customColumns = column_data.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);
-			if (!ext_cl) {
-				console.warn('ColumnExtension must have a name');
-				continue;
-			}
-			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.editable = true;
-			}
-		}
-	}
-	for (let index = 0; index < final_columns.length; index++) {
-		const col = final_columns[index];
-		if (col.type) {
-			switch (col.type) {
-				case 'combo':
-				case 'select':
-					//@ts-ignore
-					col.editor = SelectEditor;
-					break;
-				case 'number':
-				case 'numberic':
-					//@ts-ignore
-					col.editor = NumericEditor;
-					break;
-				case 'truefalse':
-				case 'bool':
-					//@ts-ignore
-					col.editor = BoolEditor;
-					break;
-			}
-			if (col.editable != false) col.editable = true;
-			delete col.type;
-		}
-		//@ts-ignore
-		if (!col.editorProps) col.editorProps = {};
-		if (col.items) {
-			//@ts-ignore
-			if (!col.editorProps.idProperty) col.editorProps.idProperty = 'id';
-			//@ts-ignore
-			if (!col.editorProps.collapseOnSelect) col.editorProps.collapseOnSelect = true;
-			//@ts-ignore
-			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;
-
-			if (col.flex && !col.defaultFlex) col.defaultFlex = col.flex;
-		}
-	}
-	/* -------------------------------------------------------------------------- */
-	//console.log(final_columns);
-	return final_columns;
-}
-
-export function to_datasource(arr: any[], idProperty: string, valueAsID = true) {
-	const res: any[] = [];
-	let index = 0;
-	if (Array.isArray(arr)) {
-		arr.map((s: any) => {
-			let elem = {};
-			if (valueAsID) elem[idProperty] = String(s).toLowerCase();
-			else elem[idProperty] = '_cid_' + index;
-			if (typeof s === 'object') elem = { ...elem, ...s };
-			else elem['label'] = s;
-			res.push(elem);
-			index++;
-		});
-	}
-
-	return res;
-}
-/**
- * Gets name of a column from its column object
- * @param obj
- * @returns
- */
-export function get_col_name(obj: any): string {
-	if (!obj) return '';
-	if (typeof obj == 'string') return obj;
-	if (typeof obj != 'object') return '';
-	return obj.name || obj.field || obj.key || obj.columnName || '';
-}
-/**
- * Gets header of a column
- * @param obj
- * @returns
- */
-export function get_col_header(obj: any): string {
-	if (!obj) return '';
-	if (typeof obj == 'string') return obj;
-	if (typeof obj != 'object') return '';
-	return obj.header || obj.title || get_col_name(obj);
-}
-/**
- * Gets name of a column from its column object
- * @param obj
- * @returns
- */
-export function get_row_id(obj: any): any {
-	if (!obj) return '-1';
-	if (typeof obj == 'string') return obj;
-	if (typeof obj != 'object') return '-1';
-	return obj.__table_id || obj.id || '-1';
-}
-
-/**
- * Gets default activation key for grid plugin
- * @returns
- */
-export function get_default_key() {
-	return 'ExpiryDate=2999-01-01,Z=1040577552';
-}
-
-//check if two cache objects are the same
-export function validateCache(current: any, old: any, looseCheck = false) {
-	if (!old || !object_equals(current, old)) return false;
-
-	if (looseCheck) return true;
-
-	if (current.ds != old.ds) return false;
-	return true;
-}
+import { ColumnDefinition, LooseColumnDefinition } from '../views/DataGrid';
+
+import BoolEditor from '@inovua/reactdatagrid-community/BoolEditor';
+import NumericEditor from '@inovua/reactdatagrid-community/NumericEditor';
+import SelectEditor from '@inovua/reactdatagrid-community/SelectEditor';
+import { fix_parent_child_relations } from './func_child';
+import { object_equals } from '@azrico/object';
+
+export type MakeWriteable<Type> = {
+	-readonly [Key in keyof Type]: Type[Key];
+};
+export type ModifyFields<T, R> = Omit<T, keyof R> & R;
+
+const defaultColumnOptions: ColumnDefinition = {
+	draggable: false,
+	lockable: false,
+	editable: false,
+};
+
+export async function ApplyDataSource(datasource, props) {
+	let result_data: any = undefined;
+
+	let isUsingCache = false;
+
+	const cacheInfo = { ds: datasource, skip: props.skip, limit: props.limit };
+	//check if we can used cached data
+	//if the datasource is changed since last render, we should invalidate cache
+	if (!validateCache(props.last_cache_info.current, cacheInfo, props.looseCacheCheck)) {
+		props.cached_data.current = undefined;
+		props.last_cache_info.current = cacheInfo;
+	}
+
+	if (props.cached_data.current) {
+		//cache is valid, use the cache
+		isUsingCache = true;
+		result_data = props.cached_data.current;
+	} else {
+		//cache is invalid, use the datasource again
+
+		isUsingCache = false;
+		if (typeof datasource === 'function') {
+			result_data = await datasource(props);
+		} else result_data = 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
+	props.cached_data.current = result_data;
+	return result_data;
+}
+/**
+ * merges together all different props for columns
+ * to build a single final column data array
+ * @param column_data
+ * @returns
+ */
+export function ApplyColumnData(column_data: any): ColumnDefinition[] {
+	const final_columns: MakeWriteable<LooseColumnDefinition>[] = [];
+	if (!column_data) column_data = {};
+	if (Array.isArray(column_data)) column_data = { columns: column_data };
+	let mcols = column_data.columns || [];
+	let mcolExts = column_data.columnExtensions || [];
+	let rightColumns = column_data.rightColumns || [];
+	let leftColumns = column_data.leftColumns || [];
+	let editableColumns = column_data.editableColumns || [];
+	let customColumns = column_data.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);
+			if (!ext_cl) {
+				console.warn('ColumnExtension must have a name');
+				continue;
+			}
+			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.editable = true;
+			}
+		}
+	}
+	for (let index = 0; index < final_columns.length; index++) {
+		const col = final_columns[index];
+		if (col.type) {
+			switch (col.type) {
+				case 'combo':
+				case 'select':
+					//@ts-ignore
+					col.editor = SelectEditor;
+					break;
+				case 'number':
+				case 'numberic':
+					//@ts-ignore
+					col.editor = NumericEditor;
+					break;
+				case 'truefalse':
+				case 'bool':
+					//@ts-ignore
+					col.editor = BoolEditor;
+					break;
+			}
+			if (col.editable != false) col.editable = true;
+			delete col.type;
+		}
+		//@ts-ignore
+		if (!col.editorProps) col.editorProps = {};
+		if (col.items) {
+			//@ts-ignore
+			if (!col.editorProps.idProperty) col.editorProps.idProperty = 'id';
+			//@ts-ignore
+			if (!col.editorProps.collapseOnSelect) col.editorProps.collapseOnSelect = true;
+			//@ts-ignore
+			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;
+
+			if (col.flex && !col.defaultFlex) col.defaultFlex = col.flex;
+		}
+	}
+	/* -------------------------------------------------------------------------- */
+	//console.log(final_columns);
+	return final_columns;
+}
+
+export function to_datasource(arr: any[], idProperty: string, valueAsID = true) {
+	const res: any[] = [];
+	let index = 0;
+	if (Array.isArray(arr)) {
+		arr.map((s: any) => {
+			let elem = {};
+			if (valueAsID) elem[idProperty] = String(s).toLowerCase();
+			else elem[idProperty] = '_cid_' + index;
+			if (typeof s === 'object') elem = { ...elem, ...s };
+			else elem['label'] = s;
+			res.push(elem);
+			index++;
+		});
+	}
+
+	return res;
+}
+/**
+ * Gets name of a column from its column object
+ * @param obj
+ * @returns
+ */
+export function get_col_name(obj: any): string {
+	if (!obj) return '';
+	if (typeof obj == 'string') return obj;
+	if (typeof obj != 'object') return '';
+	return obj.name || obj.field || obj.key || obj.columnName || '';
+}
+/**
+ * Gets header of a column
+ * @param obj
+ * @returns
+ */
+export function get_col_header(obj: any): string {
+	if (!obj) return '';
+	if (typeof obj == 'string') return obj;
+	if (typeof obj != 'object') return '';
+	return obj.header || obj.title || get_col_name(obj);
+}
+/**
+ * Gets name of a column from its column object
+ * @param obj
+ * @returns
+ */
+export function get_row_id(obj: any): any {
+	if (!obj) return '-1';
+	if (typeof obj == 'string') return obj;
+	if (typeof obj != 'object') return '-1';
+	return obj.__table_id || obj.id || '-1';
+}
+
+/**
+ * Gets default activation key for grid plugin
+ * @returns
+ */
+export function get_default_key() {
+	return 'ExpiryDate=2999-01-01,Z=1040577552';
+}
+
+//check if two cache objects are the same
+export function validateCache(current: any, old: any, looseCheck = false) {
+	if (!old || !object_equals(current, old)) return false;
+
+	if (looseCheck) return true;
+
+	if (current.ds != old.ds) return false;
+	return true;
+}

package/src/views/DataGrid.tsx

@@ -104,10 +104,12 @@ export type AzGridProps = {
 	/* -------------------------------------------------------------------------- */
 	skip?: number;
 	limit?: number;
+	//
+	editable?: boolean | ((editValue: any, cellProps: any) => boolean);
+
 	//
 	loading?: boolean;
 	dark?: boolean;
-	editable?: boolean;
 	delayedSize?: boolean;
 	allowChildRows?: boolean;
 	looseCacheCheck?: boolean;
@@ -141,8 +143,6 @@ const defaultOptions: GridOptions = {
 	columnUserSelect: true,
 	rowIndexColumn: true,
 	rowHeight: 35,
-	maxRowHeight: 40,
-	minRowHeight: 30,
 };
 const forcedOptions: GridOptions = {
 	idProperty: '__table_id',
@@ -197,7 +197,7 @@ export function AzGrid(props: AzGridProps) {
 		const extra_ops: GridOptions = {
 			onSelectionChange: props.onSelectionChange,
 			licenseKey: licenseKey,
-			editable: props.editable,
+			editable: props.editable as any, //bug in types of the plugin
 			treeColumn: props.allowChildRows ? firstcolumn.name : undefined,
 			renderRowDetails: props.RowDetail,
 			theme: props.dark ? 'amber-dark' : 'default-light',
@@ -315,7 +315,7 @@ function DataGridEventsWrapper(props: DataGridWrapperProps) {
 			menuAnchorEl={menuAnchorEl}
 			set_menuAnchorEl={update_menuAnchorEl}
 			menuRow={menuRow}
-			menu_items={props.contextMenuItems as any}
+			items={props.contextMenuItems as any}
 		/>
 	);
 

package/src/views/index.ts

@@ -1,4 +1,4 @@
-export * from './DataGrid';
-
-import AzGrid from './DataGrid';
-export default AzGrid;
+export * from './DataGrid';
+
+import AzGrid from './DataGrid';
+export default AzGrid;