es-grid-template 1.5.1 → 1.5.2

package/es/grid-component/ColumnsChoose.js

@@ -489,7 +489,7 @@ export const ColumnsChoose = props => {
       autoExpandParent: autoExpandParent
       // treeData={treeData}
       ,
-      treeData: columns,
+      treeData: columns.filter(it => !columnsGroup?.includes(it.field)),
       defaultExpandAll: true,
       checkable: true
       // onSelect={(keys, info) => {

package/es/grid-component/EditableCell.js

@@ -61,7 +61,8 @@ const EditableCell = props => {
     getValues,
     handleCellChange,
     getRowKey,
-    errors
+    errors,
+    id
   } = useContext(TableContext);
   const datePickerRef = React.useRef(null);
   const dateTimePickerRef = React.useRef(null);
@@ -160,7 +161,7 @@ const EditableCell = props => {
           popupClassName: 'be-popup-container',
           status: isInvalid ? 'error' : undefined,
           "data-tooltip-content": message,
-          "data-tooltip-id": "tooltip-form-error"
+          "data-tooltip-id": `${id}-tooltip-form-error`
         });
       case 'datetime':
         return /*#__PURE__*/React.createElement(DatePicker
@@ -216,7 +217,7 @@ const EditableCell = props => {
           popupClassName: 'be-popup-container',
           status: isInvalid ? 'error' : undefined,
           "data-tooltip-content": message,
-          "data-tooltip-id": "tooltip-form-error"
+          "data-tooltip-id": `${id}-tooltip-form-error`
         });
       case 'month':
       case 'quarter':
@@ -242,7 +243,7 @@ const EditableCell = props => {
           popupClassName: 'be-popup-container',
           status: isInvalid ? 'error' : undefined,
           "data-tooltip-content": message,
-          "data-tooltip-id": "tooltip-form-error"
+          "data-tooltip-id": `${id}-tooltip-form-error`
         });
       case 'week':
         const weekFormat = getDatepickerFormat(editType, cellFormat);
@@ -262,7 +263,7 @@ const EditableCell = props => {
           popupClassName: 'be-popup-container',
           status: isInvalid ? 'error' : undefined,
           "data-tooltip-content": message,
-          "data-tooltip-id": "tooltip-form-error"
+          "data-tooltip-id": `${id}-tooltip-form-error`
         });
       case 'time':
         const timeFormat = getDatepickerFormat(editType, cellFormat);
@@ -289,7 +290,7 @@ const EditableCell = props => {
           popupClassName: 'be-popup-container',
           status: isInvalid ? 'error' : undefined,
           "data-tooltip-content": message,
-          "data-tooltip-id": "tooltip-form-error"
+          "data-tooltip-id": `${id}-tooltip-form-error`
         });
       case 'selectTable':
         const rr = selectColumns ?? [];
@@ -327,6 +328,7 @@ const EditableCell = props => {
           options: options,
           defaultOptions: options,
           value: valueSelectTable,
+          rowData: record,
           onChange: (val, option) => {
             onChange(val ?? '');
             const formState = getValues();
@@ -396,7 +398,7 @@ const EditableCell = props => {
             label: inputKey ?? 'label'
           },
           "data-tooltip-content": message,
-          "data-tooltip-id": "tooltip-form-error"
+          "data-tooltip-id": `${id}-tooltip-form-error`
         });
       case 'select':
         let valueSelect = value;
@@ -454,7 +456,7 @@ const EditableCell = props => {
             label: inputKey ?? 'label'
           },
           "data-tooltip-content": message,
-          "data-tooltip-id": "tooltip-form-error"
+          "data-tooltip-id": `${id}-tooltip-form-error`
         });
       case 'asyncSelect':
         let valueAsyncSelect = value;
@@ -551,7 +553,7 @@ const EditableCell = props => {
             label: inputKey ?? 'label'
           },
           "data-tooltip-content": message,
-          "data-tooltip-id": "tooltip-form-error"
+          "data-tooltip-id": `${id}-tooltip-form-error`
         });
       case 'treeSelect':
         // let valueTreeSelect
