es-grid-template 1.5.0 → 1.5.2

package/lib/grid-component/InternalTable.js

@@ -17,6 +17,8 @@ var _GridEdit = _interopRequireDefault(require("./table/GridEdit"));
 var _Grid = _interopRequireDefault(require("./table/Grid"));
 var _en_US = _interopRequireDefault(require("rc-master-ui/es/date-picker/locale/en_US"));
 var _vi_VN = _interopRequireDefault(require("rc-master-ui/es/date-picker/locale/vi_VN"));
+var _en_US2 = _interopRequireDefault(require("rc-master-ui/es/locales/en_US"));
+var _vi_VN2 = _interopRequireDefault(require("rc-master-ui/es/locales/vi_VN"));
 require("./styles.scss");
 var _columns = require("./hooks/columns");
 var _Group = _interopRequireDefault(require("./table/Group"));
@@ -40,6 +42,8 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 
 // import useColumns from "./hooks/useColumns";
 
+// import 'rc-master-ui/assets/index.css'
+
 // import {CSS} from "@dnd-kit/utilities";
 
 _dayjs.default.extend(_customParseFormat.default);
@@ -213,6 +217,7 @@ const InternalTable = props => {
   // }, [height, id])
 
   const local = lang && lang === 'en' ? _en_US.default : _vi_VN.default;
+  const dateRangeLocale = lang && lang === 'en' ? _en_US2.default : _vi_VN2.default;
   const buddhistLocale = {
     ...local,
     lang: {
@@ -230,8 +235,13 @@ const InternalTable = props => {
   });
   const [tooltipContent, setTooltipContent] = (0, _react.useState)('');
   const mergedData = _react.default.useMemo(() => {
+    // return addRowIdArray(dataSource)
+
+    if (groupSetting && groupSetting.client !== false) {
+      return (0, _hooks.groupArrayByColumns)(dataSource, groupColumns);
+    }
     return (0, _hooks.addRowIdArray)(dataSource);
-  }, [dataSource]);
+  }, [dataSource, groupColumns, groupSetting]);
   const [columns, setColumns] = _react.default.useState([]);
   _react.default.useEffect(() => {
     if (propsHeight) {
@@ -330,7 +340,7 @@ const InternalTable = props => {
         style: {
           marginBottom: 8
         }
-      }, (0, _columns.renderFilter)(column, selectedKeys, setSelectedKeys, confirm, visible, searchValue, setSearchValue, propDataSourceFilter ?? [], buddhistLocale, locale, t)), /*#__PURE__*/_react.default.createElement(_antd.Space, {
+      }, (0, _columns.renderFilter)(column, selectedKeys, setSelectedKeys, confirm, visible, searchValue, setSearchValue, propDataSourceFilter ?? [], buddhistLocale, locale, t, format, dateRangeLocale)), /*#__PURE__*/_react.default.createElement(_antd.Space, {
         style: {
           justifyContent: 'end',
           width: '100%'
@@ -502,7 +512,8 @@ const InternalTable = props => {
               'cell-group': groupColumns && data.children,
               'cell-group-fixed': groupColumns && data.children && column.field === firstNonGroupColumn?.field
             }),
-            'data-tooltip-id': "tooltip-cell-content"
+            // 'data-tooltip-id': "tooltip-cell-content"
+            'data-tooltip-id': `${id}-tooltip-cell-content`
           };
         },
         render: (value, record, rowIndex) => {

package/lib/grid-component/TableGrid.js

@@ -485,7 +485,7 @@ const TableGrid = props => {
 
         // const dec = (col.format?.decimalScale || col.format?.decimalScale === 0) ? col.format?.decimalScale : format?.decimalScale
         const dec = cellFormat?.decimalScale;
-        const sumValue = col.type === 'number' ? (0, _hooks.sumDataByField)(dataSource, col?.key) : 0;
+        const sumValue = col.type === 'number' ? (0, _hooks.sumDataByField)((0, _hooks.filterDataByColumns4)(dataSource, filterStates), col?.key) : 0;
         const value = !(0, _hooks.isEmpty)(sumValue) ? dec || dec === 0 ? parseFloat(Number(sumValue).toFixed(dec)).toString() : sumValue.toString() : '0';
         const cellValue = col.type === 'number' && col.isSummary !== false ? value : '';
         const numericFormatProps = {

package/lib/grid-component/async-select/index.d.ts

@@ -1,9 +1,11 @@
 import React from 'react';
 import type { BaseOptionType, DefaultOptionType } from "rc-select/lib/Select";
 import type { SelectProps } from "rc-master-ui/es/select";
+import type { LoadOptionsArgs } from "../type";
 export interface DebounceSelectProps<OptionType extends BaseOptionType = DefaultOptionType> extends SelectProps {
-    loadOptions?: (search: string, callback: (newOptions: OptionType[]) => void) => void;
+    loadOptions?: (search: string, callback: (newOptions: OptionType[]) => void, args?: LoadOptionsArgs) => void;
     debounceTimeout?: number;
     defaultOptions?: OptionType[];
+    rowData?: any;
 }
-export declare function AsyncSelect<OptionType extends BaseOptionType>({ loadOptions, debounceTimeout, defaultOptions, ...props }: DebounceSelectProps<OptionType>): React.JSX.Element;
+export declare function AsyncSelect<OptionType extends BaseOptionType>({ loadOptions, debounceTimeout, defaultOptions, rowData, ...props }: DebounceSelectProps<OptionType>): React.JSX.Element;

package/lib/grid-component/async-select/index.js

@@ -15,6 +15,7 @@ function AsyncSelect({
   loadOptions,
   debounceTimeout = 500,
   defaultOptions,
+  rowData,
   ...props
 }) {
   const [options, setOptions] = (0, _react.useState)(defaultOptions ?? []);
@@ -27,6 +28,8 @@ function AsyncSelect({
       if (loadOptions) {
         loadOptions(value, newOptions => {
           setOptions(newOptions);
+        }, {
+          rowData
         });
       }
     };

package/lib/grid-component/async-table-select/index.d.ts

@@ -1,9 +1,11 @@
 import React from 'react';
 import type { BaseOptionType, DefaultOptionType } from "rc-select/lib/Select";
 import type { TableSelectProps } from "rc-master-ui/es/table-select";
+import type { LoadOptionsArgs } from "../type";
 export interface DebounceSelectProps<OptionType extends BaseOptionType = DefaultOptionType> extends TableSelectProps {
-    loadOptions?: (search: string, callback: (newOptions: OptionType[]) => void) => void;
+    loadOptions?: (search: string, callback: (newOptions: OptionType[]) => void, args?: LoadOptionsArgs) => void;
     debounceTimeout?: number;
     defaultOptions?: OptionType[];
+    rowData?: any;
 }
-export declare function AsyncTableSelect<OptionType extends BaseOptionType>({ loadOptions, debounceTimeout, defaultOptions, columns, ...props }: DebounceSelectProps<OptionType>): React.JSX.Element;
+export declare function AsyncTableSelect<OptionType extends BaseOptionType>({ loadOptions, debounceTimeout, defaultOptions, columns, rowData, ...props }: DebounceSelectProps<OptionType>): React.JSX.Element;

package/lib/grid-component/async-table-select/index.js

@@ -16,6 +16,7 @@ function AsyncTableSelect({
   debounceTimeout = 500,
   defaultOptions,
   columns,
+  rowData,
   ...props
 }) {
   const [options, setOptions] = (0, _react.useState)(defaultOptions ?? []);
@@ -28,11 +29,13 @@ function AsyncTableSelect({
       if (loadOptions) {
         loadOptions(value, newOptions => {
           setOptions(newOptions);
+        }, {
+          rowData
         });
       }
     };
     return (0, _debounce.default)(fetchOptions, debounceTimeout);
-  }, [loadOptions, debounceTimeout]);
+  }, [debounceTimeout, loadOptions, defaultOptions, rowData]);
   (0, _react.useEffect)(() => {
     setOptions(defaultOptions ?? []);
   }, [defaultOptions]);

package/lib/grid-component/hooks/columns/index.d.ts

@@ -6,4 +6,4 @@ export declare function flatColumns<RecordType>(columns: ColumnsTable<RecordType
 export declare const flatColumns2: <RecordType>(columns: ColumnsTable<RecordType>) => ColumnsTable<RecordType>;
 export declare const getValueCell: <T>(column: ColumnTable<T>, value: any, format?: IFormat) => any;
 export declare const renderContent: <T>(column: ColumnTable<T>, value: any, record: any, index: number, format?: IFormat) => React.JSX.Element;
-export declare const renderFilter: <RecordType>(column: ColumnTable<RecordType>, selectedKeys: string[], setSelectedKeys: any, confirm: any, visible: boolean, searchValue: string, setSearchValue: any, dataSourceFilter: any[], buddhistLocale: any, locale?: TableLocale, t?: any, format?: IFormat) => React.JSX.Element;
+export declare const renderFilter: <RecordType>(column: ColumnTable<RecordType>, selectedKeys: string[], setSelectedKeys: any, confirm: any, visible: boolean, searchValue: string, setSearchValue: any, dataSourceFilter: any[], buddhistLocale: any, locale?: TableLocale, t?: any, format?: IFormat, dateRangeLocale?: any) => React.JSX.Element;

package/lib/grid-component/hooks/columns/index.js

@@ -19,9 +19,7 @@ var _number = _interopRequireDefault(require("../../number"));
 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; }
 // import {Typography} from "antd";
-const {
-  RangePicker
-} = _rcMasterUi.DatePicker;
+// const {RangePicker} = DatePicker
 
 // const { Text } = Typography;
 
@@ -138,11 +136,11 @@ const renderContent = (column, value, record, index, format) => {
   }) : column.template : content);
 };
 exports.renderContent = renderContent;
-const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, visible, searchValue, setSearchValue, dataSourceFilter, buddhistLocale, locale, t, format) => {
+const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, visible, searchValue, setSearchValue, dataSourceFilter, buddhistLocale, locale, t, format, dateRangeLocale) => {
   const cellFormat = column.format ? typeof column.format === 'function' ? column.format({}) : column.format : format;
   const type = (0, _utils.getTypeFilter)(column);
   const dateFormat = (0, _utils.getDatepickerFormat)(column?.typeFilter ?? column?.type, cellFormat) ?? 'DD/MM/YYYY';
-  const dateRangeFormat = (0, _utils.getDatepickerFormat)(column?.type, cellFormat) ?? 'DD/MM/YYYY';
+  const dateRangeFormat = (0, _utils.convertFormat)((0, _utils.getDatepickerFormat)(column?.type, cellFormat) ?? 'DD/MM/YYYY');
   const find = dataSourceFilter?.find(it => it.key === column?.field);
   const options = find ? find.data : [];
   switch (type) {
@@ -189,35 +187,25 @@ const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, visible, s
         }
       }))));
     case 'DateRange':
