@azrico/reactgrid 1.0.18 → 1.0.20

package/dist/src/index.js

@@ -17,15 +17,21 @@ Object.keys(_DataGrid).forEach(function (key) {
     }
   });
 });
+var _example = _interopRequireDefault(require("./example"));
+var _react = _interopRequireDefault(require("react"));
+var _client = _interopRequireDefault(require("react-dom/client"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-var _default = _DataGrid.default; // if (process.env!.NODE_ENV === 'production') {
-// 	// set production urls
-// 	// enable sentry
-// } else if (process.env!.NODE_ENV === 'development') {
-// 	const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
-// 	root.render(<ExampleGrid />);
-// } else {
-// 	// set defaults
-// }
-exports.default = _default;
+/* -------------------------------------------------------------------------- */
+var _default = _DataGrid.default;
+exports.default = _default;
+if (process.env.NODE_ENV === 'production') {
+  // set production urls
+  // enable sentry
+} else if (process.env.NODE_ENV === 'development') {
+  const root = _client.default.createRoot(document.getElementById('root'));
+  root.render(_react.default.createElement(_example.default, null));
+} else {
+  // set defaults
+}

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

@@ -33,11 +33,10 @@ type customColumnData = {
 type GridOptions = Partial<TypeDataGridProps>;
 export type AzGridProps = {
     columns?: columnOrString[];
-    rows?: any[];
-    get_rows?: () => any[];
+    rows?: any[] | ((args: any) => any[] | Promise<any[]>);
     licenseKey?: string;
     gridOptions?: GridOptions;
-    tableColumnExtensions?: Array<{
+    columnExtensions?: Array<{
         name: string;
     } & Partial<ColumnDefinition>>;
     editableColumns?: string[];
@@ -49,7 +48,6 @@ export type AzGridProps = {
     RowDetail?: RowDetailsFunc;
     selected?: RowSelectionValue;
     onSelectionChange?: OnSelectionChangeFunc;
-    onRowsChange?: (rows: any[], options: any) => void;
     onRowClick?: (rowIndex: number, row: any) => void;
     onRowDoubleClick?: (rowIndex: number, row: any) => void;
     onLimitChange?: (v: number) => void;

package/dist/src/views/DataGrid.js

@@ -30,141 +30,29 @@ const defaultColumnOptions = {
   draggable: false,
   lockable: false
 };
+const dynamic_option_names = ['selected', 'loading', 'limit', 'skip'];
 /* -------------------------------------------------------------------------- */
 function AzGrid(props) {
-  const [pendingChanges, set_pendingChanges] = _react.default.useState(1);
-  const [cached_rows, set_cached_rows] = _react.default.useState([]);
   /* -------------------------------------------------------------------------- */
   /*                                   Columns                                  */
   /* -------------------------------------------------------------------------- */
   const cached_columns = _react.default.useMemo(() => {
-    const final_columns = [];
-    let mcols = props.columns || [];
-    let mcolExts = props.tableColumnExtensions || [];
-    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 = {
-          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;
-        }
-      }
-    }
-    return final_columns;
-  }, [props.columns, props.leftColumns, props.editableColumns, props.tableColumnExtensions]);
-  /* -------------------------------------------------------------------------- */
+    return ApplyColumnData(props);
+  }, [props.columns, props.leftColumns, props.rightColumns, props.editableColumns, props.columnExtensions, props.customColumns]);
   /* -------------------------------------------------------------------------- */
   /*                                 Row changes                                */
   /* -------------------------------------------------------------------------- */
-  _react.default.useEffect(() => {
-    if (pendingChanges <= 0) return;
-    //console.log('Updated Pending Changes: ', pendingChanges);
-    let new_rows = [];
-    if (typeof props.get_rows === 'function') {
-      new_rows = props.get_rows();
-    } else new_rows = props.rows || [];
-    /* -------------------------------------------------------------------------- */
-    if (!Array.isArray(new_rows)) new_rows = [];
-    new_rows = new_rows.filter(s => s != null);
-    /* -------------------------- fix child parent rel -------------------------- */
-    if (props.allowChildRows) new_rows = (0, _helpers.fix_parent_child_relations)(new_rows);
-    set_cached_rows(new_rows);
-    set_pendingChanges(0);
-  }, [pendingChanges]);
-  _react.default.useEffect(() => {
-    //console.log('Rows Changed !');
-    set_pendingChanges(r => r + 1);
+  const dataSource = _react.default.useCallback(async dt => {
+    let result_rows = typeof props.rows === 'function' ? await props.rows(dt) : props.rows;
+    if (result_rows == null) return [];
+    if (!Array.isArray(result_rows)) result_rows = [result_rows];
+    if (props.allowChildRows) result_rows = (0, _helpers.fix_parent_child_relations)(result_rows);
+    return result_rows;
   }, [props.rows]);
-  function onRowsChange(rows, options) {
-    //console.log('onRowsChange');
-    if (props.onRowsChange) props.onRowsChange(rows, options);
-    set_pendingChanges(r => r + 1); //notify the cache to update rows after we made changes to them
-  }
-  /* -------------------------------------------------------------------------- */
-  /* -------------------------------------------------------------------------- */
   return _react.default.createElement(DataGrid, {
     ...props,
     columns: cached_columns,
-    rows: cached_rows,
-    onRowsChange: onRowsChange,
+    dataSource: dataSource,
     highlightedRow: props.highlightedRow
   });
 }
@@ -172,14 +60,11 @@ function AzGrid(props) {
 function DataGrid(props) {
   const {
     columns,
-    rows,
-    highlightedRow,
+    dataSource,
     dark,
-    contextMenuItems,
-    onRowsChange
+    contextMenuItems
   } = props;
   /* -------------------------------------------------------------------------- */
-  const gridRef = _react.default.useRef(null);
   const [menuAnchorEl, set_menuAnchorEl] = _react.default.useState(null);
   const [menuRow, set_menuRow] = _react.default.useState(null);
   /* -------------------------------------------------------------------------- */
@@ -207,7 +92,7 @@ function DataGrid(props) {
       ...events,
       ...extra_ops
     };
-  }, [props.gridOptions]);
+  }, []);
   const static_gridOptions = _react.default.useMemo(() => {
     return {
       ...base_gridOptions,
@@ -216,13 +101,12 @@ function DataGrid(props) {
     };
   }, [props.gridOptions, base_gridOptions]);
   const dynamic_gridOptions = _react.default.useMemo(() => {
-    return {
-      selected: props.selected,
-      loading: props.loading,
-      limit: props.limit,
-      skip: props.skip
-    };
-  }, [props.selected, props.loading, props.skip]);
+    const res = {};
+    dynamic_option_names.map(r => {
+      res[r] = props[r];
+    });
+    return res;
+  }, dynamic_option_names.map(r => props[r]));
   /* --------------------------------- events --------------------------------- */
   function onRowContextMenu(row, ev) {
     if (_helpers.func_selection.has_selection()) return;
@@ -236,10 +120,6 @@ function DataGrid(props) {
   function onRowDoubleClick(event, row) {
     props.onRowDoubleClick && props.onRowDoubleClick(row.rowIndex, row.data);
   }
-  /* ------------------------- update the selected row ------------------------ */
-  _react.default.useEffect(() => {
-    if (highlightedRow) gridRef.current.scrollToRow(getRowIndex(highlightedRow, rows));
-  }, [highlightedRow]);
   /* ------------------------------- ContextMenu ------------------------------ */
   function update_menuAnchorEl(el) {
     if (!el) {
@@ -260,7 +140,7 @@ function DataGrid(props) {
     ...dynamic_gridOptions,
     className: 'azgrid-filler',
     columns: columns,
-    dataSource: static_gridOptions.dataSource ? static_gridOptions.dataSource : rows
+    dataSource: dataSource
   }), _react.default.createElement(_controls.ContextMenu, {
     menuAnchorEl: menuAnchorEl,
     set_menuAnchorEl: update_menuAnchorEl,
@@ -269,26 +149,122 @@ function DataGrid(props) {
   }));
 }
 /* -------------------------------------------------------------------------- */
+/**
+ * Gets name of a column from its column object
+ * @param obj
+ * @returns
+ */
 function get_col_name(obj) {
   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 default activation key for grid plugin
+ * @returns
+ */
 function get_default_key() {
   return 'ExpiryDate=2999-01-01,Z=1040577552';
 }
-function getRowIndex(row, allrows) {
-  if (!allrows) return -1;
-  return allrows.findIndex(s => rowKeyGetter(s) === rowKeyGetter(row)) || -1;
-}
-function rowKeyGetter(row) {
-  return row.__uid;
-}
-function isRowSelected(row, highlightedRow) {
-  const rid = rowKeyGetter(row);
-  const highLight = rowKeyGetter(highlightedRow);
-  return rid != null && rid === highLight;
+/**
+ * merges together all different props for columns
+ * to build a single final column data array
+ * @param props
+ * @returns
+ */
+function ApplyColumnData(props) {
+  const final_columns = [];
+  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 = {
+        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;
+      }
+    }
+  }
+  return final_columns;
 }
 /* -------------------------------------------------------------------------- */
 var _default = AzGrid;

package/package.json

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

package/src/index.tsx

@@ -7,12 +7,12 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 export default AzGrid;
 
-// if (process.env!.NODE_ENV === 'production') {
-// 	// set production urls
-// 	// enable sentry
-// } else if (process.env!.NODE_ENV === 'development') {
-// 	const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
-// 	root.render(<ExampleGrid />);
-// } else {
-// 	// set defaults
-// }
+if (process.env!.NODE_ENV === 'production') {
+	// set production urls
+	// enable sentry
+} else if (process.env!.NODE_ENV === 'development') {
+	const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
+	root.render(<ExampleGrid />);
+} else {
+	// set defaults
+}

package/src/views/DataGrid.tsx

@@ -37,7 +37,12 @@ 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_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>;
 //
@@ -50,14 +55,13 @@ type GridOptions = Partial<TypeDataGridProps>;
 /* -------------------------------------------------------------------------- */
 export type AzGridProps = {
 	columns?: columnOrString[];
-	rows?: any[];
-	get_rows?: () => any[];
+	rows?: any[] | ((args: any) => any[] | Promise<any[]>);
 
 	licenseKey?: string;
 
 	gridOptions?: GridOptions;
 
-	tableColumnExtensions?: Array<{ name: string } & Partial<ColumnDefinition>>;
+	columnExtensions?: Array<{ name: string } & Partial<ColumnDefinition>>;
 	editableColumns?: string[];
 	leftColumns?: string[];
 	rightColumns?: string[];
@@ -71,7 +75,7 @@ export type AzGridProps = {
 	selected?: RowSelectionValue;
 	/* -------------------------------------------------------------------------- */
 	onSelectionChange?: OnSelectionChangeFunc;
-	onRowsChange?: (rows: any[], options: any) => void;
+
 	onRowClick?: (rowIndex: number, row: any) => void;
 	onRowDoubleClick?: (rowIndex: number, row: any) => void;
 	onLimitChange?: (v: number) => void;
@@ -91,7 +95,7 @@ type DataGridProps = ModifyFields<
 	AzGridProps,
 	{
 		columns: ColumnDefinition[];
-		rows: DataRowDefinition[];
+		dataSource: any;
 	}
 >;
 /* -------------------------------------------------------------------------- */
@@ -109,157 +113,53 @@ const defaultColumnOptions: ColumnDefinition = {
 	draggable: false,
 	lockable: false,
 };
-
+const dynamic_option_names = ['selected', 'loading', 'limit', 'skip'];
 /* -------------------------------------------------------------------------- */
 export function AzGrid(props: AzGridProps) {
-	const [pendingChanges, set_pendingChanges] = React.useState<number>(1);
-	const [cached_rows, set_cached_rows] = React.useState<any[]>([]);
-
 	/* -------------------------------------------------------------------------- */
 	/*                                   Columns                                  */
 	/* -------------------------------------------------------------------------- */
 	const cached_columns = React.useMemo(() => {
-		const final_columns: MakeWriteable<ColumnDefinition>[] = [];
-		let mcols = props.columns || [];
-		let mcolExts = props.tableColumnExtensions || [];
-		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;
-				}
-			}
-		}
-
-		return final_columns;
-	}, [props.columns, props.leftColumns, props.editableColumns, props.tableColumnExtensions]);
-	/* -------------------------------------------------------------------------- */
-
+		return ApplyColumnData(props);
+	}, [
+		props.columns,
+		props.leftColumns,
+		props.rightColumns,
+		props.editableColumns,
+		props.columnExtensions,
+		props.customColumns,
+	]);
 	/* -------------------------------------------------------------------------- */
 	/*                                 Row changes                                */
 	/* -------------------------------------------------------------------------- */
-	React.useEffect(() => {
-		if (pendingChanges <= 0) return;
-		//console.log('Updated Pending Changes: ', pendingChanges);
-		let new_rows: any[] = [];
-		if (typeof props.get_rows === 'function') {
-			new_rows = props.get_rows();
-		} else new_rows = props.rows || [];
-		/* -------------------------------------------------------------------------- */
-		if (!Array.isArray(new_rows)) new_rows = [];
-		new_rows = new_rows.filter((s) => s != null);
-		/* -------------------------- fix child parent rel -------------------------- */
-		if (props.allowChildRows) new_rows = fix_parent_child_relations(new_rows);
-
-		set_cached_rows(new_rows);
-		set_pendingChanges(0);
-	}, [pendingChanges]);
-
-	React.useEffect(() => {
-		//console.log('Rows Changed !');
-		set_pendingChanges((r) => r + 1);
-	}, [props.rows]);
-
-	function onRowsChange(rows: any[], options: any) {
-		//console.log('onRowsChange');
-		if (props.onRowsChange) props.onRowsChange(rows, options);
-		set_pendingChanges((r) => r + 1); //notify the cache to update rows after we made changes to them
-	}
-	/* -------------------------------------------------------------------------- */
-	/* -------------------------------------------------------------------------- */
-
-	return <DataGrid {...props} columns={cached_columns} rows={cached_rows} onRowsChange={onRowsChange} highlightedRow={props.highlightedRow} />;
+	const dataSource = React.useCallback(
+		async (dt) => {
+			let result_rows =
+				typeof props.rows === 'function' ? await props.rows(dt) : props.rows;
+
+			if (result_rows == null) return [];
+			if (!Array.isArray(result_rows)) result_rows = [result_rows];
+			if (props.allowChildRows) result_rows = fix_parent_child_relations(result_rows);
+			return result_rows;
+		},
+		[props.rows]
+	);
+	return (
+		<DataGrid
+			{...props}
+			columns={cached_columns}
+			dataSource={dataSource}
+			highlightedRow={props.highlightedRow}
+		/>
+	);
 }
 
 /* -------------------------------------------------------------------------- */
 function DataGrid(props: DataGridProps) {
-	const { columns, rows, highlightedRow, dark, contextMenuItems, onRowsChange } = props;
+	const { columns, dataSource, dark, contextMenuItems } = props;
 
 	/* -------------------------------------------------------------------------- */
-	const gridRef = React.useRef<any>(null);
+
 	const [menuAnchorEl, set_menuAnchorEl] = React.useState<any>(null);
 	const [menuRow, set_menuRow] = React.useState<any>(null);
 
@@ -285,13 +185,22 @@ function DataGrid(props: DataGridProps) {
 			theme: dark ? 'amber-dark' : 'default-light',
 		};
 		return { ...defaultOptions, ...events, ...extra_ops };
-	}, [props.gridOptions]);
+	}, []);
+
 	const static_gridOptions = React.useMemo<GridOptions>(() => {
 		return { ...base_gridOptions, ...props.gridOptions, ...forcedOptions };
 	}, [props.gridOptions, base_gridOptions]);
