@azrico/reactgrid 1.0.19 → 1.0.21

package/dist/src/example.js

@@ -84,16 +84,16 @@ function ExampleGrid() {
     return _react.default.createElement("div", null, _react.default.createElement("div", null, 'Test'));
   };
   const [selected, setSelected] = _react.default.useState(null);
-  const [rows, set_rows] = _react.default.useState([]);
   const onSelectionChange = _react.default.useCallback(({
     selected
   }) => {
     setSelected(selected);
   }, []);
-  _react.default.useEffect(() => {
-    setTimeout(() => {
-      set_rows(getData());
-    }, 1000);
+  const dataSource = _react.default.useCallback(async dt => {
+    return {
+      data: getData(),
+      count: 999
+    };
   }, []);
   return _react.default.createElement(_DataGrid.default, {
     dark: true,
@@ -103,12 +103,16 @@ function ExampleGrid() {
     contextMenuItems: contextMenuItems,
     customColumns: customColumns,
     columns: columns,
-    rows: rows,
-    leftColumns: leftColumns,
     gridOptions: {
+      pagination: 'remote',
+      defaultLimit: 100,
+      limit: 100,
+      pageSizes: [100],
       rowIndexColumn: true,
       checkboxColumn: true
-    }
+    },
+    dataSource: dataSource,
+    leftColumns: leftColumns
   });
 }
 var _default = ExampleGrid;

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[];
+    dataSource?: any[] | ((args: any) => any[] | Promise<any[] | 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

@@ -33,139 +33,40 @@ const defaultColumnOptions = {
 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);
-  }, [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
-  }
-  /* -------------------------------------------------------------------------- */
-  /* -------------------------------------------------------------------------- */
+  const dataSource = _react.default.useCallback(async dt => {
+    let result_rows = [];
+    let result_data = undefined;
+    if (typeof props.dataSource === 'function') {
+      result_data = await props.dataSource(dt);
+      if (typeof result_data === 'object') {
+        result_rows = result_data.data;
+      } else result_rows = result_data;
+    } else {
+      result_rows = props.dataSource || [];
+    }
+    if (!Array.isArray(result_rows)) result_rows = [result_rows];
+    if (props.allowChildRows) result_rows = (0, _helpers.fix_parent_child_relations)(result_rows);
+    if (result_data && typeof result_data === 'object') {
+      return {
+        ...result_data,
+        data: result_rows
+      };
+    }
+    return result_rows;
+  }, [props.dataSource]);
   return _react.default.createElement(DataGrid, {
     ...props,
     columns: cached_columns,
-    rows: cached_rows,
-    onRowsChange: onRowsChange,
+    dataSource: dataSource,
     highlightedRow: props.highlightedRow
   });
 }
@@ -173,14 +74,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);
   /* -------------------------------------------------------------------------- */
@@ -208,7 +106,7 @@ function DataGrid(props) {
       ...events,
       ...extra_ops
     };
-  }, [props.gridOptions]);
+  }, []);
   const static_gridOptions = _react.default.useMemo(() => {
     return {
       ...base_gridOptions,
@@ -236,10 +134,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 +154,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 +163,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.19",
+	"version": "1.0.21",
 	"main": "dist/index.js",
 	"description": "React Datagrid",
 	"author": "Azrideus <MehrdadTavangar@gmail.com>",

package/src/example.tsx

@@ -28,10 +28,20 @@ function getData() {
 		fd.push({ __table_id: String(index), username: 'user-' + index, age: 20 });
 		if (index % 5 == 0) {
 			const sub_selfid = 's' + index;
-			fd.push({ __table_id: sub_selfid, __parent__table_id: String(index), username: 'sub-' + index, age: 20 });
+			fd.push({
+				__table_id: sub_selfid,
+				__parent__table_id: String(index),
+				username: 'sub-' + index,
+				age: 20,
+			});
 			if (index % 2 == 0) {
 				const sub2_selfid = 'ss' + index;
-				fd.push({ __table_id: sub2_selfid, __parent__table_id: sub_selfid, username: 'sub2-' + index, age: 20 });
+				fd.push({
+					__table_id: sub2_selfid,
+					__parent__table_id: sub_selfid,
+					username: 'sub2-' + index,
+					age: 20,
+				});
 			}
 		}
 	}
@@ -47,16 +57,15 @@ export function ExampleGrid() {
 		);
 	};
 	const [selected, setSelected] = React.useState(null);
-	const [rows, set_rows] = React.useState<any[]>([]);
+
 	const onSelectionChange = React.useCallback(({ selected }) => {
 		setSelected(selected);
 	}, []);
 
-	React.useEffect(() => {
-		setTimeout(() => {
-			set_rows(getData());
-		}, 1000);
+	const dataSource = React.useCallback(async (dt) => {
+		return { data: getData(), count: 999 };
 	}, []);
+
 	return (
 		<AzGrid
 			dark
@@ -66,9 +75,16 @@ export function ExampleGrid() {
 			contextMenuItems={contextMenuItems}
 			customColumns={customColumns}
 			columns={columns}
-			rows={rows}
+			gridOptions={{
+				pagination: 'remote',
+				defaultLimit: 100,
+				limit: 100,
+				pageSizes: [100],
+				rowIndexColumn: true,
+				checkboxColumn: true,
+			}}
+			dataSource={dataSource}
 			leftColumns={leftColumns}
-			gridOptions={{ rowIndexColumn: true, checkboxColumn: true }}
 		/>
 	);
 }

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[];
+	dataSource?: any[] | ((args: any) => any[] | Promise<any[] | 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;
 	}
 >;
 /* -------------------------------------------------------------------------- */
@@ -112,154 +116,60 @@ const defaultColumnOptions: ColumnDefinition = {
 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
-	}
-	/* -------------------------------------------------------------------------- */
-	/* -------------------------------------------------------------------------- */
+	const dataSource = React.useCallback(
+		async (dt) => {
+			let result_rows: any[] = [];
+			let result_data: any = undefined;
+			if (typeof props.dataSource === 'function') {
+				result_data = await props.dataSource(dt);
+				if (typeof result_data === 'object') {
+					result_rows = result_data.data;
+				} else result_rows = result_data;
+			} else {
+				result_rows = props.dataSource || [];
+			}
+			if (!Array.isArray(result_rows)) result_rows = [result_rows];
+			if (props.allowChildRows) result_rows = fix_parent_child_relations(result_rows);
 
-	return <DataGrid {...props} columns={cached_columns} rows={cached_rows} onRowsChange={onRowsChange} highlightedRow={props.highlightedRow} />;
+			if (result_data && typeof result_data === 'object') {
+				return { ...result_data, data: result_rows };
+			}
+			return result_rows;
+		},
+		[props.dataSource]
+	);
+	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,7 +195,8 @@ 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]);
@@ -315,11 +226,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) {
@@ -343,34 +249,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;
 }
 
 /* -------------------------------------------------------------------------- */