-      const dateRangeValue = [selectedKeys[0] ? (0, _utils.convertDateToDayjs)(new Date(selectedKeys[0]), dateRangeFormat) : '', selectedKeys[1] ? (0, _utils.convertDateToDayjs)(new Date(selectedKeys[1]), dateRangeFormat) : ''];
+      // const dateRangeValue: any = [selectedKeys[0] ? convertDateToDayjs(new Date(selectedKeys[0]), dateRangeFormat) : '', selectedKeys[1] ? convertDateToDayjs(new Date(selectedKeys[1]), dateRangeFormat) : '']
+      const dateRangeValue = selectedKeys && selectedKeys.length > 0 ? [selectedKeys[0] ? new Date(selectedKeys[0]) : '', selectedKeys[1] ? new Date(selectedKeys[1]) : ''] : null;
       return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
         className: 'mb-1'
-      }, /*#__PURE__*/_react.default.createElement(RangePicker, {
-        format: {
-          format: dateRangeFormat,
-          type: 'mask'
-        }
-        // defaultValue={dateRangeValue}
-        ,
-        value: dateRangeValue,
-        locale: buddhistLocale
-        // placeholder={['Ngày bắt đầu', 'Ngày kết thúc']}
-        ,
-        popupStyle: {
-          zIndex: 9999
+      }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.CustomProvider, {
+        locale: dateRangeLocale
+      }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.DateRangePicker
+      // placeholder={['Ngày bắt đầu', 'Ngày bắt đầu']}
+      , {
+        style: {
+          width: 300
         },
-        onChange: (value, dateString) => {
-          const newDateRangeValue = dateString[0] ? [dateString[0] ? (0, _moment.default)((0, _utils.convertDayjsToDate)(dateString[0], dateRangeFormat)).format() : '', dateString[1] ? (0, _moment.default)((0, _utils.convertDayjsToDate)(dateString[1], dateRangeFormat)).format() : ''] : '';
-
-          // setSelectedKeys(newDateValue ? [newDateValue] : [])
+        format: dateRangeFormat,
+        value: dateRangeValue,
+        onChange: value => {
+          const newDateRangeValue = value ? [value[0] ? (0, _moment.default)(value[0]).format() : '', value[1] ? (0, _moment.default)(value[1]).format() : ''] : [];
           setSelectedKeys(newDateRangeValue);
-        },
-        style: {
-          width: '100%'
         }
-        // popupClassName={'adv-popup-container'}
-        // getPopupContainer={() => menuRef.current}
-      }))));
+      })))));
     case 'Week':
       const weekValue = !(0, _utils.isEmpty)(selectedKeys[0]) ? (0, _dayjs.default)(selectedKeys[0], dateFormat) : null;
       return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {

package/lib/grid-component/hooks/utils.d.ts

@@ -36,7 +36,9 @@ export declare const getFormat: (colFormat?: IFormat, format?: IFormat) => {
     monthFormat: string;
     yearFormat: string;
 };
+export declare function convertFormat(formatStr: string): string;
 export declare const getDatepickerFormat: (type: EditType | TypeFilter | IColumnType, format?: IFormat) => string;
+export declare const getDateRangeFormat: (type: EditType | TypeFilter | IColumnType, format?: IFormat) => string;
 export declare const customWeekStartEndFormat: (value: any, weekFormat: string) => string;
 export declare const getTypeFilter: (col: ColumnTable<any>) => TypeFilter;
 export declare const updateArrayByKey: (arr: any[], element: any, key: string) => any[];
@@ -141,3 +143,4 @@ export declare const showDraggingPoint: (selectedCells: any, id?: any) => void;
 export declare const hideDraggingPoint: (selectedCells: any, id?: any) => void;
 export declare const isRangeCell: (selectedCells: any, type: string, rowIndex: number, colIndex: number) => boolean;
 export declare const isSelectedCell: (selectedCells: any, rowIndex: number, colIndex: number) => any;
+export declare function groupArrayByColumns(arr: any[], columns: string[] | undefined): any;

package/lib/grid-component/hooks/utils.js

@@ -10,16 +10,20 @@ exports.addRowsUp = addRowsUp;
 exports.checkThousandSeparator = exports.checkFieldKey = exports.checkDecimalSeparator = exports.checkChild = exports.buildConnectedRegions = void 0;
 exports.compareDate = compareDate;
 exports.compareDates = compareDates;
-exports.filterDataByColumns3 = exports.filterDataByColumns2 = exports.filterDataByColumns = exports.editAbleColumns = exports.customWeekStartEndFormat = exports.countItemsBeforeIndex = exports.convertLabelToTitle = exports.convertFlatColumn = exports.convertDayjsToDate = exports.convertDateToDayjs = exports.convertColumns = exports.convertArrayWithIndent = void 0;
+exports.convertFlatColumn = exports.convertDayjsToDate = exports.convertDateToDayjs = exports.convertColumns = exports.convertArrayWithIndent = void 0;
+exports.convertFormat = convertFormat;
+exports.filterDataByColumns3 = exports.filterDataByColumns2 = exports.filterDataByColumns = exports.editAbleColumns = exports.customWeekStartEndFormat = exports.countItemsBeforeIndex = exports.convertLabelToTitle = void 0;
 exports.filterDataByColumns4 = filterDataByColumns4;
 exports.findAllChildrenKeys = findAllChildrenKeys;
 exports.getAllVisibleKeys = exports.genPresets = exports.flattenData = exports.flattenArray = exports.findItemPath = exports.findItemByKey = void 0;
 exports.getBottomRowCells = getBottomRowCells;
 exports.getCellsByPosition = getCellsByPosition;
 exports.getCellsByPosition2 = getCellsByPosition2;
-exports.getFormat = exports.getFirstSelectCell = exports.getEditType = exports.getDefaultValue = exports.getDatepickerFormat = exports.getDateString = exports.getColumnsVisible = void 0;
+exports.getFormat = exports.getFirstSelectCell = exports.getEditType = exports.getDefaultValue = exports.getDatepickerFormat = exports.getDateString = exports.getDateRangeFormat = exports.getColumnsVisible = void 0;
 exports.getHiddenParentKeys = getHiddenParentKeys;
-exports.hideDraggingPoint = exports.getVisibleColumnKeys = exports.getTypeFilter = exports.getTemplate = exports.getRowsPasteIndex = exports.getRowNumber = exports.getLastSelectCell = void 0;
+exports.getVisibleColumnKeys = exports.getTypeFilter = exports.getTemplate = exports.getRowsPasteIndex = exports.getRowNumber = exports.getLastSelectCell = void 0;
+exports.groupArrayByColumns = groupArrayByColumns;
+exports.hideDraggingPoint = void 0;
 exports.invalidDate = invalidDate;
 exports.isArraysEqual = void 0;
 exports.isBottomMostInRanges = isBottomMostInRanges;
@@ -29,7 +33,8 @@ exports.isEmpty = exports.isEditable = exports.isDisable = void 0;
 exports.isEqualSet = isEqualSet;
 exports.isRangeCell = exports.isObjEmpty = exports.isNullOrUndefined = exports.isNameColor = void 0;
 exports.isRightMostInRegion = isRightMostInRegion;
-exports.updateData = exports.updateColumnsByGroup = exports.updateColumns = exports.updateArrayByKey = exports.transformColumns1 = exports.transformColumns = exports.totalFixedWidth = exports.sumDataByField = exports.sortedSetDSC = exports.sortedSetASC = exports.showDraggingPoint = exports.shouldInclude = exports.removeFieldRecursive = exports.removeColumns = exports.removeClassCellIndexSelected = exports.removeClassBorderPasteCell = exports.removeBorderPasteClass = exports.removeBorderClass2 = exports.removeBorderClass = exports.parseCells = exports.parseBooleanToValue = exports.onRemoveBorderSelectedCell = exports.onRemoveBgSelectedCell = exports.onRemoveBgCellIndex = exports.onAddBorderSelectedCell = exports.onAddBgSelectedCell = exports.onAddBgCellIndex = exports.newGuid = exports.mergedSets = exports.isTopMostInRegion = exports.isSelectedCell = void 0;
+exports.updateColumns = exports.updateArrayByKey = exports.transformColumns1 = exports.transformColumns = exports.totalFixedWidth = exports.sumDataByField = exports.sortedSetDSC = exports.sortedSetASC = exports.showDraggingPoint = exports.shouldInclude = exports.removeFieldRecursive = exports.removeColumns = exports.removeClassCellIndexSelected = exports.removeClassBorderPasteCell = exports.removeBorderPasteClass = exports.removeBorderClass2 = exports.removeBorderClass = exports.parseCells = exports.parseBooleanToValue = exports.onRemoveBorderSelectedCell = exports.onRemoveBgSelectedCell = exports.onRemoveBgCellIndex = exports.onAddBorderSelectedCell = exports.onAddBgSelectedCell = exports.onAddBgCellIndex = exports.newGuid = exports.mergedSets = exports.isTopMostInRegion = exports.isSelectedCell = void 0;
+exports.updateData = exports.updateColumnsByGroup = void 0;
 var _dayjs = _interopRequireDefault(require("dayjs"));
 var _moment = _interopRequireDefault(require("moment/moment"));
 var _uuid = require("uuid");
@@ -237,12 +242,57 @@ const getFormat = (colFormat, format) => {
   };
 };
 exports.getFormat = getFormat;
