@azrico/reactgrid 1.1.13 → 1.1.15

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './src';
+import { AzGrid } from './src';
+export default AzGrid;

package/dist/index.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+exports.default = void 0;
+var _src = require("./src");
+Object.keys(_src).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _src[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _src[key];
+    }
+  });
+});
+var _default = _src.AzGrid;
+exports.default = _default;

package/dist/src/example.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export * from './views/DataGrid';
+export declare function ExampleGrid(): JSX.Element;
+export default ExampleGrid;

package/dist/src/example.js

@@ -0,0 +1,130 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  ExampleGrid: true
+};
+exports.ExampleGrid = ExampleGrid;
+exports.default = void 0;
+var _DataGrid = _interopRequireWildcard(require("./views/DataGrid"));
+Object.keys(_DataGrid).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _DataGrid[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _DataGrid[key];
+    }
+  });
+});
+var _react = _interopRequireDefault(require("react"));
+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; }
+const columns = [{
+  name: 'name',
+  title: 'Category',
+  defaultFlex: 1
+}, {
+  name: 'job',
+  title: 'Job',
+  type: 'combo',
+  items: ['Engineer', 'Doctor'],
+  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 contextMenuItems = ['test'];
+function getData() {
+  const fd = [];
+  for (let index = 0; index < 200; index++) {
+    fd.push({
+      __table_id: String(index),
+      name: 'user-' + index,
+      age: 20
+    });
+    //if (index % 5 == 0) {
+    //	const sub_selfid = 's' + index;
+    //	fd.push({
+    //		__table_id: sub_selfid,
+    //		__parent__table_id: String(index),
+    //		name: 'sub-' + index,
+    //		age: 20,
+    //	});
+    //	if (index % 2 == 0) {
+    //		const sub2_selfid = 'ss' + index;
+    //		fd.push({
+    //			__table_id: sub2_selfid,
+    //			__parent__table_id: sub_selfid,
+    //			name: 'sub2-' + index,
+    //			age: 20,
+    //		});
+    //	}
+    //}
+  }
+
+  return fd;
+}
+function ExampleGrid() {
+  const [ds_reset, set_ds_reset] = _react.default.useState(0);
+  const dataSource = _react.default.useCallback(async dt => {
+    //console.log('Start loading');
+    return await new Promise(resolve => {
+      setTimeout(() => {
+        //console.log('end loading');
+        resolve(getData());
+      }, 1000);
+    });
+  }, [ds_reset]);
+  const onRowDoubleClick = _react.default.useCallback((index, rowdata) => {
+    console.log((rowdata === null || rowdata === void 0 ? void 0 : rowdata.data) || rowdata);
+  }, []);
+  const onRowClick = _react.default.useCallback((index, rowdata) => {
+    //console.log(rowdata?.data || rowdata);
+  }, []);
+  function rst_ds() {
+    //console.log('rst_ds');
+    set_ds_reset(s => s + 1);
+  }
+  return _react.default.createElement(_DataGrid.default, {
+    dark: true,
+    onRowClick: onRowClick,
+    onRowDoubleClick: onRowDoubleClick,
+    // allowChildRows
+    // onSelectionChange={onSelectionChange}
+    // selected={selected}
+    contextMenuItems: contextMenuItems,
+    // customColumns={customColumns}
+    columns: columns,
+    editable: true,
+    // leftColumns={leftColumns}
+    gridOptions: {
+      // defaultFilterValue: filterValue,
+      // remoteFilter: false,
+      // multiSelect: true,
+      // pagination: 'local',
+      // defaultLimit: 100,
+      // limit: 100,
+      // pageSizes: [100],
+      // rowIndexColumn: true,
+      // checkboxColumn: true,
+    },
+    dataSource: dataSource
+  });
+}
+var _default = ExampleGrid;
+exports.default = _default;

package/dist/src/func/helpers.d.ts

@@ -0,0 +1,29 @@
+type mrow = {
+    __parent__table_id: any;
+    __table_id: any;
+    __children?: any[];
+};
+export declare function fix_parent_child_relations<T extends mrow>(rows: T[]): T[];
+export declare class func_selection {
+    static getVirtualElement(x?: number, y?: number): () => {
+        getBoundingClientRect: () => {
+            width: number;
+            height: number;
+            top: number;
+            right: number;
+            bottom: number;
+            left: number;
+        };
+    };
+    static generateGetBoundingClientRect(x?: number, y?: number): () => {
+        width: number;
+        height: number;
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    static get_selectedText(): string;
+    static has_selection(): boolean;
+}
+export {};

package/dist/src/func/helpers.js

@@ -0,0 +1,80 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.fix_parent_child_relations = fix_parent_child_relations;
+exports.func_selection = void 0;
+function get_parentId(obj) {
+  return obj.__parent__table_id || obj.parent;
+}
+function get_selfId(obj) {
+  return obj.__table_id;
+}
+//given an array of rows, fixes parent,child relations
+function fix_parent_child_relations(rows) {
+  if (!Array.isArray(rows)) rows = [];
+  const converted_rows = rows.filter(r => r != null).map(r => {
+    return {
+      parent: get_parentId(r),
+      self: get_selfId(r),
+      data: r
+    };
+  });
+  const top_level_rows = converted_rows.filter(r => !r.parent);
+  //find children of top-level parents:
+  for (let index = 0; index < top_level_rows.length; index++) {
+    const mrow = top_level_rows[index];
+    assign_children(mrow, converted_rows);
+  }
+  const result = top_level_rows.map(r => r.data);
+  //console.log(result);
+  return result;
+}
+function assign_children(row, all_rows) {
+  const my_children = all_rows.filter(s => row.self == s.parent);
+  if (my_children.length > 0) {
+    //find children of my children:
+    for (let index = 0; index < my_children.length; index++) {
+      const child = my_children[index];
+      assign_children(child, all_rows);
+    }
+    row.data.__children = my_children.map(r => r.data);
+  } else if (!Array.isArray(row.data.__children) || row.data.__children.length == 0) row.data.__children = undefined;
+}
+class func_selection {
+  static getVirtualElement(x = 0, y = 0) {
+    return () => ({
+      getBoundingClientRect: func_selection.generateGetBoundingClientRect(x, y)
+    });
+  }
+  static generateGetBoundingClientRect(x = 0, y = 0) {
+    return () => ({
+      width: 0,
+      height: 0,
+      top: y,
+      right: x,
+      bottom: y,
+      left: x
+    });
+  }
+  static get_selectedText() {
+    var text = '';
+    if (window.getSelection) {
+      var _window$getSelection;
+      text = (_window$getSelection = window.getSelection()) === null || _window$getSelection === void 0 ? void 0 : _window$getSelection.toString();
+    } else if (document.selection && document.selection.type != 'Control') {
+      var _document$selection$c;
+      text = (_document$selection$c = document.selection.createRange()) === null || _document$selection$c === void 0 ? void 0 : _document$selection$c.text;
+    }
+    return text || '';
+  }
+  static has_selection() {
+    const slct = window.getSelection();
+    if (slct == null) return false;
+    if (slct.type == null) return func_selection.get_selectedText().length !== 0;
+    if (slct.type === 'Range') return true;
+    return false;
+  }
+}
+exports.func_selection = func_selection;

package/dist/src/index.d.ts

@@ -0,0 +1,3 @@
+export * from './views/DataGrid';
+import AzGrid from './views/DataGrid';
+export default AzGrid;

package/dist/src/index.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+exports.default = void 0;
+var _DataGrid = _interopRequireWildcard(require("./views/DataGrid"));
+Object.keys(_DataGrid).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _DataGrid[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _DataGrid[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;
+const root = _client.default.createRoot(document.getElementById('testroot'));
+root.render(_react.default.createElement(_example.default, null));

package/dist/src/themes/base_styles.css

@@ -0,0 +1,26 @@
+.azgrid-container {
+	height: 100%;
+	width: 100%;
+}
+.azgrid-borderbox {
+	box-sizing: border-box;
+}
+.azgrid-filler {
+	height: 100%;
+	width: 100%;
+}
+.azgrid-nooverflow {
+	overflow: hidden;
+}
+.azgrid-testborder {
+	border: 3px solid red;
+}
+.azgrid-pad50px {
+	padding: 50px;
+}
+.azgrid-nopad {
+	padding: 0;
+}
+.azgrid-nomargin {
+	margin: 0;
+}

package/dist/src/themes/grid.css

@@ -0,0 +1,20 @@
+/* .InovuaReactDataGrid {
+	--grid-bg: '#fff';
+}
+.InovuaReactDataGrid {
+	background: var(--grid-bg) !important;
+}
+.InovuaReactDataGrid__header {
+	background: var(--grid-bg) !important;
+}
+.InovuaReactDataGrid__row {
+	background: var(--grid-bg) !important;
+}
+.InovuaReactDataGrid__cell {
+	background: var(--grid-bg) !important;
+} */
+.InovuaReactDataGrid__cell .InovuaReactDataGrid__cell__content {
+	height: 100%;
+	display: flex;
+	align-items: center;
+}

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

@@ -0,0 +1,70 @@
+import '@inovua/reactdatagrid-enterprise/index.css';
+import '@inovua/reactdatagrid-enterprise/theme/default-dark.css';
+import '@inovua/reactdatagrid-enterprise/theme/amber-dark.css';
+import '../themes/base_styles.css';
+import '../themes/grid.css';
+import { ConvertableToMenuItem } from '@azrico/controls';
+import React from 'react';
+import { TypeColumn, TypeDataGridProps, TypeDataSource, TypeEditInfo, TypeFilterTypes, TypeRowDetailsInfo, TypeRowProps, TypeRowSelection } from '@inovua/reactdatagrid-community/types';
+import { TypeOnSelectionChangeArg } from '@inovua/reactdatagrid-community/types/TypeDataGridProps';
+export type ColumnDefinition = TypeColumn;
+export type CellDefinition = any;
+export type RowDefinition = any;
+export type RowProps = TypeRowProps;
+export type RowSelectionValue = TypeRowSelection;
+export type DataRowDefinition = any;
+export type FilterTypes = TypeFilterTypes;
+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_fields = loose_column_names & {
+    title: string;
+    type: string;
+    items: any[];
+};
+export type LooseColumnDefinition = Partial<loose_column_fields & ColumnDefinition>;
+type columnOrString = string | LooseColumnDefinition;
+type customColumnData = {
+    name: string;
+    render: (cell: any, formatterParams: any, onRendered: any) => React.ReactNode | undefined | null;
+};
+type GridOptions = Partial<TypeDataGridProps>;
+export type AzGridProps = {
+    columns?: columnOrString[];
+    dataSource?: any[] | ((args: any) => any[] | Promise<any[] | any>);
+    licenseKey?: string;
+    gridOptions?: GridOptions;
+    columnExtensions?: Array<{
+        name: string;
+    } & Partial<ColumnDefinition>>;
+    editableColumns?: string[];
+    leftColumns?: string[];
+    rightColumns?: string[];
+    customColumns?: customColumnData[];
+    contextMenuItems?: ConvertableToMenuItem[];
+    highlightedRow?: any;
+    RowDetail?: RowDetailsFunc;
+    selected?: RowSelectionValue;
+    onEditComplete?: (editInfo: TypeEditInfo) => void;
+    onSelectionChange?: OnSelectionChangeFunc;
+    onRowClick?: (rowIndex: number, row: any) => void;
+    onRowDoubleClick?: (rowIndex: number, row: any) => void;
+    onLimitChange?: (v: number) => void;
+    onSkipChange?: (v: number) => void;
+    skip?: number;
+    limit?: number;
+    loading?: boolean;
+    dark?: boolean;
+    editable: boolean;
+    allowChildRows?: boolean;
+    looseCacheCheck?: boolean;
+    className?: string;
+};
+export declare function AzGrid(props: AzGridProps): JSX.Element;
+export default AzGrid;

package/dist/src/views/DataGrid.js

@@ -0,0 +1,429 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AzGrid = AzGrid;
+exports.default = void 0;
+require("@inovua/reactdatagrid-enterprise/index.css");
+require("@inovua/reactdatagrid-enterprise/theme/default-dark.css");
+require("@inovua/reactdatagrid-enterprise/theme/amber-dark.css");
+require("../themes/base_styles.css");
+require("../themes/grid.css");
+var _controls = require("@azrico/controls");
+var _react = _interopRequireDefault(require("react"));
+var _helpers = require("../func/helpers");
+var _reactdatagridEnterprise = _interopRequireDefault(require("@inovua/reactdatagrid-enterprise"));
+var _SelectEditor = _interopRequireDefault(require("@inovua/reactdatagrid-community/SelectEditor"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _object = require("@azrico/object");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/* -------------------------------------------------------------------------- */
+// const defaultfilterTypes: FilterTypes = {
+// 	string: {
+// 		type: 'string',
+// 		emptyValue: '',
+// 		operators: [
+// 			{
+// 				name: 'contains',
+// 				fn: ({ value, filterValue, data }) => {
+// 					console.log('fn');
+// 					return !filterValue ? true : value.indexOf(filterValue) != -1;
+// 				},
+// 			},
+// 		],
+// 	},
+// };
+const defaultOptions = {
+  //filterTypes: defaultfilterTypes,
+  remoteFilter: false,
+  remoteSort: false,
+  editStartEvent: 'click',
+  rowReorderColumn: false,
+  resizable: true,
+  rowIndexColumn: true
+};
+const forcedOptions = {
+  idProperty: '__table_id',
+  nodesProperty: '__children'
+};
+const defaultColumnOptions = {
+  draggable: false,
+  lockable: false
+};
+const dynamic_option_names = ['selected', 'loading', 'limit', 'skip'];
+/* -------------------------------------------------------------------------- */
+function AzGrid(props) {
+  /* -------------------------------------------------------------------------- */
+  /*                                   Columns                                  */
+  /* -------------------------------------------------------------------------- */
+  const cached_columns = _react.default.useMemo(() => {
+    return ApplyColumnData(props);
+  }, [props.columns, props.leftColumns, props.rightColumns, props.editableColumns, props.columnExtensions, props.customColumns]);
+  /* -------------------------------------------------------------------------- */
+  /*                                 Row changes                                */
+  /* -------------------------------------------------------------------------- */
+  const cached_data = _react.default.useRef();
+  const last_cache_info = _react.default.useRef();
+  const dataSource = _react.default.useCallback(async dt => {
+    let result_data = undefined;
+    let isUsingCache = false;
+    const cacheInfo = {
+      ds: props.dataSource,
+      skip: dt.skip,
+      limit: dt.limit
+    };
+    //check if we can used cached data
+    //if the datasource is changed since last render, we should invalidate cache
+    if (!validateCache(last_cache_info.current, cacheInfo, props.looseCacheCheck)) {
+      cached_data.current = undefined;
+      last_cache_info.current = cacheInfo;
+    }
+    if (cached_data.current) {
+      //cache is valid, use the cache
+      isUsingCache = true;
+      result_data = cached_data.current;
+    } else {
+      //cache is invalid, use the datasource again
+      isUsingCache = false;
+      if (typeof props.dataSource === 'function') {
+        result_data = await props.dataSource(dt);
+      } else result_data = props.dataSource;
+    }
+    //making sure the datasource is a valid object :
+    if (!result_data) result_data = [];
+    if (Array.isArray(result_data) || typeof result_data !== 'object') result_data = {
+      data: result_data
+    };
+    if (!Array.isArray(result_data.data)) result_data.data = [result_data.data];
+    //no need to fix parent/child when using cache (it should be already fixed)
+    if (!isUsingCache && props.allowChildRows) result_data.data = (0, _helpers.fix_parent_child_relations)(result_data.data);
+    if (!result_data.count) result_data.count = result_data.data.length;
+    //update cache
+    cached_data.current = result_data;
+    return result_data;
+  }, [props.dataSource]);
+  return _react.default.createElement(DataGrid, {
+    ...props,
+    columns: cached_columns,
+    dataSource: dataSource,
+    highlightedRow: props.highlightedRow
+  });
+}
+/* -------------------------------------------------------------------------- */
+function DataGrid(props) {
+  const {
+    columns,
+    dataSource,
+    dark,
+    contextMenuItems
+  } = 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;
+    update_menuRow(rowProps.data);
+    update_menuAnchorEl(_helpers.func_selection.getVirtualElement(event.clientX, event.clientY));
+    event.preventDefault();
+  }, []);
+  const onRowClick = _react.default.useCallback((rowProps, event) => {
+    const nowDate = Date.now();
+    const lastclick = click_data.current[get_row_id(rowProps)];
+    if (lastclick) {
+      const diffTime = Math.abs(nowDate - lastclick);
+      if (diffTime < 400) {
+        props.onRowDoubleClick && props.onRowDoubleClick(rowProps.rowIndex, rowProps.data);
+      }
+    }
+    click_data.current[get_row_id(rowProps)] = nowDate;
+    props.onRowClick && props.onRowClick(rowProps.rowIndex, rowProps.data);
+  }, []);
+  /* ------------------------------- ContextMenu ------------------------------ */
+  const update_menuAnchorEl = _react.default.useCallback(el => {
+    if (el) {
+      set_menuAnchorEl(el);
+    } else set_menuAnchorEl(null);
+  }, []);
+  const update_menuRow = _react.default.useCallback(r => {
+    if (r) {
+      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'
+    };
+    return {
+      ...defaultOptions,
+      ...events,
+      ...extra_ops
+    };
+  }, [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]));
+  // const { width, height, ref: resize_ref } = useResizeDetector();
+  return _react.default.createElement("div", {
+    className: (0, _clsx.default)(props.className, 'azgrid-nooverflow', 'azgrid-filler')
+  }, _react.default.createElement(_reactdatagridEnterprise.default, {
+    ...static_gridOptions,
+    ...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
+  }));
+}
+/* -------------------------------------------------------------------------- */
+/* -------------------------------------------------------------------------- */
+/* -------------------------------------------------------------------------- */
+/* -------------------------------------------------------------------------- */
+/**
+ * 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: get_col_header(r),
+        width: r.width || undefined
+      };
+      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 => get_col_name(s) === 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 => get_col_name(s) === 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 => get_col_name(s) === 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 => get_col_name(s) === r);
+      if (mcol) {
+        // mcol.editor = editorWrapper;
+        // mcol.editorOptions = {
+        //     editOnClick: true,
+        // };
+      }
+    }
+  }
+  for (let index = 0; index < final_columns.length; index++) {
+    const col = final_columns[index];
+    if (col.type) {
+      switch (col.type) {
+        case 'combo':
+        case 'select':
+          //@ts-ignore
+          col.editor = _SelectEditor.default;
+          break;
+        //case 'number':
+        //case 'numberic':
+        //	col.editor = NumericEditor;
+        //	break;
+        //case 'truefalse':
+        //case 'bool':
+        //	col.editor = BoolEditor;
+        //	break;
+      }
+
+      delete col.type;
+    }
+    //@ts-ignore
+    if (!col.editorProps) col.editorProps = {};
+    if (col.items) {
+      //@ts-ignore
+      if (!col.editorProps.idProperty) col.editorProps.idProperty = 'id';
+      //@ts-ignore
+      if (!col.editorProps.collapseOnSelect) col.editorProps.collapseOnSelect = true;
+      //@ts-ignore
+      col.editorProps.dataSource = to_datasource(col.items, col.editorProps.idProperty);
+      delete col.items;
+    }
+  }
+  /* -------------------------------------------------------------------------- */
+  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 => get_col_name(s) === rn);
+      if (mcol) {
+        //@ts-ignore
+        mcol.render = r.render;
+      }
+    }
+  }
+  /* ------------------------------ apply renames ----------------------------- */
+  for (let index = 0; index < final_columns.length; index++) {
+    const col = final_columns[index];
+    if (!col.name) {
+      col.name = get_col_name(col);
+      delete col.field;
+      delete col.key;
+      delete col.columnName;
+    }
+  }
+  /* -------------------------------------------------------------------------- */
+  console.log(final_columns);
+  return final_columns;
+}
+function to_datasource(arr, idProperty) {
+  const res = [];
+  let index = 0;
+  if (Array.isArray(arr)) {
+    arr.map(s => {
+      let elem = {};
+      elem[idProperty] = '_cid_' + index;
+      if (typeof s === 'object') elem = {
+        ...elem,
+        ...s
+      };else elem['label'] = s;
+      res.push(elem);
+      index++;
+    });
+  }
+  return res;
+}
+/**
+ * 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 header of a column
+ * @param obj
+ * @returns
+ */
+function get_col_header(obj) {
+  if (!obj) return 'default';
+  if (typeof obj == 'string') return obj;
+  if (typeof obj != 'object') return 'default';
+  return obj.header || obj.title || get_col_name(obj);
+}
+/**
+ * Gets name of a column from its column object
+ * @param obj
+ * @returns
+ */
+function get_row_id(obj) {
+  if (!obj) return 'default';
+  if (typeof obj == 'string') return obj;
+  if (typeof obj != 'object') return 'default';
+  return obj.__table_id || obj.id || 'default';
+}
+/**
+ * Gets default activation key for grid plugin
+ * @returns
+ */
+function get_default_key() {
+  return 'ExpiryDate=2999-01-01,Z=1040577552';
+}
+//check if two cache objects are the same
+function validateCache(current, old, looseCheck = false) {
+  if (!old || !(0, _object.object_equals)(current, old)) return false;
+  if (looseCheck) return true;
+  if (current.ds != old.ds) return false;
+  return true;
+}
+/* -------------------------------------------------------------------------- */
+var _default = AzGrid;
+exports.default = _default;

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