@@ -624,7 +626,7 @@ const EditableCell = props => {
           popupClassName: 'be-popup-container',
           status: isInvalid ? 'error' : undefined,
           "data-tooltip-content": message,
-          "data-tooltip-id": "tooltip-form-error"
+          "data-tooltip-id": `${id}-tooltip-form-error`
         });
       case 'checkbox':
         return /*#__PURE__*/React.createElement("div", {
@@ -847,7 +849,7 @@ const EditableCell = props => {
             }
           },
           "data-tooltip-content": message,
-          "data-tooltip-id": "tooltip-form-error"
+          "data-tooltip-id": `${id}-tooltip-form-error`
         }));
       default:
         return /*#__PURE__*/React.createElement(Input, {
@@ -910,7 +912,7 @@ const EditableCell = props => {
           onChange: onChange,
           status: isInvalid ? 'error' : undefined,
           "data-tooltip-content": message,
-          "data-tooltip-id": "tooltip-form-error"
+          "data-tooltip-id": `${id}-tooltip-form-error`
         });
     }
   };

package/es/grid-component/InternalTable.d.ts

@@ -4,8 +4,6 @@ import type { GridTableProps } from "./type";
 import 'dayjs/locale/es';
 import 'dayjs/locale/vi';
 import './styles.scss';
-import 'rc-master-ui/es/date-range-picker/styles/index.less';
-import 'rc-master-ui/assets/index.css';
 export declare const SELECTION_COLUMN: {};
 declare const InternalTable: <RecordType extends object>(props: GridTableProps<RecordType>) => React.JSX.Element;
 export default InternalTable;

package/es/grid-component/InternalTable.js

@@ -3,7 +3,7 @@ import React, { createContext, Fragment, useCallback, useContext, useState } fro
 // import {Resizable} from "react-resizable";
 import 'react-resizable/css/styles.css';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
-import { addRowIdArray, booleanOperator, findItemByKey, findItemPath, getFormat, getTypeFilter, numberOperator, removeColumns, stringOperator, translateOption, updateArrayByKey, updateColumnsByGroup, updateData } from "./hooks";
+import { addRowIdArray, booleanOperator, findItemByKey, findItemPath, getFormat, getTypeFilter, groupArrayByColumns, numberOperator, removeColumns, stringOperator, translateOption, updateArrayByKey, updateColumnsByGroup, updateData } from "./hooks";
 import dayjs from "dayjs";
 import 'dayjs/locale/es';
 import 'dayjs/locale/vi';
@@ -16,8 +16,8 @@ import viDr from "rc-master-ui/es/locales/vi_VN";
 // import useColumns from "./hooks/useColumns";
 
 import "./styles.scss";
-import 'rc-master-ui/es/date-range-picker/styles/index.less';
-import 'rc-master-ui/assets/index.css';
+// import 'rc-master-ui/assets/index.css'
+
 import { flatColumns2, renderContent, renderFilter } from "./hooks/columns";
 import Group from "./table/Group";
 import Swal from "sweetalert2";
@@ -224,8 +224,13 @@ const InternalTable = props => {
   });
   const [tooltipContent, setTooltipContent] = useState('');
   const mergedData = React.useMemo(() => {
+    // return addRowIdArray(dataSource)
+
+    if (groupSetting && groupSetting.client !== false) {
+      return groupArrayByColumns(dataSource, groupColumns);
+    }
     return addRowIdArray(dataSource);
-  }, [dataSource]);
+  }, [dataSource, groupColumns, groupSetting]);
   const [columns, setColumns] = React.useState([]);
   React.useEffect(() => {
     if (propsHeight) {
@@ -496,7 +501,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/es/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/es/grid-component/async-select/index.js

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

package/es/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/es/grid-component/async-table-select/index.js

@@ -7,6 +7,7 @@ export function AsyncTableSelect({
   debounceTimeout = 500,
   defaultOptions,
   columns,
+  rowData,
   ...props
 }) {
   const [options, setOptions] = useState(defaultOptions ?? []);
@@ -19,11 +20,13 @@ export function AsyncTableSelect({
       if (loadOptions) {
         loadOptions(value, newOptions => {
           setOptions(newOptions);
+        }, {
+          rowData
         });
       }
     };
     return debounce(fetchOptions, debounceTimeout);
-  }, [loadOptions, debounceTimeout]);
+  }, [debounceTimeout, loadOptions, defaultOptions, rowData]);
   useEffect(() => {
     setOptions(defaultOptions ?? []);
   }, [defaultOptions]);

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

@@ -189,7 +189,7 @@ export const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, vis
         format: dateRangeFormat,
         value: dateRangeValue,
         onChange: value => {
-          const newDateRangeValue = value ? [value[0] ? moment(value[0]).format() : '', value[1] ? moment(value[0]).format() : ''] : [];
+          const newDateRangeValue = value ? [value[0] ? moment(value[0]).format() : '', value[1] ? moment(value[1]).format() : ''] : [];
           setSelectedKeys(newDateRangeValue);
         }
       })))));

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

