es-grid-template 1.2.0 → 1.2.1

package/es/grid-component/table/Group.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { ColumnsTable, GridTableProps } from "../type";
+import type { GetRowKey } from "../type";
+type Props<T> = GridTableProps<T> & {
+    tableRef: any;
+    triggerChangeColumns?: (columns: ColumnsTable<T>, type: string) => void;
+    triggerChangeData?: (newData: T[], type: string) => void;
+    getRowKey: GetRowKey<T>;
+    triggerGroupColumns?: (groupedColumns: string[]) => void;
+    triggerPaste?: (pastedRows: T[], pastedColumnsArray: string[], newData: T[]) => void;
+};
+declare const Group: <RecordType extends object>(props: Props<RecordType>) => React.JSX.Element;
+export default Group;

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

@@ -0,0 +1,154 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React, { Fragment } from 'react';
+import { GridStyle } from "../GridStyle";
+import TableGrid from "../TableGrid";
+// import type {ColumnsTable} from "../type";
+
+import { findAllChildrenKeys } from "../hooks";
+import { ColumnsGroup } from "../ColumnsGroup/ColumnsGroup";
+import { flatColumns2 } from "../hooks/columns";
+import { Collapse2, Expand2 } from "becoxy-icons";
+const Group = props => {
+  const {
+    t,
+    columns,
+    height,
+    style,
+    rowHoverable,
+    groupAble,
+    expandable,
+    dataSource,
+    getRowKey,
+    groupSetting,
+    groupColumns,
+    triggerGroupColumns,
+    ...rest
+  } = props;
+  const {
+    defaultExpandedRowKeys,
+    defaultExpandAllRows
+  } = expandable || {};
+  const childrenColumnName = 'children';
+  const [innerExpandedKeys, setInnerExpandedKeys] = React.useState(() => {
+    if (defaultExpandedRowKeys) {
+      return defaultExpandedRowKeys;
+    }
+    if (defaultExpandAllRows) {
+      return findAllChildrenKeys(dataSource, getRowKey, childrenColumnName) ?? [];
+    }
+    return [];
+  });
+  const mergedExpandedKeys = React.useMemo(() => new Set(innerExpandedKeys || []), [innerExpandedKeys]);
+  const onTriggerExpand = React.useCallback(record => {
+    const key = getRowKey(record, dataSource.indexOf(record));
+    let newExpandedKeys;
+    const hasKey = mergedExpandedKeys.has(key);
+    if (hasKey) {
+      mergedExpandedKeys.delete(key);
+      newExpandedKeys = [...mergedExpandedKeys];
+    } else {
+      newExpandedKeys = [...mergedExpandedKeys, key];
+    }
+    setInnerExpandedKeys(newExpandedKeys);
+  }, [getRowKey, mergedExpandedKeys, dataSource]);
+  const handleExpandAllGroup = () => {
+    setInnerExpandedKeys(findAllChildrenKeys(dataSource, getRowKey, childrenColumnName) ?? []);
+  };
+  const handleCollapseAllGroup = () => {
+    setInnerExpandedKeys([]);
+  };
+  const handleOnGroup = value => {
+    triggerGroupColumns?.(value);
+  };
+  const groupToolbar = () => {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        gap: '10px',
+        marginRight: 10
+      }
+    }, /*#__PURE__*/React.createElement(ColumnsGroup, {
+      t: t
+      // defaultGroupColumns={['name']}
+      ,
+      unClearableLevel: groupSetting?.unClearableLevel
+      // unClearableLevel={2}
+      ,
+      columns: columns ? flatColumns2(columns) : [],
+      columnsGrouped: groupColumns,
+      onSubmit: handleOnGroup
+    }), /*#__PURE__*/React.createElement(Fragment, null, innerExpandedKeys.length > 0 ? /*#__PURE__*/React.createElement(Collapse2, {
+      fontSize: 18,
+      color: '#555555',
+      onClick: handleCollapseAllGroup
+    }) : /*#__PURE__*/React.createElement(Expand2, {
+      fontSize: 18,
+      color: '#555555',
+      onClick: handleExpandAllGroup
+    })));
+  };
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(GridStyle, {
+    heightTable: height,
+    style: {
+      position: 'relative'
+    }
+  }, /*#__PURE__*/React.createElement(TableGrid, _extends({}, rest, {
+    t: t,
+    columns: columns,
+    style: {
+      ...style,
+      minHeight: height
+    },
+    rowHoverable: rowHoverable ?? true,
+    dataSource: dataSource,
+    getRowKey: getRowKey,
+    groupAble: groupAble,
+    groupSetting: groupSetting,
+    expandable: {
+      expandIconColumnIndex: 3,
+      defaultExpandAllRows: true,
+      indentSize: 25,
+      expandIcon: args => {
+        const {
+          record,
+          expanded,
+          onExpand
+        } = args;
+
+        // @ts-ignore
+        if (record?.children?.length > 0 || record?.isChildren) {
+          return expanded ? /*#__PURE__*/React.createElement("button", {
+            onClick: e => {
+              e.preventDefault();
+              e.stopPropagation();
+              onExpand(record, e);
+              if (groupAble) {
+                onTriggerExpand(record);
+              }
+            },
+            className: 'ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-expanded'
+          }) : /*#__PURE__*/React.createElement("button", {
+            onClick: e => {
+              e.preventDefault();
+              e.stopPropagation();
+              onExpand(record, e);
+              if (groupAble) {
+                onTriggerExpand(record);
+              }
+            },
+            className: 'ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed'
+          });
+        } else {
+          return /*#__PURE__*/React.createElement("button", {
+            className: 'ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced'
+          });
+        }
+      },
+      expandedRowKeys: groupAble ? innerExpandedKeys : undefined,
+      ...expandable
+    },
+    groupToolbar: groupToolbar,
+    groupColumns: groupColumns
+  }))));
+};
+export default Group;

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

