@azrico/reactgrid 1.0.20 → 1.0.22

package/dist/src/example.js

@@ -78,24 +78,25 @@ function getData() {
   return fd;
 }
 function ExampleGrid() {
-  const renderContactsGrid = ({
-    data
-  }) => {
-    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 => {
+    console.log('Start loading');
+    return await new Promise(resolve => {
+      setTimeout(() => {
+        console.log('end loading');
+        resolve({
+          data: getData(),
+          count: 999
+        });
+      }, 1000);
+    });
   }, []);
-  return _react.default.createElement(_DataGrid.default, {
+  return _react.default.createElement("div", null, _react.default.createElement(_DataGrid.default, {
     dark: true,
     allowChildRows: true,
     onSelectionChange: onSelectionChange,
@@ -103,13 +104,35 @@ 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
+  }), _react.default.createElement(_DataGrid.default, {
+    dark: true,
+    allowChildRows: true,
+    onSelectionChange: onSelectionChange,
+    selected: selected,
+    contextMenuItems: contextMenuItems,
+    customColumns: customColumns,
+    columns: columns,
+    leftColumns: leftColumns,
+    gridOptions: {
+      pagination: 'remote',
+      defaultLimit: 100,
+      limit: 100,
+      pageSizes: [100],
+      rowIndexColumn: true,
+      checkboxColumn: true
+    },
+    dataSource: dataSource
+  }));
 }
 var _default = ExampleGrid;
 exports.default = _default;

package/dist/src/index.js

@@ -17,21 +17,8 @@ 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;
-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
-}
+var _default = _DataGrid.default; // const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
+// root.render(<ExampleGrid />);
+exports.default = _default;

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

@@ -33,7 +33,7 @@ type customColumnData = {
 type GridOptions = Partial<TypeDataGridProps>;
 export type AzGridProps = {
     columns?: columnOrString[];
-    rows?: any[] | ((args: any) => any[] | Promise<any[]>);
+    dataSource?: any[] | ((args: any) => any[] | Promise<any[] | any>);
     licenseKey?: string;
     gridOptions?: GridOptions;
     columnExtensions?: Array<{

package/dist/src/views/DataGrid.js

@@ -43,12 +43,26 @@ function AzGrid(props) {
   /*                                 Row changes                                */
   /* -------------------------------------------------------------------------- */
   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 [];
+    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.rows]);
+  }, [props.dataSource]);
   return _react.default.createElement(DataGrid, {
     ...props,
     columns: cached_columns,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@azrico/reactgrid",
-	"version": "1.0.20",
+	"version": "1.0.22",
 	"main": "dist/index.js",
 	"description": "React Datagrid",
 	"author": "Azrideus <MehrdadTavangar@gmail.com>",
@@ -32,7 +32,7 @@
 		"@azrico/controls": "1.3.0",
 		"@emotion/react": "^11.9.3",
 		"@emotion/styled": "^11.9.3",
-		"@inovua/reactdatagrid-enterprise": "^5.6.1",
+		"@inovua/reactdatagrid-enterprise": "^5.8.0",
 		"clsx": "^1.2.1",
 		"react": "^18.2.0",
 		"react-resize-detector": "^7.1.2"

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,
+				});
 			}
 		}
 	}
@@ -39,37 +49,63 @@ function getData() {
 }
 
 export function ExampleGrid() {
-	const renderContactsGrid = ({ data }) => {
-		return (
-			<div>
-				<div>{'Test'}</div>
-			</div>
-		);
-	};
 	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) => {
+		console.log('Start loading');
+		return await new Promise((resolve) => {
+			setTimeout(() => {
+				console.log('end loading');
+				resolve({ data: getData(), count: 999 });
+			}, 1000);
+		});
 	}, []);
+
 	return (
-		<AzGrid
-			dark
-			allowChildRows
-			onSelectionChange={onSelectionChange}
-			selected={selected}
-			contextMenuItems={contextMenuItems}
-			customColumns={customColumns}
-			columns={columns}
-			rows={rows}
-			leftColumns={leftColumns}
-			gridOptions={{ rowIndexColumn: true, checkboxColumn: true }}
-		/>
+		<div>
+			<AzGrid
+				dark
+				allowChildRows
+				onSelectionChange={onSelectionChange}
+				selected={selected}
+				contextMenuItems={contextMenuItems}
+				customColumns={customColumns}
+				columns={columns}
+				leftColumns={leftColumns}
+				gridOptions={{
+					pagination: 'remote',
+					defaultLimit: 100,
+					limit: 100,
+					pageSizes: [100],
+					rowIndexColumn: true,
+					checkboxColumn: true,
+				}}
+				dataSource={dataSource}
+			/>
+			<AzGrid
+				dark
+				allowChildRows
+				onSelectionChange={onSelectionChange}
+				selected={selected}
+				contextMenuItems={contextMenuItems}
+				customColumns={customColumns}
+				columns={columns}
+				leftColumns={leftColumns}
+				gridOptions={{
+					pagination: 'remote',
+					defaultLimit: 100,
+					limit: 100,
+					pageSizes: [100],
+					rowIndexColumn: true,
+					checkboxColumn: true,
+				}}
+				dataSource={dataSource}
+			/>
+		</div>
 	);
 }
 export default ExampleGrid;

package/src/index.tsx

@@ -7,12 +7,5 @@ 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
-}
+// const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
+// root.render(<ExampleGrid />);

package/src/views/DataGrid.tsx

@@ -55,7 +55,7 @@ type GridOptions = Partial<TypeDataGridProps>;
 /* -------------------------------------------------------------------------- */
 export type AzGridProps = {
 	columns?: columnOrString[];
-	rows?: any[] | ((args: any) => any[] | Promise<any[]>);
+	dataSource?: any[] | ((args: any) => any[] | Promise<any[] | any>);
 
 	licenseKey?: string;
 
@@ -134,15 +134,25 @@ export function AzGrid(props: AzGridProps) {
 	/* -------------------------------------------------------------------------- */
 	const dataSource = React.useCallback(
 		async (dt) => {
-			let result_rows =
-				typeof props.rows === 'function' ? await props.rows(dt) : props.rows;
-
-			if (result_rows == null) return [];
+			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);
+
+			if (result_data && typeof result_data === 'object') {
+				return { ...result_data, data: result_rows };
+			}
 			return result_rows;
 		},
-		[props.rows]
+		[props.dataSource]
 	);
 	return (
 		<DataGrid