@@ -143,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/es/grid-component/hooks/utils.js

@@ -2029,4 +2029,43 @@ export const isSelectedCell = (selectedCells, rowIndex, colIndex) => {
   }
   const key = `${rowIndex}-${colIndex}`;
   return selectedCells.has(key);
-};
+};
+export 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/es/grid-component/table/GridEdit.js

@@ -207,6 +207,7 @@ const GridEdit = props => {
     showDefaultContext,
     validate,
     setTooltipContent,
+    onBlur,
     ...rest
   } = props;
   const ref = useRef(null);
@@ -990,6 +991,9 @@ const GridEdit = props => {
       // if (ref.current && tableId && !tableId.contains(event.target as Node)) {
 
       if (ref.current && tableBody && !tableBody.contains(event.target)) {
+        if (editingKey.current) {
+          onBlur?.(dataSource);
+        }
         setTimeout(() => {
           // setEditingKey('')
           editingKey.current = '';
@@ -1017,7 +1021,7 @@ const GridEdit = props => {
       document.removeEventListener('mousedown', handleClickOutside);
       // document.removeEventListener('touchstart', handleClickOutside)
     };
-  }, [id]);
+  }, [dataSource, id, onBlur]);
   const triggerDragPaste = pastesArray => {
     const mergedSet = new Set([...selectedCells.current, ...pastesArray]);
     const tmpCols = {
@@ -1434,6 +1438,7 @@ const GridEdit = props => {
       setTimeout(() => {
         //   setEditingKey('')
         editingKey.current = '';
+        onBlur?.(dataSource);
       });
     }
 
@@ -2268,7 +2273,8 @@ const GridEdit = props => {
           title: getValueCell(column, record[column.field], format),
           'data-col-index': colIndex,
           'data-row-index': rowNumber,
-          'data-tooltip-id': "tooltip-cell-content",
+          // 'data-tooltip-id': "tooltip-cell-content",
+          'data-tooltip-id': `${id}-tooltip-cell-content`,
           // editing: isEditing(record) && rowEditable?.(record) !== false && isEditable(column as any, record),
           editing: record.rowId === editingKey.current && rowEditable?.(record) !== false && isEditable(column, record),
           cellEditing: cellEditing.current,
@@ -2491,6 +2497,7 @@ const GridEdit = props => {
     id: id
   }, /*#__PURE__*/React.createElement(TableContext.Provider, {
     value: {
+      id: id ?? '',
       rowKey,
       form,
       format,

package/es/grid-component/table/Group.js

@@ -20,10 +20,12 @@ const Group = props => {
     groupAble,
     expandable,
     dataSource,
+    rowKey,
     getRowKey,
     groupSetting,
     groupColumns,
     triggerGroupColumns,
+    onExpandClick,
     ...rest
   } = props;
   const {
@@ -59,9 +61,15 @@ const Group = props => {
     } else {
       newExpandedKeys = [...mergedExpandedKeys, key];
       // gọi sự kiện expand
+
+      onExpandClick?.({
+        expandedKeys: newExpandedKeys,
+        key: key,
+        rowData: record
+      });
     }
     setInnerExpandedKeys(newExpandedKeys);
-  }, [getRowKey, mergedExpandedKeys, dataSource]);
+  }, [getRowKey, dataSource, mergedExpandedKeys, onExpandClick]);
   const handleExpandAllGroup = () => {
     setInnerExpandedKeys(findAllChildrenKeys(dataSource, getRowKey, childrenColumnName) ?? []);
   };
@@ -108,6 +116,7 @@ const Group = props => {
   }, /*#__PURE__*/React.createElement(TableGrid, _extends({}, rest, {
     t: t,
     id: id,
+    rowKey: rowKey,
     columns: columns,
     style: {
       ...style,

package/es/grid-component/type.d.ts

@@ -84,6 +84,9 @@ export type ToolbarClick = {
     item: any;
     column: any;
 };
+export type LoadOptionsArgs = {
+    rowData?: any;
+};
 export type ColumnTable<RecordType = AnyObject> = Omit<RcColumnType<RecordType>, 'headerTemplate' | 'title' | 'format' | 'commandItems'> & {
     field?: string;
     key?: any;
@@ -195,6 +198,12 @@ export interface TableProps<RecordType = AnyObject> extends Omit<RcTableProps<Re
     onCellClick?: (args: ICellClick, callback?: any) => void;
     rowEditable?: (rowData: RecordType) => boolean;
     validate?: any;
+    onBlur?: (data: RecordType[]) => void;
+    onExpandClick?: (args: {
+        expandedKeys: string[];
+        key: string;
+        rowData: any;
+    }) => void;
 }
 export type PaginationConfig = TablePaginationConfig & {
     currentPage?: number;

package/es/grid-component/useContext.d.ts

@@ -19,6 +19,7 @@ export interface IContext<RecordType> {
     getValues?: any;
     handleCellChange?: (args: ContextCellChange<RecordType>) => void;
     getRowKey?: GetRowKey<RecordType>;
+    id: string;
 }
 export type ContextCellChange<RecordType = AnyObject> = {
     key: string | keyof RecordType | GetRowKey<RecordType>;

package/es/grid-component/useContext.js

@@ -3,5 +3,6 @@ import { createContext } from 'react';
 // import {AnyObject} from "antd/es/_util/type";
 
 export const TableContext = /*#__PURE__*/createContext({
-  rowKey: 'id'
+  rowKey: 'rowId',
+  id: ''
 });

package/lib/grid-component/ColumnsChoose.js

@@ -498,7 +498,7 @@ const ColumnsChoose = props => {
       autoExpandParent: autoExpandParent
       // treeData={treeData}
       ,
-      treeData: columns,
+      treeData: columns.filter(it => !columnsGroup?.includes(it.field)),
       defaultExpandAll: true,
       checkable: true
       // onSelect={(keys, info) => {

package/lib/grid-component/EditableCell.js

@@ -63,7 +63,8 @@ const EditableCell = props => {
     getValues,
     handleCellChange,
     getRowKey,
-    errors
+    errors,
+    id
   } = (0, _react.useContext)(_useContext.TableContext);
   const datePickerRef = _react.default.useRef(null);
   const dateTimePickerRef = _react.default.useRef(null);
@@ -162,7 +163,7 @@ const EditableCell = props => {
           popupClassName: 'be-popup-container',
           status: isInvalid ? 'error' : undefined,
           "data-tooltip-content": message,
-          "data-tooltip-id": "tooltip-form-error"
+          "data-tooltip-id": `${id}-tooltip-form-error`
         });
       case 'datetime':
         return /*#__PURE__*/_react.default.createElement(_antd.DatePicker
@@ -218,7 +219,7 @@ const EditableCell = props => {
           popupClassName: 'be-popup-container',
           status: isInvalid ? 'error' : undefined,
           "data-tooltip-content": message,
-          "data-tooltip-id": "tooltip-form-error"
+          "data-tooltip-id": `${id}-tooltip-form-error`
         });
       case 'month':
       case 'quarter':
@@ -244,7 +245,7 @@ const EditableCell = props => {
           popupClassName: 'be-popup-container',
           status: isInvalid ? 'error' : undefined,
           "data-tooltip-content": message,
-          "data-tooltip-id": "tooltip-form-error"
+          "data-tooltip-id": `${id}-tooltip-form-error`
         });
       case 'week':
         const weekFormat = (0, _hooks.getDatepickerFormat)(editType, cellFormat);
@@ -264,7 +265,7 @@ const EditableCell = props => {
           popupClassName: 'be-popup-container',
           status: isInvalid ? 'error' : undefined,
           "data-tooltip-content": message,
-          "data-tooltip-id": "tooltip-form-error"
+          "data-tooltip-id": `${id}-tooltip-form-error`
         });
       case 'time':
         const timeFormat = (0, _hooks.getDatepickerFormat)(editType, cellFormat);
@@ -291,7 +292,7 @@ const EditableCell = props => {
           popupClassName: 'be-popup-container',
           status: isInvalid ? 'error' : undefined,
           "data-tooltip-content": message,
-          "data-tooltip-id": "tooltip-form-error"
+          "data-tooltip-id": `${id}-tooltip-form-error`
         });
       case 'selectTable':
         const rr = selectColumns ?? [];
@@ -329,6 +330,7 @@ const EditableCell = props => {
           options: options,
           defaultOptions: options,
           value: valueSelectTable,
+          rowData: record,
           onChange: (val, option) => {
             onChange(val ?? '');
             const formState = getValues();
@@ -398,7 +400,7 @@ const EditableCell = props => {
             label: inputKey ?? 'label'
           },
           "data-tooltip-content": message,
-          "data-tooltip-id": "tooltip-form-error"
+          "data-tooltip-id": `${id}-tooltip-form-error`
         });
       case 'select':
         let valueSelect = value;
@@ -456,7 +458,7 @@ const EditableCell = props => {
             label: inputKey ?? 'label'
           },
           "data-tooltip-content": message,
-          "data-tooltip-id": "tooltip-form-error"
+          "data-tooltip-id": `${id}-tooltip-form-error`
         });
       case 'asyncSelect':
         let valueAsyncSelect = value;
@@ -553,7 +555,7 @@ const EditableCell = props => {
             label: inputKey ?? 'label'
           },
           "data-tooltip-content": message,
-          "data-tooltip-id": "tooltip-form-error"
+          "data-tooltip-id": `${id}-tooltip-form-error`
         });
       case 'treeSelect':
         // let valueTreeSelect
@@ -626,7 +628,7 @@ const EditableCell = props => {
           popupClassName: 'be-popup-container',
           status: isInvalid ? 'error' : undefined,
           "data-tooltip-content": message,
-          "data-tooltip-id": "tooltip-form-error"
+          "data-tooltip-id": `${id}-tooltip-form-error`
         });
       case 'checkbox':
         return /*#__PURE__*/_react.default.createElement("div", {
@@ -849,7 +851,7 @@ const EditableCell = props => {
             }
           },
           "data-tooltip-content": message,
-          "data-tooltip-id": "tooltip-form-error"
+          "data-tooltip-id": `${id}-tooltip-form-error`
         }));
       default:
         return /*#__PURE__*/_react.default.createElement(_antd.Input, {
@@ -912,7 +914,7 @@ const EditableCell = props => {
           onChange: onChange,
           status: isInvalid ? 'error' : undefined,
           "data-tooltip-content": message,
-          "data-tooltip-id": "tooltip-form-error"
+          "data-tooltip-id": `${id}-tooltip-form-error`
         });
     }
   };