@@ -84,6 +84,7 @@ export type ToolbarClick = {
 };
 export type ColumnType<RecordType> = Omit<RcColumnType<RecordType>, 'headerTemplate'> & {
     field?: string;
+    key?: any;
     type?: IColumnType;
     isSummary?: boolean;
     summaryTemplate?: (data: number, key: string) => ReactElement | ReactNode;
@@ -96,8 +97,11 @@ export type ColumnType<RecordType> = Omit<RcColumnType<RecordType>, 'headerTempl
     placeholder?: string;
     showInColumnChoose?: boolean;
     typeFilter?: TypeFilter;
+    source?: any[];
     showFilterSearch?: boolean;
     headerText?: string;
+    headerTooltip?: boolean | string | (() => ReactNode | ReactElement);
+    columnGroupText?: string;
     textAlign?: ITextAlign;
     frozen?: Frozen;
     template?: ReactNode | ReactElement | ((value: any, record: RecordType, index: number) => ReactNode | ReactElement);
@@ -107,7 +111,7 @@ export type ColumnType<RecordType> = Omit<RcColumnType<RecordType>, 'headerTempl
     commandItems?: CommandItem[];
     children?: ColumnType<RecordType>[];
 };
-export type ColumnEditType<RecordType> = Omit<ColumnType<RecordType>, 'children'> & {
+export type ColumnEditType<RecordType = AnyObject> = Omit<ColumnType<RecordType>, 'children'> & {
     editType?: EditType | ((rowData?: RecordType) => EditType);
     disable?: boolean | ((rowData: any) => boolean);
     isClearable?: boolean;
@@ -126,6 +130,11 @@ export type ColumnTable<RecordType = AnyObject> = ColumnEditType<RecordType> | C
 export type ColumnsTable<RecordType = AnyObject> = (ColumnType<RecordType> | ColumnEditType<RecordType>)[];
 export interface TableProps<RecordType> extends Omit<RcTableProps<RecordType>, 'columns' | 'rowSelection' | 'loading' | 'dataSource' | 'summary'> {
     editAble?: boolean;
+    groupAble?: boolean;
+    groupColumns?: string[];
+    groupSetting?: IGroupSetting;
+    onChooseColumns?: (props: IOnChooseColumns) => void;
+    showCustomTooltip?: boolean;
     sortMultiple?: boolean;
     dataSource: RecordType[];
     columns: ColumnsTable<RecordType>;
@@ -167,13 +176,24 @@ export interface TableProps<RecordType> extends Omit<RcTableProps<RecordType>, '
     allowResizing?: boolean;
     showToolbar?: boolean;
     onDataChange?: (data: RecordType[]) => void;
+    defaultValue?: AnyObject | (() => AnyObject);
     summary?: boolean | ((data: readonly RecordType[]) => React.ReactNode);
 }
 export interface TableEditProps<RecordType = AnyObject> extends Omit<TableProps<RecordType>, 'columns'> {
     columns: ColumnsTable<RecordType>;
     onCellPaste?: ICellPasteModel<RecordType>;
     onCellChange?: (args: CellChangeArgs<RecordType>, handleCallback: (rowData: any, index: any, value?: any) => void) => void;
+    onCellClick?: (args: ICellClick, callback?: any) => void;
 }
+export type ICellClick = {
+    index: number;
+    indexCol?: number;
+    rowId: string | number;
+    type: 'Editing' | 'Default';
+    field: string;
+    cellValue: any;
+    rowData: any;
+};
 export type GridTableProps<RecordType = AnyObject> = TableProps<RecordType> | TableEditProps<RecordType>;
 export interface CommandItem {
     id: string;
@@ -187,6 +207,22 @@ export interface CommandItem {
     client?: boolean;
     confirmDialog?: boolean;
 }
+export type IGroupSetting = {
+    client?: boolean;
+    onGroup?: (props: IOnGroup) => void;
+    hiddenColumnGroup?: boolean;
+    unClearableLevel?: 1 | 2 | 3 | undefined;
+};
+type IOnGroup = {
+    columnGrouped: string[];
+    columns: ColumnsTable;
+    flattenColumns: ColumnsTable;
+};
+export type IOnChooseColumns = {
+    columns: ColumnsTable;
+    showColumns: ColumnsTable;
+    flattenColumns: ColumnsTable;
+};
 export type CellChangeArgs<T> = {
     type: 'onPaste' | 'onChange' | 'onCellPaste';
     value: any;
@@ -250,3 +286,4 @@ export type IFormat = {
 };
 export type GetRowKey<RecordType> = (record: RecordType, index?: number) => Key;
 export type Presets = Required<ColorPickerProps>['presets'][number];
+export {};

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

@@ -2,6 +2,7 @@ import React from "react";
 import type { ColumnsTable } from "./type";
 export type IColumnsChoose<RecordType> = {
     columns: ColumnsTable<RecordType>;
+    columnsGroup?: string[];
     triggerChangeColumns?: (columns: ColumnsTable<RecordType>, type: string) => void;
     t?: any;
 };

package/lib/grid-component/ColumnsChoose.js

@@ -12,6 +12,7 @@ var _icons = require("@ant-design/icons");
 var _hooks = require("./hooks");
 var _tree = _interopRequireDefault(require("rc-master-ui/es/tree"));
 var _SearchOutlined = _interopRequireDefault(require("@ant-design/icons/SearchOutlined"));
+var _useMergedState = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
 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 type {TableColumnsType} from "rc-master-ui";
@@ -24,7 +25,8 @@ const ColumnsChoose = props => {
   const {
     columns: propsColumns,
     triggerChangeColumns,
-    t
+    t,
+    columnsGroup
   } = props;
 
   // const dataList: { key: React.Key; title: string }[] = [];
@@ -37,8 +39,10 @@ const ColumnsChoose = props => {
   // const searchRef: any = useRef()
 
   // const [columns, setColumns] = useState<TableColumnsType>([])
-  const [selectedKeys, setSelectedKeys] = (0, _react.useState)([]);
-  const [isManualUpdate, setIsManualUpdate] = (0, _react.useState)(false);
+
+  // const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
+
+  // const [isManualUpdate, setIsManualUpdate] = useState(false);
 
   // useEffect(() => {
   //
@@ -48,24 +52,42 @@ const ColumnsChoose = props => {
   // }, [propsColumns])
 
   const columns = (0, _react.useMemo)(() => {
-    return propsColumns.filter(it => it.key || it.dataIndex && it.showInColumnChoose !== false);
+    // return  propsColumns.filter((it) => (it.key || it.dataIndex) && it.showInColumnChoose !== false && !columnsGroup?.includes(it.field as string))
+    return propsColumns.filter(it => (it.key || it.dataIndex) && it.showInColumnChoose !== false);
     // setColumns(defaultColumns as TableColumnsType)
-  }, [propsColumns]);
-  (0, _react.useEffect)(() => {
-    const defaultColumns = propsColumns.filter(it => it.key || it.dataIndex && it.showInColumnChoose !== false);
-    const defaultSelectedKeys = (0, _hooks.getVisibleColumnKeys)(defaultColumns);
-    if (!isManualUpdate) {
-      setSelectedKeys(defaultSelectedKeys);
-    }
-    setIsManualUpdate(false);
-  }, [propsColumns]);
-  const defaultSelectedKeys = (0, _react.useMemo)(() => {
-    return (0, _hooks.getVisibleColumnKeys)(propsColumns);
-  }, [propsColumns]);
+  }, [columnsGroup, propsColumns]);
+
+  // useEffect(() => {
+  //
+  //   const defaultColumns = propsColumns.filter((it) => it.key || it.dataIndex && it.showInColumnChoose !== false)
+  //
+  //   const defaultSelectedKeys = getVisibleColumnKeys(defaultColumns)
+  //
+  //   if (!isManualUpdate) {
+  //     setSelectedKeys(defaultSelectedKeys)
+  //   }
+  //   setIsManualUpdate(false);
+  //
+  //
+  // }, [isManualUpdate, propsColumns])
+
+  const defaultSelectedKeys = _react.default.useMemo(() => {
+    const rs = propsColumns.filter(it => (it.key || it.dataIndex) && it.showInColumnChoose !== false && !columnsGroup?.includes(it.field));
+    return (0, _hooks.getVisibleColumnKeys)(rs);
+  }, [columnsGroup, propsColumns]);
+  const [mergedSelectedKeys, setMergedSelectedKeys] = (0, _useMergedState.default)(defaultSelectedKeys || [], {
+    value: defaultSelectedKeys
+  });
+
+  //
+  // const defaultSelectedKeys = useMemo(() => {
+  //
+  //   return getVisibleColumnKeys(propsColumns)
+  //
+  // }, [propsColumns])
+
   const [clicked, setClicked] = (0, _react.useState)(false);
   const [autoExpandParent, setAutoExpandParent] = (0, _react.useState)(true);
-  // const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([]);
-  // const [searchValue, setSearchValue] = useState('');
 
   // const treeData = useMemo(() => {
   //   const loop = (data: TreeDataNode[]): TreeDataNode[] =>
@@ -141,16 +163,19 @@ const ColumnsChoose = props => {
     setAutoExpandParent(true);
   };
   const onCheck = keys => {
-    setSelectedKeys(keys);
-    setIsManualUpdate(true);
+    console.log('keys', keys);
+    // setSelectedKeys(keys)
+    setMergedSelectedKeys(keys);
+    // setIsManualUpdate(true)
   };
   const handleAccept = () => {
-    const rs1 = (0, _hooks.updateColumns)(propsColumns, selectedKeys);
+    // const rs1  =  updateColumns(propsColumns, selectedKeys)
+    const rs1 = (0, _hooks.updateColumns)(propsColumns, mergedSelectedKeys);
     triggerChangeColumns?.(rs1, 'columnChoose');
     hide();
   };
   const handleCancel = () => {
-    setSelectedKeys(defaultSelectedKeys);
+    // setSelectedKeys(defaultSelectedKeys)
     hide();
   };
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_antd.Popover, {
@@ -197,12 +222,15 @@ const ColumnsChoose = props => {
       // }}
       ,
       onCheck: keys => onCheck(keys),
-      multiple: true,
-      checkedKeys: selectedKeys,
-      defaultCheckedKeys: selectedKeys
+      multiple: true
+      // checkedKeys={selectedKeys}
+      ,
+
+      defaultCheckedKeys: mergedSelectedKeys
       // defaultCheckedKeys={defaultSelectedKeys}
+      // selectedKeys={[]}
       ,
-      selectedKeys: [],
+
       height: window.innerHeight - 200
     }), /*#__PURE__*/_react.default.createElement(BoxAction, {
       className: 'px-1'
@@ -224,6 +252,13 @@ const ColumnsChoose = props => {
   }, /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
     arrow: false,
     title: 'Cài đặt'
-  }, /*#__PURE__*/_react.default.createElement(_icons.SettingOutlined, null))));
+  }, /*#__PURE__*/_react.default.createElement(_icons.SettingOutlined, {
+    size: 16,
+    color: '#555555',
+    style: {
+      fontSize: 16,
+      color: '#555555'
+    }
+  }))));
 };
 exports.ColumnsChoose = ColumnsChoose;

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

