@azrico/reactgrid 1.3.40 → 1.3.42

package/dist/src/index.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  get_row_id: true,
+  set_row_id: true,
+  get_col_name: true,
+  get_col_header: true
+};
+exports.default = void 0;
+Object.defineProperty(exports, "get_col_header", {
+  enumerable: true,
+  get: function () {
+    return _func_grid.get_col_header;
+  }
+});
+Object.defineProperty(exports, "get_col_name", {
+  enumerable: true,
+  get: function () {
+    return _func_grid.get_col_name;
+  }
+});
+Object.defineProperty(exports, "get_row_id", {
+  enumerable: true,
+  get: function () {
+    return _func_grid.get_row_id;
+  }
+});
+Object.defineProperty(exports, "set_row_id", {
+  enumerable: true,
+  get: function () {
+    return _func_grid.set_row_id;
+  }
+});
+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 _func_grid = require("./func/func_grid");
+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(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/* -------------------------------------------------------------------------- */
+//
+var _default = exports.default = _DataGrid.default;
+const testroot = document.getElementById('testroot');
+if (testroot) {
+  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,52 @@
+.azgrid-container {
+	height: 100%;
+	width: 100%;
+}
+.azgrid-borderbox {
+	box-sizing: border-box;
+}
+.azgrid-filler {
+	height: 100%;
+	width: 100%;
+}
+.azgrid-nooverflow {
+	overflow: hidden;
+}
+.azgrid-flexed {
+	flex: 1;
+}
+.azgrid-flexlayout {
+	display: flex;
+	flex-direction: column;
+}
+.azgrid-testborder {
+	border: 3px solid red;
+}
+.azgrid-pad50px {
+	padding: 50px;
+}
+.azgrid-nopad {
+	padding: 0;
+}
+.azgrid-nomargin {
+	margin: 0;
+}
+.azgrid-delayedresize {
+	transition-property: width, height;
+	transition-delay: 200ms;
+	transition-duration: 0ms;
+}
+
+.azgrid-searcharea {
+	margin: 5px;
+	font-size: large;
+}
+.azgrid-searcharea label {
+	gap: 5px;
+	display: flex;
+	align-items: center;
+}
+.azgrid-searcharea label input {
+	padding: 5px;
+	font-size: large;
+}

package/dist/src/themes/grid.css

@@ -0,0 +1,65 @@
+.InovuaReactDataGrid { 
+	 
+
+	z-index: 1000;
+	font-family: 'Nunito Sans', 'Iran Sans', sans-serif;
+}
+ .InovuaReactDataGrid--theme-amber-dark {
+	--grid-bg: #313943;
+	--grid-fg:#c5cae9;
+	--grid-fg-hover:#ececec;
+}
+ 
+ .InovuaReactDataGrid--theme-default-light {
+	--grid-bg: #fff;
+	--grid-fg:#1e1e1e;
+	--grid-fg-hover:#000000;
+}  
+ 
+.InovuaReactDataGrid__row{
+	color:var(--grid-fg); 
+}
+ 
+ 
+
+
+  /* --------------------------- selected row color --------------------------- */
+.InovuaReactDataGrid
+	.InovuaReactDataGrid__row--active
+	.InovuaReactDataGrid__cell:not(.InovuaReactDataGrid__cell--no-background),
+.InovuaReactDataGrid
+	.InovuaReactDataGrid__row--active.InovuaReactDataGrid__row--even
+	.InovuaReactDataGrid__cell:not(.InovuaReactDataGrid__cell--no-background),
+.InovuaReactDataGrid
+	.InovuaReactDataGrid__row--active.InovuaReactDataGrid__row--odd
+	.InovuaReactDataGrid__cell:not(.InovuaReactDataGrid__cell--no-background) {
+	color: var(--grid-fg-hover);
+}
+
+.inovua-react-toolkit-text-input {
+	font-family: inherit;
+}
+.inovua-react-toolkit-text-input input {
+	font-family: inherit;
+}
+
+ 
+
+.InovuaReactDataGrid__cell .InovuaReactDataGrid__cell__content {
+	height: 100%;
+	display: flex;
+	align-items: center;
+}
+.InovuaReactDataGrid__column-header__content {
+	text-overflow: clip;
+}
+
+.InovuaReactDataGrid__row.deleted:after {
+	position: absolute;
+	content: '';
+	left: 5px;
+	top: 50%;
+	right: 5px;
+	border-top: 1.5px solid;
+	border-color: gray;
+}

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

@@ -0,0 +1,80 @@
+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 { TypeCellSelection, TypeColumn, TypeDataGridProps, TypeDataSource, TypeEditInfo, TypeFilterTypes, TypeFilterValue, TypeRowDetailsInfo, TypeRowProps, TypeRowSelection, TypeComputedProps } 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 CellSelectionValue = TypeCellSelection;
+export type DataRowDefinition = any;
+export type FilterTypes = TypeFilterTypes;
+export type FilterValues = TypeFilterValue;
+export type DataSourceDefinition = TypeDataSource;
+export type OnSelectionChangeFunc = (config: TypeOnSelectionChangeArg) => void;
+export type OnCellSelectionChangeFunc = (s: {
+    [key: string]: boolean;
+}) => 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>;
+export type CustomColumnDefinition = {
+    name: string;
+    render: (cell: any, formatterParams: any, onRendered: any) => React.ReactNode | undefined | null;
+};
+export type AzGridOptions = Partial<TypeDataGridProps>;
+export type AzGridProps = {
+    dataSource?: any[] | ((args: any) => any[] | Promise<any[] | any>);
+    details_dataSource?: any[] | ((args: any) => any[] | Promise<any[] | any>);
+    details_columns?: LooseColumnDefinition[];
+    details_filter?: FilterValues;
+    licenseKey?: string;
+    gridRef?: React.MutableRefObject<TypeComputedProps>;
+    gridOptions?: AzGridOptions;
+    columns?: LooseColumnDefinition[];
+    columnExtensions?: Partial<LooseColumnDefinition>;
+    editableColumns?: string[];
+    leftColumns?: string[];
+    rightColumns?: string[];
+    customColumns?: CustomColumnDefinition[];
+    contextMenuItems?: ConvertableToMenuItem;
+    highlightedRow?: any;
+    RowDetail?: RowDetailsFunc;
+    selected?: RowSelectionValue;
+    cellSelection?: CellSelectionValue;
+    onEditComplete?: (editInfo: TypeEditInfo) => void;
+    onSelectionChange?: OnSelectionChangeFunc;
+    onCellSelectionChange?: OnCellSelectionChangeFunc;
+    onRowClick?: (rowIndex: number, row: any) => void;
+    onRowDoubleClick?: (rowIndex: number, row: any) => void;
+    onLimitChange?: (v: number) => void;
+    onSkipChange?: (v: number) => void;
+    skip?: number;
+    limit?: number;
+    editable?: boolean | ((editValue: any, cellProps: any) => boolean);
+    advancedFilterFields?: string[];
+    loading?: boolean;
+    dark?: boolean;
+    delayedSize?: boolean;
+    allowChildRows?: boolean;
+    looseCacheCheck?: boolean;
+    className?: string;
+};
+export declare function AzGrid(props: AzGridProps): React.JSX.Element;
+export default AzGrid;

package/dist/src/views/DataGrid.js

@@ -0,0 +1,377 @@
+"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 _func_grid = require("../func/func_grid");
+var _controls = require("@azrico/controls");
+var _react = _interopRequireWildcard(require("react"));
+var _func_child = require("../func/func_child");
+var _object = require("@azrico/object");
+var _reactdatagridEnterprise = _interopRequireDefault(require("@inovua/reactdatagrid-enterprise"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _reactUseSize = require("react-use-size");
+var _lodash = _interopRequireDefault(require("lodash.debounce"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/* -------------------------------------------------------------------------- */
+const defaultOptions = {
+  //filterTypes: defaultfilterTypes,
+  remoteFilter: false,
+  remoteSort: false,
+  editStartEvent: 'click',
+  rowReorderColumn: false,
+  resizable: true,
+  columnUserSelect: true,
+  rowIndexColumn: true,
+  rowHeight: 35
+};
+const forcedOptions = {
+  idProperty: '__table_id',
+  nodesProperty: '__children'
+};
+const dynamic_option_names = ['selected', 'cellSelection', 'loading', 'limit', 'skip'];
+/* -------------------------------------------------------------------------- */
+function AzGrid(props) {
+  const gridRefBackup = _react.default.useRef(null);
+  const gridRef = props.gridRef || gridRefBackup;
+  /* -------------------------------------------------------------------------- */
+  /*                                   Columns                                  */
+  /* -------------------------------------------------------------------------- */
+  const cached_columns = _react.default.useMemo(() => {
+    return (0, _func_grid.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 => {
+    return await (0, _func_grid.ApplyDataSource)(props.dataSource, {
+      skip: dt === null || dt === void 0 ? void 0 : dt.skip,
+      limit: dt === null || dt === void 0 ? void 0 : dt.limit,
+      cached_data: cached_data,
+      last_cache_info: last_cache_info
+    });
+  }, [props.dataSource]);
+  const base_gridOptions = _react.default.useMemo(() => {
+    const firstcolumn = cached_columns[0];
+    const licenseKey = props.licenseKey || (0, _func_grid.get_default_key)();
+    const events = {
+      onSkipChange: props.onSkipChange,
+      onLimitChange: props.onLimitChange,
+      onEditComplete: props.onEditComplete
+    };
+    const extra_ops = {
+      onSelectionChange: props.onSelectionChange,
+      onCellSelectionChange: props.onCellSelectionChange,
+      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(() => {
+    const finalres = {
+      ...base_gridOptions,
+      ...props.gridOptions,
+      ...forcedOptions
+    };
+    //append filter types instead of replacing it
+    if (finalres.filterTypes) finalres.filterTypes = Object.assign({}, _reactdatagridEnterprise.default.defaultProps.filterTypes, finalres.filterTypes);
+    return finalres;
+  }, [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,
+    gridRef: gridRef,
+    static_gridOptions: static_gridOptions,
+    dynamic_gridOptions: dynamic_gridOptions,
+    columns: cached_columns,
+    dataSource: dataSource,
+    highlightedRow: props.highlightedRow
+  });
+}
+/* -------------------------------------------------------------------------- */
+/**
+ * Wrapper for menu events
+ * @param props
+ * @returns
+ */
+function DataGridEventsWrapper(props) {
+  /* -------------------------------------------------------------------------- */
+  const click_data = _react.default.useRef(null);
+  const [menuAnchorEl, set_menuAnchorEl] = _react.default.useState(null);
+  const [menuRow, set_menuRow] = _react.default.useState(null);
+  /* -------------------------------------------------------------------------- */
+  /*                              refresh functions                             */
+  /* -------------------------------------------------------------------------- */
+  const refreshColumn = _react.default.useCallback(col => {
+    const dt = props.gridRef.current.ungroupedData;
+    for (let index = 0; index < dt.length; index++) {
+      props.gridRef.current.setItemPropertyAt(index, col, dt[index][col]);
+    }
+  }, [props.gridRef.current]);
+  const refresh = _react.default.useCallback(() => {
+    const dt = props.gridRef.current.ungroupedData;
+    for (let index = 0; index < dt.length; index++) {
+      props.gridRef.current.setItemAt(index, {}, {
+        replace: false
+      });
+    }
+  }, [props.gridRef.current]);
+  _react.default.useEffect(() => {
+    if (!props.gridRef.current) return;
+    props.gridRef.current['refresh'] = refresh;
+    props.gridRef.current['refreshColumn'] = refreshColumn;
+  }, [props.gridRef.current, props.dataSource, refresh, refreshColumn]);
+  /* -------------------------------------------------------------------------- */
+  /*                                   events                                   */
+  /* -------------------------------------------------------------------------- */
+  const onRowClick = _react.default.useCallback((rowProps, event) => {
+    const nowDate = Date.now();
+    const lastclick = click_data.current[(0, _func_grid.get_row_id)(rowProps)];
+    if (lastclick) {
+      const diffTime = Math.abs(nowDate - lastclick);
+      if (diffTime < 400) {
+        click_data.current[(0, _func_grid.get_row_id)(rowProps)] = null;
+        return props.onRowDoubleClick && props.onRowDoubleClick(rowProps.rowIndex, rowProps.data);
+      }
+    }
+    click_data.current[(0, _func_grid.get_row_id)(rowProps)] = nowDate;
+    return props.onRowClick && props.onRowClick(rowProps.rowIndex, rowProps.data);
+  }, [props.onRowClick, props.onRowDoubleClick]);
+  _react.default.useEffect(() => {
+    click_data.current = {};
+  }, [props.dataSource]);
+  /* ------------------------------- ContextMenu ------------------------------ */
+  const onRowContextMenu = _react.default.useCallback((rowProps, event) => {
+    if (!rowProps || !rowProps.data || _func_child.func_selection.has_selection()) {
+      update_menuRow(null, null);
+      return true;
+    }
+    event.preventDefault();
+    const realRow = (0, _func_grid.find_realData)(rowProps.dataSourceArray, event.target, rowProps.data);
+    const anEl = _func_child.func_selection.getVirtualElement(event.clientX, event.clientY);
+    update_menuRow(realRow, anEl);
+    return false;
+  }, []);
+  const update_menuRow = _react.default.useCallback((r = null, el = null) => {
+    set_menuRow(r || null);
+    set_menuAnchorEl(el || null);
+  }, []);
+  /* -------------------------------------------------------------------------- */
+  const onRenderRow = (0, _react.useCallback)(rowProps => {
+    // save the original handlers to be called later
+    rowProps['data-row-id'] = (0, _func_grid.get_row_id)(rowProps.data);
+  }, []);
+  /* -------------------------------------------------------------------------- */
+  /**
+   * Merge click events into grid options
+   */
+  const static_gridOptions = _react.default.useMemo(() => {
+    const events = {
+      onRowClick: onRowClick,
+      onRowContextMenu: onRowContextMenu
+    };
+    const renderProps = {
+      onRenderRow: onRenderRow
+    };
+    return {
+      ...props.static_gridOptions,
+      ...events,
+      ...renderProps
+    };
+  }, [props.static_gridOptions]);
+  /* -------------------------------------------------------------------------- */
+  return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_controls.ContextMenu, {
+    menuAnchorEl: menuAnchorEl,
+    menuRow: menuRow,
+    close: update_menuRow,
+    dontAutoClose: false,
+    menu_items: props.contextMenuItems
+  }), props.details_dataSource ? _react.default.createElement(DataGridDetailsWrapper, {
+    ...props,
+    static_gridOptions: static_gridOptions
+  }) : _react.default.createElement(DataGridSizeWrapper, {
+    ...props,
+    static_gridOptions: static_gridOptions
+  }));
+}
+function DataGridDetailsWrapper(props) {
+  const cached_details_columns = _react.default.useMemo(() => {
+    return (0, _func_grid.ApplyColumnData)(props.details_columns);
+  }, [props.details_columns]);
+  const cached_data = _react.default.useRef();
+  const last_cache_info = _react.default.useRef();
+  const details_dataSource = _react.default.useCallback(async dt => {
+    const res = await (0, _func_grid.ApplyDataSource)(props.details_dataSource, {
+      skip: dt.skip,
+      limit: dt.limit,
+      cached_data: cached_data,
+      last_cache_info: last_cache_info
+    });
+    return res;
+  }, [props.details_dataSource]);
+  const renderDetailsGrid = ({
+    data
+  }) => {
+    return _react.default.createElement(_reactdatagridEnterprise.default, {
+      defaultFilterValue: props.details_filter,
+      dataSource: details_dataSource,
+      columns: cached_details_columns
+    });
+  };
+  /**
+   * Merge details into grid
+   */
+  const static_gridOptions = _react.default.useMemo(() => {
+    const finalresult = props.static_gridOptions || {};
+    finalresult['renderDetailsGrid'] = renderDetailsGrid;
+    return finalresult;
+  }, [props.static_gridOptions]);
+  return _react.default.createElement(DataGridSizeWrapper, {
+    ...props,
+    static_gridOptions: static_gridOptions
+  });
+}
+function DataGridSizeWrapper(props) {
+  if (props.delayedSize) {
+    return _react.default.createElement(DataGridDelayedSizeWrapper, {
+      ...props
+    });
+  } else {
+    return _react.default.createElement(DataGridNormalSizeWrapper, {
+      ...props
+    });
+  }
+}
+/* -------------------------------------------------------------------------- */
+function DataGridNormalSizeWrapper(props) {
+  return props.advancedFilterFields ? _react.default.createElement(DataGridSearchWrapper, {
+    ...props
+  }) : _react.default.createElement(DataGridCore, {
+    ...props
+  });
+}
+function DataGridDelayedSizeWrapper(props) {
+  const {
+    ref,
+    height,
+    width
+  } = (0, _reactUseSize.useComponentSize)();
+  return _react.default.createElement("div", {
+    ref: ref,
+    className: 'azgrid-filler azgrid-nooverflow '
+  }, _react.default.createElement("div", {
+    className: 'azgrid-delayedresize azgrid-flexlayout',
+    style: {
+      height: height,
+      width: width
+    }
+  }, props.advancedFilterFields ? _react.default.createElement(DataGridSearchWrapper, {
+    ...props
+  }) : _react.default.createElement(DataGridCore, {
+    ...props
+  })));
+}
+function DataGridSearchWrapper(props) {
+  const [search, set_search] = _react.default.useState('');
+  const [filteredData, set_filteredData] = _react.default.useState([]);
+  const currentSearch = _react.default.useRef('');
+  const currentDS = _react.default.useRef([]);
+  const try_search = _react.default.useCallback((0, _lodash.default)(() => {
+    if (!Array.isArray(currentDS.current)) {
+      return;
+    }
+    let newData = [];
+    if (currentSearch.current) {
+      const visibleColumns = props.gridRef.current.visibleColumns;
+      const columns_to_search = (0, _object.array_intersection)(props.advancedFilterFields || [], visibleColumns.map(r => r.id));
+      const lowerSearchText = currentSearch.current.toLowerCase().trim();
+      if (!lowerSearchText || columns_to_search.length === 0) newData = currentDS.current;else {
+        newData = currentDS.current.filter(p => {
+          for (let index = 0; index < columns_to_search.length; index++) {
+            const col = columns_to_search[index];
+            const v = (p[col] + '').toLowerCase(); //value of column
+            if (v && v.indexOf(lowerSearchText) != -1) {
+              //if one column is matching then the row is a match
+              return true;
+            }
+          }
+          return false;
+        });
+      }
+    } else newData = currentDS.current;
+    set_filteredData(newData);
+  }, 1000), []);
+  _react.default.useEffect(() => {
+    (0, _object.fn_eval)(props.dataSource).then(r => {
+      currentDS.current = typeof r === 'object' ? r.data || r : r;
+      searchIfNeeded();
+    });
+  }, [props.dataSource]);
+  _react.default.useEffect(() => {
+    currentSearch.current = search;
+    searchIfNeeded();
+  }, [search]);
+  function searchIfNeeded() {
+    if (!search) {
+      set_filteredData(props.dataSource);
+    } else try_search();
+  }
+  return _react.default.createElement("div", {
+    className: 'azgrid-flexed azgrid-flexlayout azgrid-nooverflow'
+  }, _react.default.createElement("form", {
+    className: 'azgrid-searcharea'
+  }, _react.default.createElement("label", null, "Search", _react.default.createElement("input", {
+    type: "text",
+    name: "name",
+    value: search,
+    onChange: e => set_search(e.target.value)
+  }))), _react.default.createElement(DataGridCore, {
+    ...props,
+    dataSource: filteredData
+  }));
+}
+function DataGridCore(props) {
+  return _react.default.createElement("div", {
+    className: (0, _clsx.default)(props.className, 'azgrid-flexed', 'azgrid-flexlayout')
+  }, _react.default.createElement(_reactdatagridEnterprise.default, {
+    ...props.static_gridOptions,
+    ...props.dynamic_gridOptions,
+    rowIndexColumn: true,
+    handle: ref => {
+      if (ref) props.gridRef.current = ref.current;
+    },
+    className: 'azgrid-flexed',
+    columns: props.columns,
+    dataSource: props.dataSource
+  }), props.children);
+}
+/* -------------------------------------------------------------------------- */
+/* -------------------------------------------------------------------------- */
+/* -------------------------------------------------------------------------- */
+/* -------------------------------------------------------------------------- */
+/* -------------------------------------------------------------------------- */
+var _default = exports.default = AzGrid;

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,22 @@
+"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(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var _default = exports.default = _DataGrid.default;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@azrico/reactgrid",
-	"version": "1.3.40",
+	"version": "1.3.42",
 	"main": "dist/index.js",
 	"description": "React Datagrid",
 	"author": "Azrideus <MehrdadTavangar@gmail.com>",

package/src/func/func_child.ts

@@ -2,10 +2,10 @@ type mrow = { __parent__table_id: any; __table_id: any; __children?: any[] };
 type converted_row = { parent: any; self: any; data: mrow };
 
 function get_parentId(obj) {
-	return obj.__parent__table_id || obj.parent;
+	return obj.__parent__table_id ?? obj.parent ?? obj.parentid;
 }
 function get_selfId(obj) {
-	return obj.__table_id;
+	return obj.__table_id ?? obj._id;
 }
 //given an array of rows, fixes parent,child relations
 export function fix_parent_child_relations<T extends mrow>(rows: T[]): T[] {