@@ -0,0 +1,3 @@
+export * from './DataGrid';
+import AzGrid from './DataGrid';
+export default AzGrid;

package/dist/src/views/index.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+exports.default = void 0;
+var _DataGrid = _interopRequireWildcard(require("./DataGrid"));
+Object.keys(_DataGrid).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _DataGrid[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _DataGrid[key];
+    }
+  });
+});
+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;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@azrico/reactgrid",
-	"version": "1.1.13",
+	"version": "1.1.15",
 	"main": "dist/index.js",
 	"description": "React Datagrid",
 	"author": "Azrideus <MehrdadTavangar@gmail.com>",
@@ -33,7 +33,7 @@
 		"@azrico/object": "^1.3.1",
 		"@emotion/react": "^11.9.3",
 		"@emotion/styled": "^11.9.3",
-		"@inovua/reactdatagrid-enterprise": "^5.8.0",
+		"@inovua/reactdatagrid-enterprise": "^5.8.1",
 		"clsx": "^1.2.1",
 		"react": "^18.2.0",
 		"react-resize-detector": "^7.1.2"

package/src/example.tsx

@@ -11,6 +11,13 @@ const columns = [
 		title: 'Category',
 		defaultFlex: 1,
 	},
+	{
+		name: 'job',
+		title: 'Job',
+		type: 'combo',
+		items: ['Engineer', 'Doctor'],
+		defaultFlex: 1,
+	},
 ];
 const leftColumns = ['username', 'row'];
 const customColumns = [
@@ -96,6 +103,7 @@ export function ExampleGrid() {
 			contextMenuItems={contextMenuItems}
 			// customColumns={customColumns}
 			columns={columns}
+			editable={true}
 			// leftColumns={leftColumns}
 			gridOptions={
 				{

package/src/index.tsx

@@ -1,11 +1,15 @@
 export * from './views/DataGrid';
 
 import AzGrid from './views/DataGrid';
-/* -------------------------------------------------------------------------- */
 import ExampleGrid from './example';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+
+/* -------------------------------------------------------------------------- */
+
+
+
 export default AzGrid;
 
-// const root = ReactDOM.createRoot(document.getElementById('testroot') as HTMLElement);
-// root.render(<ExampleGrid />);
+const root = ReactDOM.createRoot(document.getElementById('testroot') as HTMLElement);
+root.render(<ExampleGrid />);

package/src/views/DataGrid.tsx

@@ -10,6 +10,7 @@ import {
 	TypeColumn,
 	TypeDataGridProps,
 	TypeDataSource,
+	TypeEditInfo,
 	TypeFilterTypes,
 	TypeRowDetailsInfo,
 	TypeRowProps,
@@ -17,7 +18,10 @@ import {
 } from '@inovua/reactdatagrid-community/types';
 import { fix_parent_child_relations, func_selection } from '../func/helpers';
 
+import BoolEditor from '@inovua/reactdatagrid-community/BoolEditor';
+import NumericEditor from '@inovua/reactdatagrid-community/NumericEditor';
 import ReactDataGrid from '@inovua/reactdatagrid-enterprise';
+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';
@@ -81,6 +85,7 @@ export type AzGridProps = {
 
 	selected?: RowSelectionValue;
 	/* -------------------------------------------------------------------------- */
+	onEditComplete?: (editInfo: TypeEditInfo) => void;
 	onSelectionChange?: OnSelectionChangeFunc;
 
 	onRowClick?: (rowIndex: number, row: any) => void;
@@ -93,6 +98,7 @@ export type AzGridProps = {
 	//
 	loading?: boolean;
 	dark?: boolean;
+	editable: boolean;
 	allowChildRows?: boolean;
 	looseCacheCheck?: boolean;
 	className?: string;
@@ -125,7 +131,7 @@ const defaultOptions: GridOptions = {
 	//filterTypes: defaultfilterTypes,
 	remoteFilter: false,
 	remoteSort: false,
-
+	editStartEvent: 'click',
 	rowReorderColumn: false,
 	resizable: true,
 	rowIndexColumn: true,
@@ -277,19 +283,27 @@ function DataGrid(props: DataGridProps) {
 		const licenseKey = props.licenseKey || get_default_key();
 		const events: GridOptions = {
 			onRowClick: onRowClick,
+			onRowContextMenu: onRowContextMenu,
 			onSkipChange: props.onSkipChange,
 			onLimitChange: props.onLimitChange,
-			onRowContextMenu: onRowContextMenu,
+			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.RowDetail]);
+	}, [
+		columns,
+		props.allowChildRows,
+		props.editable,
+		props.RowDetail,
+		props.onEditComplete,
+	]);
 
 	const static_gridOptions = React.useMemo<GridOptions>(() => {
 		return { ...base_gridOptions, ...props.gridOptions, ...forcedOptions };
@@ -339,8 +353,8 @@ function DataGrid(props: DataGridProps) {
  * @param props
  * @returns
  */
-function ApplyColumnData(props: any) {
-	const final_columns: MakeWriteable<ColumnDefinition>[] = [];
+function ApplyColumnData(props: any): ColumnDefinition[] {
+	const final_columns: MakeWriteable<LooseColumnDefinition>[] = [];
 	let mcols = props.columns || [];
 	let mcolExts = props.columnExtensions || [];
 	let rightColumns = props.rightColumns || [];
@@ -420,6 +434,42 @@ function ApplyColumnData(props: any) {
 			}
 		}
 	}
+	for (let index = 0; index < final_columns.length; index++) {
+		const col = final_columns[index];
+
+		if (col.type) {
+			switch (col.type) {
+				case 'combo':
+				case 'select':
+					//@ts-ignore
+					col.editor = SelectEditor;
+					break;
+				//case 'number':
+				//case 'numberic':
+				//	col.editor = NumericEditor;
+				//	break;
+				//case 'truefalse':
+				//case 'bool':
+				//	col.editor = BoolEditor;
+				//	break;
+			}
+			delete col.type;
+		}
+		//@ts-ignore
+		if (!col.editorProps) col.editorProps = {};
+		if (col.items) {
+			//@ts-ignore
+			if (!col.editorProps.idProperty) col.editorProps.idProperty = 'id';
+			//@ts-ignore
+			if (!col.editorProps.collapseOnSelect) col.editorProps.collapseOnSelect = true;
+			//@ts-ignore
+			col.editorProps.dataSource = to_datasource(col.items, col.editorProps.idProperty);
+
+			delete col.items;
+		}
+	}
+
+	/* -------------------------------------------------------------------------- */
 	if (Array.isArray(customColumns)) {
 		for (let index = 0; index < customColumns.length; index++) {
 			const r = customColumns[index];
@@ -435,34 +485,34 @@ function ApplyColumnData(props: any) {
 	/* ------------------------------ apply renames ----------------------------- */
 	for (let index = 0; index < final_columns.length; index++) {
 		const col = final_columns[index];
-
 		if (!col.name) {
 			col.name = get_col_name(col);
 			delete col.field;
 			delete col.key;
 			delete col.columnName;
 		}
-		//
-		if (col.type) {
-			col.editor = col.type;
-			delete col.type;
-		}
-		//
-		if (col.items) {
-			if (!col.editorParams) col.editorParams = { valuesLookup: true, allowEmpty: true };
-			col.editorParams.values = {};
-			for (let index = 0; index < col.items; index++) {
-				const ci = col.items[index];
-				col.editorParams.values[String(ci).toLowerCase()] = ci;
-			}
-			delete col.items;
-		}
 	}
 	/* -------------------------------------------------------------------------- */
-
+	console.log(final_columns);
 	return final_columns;
 }
 
+function to_datasource(arr: any[], idProperty: string) {
+	const res: any[] = [];
+	let index = 0;
+	if (Array.isArray(arr)) {
+		arr.map((s: any) => {
+			let elem = {};
+			elem[idProperty] = '_cid_' + index;
+			if (typeof s === 'object') elem = { ...elem, ...s };
+			else elem['label'] = s;
+			res.push(elem);
+			index++;
+		});
+	}
+
+	return res;
+}
 /**
  * Gets name of a column from its column object
  * @param obj