package/lib/grid-component/InternalTable.d.ts

@@ -4,8 +4,6 @@ import type { GridTableProps } from "./type";
 import 'dayjs/locale/es';
 import 'dayjs/locale/vi';
 import './styles.scss';
-import 'rc-master-ui/es/date-range-picker/styles/index.less';
-import 'rc-master-ui/assets/index.css';
 export declare const SELECTION_COLUMN: {};
 declare const InternalTable: <RecordType extends object>(props: GridTableProps<RecordType>) => React.JSX.Element;
 export default InternalTable;

package/lib/grid-component/InternalTable.js

@@ -20,8 +20,6 @@ var _vi_VN = _interopRequireDefault(require("rc-master-ui/es/date-picker/locale/
 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");
-require("rc-master-ui/es/date-range-picker/styles/index.less");
-require("rc-master-ui/assets/index.css");
 var _columns = require("./hooks/columns");
 var _Group = _interopRequireDefault(require("./table/Group"));
 var _sweetalert = _interopRequireDefault(require("sweetalert2"));
@@ -44,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);
@@ -235,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) {
@@ -507,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/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.js

@@ -202,7 +202,7 @@ const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, visible, s
         format: dateRangeFormat,
         value: dateRangeValue,
         onChange: value => {
-          const newDateRangeValue = value ? [value[0] ? (0, _moment.default)(value[0]).format() : '', value[1] ? (0, _moment.default)(value[0]).format() : ''] : [];
+          const newDateRangeValue = value ? [value[0] ? (0, _moment.default)(value[0]).format() : '', value[1] ? (0, _moment.default)(value[1]).format() : ''] : [];
           setSelectedKeys(newDateRangeValue);
         }
       })))));

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

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

