@azrico/reactgrid 1.1.26 → 1.1.28

package/dist/src/example.js

@@ -32,31 +32,31 @@ const columns = [{
   name: 'job',
   title: 'Job',
   type: 'combo',
-  items: ['Engineer', 'Doctor'],
+  items: ['None', 'Engineer', 'Doctor'],
+  defaultFlex: 1
+}, {
+  name: 'age',
+  title: 'Age',
   defaultFlex: 1
 }];
-const leftColumns = ['username', 'row'];
-const customColumns = [{
-  name: 'job',
-  render: () => {
-    return _react.default.createElement("div", null, "test");
-  }
-}];
-const filterValue = [{
-  name: 'name',
-  operator: 'contains',
-  type: 'string',
-  value: ''
-}];
+const editableColumns = ['job', 'age'];
 const contextMenuItems = ['test'];
-function getData() {
+function getData(delta) {
   const fd = [];
+  console.log('Delta:', delta);
   for (let index = 0; index < 200; index++) {
-    fd.push({
+    const currentObject = {
       __table_id: String(index),
       name: 'user-' + index,
-      age: 20
-    });
+      age: 20,
+      job: 'None'
+    };
+    if (delta[index] && typeof delta[index] === 'object') {
+      for (const key in delta[index]) {
+        currentObject[key] = delta[index][key];
+      }
+    }
+    fd.push(currentObject);
     //if (index % 5 == 0) {
     //	const sub_selfid = 's' + index;
     //	fd.push({
@@ -81,15 +81,32 @@ function getData() {
 }
 function ExampleGrid() {
   const [ds_reset, set_ds_reset] = _react.default.useState(0);
+  const [delta, set_delta] = _react.default.useState({});
   const dataSource = _react.default.useCallback(async dt => {
     //console.log('Start loading');
     return await new Promise(resolve => {
       setTimeout(() => {
-        //console.log('end loading');
-        resolve(getData());
+        resolve(getData(delta));
       }, 1000);
     });
-  }, [ds_reset]);
+  }, [ds_reset, delta]);
+  function onEditComplete(params) {
+    const {
+      value,
+      columnId,
+      rowId,
+      ...rest
+    } = params;
+    let new_rd = delta[rowId];
+    if (!new_rd) new_rd = {};
+    new_rd[columnId] = value;
+    set_delta(d => {
+      return {
+        ...d,
+        [rowId]: new_rd
+      };
+    });
+  }
   const onRowDoubleClick = _react.default.useCallback((index, rowdata) => {
     console.log((rowdata === null || rowdata === void 0 ? void 0 : rowdata.data) || rowdata);
   }, []);
@@ -102,6 +119,7 @@ function ExampleGrid() {
   }
   return _react.default.createElement(_DataGrid.default, {
     dark: true,
+    delayedSize: true,
     onRowClick: onRowClick,
     onRowDoubleClick: onRowDoubleClick,
     // allowChildRows
@@ -110,7 +128,9 @@ function ExampleGrid() {
     contextMenuItems: contextMenuItems,
     // customColumns={customColumns}
     columns: columns,
+    editableColumns: editableColumns,
     editable: true,
+    onEditComplete: onEditComplete,
     // leftColumns={leftColumns}
     gridOptions: {
       // defaultFilterValue: filterValue,

package/dist/src/themes/base_styles.css

@@ -24,3 +24,7 @@
 .azgrid-nomargin {
 	margin: 0;
 }
+.azgrid-delayedresize {
+	transition-property: 'width,height';
+	transition-delay: 200ms;
+}

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

@@ -59,6 +59,7 @@ export type AzGridProps = {
     loading?: boolean;
     dark?: boolean;
     editable?: boolean;
+    delayedSize?: boolean;
     allowChildRows?: boolean;
     looseCacheCheck?: boolean;
     className?: string;

package/dist/src/views/DataGrid.js

@@ -19,6 +19,7 @@ var _reactdatagridEnterprise = _interopRequireDefault(require("@inovua/reactdata
 var _SelectEditor = _interopRequireDefault(require("@inovua/reactdatagrid-community/SelectEditor"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _object = require("@azrico/object");
+var _reactUseSize = require("react-use-size");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /* -------------------------------------------------------------------------- */
 // const defaultfilterTypes: FilterTypes = {
@@ -109,29 +110,63 @@ function AzGrid(props) {
     cached_data.current = result_data;
     return result_data;
   }, [props.dataSource]);
-  return _react.default.createElement(DataGrid, {
+  const base_gridOptions = _react.default.useMemo(() => {
+    const firstcolumn = cached_columns[0];
+    const licenseKey = props.licenseKey || get_default_key();
+    const events = {
+      onSkipChange: props.onSkipChange,
+      onLimitChange: props.onLimitChange,
+      onEditComplete: props.onEditComplete
+    };
+    const extra_ops = {
+      onSelectionChange: props.onSelectionChange,
+      licenseKey: licenseKey,
+      editable: props.editable,
+      treeColumn: props.allowChildRows ? firstcolumn.name : undefined,
+      renderRowDetails: props.RowDetail,
+      theme: props.dark ? 'amber-dark' : 'default-light'
+    };
+    return {
+      ...defaultOptions,
+      ...events,
+      ...extra_ops
+    };
+  }, [cached_columns, props.allowChildRows, props.editable, props.RowDetail, props.onEditComplete]);
+  const static_gridOptions = _react.default.useMemo(() => {
+    return {
+      ...base_gridOptions,
+      ...props.gridOptions,
+      ...forcedOptions
+    };
+  }, [props.gridOptions, base_gridOptions, forcedOptions]);
+  const dynamic_gridOptions = _react.default.useMemo(() => {
+    const res = {};
+    dynamic_option_names.map(r => {
+      res[r] = props[r];
+    });
+    return res;
+  }, dynamic_option_names.map(r => props[r]));
+  return _react.default.createElement(DataGridEventsWrapper, {
     ...props,
+    base_gridOptions: base_gridOptions,
+    static_gridOptions: static_gridOptions,
+    dynamic_gridOptions: dynamic_gridOptions,
     columns: cached_columns,
     dataSource: dataSource,
     highlightedRow: props.highlightedRow
   });
 }
 /* -------------------------------------------------------------------------- */
-function DataGrid(props) {
-  const {
-    columns,
-    dataSource,
-    dark,
-    contextMenuItems
-  } = props;
+/**
+ * Wrapper for menu events
+ * @param props
+ * @returns
+ */
+function DataGridEventsWrapper(props) {
   /* -------------------------------------------------------------------------- */
-  const gridRef = _react.default.useRef(null);
   const click_data = _react.default.useRef(null);
   const [menuAnchorEl, set_menuAnchorEl] = _react.default.useState(null);
   const [menuRow, set_menuRow] = _react.default.useState(null);
-  _react.default.useEffect(() => {
-    click_data.current = {};
-  }, [dataSource]);
   /* --------------------------------- events --------------------------------- */
   const onRowContextMenu = _react.default.useCallback((rowProps, event) => {
     if (_helpers.func_selection.has_selection()) return;
@@ -152,6 +187,9 @@ function DataGrid(props) {
     click_data.current[get_row_id(rowProps)] = nowDate;
     return props.onRowClick && props.onRowClick(rowProps.rowIndex, rowProps.data);
   }, []);
+  _react.default.useEffect(() => {
+    click_data.current = {};
+  }, [props.dataSource]);
   /* ------------------------------- ContextMenu ------------------------------ */
   const update_menuAnchorEl = _react.default.useCallback(el => {
     if (el) {
@@ -163,63 +201,72 @@ function DataGrid(props) {
       set_menuRow(r);
     } else set_menuRow(null);
   }, []);
-  /* -------------------------------------------------------------------------- */
-  /*                               Create the grid                              */
-  /* -------------------------------------------------------------------------- */
   const base_gridOptions = _react.default.useMemo(() => {
-    const firstcolumn = columns[0];
-    const licenseKey = props.licenseKey || get_default_key();
     const events = {
       onRowClick: onRowClick,
-      onRowContextMenu: onRowContextMenu,
-      onSkipChange: props.onSkipChange,
-      onLimitChange: props.onLimitChange,
-      onEditComplete: props.onEditComplete
-    };
-    const extra_ops = {
-      onSelectionChange: props.onSelectionChange,
-      licenseKey: licenseKey,
-      editable: props.editable,
-      treeColumn: props.allowChildRows ? firstcolumn.name : undefined,
-      renderRowDetails: props.RowDetail,
-      theme: dark ? 'amber-dark' : 'default-light'
+      onRowContextMenu: onRowContextMenu
     };
     return {
-      ...defaultOptions,
-      ...events,
-      ...extra_ops
+      ...props.base_gridOptions,
+      ...events
     };
-  }, [columns, props.allowChildRows, props.editable, props.RowDetail, props.onEditComplete]);
-  const static_gridOptions = _react.default.useMemo(() => {
-    return {
-      ...base_gridOptions,
-      ...props.gridOptions,
-      ...forcedOptions
-    };
-  }, [props.gridOptions, base_gridOptions, forcedOptions]);
-  const dynamic_gridOptions = _react.default.useMemo(() => {
-    const res = {};
-    dynamic_option_names.map(r => {
-      res[r] = props[r];
+  }, [props.base_gridOptions]);
+  return _react.default.createElement(DataGridSizeWrapper, {
+    ...props,
+    base_gridOptions: base_gridOptions
+  }, _react.default.createElement(_controls.ContextMenu, {
+    menuAnchorEl: menuAnchorEl,
+    set_menuAnchorEl: update_menuAnchorEl,
+    menuRow: menuRow,
+    items: props.contextMenuItems
+  }), props.children);
+}
+function DataGridSizeWrapper(props) {
+  if (props.delayedSize) {
+    return _react.default.createElement(DataGridDelayedSize, {
+      ...props
     });
-    return res;
-  }, dynamic_option_names.map(r => props[r]));
-  // const { width, height, ref: resize_ref } = useResizeDetector();
+  } else {
+    return _react.default.createElement(DataGridFlexSize, {
+      ...props
+    });
+  }
+}
+function DataGridDelayedSize(props) {
+  const gridRef = _react.default.useRef(null);
+  const {
+    ref,
+    height,
+    width
+  } = (0, _reactUseSize.useComponentSize)();
   return _react.default.createElement("div", {
+    ref: ref,
     className: (0, _clsx.default)(props.className, 'azgrid-nooverflow', 'azgrid-filler')
   }, _react.default.createElement(_reactdatagridEnterprise.default, {
-    ...static_gridOptions,
-    ...dynamic_gridOptions,
+    ...props.static_gridOptions,
+    ...props.dynamic_gridOptions,
+    handle: ref => gridRef.current = ref ? ref.current : null,
+    className: 'azgrid-delayedresize',
+    style: {
+      height: height,
+      width: width
+    },
+    columns: props.columns,
+    dataSource: props.dataSource
+  }), props.children);
+}
+function DataGridFlexSize(props) {
+  const gridRef = _react.default.useRef(null);
+  return _react.default.createElement("div", {
+    className: (0, _clsx.default)(props.className, 'azgrid-nooverflow', 'azgrid-filler')
+  }, _react.default.createElement(_reactdatagridEnterprise.default, {
+    ...props.static_gridOptions,
+    ...props.dynamic_gridOptions,
     handle: ref => gridRef.current = ref ? ref.current : null,
     className: 'azgrid-filler',
-    columns: columns,
-    dataSource: dataSource
-  }), _react.default.createElement(_controls.ContextMenu, {
-    menuAnchorEl: menuAnchorEl,
-    set_menuAnchorEl: update_menuAnchorEl,
-    menuRow: menuRow,
-    items: contextMenuItems
-  }));
+    columns: props.columns,
+    dataSource: props.dataSource
+  }), props.children);
 }
 /* -------------------------------------------------------------------------- */
 /* -------------------------------------------------------------------------- */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@azrico/reactgrid",
-	"version": "1.1.26",
+	"version": "1.1.28",
 	"main": "dist/index.js",
 	"description": "React Datagrid",
 	"author": "Azrideus <MehrdadTavangar@gmail.com>",
@@ -36,7 +36,7 @@
 		"@inovua/reactdatagrid-enterprise": "^5.8.1",
 		"clsx": "^1.2.1",
 		"react": "^18.2.0",
-		"react-resize-detector": "^7.1.2"
+		"react-use-size": "^3.0.1"
 	},
 	"peerDependencies": {
 		"@azrico/controls": "*",
@@ -45,7 +45,7 @@
 		"@inovua/reactdatagrid-enterprise": "*",
 		"clsx": "*",
 		"react": "*",
-		"react-resize-detector": "*"
+		"react-use-size": "*"
 	},
 	"browserslist": {
 		"production": [

package/src/example.tsx

@@ -4,6 +4,7 @@ import AzGrid from './views/DataGrid';
 import { LooseColumnDefinition } from './views/DataGrid';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import { getFormControlUtilityClasses } from '@mui/material';
 
 const columns = [
 	{
@@ -15,33 +16,36 @@ const columns = [
 		name: 'job',
 		title: 'Job',
 		type: 'combo',
-		items: ['Engineer', 'Doctor'],
+		items: ['None', 'Engineer', 'Doctor'],
 		defaultFlex: 1,
 	},
-];
-const leftColumns = ['username', 'row'];
-const customColumns = [
 	{
-		name: 'job',
-		render: () => {
-			return <div>test</div>;
-		},
-	},
-];
-const filterValue = [
-	{
-		name: 'name',
-		operator: 'contains',
-		type: 'string',
-		value: '',
+		name: 'age',
+		title: 'Age',
+		defaultFlex: 1,
 	},
 ];
 
+const editableColumns = ['job', 'age'];
 const contextMenuItems = ['test'];
-function getData() {
+
+function getData(delta: any) {
 	const fd: any[] = [];
+	console.log('Delta:', delta);
 	for (let index = 0; index < 200; index++) {
-		fd.push({ __table_id: String(index), name: 'user-' + index, age: 20 });
+		const currentObject = {
+			__table_id: String(index),
+			name: 'user-' + index,
+			age: 20,
+			job: 'None',
+		};
+		if (delta[index] && typeof delta[index] === 'object') {
+			for (const key in delta[index]) {
+				currentObject[key] = delta[index][key];
+			}
+		}
+
+		fd.push(currentObject);
 		//if (index % 5 == 0) {
 		//	const sub_selfid = 's' + index;
 		//	fd.push({
@@ -66,20 +70,30 @@ function getData() {
 
 export function ExampleGrid() {
 	const [ds_reset, set_ds_reset] = React.useState(0);
+	const [delta, set_delta] = React.useState({});
 
 	const dataSource = React.useCallback(
 		async (dt) => {
 			//console.log('Start loading');
 			return await new Promise((resolve) => {
 				setTimeout(() => {
-					//console.log('end loading');
-					resolve(getData());
+					resolve(getData(delta));
 				}, 1000);
 			});
 		},
-		[ds_reset]
+		[ds_reset, delta]
 	);
 
+	function onEditComplete(params) {
+		const { value, columnId, rowId, ...rest } = params;
+		let new_rd = delta[rowId];
+		if (!new_rd) new_rd = {};
+		new_rd[columnId] = value;
+		set_delta((d) => {
+			return { ...d, [rowId]: new_rd };
+		});
+	}
+
 	const onRowDoubleClick = React.useCallback((index: number, rowdata: any) => {
 		console.log(rowdata?.data || rowdata);
 	}, []);
@@ -95,6 +109,7 @@ export function ExampleGrid() {
 	return (
 		<AzGrid
 			dark
+			delayedSize
 			onRowClick={onRowClick}
 			onRowDoubleClick={onRowDoubleClick}
 			// allowChildRows
@@ -103,7 +118,9 @@ export function ExampleGrid() {
 			contextMenuItems={contextMenuItems}
 			// customColumns={customColumns}
 			columns={columns}
+			editableColumns={editableColumns}
 			editable={true}
+			onEditComplete={onEditComplete}
 			// leftColumns={leftColumns}
 			gridOptions={
 				{

package/src/themes/base_styles.css

@@ -24,3 +24,7 @@
 .azgrid-nomargin {
 	margin: 0;
 }
+.azgrid-delayedresize {
+	transition-property: 'width,height';
+	transition-delay: 200ms;
+}

package/src/views/DataGrid.tsx

@@ -25,7 +25,7 @@ import SelectEditor from '@inovua/reactdatagrid-community/SelectEditor';
 import { TypeOnSelectionChangeArg } from '@inovua/reactdatagrid-community/types/TypeDataGridProps';
 import clsx from 'clsx';
 import { object_equals } from '@azrico/object';
-import { useResizeDetector } from 'react-resize-detector';
+import { useComponentSize } from 'react-use-size';
 
 /* -------------------------------------------------------------------------- */
 type ModifyFields<T, R> = Omit<T, keyof R> & R;
@@ -100,6 +100,7 @@ export type AzGridProps = {
 	loading?: boolean;
 	dark?: boolean;
 	editable?: boolean;
+	delayedSize?: boolean;
 	allowChildRows?: boolean;
 	looseCacheCheck?: boolean;
 	className?: string;
@@ -112,6 +113,15 @@ type DataGridProps = ModifyFields<
 		dataSource: any;
 	}
 >;
+type DataGridWrapperProps = ModifyFields<
+	DataGridProps,
+	{
+		base_gridOptions: GridOptions;
+		dynamic_gridOptions: GridOptions;
+		static_gridOptions: GridOptions;
+		children?: React.ReactNode;
+	}
+>;
 /* -------------------------------------------------------------------------- */
 // const defaultfilterTypes: FilterTypes = {
 // 	string: {
@@ -220,9 +230,52 @@ export function AzGrid(props: AzGridProps) {
 		[props.dataSource]
 	);
 
+	const base_gridOptions = React.useMemo<GridOptions>(() => {
+		const firstcolumn = cached_columns[0];
+		const licenseKey = props.licenseKey || get_default_key();
+		const events: GridOptions = {
+			onSkipChange: props.onSkipChange,
+			onLimitChange: props.onLimitChange,
+			onEditComplete: props.onEditComplete,
+		};
+		const extra_ops: GridOptions = {
+			onSelectionChange: props.onSelectionChange,
+			licenseKey: licenseKey,
+			editable: props.editable,
+			treeColumn: props.allowChildRows ? firstcolumn.name : undefined,
+			renderRowDetails: props.RowDetail,
+			theme: props.dark ? 'amber-dark' : 'default-light',
+		};
+		return { ...defaultOptions, ...events, ...extra_ops };
+	}, [
+		cached_columns,
+		props.allowChildRows,
+		props.editable,
+		props.RowDetail,
+		props.onEditComplete,
+	]);
+
+	const static_gridOptions = React.useMemo<GridOptions>(() => {
+		return { ...base_gridOptions, ...props.gridOptions, ...forcedOptions };
+	}, [props.gridOptions, base_gridOptions, forcedOptions]);
+
+	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])
+	);
+
 	return (
-		<DataGrid
+		<DataGridEventsWrapper
 			{...props}
+			base_gridOptions={base_gridOptions}
+			static_gridOptions={static_gridOptions}
+			dynamic_gridOptions={dynamic_gridOptions}
 			columns={cached_columns}
 			dataSource={dataSource}
 			highlightedRow={props.highlightedRow}
@@ -231,20 +284,19 @@ export function AzGrid(props: AzGridProps) {
 }
 
 /* -------------------------------------------------------------------------- */
-function DataGrid(props: DataGridProps) {
-	const { columns, dataSource, dark, contextMenuItems } = props;
-
+/**
+ * Wrapper for menu events
+ * @param props
+ * @returns
+ */
+function DataGridEventsWrapper(props: DataGridWrapperProps) {
 	/* -------------------------------------------------------------------------- */
-	const gridRef = React.useRef<any>(null);
+
 	const click_data = React.useRef<any>(null);
 
 	const [menuAnchorEl, set_menuAnchorEl] = React.useState<any>(null);
 	const [menuRow, set_menuRow] = React.useState<any>(null);
 
-	React.useEffect(() => {
-		click_data.current = {};
-	}, [dataSource]);
-
 	/* --------------------------------- events --------------------------------- */
 
 	const onRowContextMenu = React.useCallback((rowProps, event) => {
@@ -270,6 +322,11 @@ function DataGrid(props: DataGridProps) {
 		click_data.current[get_row_id(rowProps)] = nowDate;
 		return props.onRowClick && props.onRowClick(rowProps.rowIndex, rowProps.data);
 	}, []);
+
+	React.useEffect(() => {
+		click_data.current = {};
+	}, [props.dataSource]);
+
 	/* ------------------------------- ContextMenu ------------------------------ */
 
 	const update_menuAnchorEl = React.useCallback((el) => {
@@ -283,74 +340,73 @@ function DataGrid(props: DataGridProps) {
 		} else set_menuRow(null);
 	}, []);
 
-	/* -------------------------------------------------------------------------- */
-	/*                               Create the grid                              */
-	/* -------------------------------------------------------------------------- */
-
 	const base_gridOptions = React.useMemo<GridOptions>(() => {
-		const firstcolumn = columns[0];
-		const licenseKey = props.licenseKey || get_default_key();
 		const events: GridOptions = {
 			onRowClick: onRowClick,
 			onRowContextMenu: onRowContextMenu,
-			onSkipChange: props.onSkipChange,
-			onLimitChange: props.onLimitChange,
-			onEditComplete: props.onEditComplete,
 		};
-		const extra_ops: GridOptions = {
-			onSelectionChange: props.onSelectionChange,
-			licenseKey: licenseKey,
-			editable: props.editable,
-			treeColumn: props.allowChildRows ? firstcolumn.name : undefined,
-			renderRowDetails: props.RowDetail,
-			theme: dark ? 'amber-dark' : 'default-light',
-		};
-		return { ...defaultOptions, ...events, ...extra_ops };
-	}, [
-		columns,
-		props.allowChildRows,
-		props.editable,
-		props.RowDetail,
-		props.onEditComplete,
-	]);
-
-	const static_gridOptions = React.useMemo<GridOptions>(() => {
-		return { ...base_gridOptions, ...props.gridOptions, ...forcedOptions };
-	}, [props.gridOptions, base_gridOptions, forcedOptions]);
+		return { ...props.base_gridOptions, ...events };
+	}, [props.base_gridOptions]);
 
-	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])
+	return (
+		<DataGridSizeWrapper {...props} base_gridOptions={base_gridOptions}>
+			<ContextMenu
+				menuAnchorEl={menuAnchorEl}
+				set_menuAnchorEl={update_menuAnchorEl}
+				menuRow={menuRow}
+				items={props.contextMenuItems}
+			/>
+			{props.children}
+		</DataGridSizeWrapper>
 	);
-
-	// const { width, height, ref: resize_ref } = useResizeDetector();
-
+}
+function DataGridSizeWrapper(props: DataGridWrapperProps) {
+	if (props.delayedSize) {
+		return <DataGridDelayedSize {...props} />;
+	} else {
+		return <DataGridFlexSize {...props} />;
+	}
+}
+function DataGridDelayedSize(props: DataGridWrapperProps) {
+	const gridRef = React.useRef<any>(null);
+	const { ref, height, width } = useComponentSize();
+	return (
+		<div
+			ref={ref}
+			className={clsx(props.className, 'azgrid-nooverflow', 'azgrid-filler')}
+		>
+			<ReactDataGrid
+				{...props.static_gridOptions}
+				{...props.dynamic_gridOptions}
+				handle={(ref) => (gridRef.current = ref ? ref.current : null)}
+				className={'azgrid-delayedresize'}
+				style={{
+					height: height,
+					width: width,
+				}}
+				columns={props.columns}
+				dataSource={props.dataSource}
+			/>
+			{props.children}
+		</div>
+	);
+}
+function DataGridFlexSize(props: DataGridWrapperProps) {
+	const gridRef = React.useRef<any>(null);
 	return (
 		<div className={clsx(props.className, 'azgrid-nooverflow', 'azgrid-filler')}>
 			<ReactDataGrid
-				{...static_gridOptions}
-				{...dynamic_gridOptions}
+				{...props.static_gridOptions}
+				{...props.dynamic_gridOptions}
 				handle={(ref) => (gridRef.current = ref ? ref.current : null)}
 				className={'azgrid-filler'}
-				columns={columns}
-				dataSource={dataSource}
-			/>
-			<ContextMenu
-				menuAnchorEl={menuAnchorEl}
-				set_menuAnchorEl={update_menuAnchorEl}
-				menuRow={menuRow}
-				items={contextMenuItems}
+				columns={props.columns}
+				dataSource={props.dataSource}
 			/>
+			{props.children}
 		</div>
 	);
 }
-
 /* -------------------------------------------------------------------------- */
 /* -------------------------------------------------------------------------- */
 /* -------------------------------------------------------------------------- */