@azrico/reactgrid 1.0.20 → 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/index.js

@@ -17,21 +17,15 @@ 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; // 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;

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.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/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

@@ -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