+function convertFormat(formatStr) {
+  // return formatStr.split('').map((char, i) => {
+  //   if (char === 'D' || char === 'd') {
+  //     return 'd'; // ngày: lowercase
+  //   }
+  //   if (char === 'Y' || char === 'y') {
+  //     return 'y'; // năm: lowercase
+  //   }
+  //   if (char === 'M' || char === 'm') {
+  //     return char; // tháng: giữ nguyên
+  //   }
+  //   return char; // separator
+  // }).join('');
+
+  return formatStr.split('').map(char => {
+    if (char === 'D' || char === 'd') return 'd';
+    if (char === 'Y' || char === 'y') return 'y';
+    if ('Hhmsa'.includes(char)) return char; // giờ, phút, giây, am/pm
+    if (char === 'M' || char === 'm') return char; // tháng: giữ nguyên
+    return char; // dấu phân cách
+  }).join('');
+}
 const getDatepickerFormat = (type, format) => {
   const typeFormat = type ? type.toLowerCase() : '';
   switch (typeFormat) {
     case "date":
     case "daterange":
-      return format?.dateFormat ?? 'DD/MM/YYYY';
+      return format?.dateFormat ?? 'dd/MM/YYYY';
+    case "datetime":
+      return format?.datetimeFormat ?? 'dd/MM/YYYY HH:mm';
+    case "week":
+      return format?.weekFormat ?? 'dd/MM';
+    case "month":
+      return format?.monthFormat ?? 'MM/YYYY';
+    case "quarter":
+      return format?.dateFormat ?? 'dd/MM/YYYY';
+    case "year":
+      return format?.yearFormat ?? 'YYYY';
+    case "time":
+      return format?.timeFormat ?? 'HH:mm';
+    default:
+      return 'dd/MM/YYYY';
+  }
+};
+exports.getDatepickerFormat = getDatepickerFormat;
+const getDateRangeFormat = (type, format) => {
+  const typeFormat = type ? type.toLowerCase() : '';
+  switch (typeFormat) {
+    case "date":
+    case "daterange":
+      return convertFormat(format?.dateFormat ?? 'DD/MM/YYYY');
     case "datetime":
       return format?.datetimeFormat ?? 'DD/MM/YYYY HH:mm';
     case "week":
@@ -259,7 +309,7 @@ const getDatepickerFormat = (type, format) => {
       return 'DD/MM/YYYY';
   }
 };
-exports.getDatepickerFormat = getDatepickerFormat;
+exports.getDateRangeFormat = getDateRangeFormat;
 const customWeekStartEndFormat = (value, weekFormat) => {
   return `${(0, _dayjs.default)(value).startOf('week').format(weekFormat)} ~ ${(0, _dayjs.default)(value).endOf('week').format(weekFormat)}`;
 };
@@ -2101,4 +2151,43 @@ const isSelectedCell = (selectedCells, rowIndex, colIndex) => {
   const key = `${rowIndex}-${colIndex}`;
   return selectedCells.has(key);
 };
-exports.isSelectedCell = isSelectedCell;
+exports.isSelectedCell = isSelectedCell;
+function groupArrayByColumns(arr, columns) {
+  const result = [];
+  if (columns) {
+    arr.forEach(item => {
+      let currentLevel = result;
+      columns.forEach((column, index) => {
+        const value = item[column];
+        const existingItem = currentLevel.find(i => i[column] === value);
+        if (existingItem) {
+          currentLevel = existingItem.children;
+        } else {
+          // const newItem = {[column]: value, field: column, rowId: !isEmpty(value) ? (value) : newGuid(), parentId: !isEmpty(item[columns[index - 1]]) ? (item[columns[index - 1]]) : null, indent: index, children: [] }
+          const newItem = {
+            [column]: value,
+            field: column,
+            rowId: newGuid(),
+            // rowId: item[column],
+            parentId: !isEmpty(item[columns[index - 1]]) ? item[columns[index - 1]] : null,
+            // parentId: item.rowId[index - 1],
+            // indent: index,
+            children: []
+          };
+          currentLevel.push(newItem);
+          currentLevel = newItem.children;
+        }
+      });
+      currentLevel.push({
+        ...item,
+        rowId: item.id ?? item.rowId,
+        parentId: !isEmpty(columns[columns.length - 1]) ? item[columns[columns.length - 1]] : null,
+        // parentId: item.rowId[columns.length - 1],
+        indent: columns.length
+      });
+    });
+    return result;
+  } else {
+    return arr;
+  }
+}

package/lib/grid-component/styles.scss

@@ -1341,3 +1341,7 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
     display: none;
   }
 }
+
+.rs-picker-popup {
+  z-index: 1660;
+}