@@ -21,7 +21,9 @@ exports.getCellsByPosition = getCellsByPosition;
 exports.getCellsByPosition2 = getCellsByPosition2;
 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;
@@ -31,8 +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.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.updateData = 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");
@@ -2149,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/table/GridEdit.js

@@ -211,6 +211,7 @@ const GridEdit = props => {
     showDefaultContext,
     validate,
     setTooltipContent,
+    onBlur,
     ...rest
   } = props;
   const ref = (0, _react.useRef)(null);
@@ -994,6 +995,9 @@ const GridEdit = props => {
       // if (ref.current && tableId && !tableId.contains(event.target as Node)) {
 
       if (ref.current && tableBody && !tableBody.contains(event.target)) {
+        if (editingKey.current) {
+          onBlur?.(dataSource);
+        }
         setTimeout(() => {
           // setEditingKey('')
           editingKey.current = '';
@@ -1021,7 +1025,7 @@ const GridEdit = props => {
       document.removeEventListener('mousedown', handleClickOutside);
       // document.removeEventListener('touchstart', handleClickOutside)
     };
-  }, [id]);
+  }, [dataSource, id, onBlur]);
   const triggerDragPaste = pastesArray => {
     const mergedSet = new Set([...selectedCells.current, ...pastesArray]);
     const tmpCols = {
@@ -1438,6 +1442,7 @@ const GridEdit = props => {
       setTimeout(() => {
         //   setEditingKey('')
         editingKey.current = '';
+        onBlur?.(dataSource);
       });
     }
 
@@ -2272,7 +2277,8 @@ const GridEdit = props => {
           title: (0, _columns.getValueCell)(column, record[column.field], format),
           'data-col-index': colIndex,
           'data-row-index': rowNumber,
-          'data-tooltip-id': "tooltip-cell-content",
+          // 'data-tooltip-id': "tooltip-cell-content",
+          'data-tooltip-id': `${id}-tooltip-cell-content`,
           // editing: isEditing(record) && rowEditable?.(record) !== false && isEditable(column as any, record),
           editing: record.rowId === editingKey.current && rowEditable?.(record) !== false && (0, _hooks.isEditable)(column, record),
           cellEditing: cellEditing.current,
@@ -2495,6 +2501,7 @@ const GridEdit = props => {
     id: id
   }, /*#__PURE__*/_react.default.createElement(_useContext.TableContext.Provider, {
     value: {
+      id: id ?? '',
       rowKey,
       form,
       format,

package/lib/grid-component/table/Group.js

@@ -29,10 +29,12 @@ const Group = props => {
     groupAble,
     expandable,
     dataSource,
+    rowKey,
     getRowKey,
     groupSetting,
     groupColumns,
     triggerGroupColumns,
+    onExpandClick,
     ...rest
   } = props;
   const {
@@ -68,9 +70,15 @@ const Group = props => {
     } else {
       newExpandedKeys = [...mergedExpandedKeys, key];
       // gọi sự kiện expand
+
+      onExpandClick?.({
+        expandedKeys: newExpandedKeys,
+        key: key,
+        rowData: record
+      });
     }
     setInnerExpandedKeys(newExpandedKeys);
-  }, [getRowKey, mergedExpandedKeys, dataSource]);
+  }, [getRowKey, dataSource, mergedExpandedKeys, onExpandClick]);
   const handleExpandAllGroup = () => {
     setInnerExpandedKeys((0, _hooks.findAllChildrenKeys)(dataSource, getRowKey, childrenColumnName) ?? []);
   };
@@ -117,6 +125,7 @@ const Group = props => {
   }, /*#__PURE__*/_react.default.createElement(_TableGrid.default, (0, _extends2.default)({}, rest, {
     t: t,
     id: id,
+    rowKey: rowKey,
     columns: columns,
     style: {
       ...style,

package/lib/grid-component/type.d.ts

@@ -84,6 +84,9 @@ export type ToolbarClick = {
     item: any;
     column: any;
 };
+export type LoadOptionsArgs = {
+    rowData?: any;
+};
 export type ColumnTable<RecordType = AnyObject> = Omit<RcColumnType<RecordType>, 'headerTemplate' | 'title' | 'format' | 'commandItems'> & {
     field?: string;
     key?: any;
@@ -195,6 +198,12 @@ export interface TableProps<RecordType = AnyObject> extends Omit<RcTableProps<Re
     onCellClick?: (args: ICellClick, callback?: any) => void;
     rowEditable?: (rowData: RecordType) => boolean;
     validate?: any;
+    onBlur?: (data: RecordType[]) => void;
+    onExpandClick?: (args: {
+        expandedKeys: string[];
+        key: string;
+        rowData: any;
+    }) => void;
 }
 export type PaginationConfig = TablePaginationConfig & {
     currentPage?: number;

package/lib/grid-component/useContext.d.ts

@@ -19,6 +19,7 @@ export interface IContext<RecordType> {
     getValues?: any;
     handleCellChange?: (args: ContextCellChange<RecordType>) => void;
     getRowKey?: GetRowKey<RecordType>;
+    id: string;
 }
 export type ContextCellChange<RecordType = AnyObject> = {
     key: string | keyof RecordType | GetRowKey<RecordType>;

package/lib/grid-component/useContext.js

@@ -8,5 +8,6 @@ var _react = require("react");
 // import {AnyObject} from "antd/es/_util/type";
 
 const TableContext = exports.TableContext = /*#__PURE__*/(0, _react.createContext)({
-  rowKey: 'id'
+  rowKey: 'rowId',
+  id: ''
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "es-grid-template",
-  "version": "1.5.1",
+  "version": "1.5.2",
   "description": "es-grid-template",
   "keywords": [
     "react",
@@ -20,13 +20,13 @@
   "scripts": {
     "__compile": "father build && ",
     "compile": "father build && sass assets/index.scss assets/index.css",
-    "docs:build": "dumi build",
+    "__docs:build": "dumi build",
     "__docs:deploy": "gh-pages -d dist",
     "lint": "eslint src/ --ext .tsx,.ts,.jsx,.js",
-    "now-build": "npm run docs:build",
+    "__now-build": "npm run docs:build",
     "prepare": "dumi setup",
     "prepublishOnly": "npm run compile",
-    "postpublish": "npm run docs:build",
+    "___postpublish": "npm run docs:build",
     "__postpublish": "npm run docs:build && npm run docs:deploy",
     "start": "dumi dev",
     "test": "vitest --watch false",
@@ -61,7 +61,7 @@
     "rc-checkbox": "^3.5.0",
     "rc-dropdown": "^4.2.1",
     "rc-field-form": "^2.6.0",
-    "rc-master-ui": "^1.1.33",
+    "rc-master-ui": "^1.1.34",
     "rc-select": "^14.16.3",
     "rc-tooltip": "^6.3.0",
     "rc-tree": "^5.10.1",