@@ -0,0 +1,12 @@
+import React from "react";
+type IColumnsGroup = {
+    columns: any[];
+    dataSource?: string[];
+    onSubmit: (value: any) => void;
+    t?: any;
+    columnsGrouped?: string[];
+    unClearableLevel?: number;
+    defaultGroupColumns?: string[];
+};
+export declare const ColumnsGroup: (props: IColumnsGroup) => React.JSX.Element;
+export {};

package/lib/grid-component/ColumnsGroup/ColumnsGroup.js

@@ -0,0 +1,234 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ColumnsGroup = void 0;
+var _becoxyIcons = require("becoxy-icons");
+var _react = _interopRequireWildcard(require("react"));
+var _antd = require("antd");
+var _rcMasterUi = require("rc-master-ui");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+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 {
+//   // groupArrayByColumns,
+//   // ungroupArray,
+//   // useOnClickOutside
+// } from "../../hooks"
+
+// import {SettingOutlined} from "@ant-design/icons";
+
+const BoxAction = _styledComponents.default.div.withConfig({
+  displayName: "BoxAction",
+  componentId: "es-grid-template__sc-1uj3tyy-0"
+})(["border-top:1px solid #c4c4c4;padding-top:.75rem;display:flex;justify-content:end;gap:10px;.btn-action{background:none !important;border:none !important;&.btn-action-submit{color:#df4318;&:disabled{background-color:#f0f0f0 !important;}&:hover{color:#df4318 !important;}}&:hover{background-color:#f0f0f0 !important;}}"]);
+const ColumnsGroup = props => {
+  const {
+    columns,
+    columnsGrouped,
+    onSubmit,
+    unClearableLevel,
+    defaultGroupColumns,
+    t
+  } = props;
+  const menuRef = (0, _react.useRef)();
+  const [tempGroup, setTempGroup] = (0, _react.useState)([]);
+  const [clicked, setClicked] = (0, _react.useState)(false);
+  const rsCol = _react.default.useMemo(() => {
+    return columns.filter(it => it.hidden !== true && !tempGroup.includes(it.field));
+  }, [columns, tempGroup]);
+  const options = _react.default.useMemo(() => {
+    return rsCol.map(it => ({
+      ...it,
+      value: it.field,
+      label: t ? t(it.columnGroupText ?? it.headerText ?? it.title) : it.columnGroupText ?? it.headerText ?? it.title
+    }));
+  }, [rsCol, t]);
+
+  // React.useEffect(() => {
+  //   if(columnsGrouped) {
+  //     setTempGroup([...columnsGrouped])
+  //   }
+  //
+  // }, [!!columnsGrouped])
+
+  const onChangeGroupColumns = (option, index) => {
+    // if (option) {
+    //   tempGroup[index] = option
+    // } else {
+    //   tempGroup.splice(index, 1)
+    // }
+    // setTempGroup([...tempGroup])
+
+    const cloneTemp = [...tempGroup];
+    if (option) {
+      cloneTemp[index] = option;
+    } else {
+      cloneTemp.splice(index, 1);
+    }
+    setTempGroup([...cloneTemp]);
+  };
+  const handleGroup = () => {
+    // setColumnsGrouped([...tempGroup])
+    setClicked(false);
+    // const dt = ungroupArray(dataSource)
+
+    // const rs = groupArrayByColumns(dt, [...tempGroup])
+
+    // setResource([...rs])
+    onSubmit([...tempGroup]);
+  };
+  const handleClear = () => {
+    // setColumnsGrouped([])
+    setTempGroup(defaultGroupColumns ? defaultGroupColumns : []);
+    // setIsOpen(false)
+    setClicked(false);
+    // const dt = ungroupArray(dataSource)
+
+    // const rs = groupArrayByColumns(dt, [])
+
+    // setResource([...rs])
+    onSubmit(defaultGroupColumns ? defaultGroupColumns : []);
+  };
+  const handleClickChange = open => {
+    console.log('open', open);
+    setClicked(open);
+    if (open) {
+      if (columnsGrouped) {
+        setTempGroup([...columnsGrouped]);
+      }
+    }
+    if (!open) {
+      setTempGroup([]);
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_antd.Popover, {
+    placement: 'bottomLeft',
+    content: /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        minWidth: 250
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      ref: menuRef,
+      style: {
+        position: 'relative'
+      }
+    }, /*#__PURE__*/_react.default.createElement("p", {
+      className: 'fw-bold'
+    }, "Nh\xF3m d\u1EEF li\u1EC7u theo c\u1ED9t"), /*#__PURE__*/_react.default.createElement("div", {
+      className: 'mb-1',
+      style: {
+        marginBottom: '1rem'
+      }
+    }, /*#__PURE__*/_react.default.createElement("p", {
+      className: 'm-0',
+      style: {
+        margin: 0
+      }
+    }, "M\u1EE9c 1"), /*#__PURE__*/_react.default.createElement(_rcMasterUi.Select, {
+      style: {
+        width: '100%'
+      }
+      // labelInValue={true}
+      // options={columns.filter((it: any) => !tempGroup.includes(it.field))}
+      // options={columns && columns.length > 0 ? options : []}
+      ,
+      options: options,
+      value: tempGroup?.[0],
+      onChange: val => onChangeGroupColumns(val, 0),
+      allowClear: !tempGroup?.[1] && !(unClearableLevel && unClearableLevel - 1 >= 0)
+      // fieldNames={{
+      //   value: 'field',
+      //   label: 'headerText'
+      // }}
+      ,
+      labelRender: labelProps => {
+        const it = columns.find(col => col.field === labelProps.value);
+        return t ? t(it.columnGroupText ?? it.headerText ?? it.title) : it.columnGroupText ?? it.headerText ?? it.title;
+      }
+      // hideSelectedOptions
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: 'mb-1',
+      style: {
+        marginBottom: '1rem'
+      }
+    }, /*#__PURE__*/_react.default.createElement("p", {
+      className: 'm-0',
+      style: {
+        margin: 0
+      }
+    }, "M\u1EE9c 2"), /*#__PURE__*/_react.default.createElement(_rcMasterUi.Select, {
+      style: {
+        width: '100%'
+      },
+      options: options,
+      value: tempGroup?.[1],
+      onChange: val => onChangeGroupColumns(val, 1),
+      allowClear: !tempGroup?.[2] && !(unClearableLevel && unClearableLevel - 2 >= 0)
+      // hideSelectedOptions
+      // fieldNames={{
+      //   value: 'field',
+      //   label: 'headerText'
+      // }}
+      ,
+      labelRender: labelProps => {
+        const it = columns.find(col => col.field === labelProps.value);
+        return t ? t(it.columnGroupText ?? it.headerText ?? it.title) : it.columnGroupText ?? it.headerText ?? it.title;
+      }
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: 'mb-1',
+      style: {
+        marginBottom: '1rem'
+      }
+    }, /*#__PURE__*/_react.default.createElement("p", {
+      className: 'm-0',
+      style: {
+        margin: 0
+      }
+    }, "M\u1EE9c 3"), /*#__PURE__*/_react.default.createElement(_rcMasterUi.Select, {
+      style: {
+        width: '100%'
+      },
+      options: options,
+      value: tempGroup?.[2],
+      onChange: val => onChangeGroupColumns(val, 2),
+      allowClear: !!tempGroup?.[2] && !(unClearableLevel && unClearableLevel - 3 >= 0)
+      // fieldNames={{
+      //   value: 'field',
+      //   label: 'headerText'
+      // }}
+      ,
+      labelRender: labelProps => {
+        const it = columns.find(col => col.field === labelProps.value);
+        return t ? t(it.columnGroupText ?? it.headerText ?? it.title) : it.columnGroupText ?? it.headerText ?? it.title;
+      }
+    }))), /*#__PURE__*/_react.default.createElement(BoxAction, {
+      className: 'px-1'
+    }, /*#__PURE__*/_react.default.createElement(_antd.Button
+    // className={classnames('btn-action btn-action-submit', {
+    //   // disable: !columns.find((item) => item.visible !== false || item.visible)
+    // })}
+    , {
+      onClick: handleGroup
+      // disabled={!columns.find((item) => item.visible !== false || item.visible)}
+    }, t ? t('Thực hiện') : 'Thực hiện'), /*#__PURE__*/_react.default.createElement(_antd.Button, {
+      className: 'btn-action btn-action-cancel',
+      onClick: handleClear
+    }, t ? t('Clear') : 'Clear'))),
+    trigger: "click",
+    open: clicked,
+    onOpenChange: handleClickChange,
+    arrow: false
+  }, /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
+    arrow: false,
+    title: 'Nhóm dữ liệu'
+  }, /*#__PURE__*/_react.default.createElement(_becoxyIcons.Group, {
+    fontSize: 18,
+    style: {
+      cursor: 'pointer'
+    }
+  }))));
+};
+exports.ColumnsGroup = ColumnsGroup;

package/lib/grid-component/ColumnsGroup/index.d.ts

@@ -0,0 +1 @@
+export * from './ColumnsGroup';

package/lib/grid-component/ColumnsGroup/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _ColumnsGroup = require("./ColumnsGroup");
+Object.keys(_ColumnsGroup).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ColumnsGroup[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ColumnsGroup[key];
+    }
+  });
+});