-	const dynamic_gridOptions = React.useMemo<GridOptions>(() => {
-		return { selected: props.selected, loading: props.loading, limit: props.limit, skip: props.skip };
-	}, [props.selected, props.loading, props.skip]);
+
+	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])
+	);
 
 	/* --------------------------------- events --------------------------------- */
 	function onRowContextMenu(row: TypeRowProps, ev: any) {
@@ -307,11 +216,6 @@ function DataGrid(props: DataGridProps) {
 		props.onRowDoubleClick && props.onRowDoubleClick(row.rowIndex, row.data);
 	}
 
-	/* ------------------------- update the selected row ------------------------ */
-	React.useEffect(() => {
-		if (highlightedRow) gridRef.current!.scrollToRow(getRowIndex(highlightedRow, rows));
-	}, [highlightedRow]);
-
 	/* ------------------------------- ContextMenu ------------------------------ */
 
 	function update_menuAnchorEl(el) {
@@ -335,34 +239,143 @@ function DataGrid(props: DataGridProps) {
 				{...dynamic_gridOptions}
 				className={'azgrid-filler'}
 				columns={columns}
-				dataSource={static_gridOptions.dataSource ? static_gridOptions.dataSource : rows}
+				dataSource={dataSource}
+			/>
+			<ContextMenu
+				menuAnchorEl={menuAnchorEl}
+				set_menuAnchorEl={update_menuAnchorEl}
+				menuRow={menuRow}
+				items={contextMenuItems}
 			/>
-			<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 default activation key for grid plugin
+ * @returns
+ */
 function get_default_key() {
 	return 'ExpiryDate=2999-01-01,Z=1040577552';
 }
-function getRowIndex(row: any, allrows?: any[]): number {
-	if (!allrows) return -1;
-	return allrows.findIndex((s) => rowKeyGetter(s) === rowKeyGetter(row)) || -1;
-}
-function rowKeyGetter(row: any) {
-	return row.__uid;
-}
-function isRowSelected(row: any, highlightedRow: any) {
-	const rid = rowKeyGetter(row);
-	const highLight = rowKeyGetter(highlightedRow);
-	return rid != null && rid === highLight;
+
+/**
+ * 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;
+			}
+		}
+	}
+
+	return final_columns;
 }
 
 /* -------------------------------------------------------------------------- */