es-grid-template 1.2.6 → 1.2.7

package/es/grid-component/ColumnsChoose.js

@@ -536,7 +536,8 @@ export const ColumnsChoose = props => {
     trigger: "click",
     open: clicked,
     onOpenChange: handleClickChange,
-    arrow: false
+    arrow: false,
+    zIndex: 1065
   }, /*#__PURE__*/React.createElement(Tooltip, {
     arrow: false,
     title: 'Cài đặt'

package/es/grid-component/ContextMenu.js

@@ -94,7 +94,8 @@ const ContextMenu = props => {
           items: contextMenuItems,
           style: {
             minWidth: 200,
-            maxHeight: pos.viewportHeight - 20
+            maxHeight: pos.viewportHeight - 20,
+            width: 'fit-content'
           },
           rootClassName: 'popup-context-menu',
           onClick: e => {

package/es/grid-component/EditableCell.js

@@ -267,15 +267,15 @@ const EditableCell = props => {
         const columnsTable = rr.map(colSelect => {
           return {
             title: colSelect.headerTemplate ? colSelect.headerTemplate : t ? t(colSelect.headerText) : colSelect.headerText,
-            dataIndex: colSelect.dataIndex,
+            dataIndex: colSelect.field ?? colSelect.dataIndex,
             key: colSelect.dataIndex,
             render: colSelect.template ? (text, recd, ind) => /*#__PURE__*/React.createElement(React.Fragment, null, colSelect.template?.({
               value: text,
               rowData: recd,
               column: colSelect,
-              field: colSelect.dataIndex,
+              field: colSelect.field,
               index: ind,
-              [colSelect.dataIndex]: text
+              [colSelect.field]: text
             })) : undefined,
             width: colSelect.width,
             ellipsis: true,
@@ -323,8 +323,9 @@ const EditableCell = props => {
             width: '100%',
             height: '100%'
           },
-          defaultOpen: column.field === cellEditing?.column.field,
-          autoFocus: true,
+          defaultOpen: column.field === cellEditing?.column.field
+          // autoFocus={true}
+          ,
           placeholder: t ? t('Select') : 'Select',
           allowClear: column.isClearable ?? false,
           maxTagCount: 'responsive',
@@ -397,8 +398,10 @@ const EditableCell = props => {
           showSearch: true,
           mode: isMulti || selectMode === 'checkbox' ? 'multiple' : undefined,
           valueSelectAble: true,
-          defaultOpen: column.field === cellEditing?.column.field,
-          autoFocus: true,
+          defaultOpen: column.field === cellEditing?.column.field
+          // autoFocus={true}
+          ,
+
           style: {
             width: '100%',
             height: '100%'
@@ -448,8 +451,9 @@ const EditableCell = props => {
             });
           },
           showSearch: true,
-          defaultOpen: column.field === cellEditing?.column.field,
-          autoFocus: true,
+          defaultOpen: column.field === cellEditing?.column.field
+          // autoFocus={true}
+          ,
           mode: isMulti || selectMode === 'checkbox' ? 'multiple' : undefined,
           valueSelectAble: true,
           style: {
@@ -528,8 +532,9 @@ const EditableCell = props => {
           treeData: newTreeData,
           placeholder: t ? t('Select') : 'Select',
           treeDefaultExpandAll: true,
-          defaultOpen: column.field === cellEditing?.column.field,
-          autoFocus: true,
+          defaultOpen: column.field === cellEditing?.column.field
+          // autoFocus={true}
+          ,
           virtual: true,
           allowClear: true
           // maxTagTextLength={column?.editSelectSettings?.showItems}

package/es/grid-component/InternalTable.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { Resizable } from "react-resizable";
 import 'react-resizable/css/styles.css';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
-import { addRowIdArray,
+import { addRowIdArray, findItemByKey,
 // convertFlatColumn,
 removeColumns,
 // addRowIdArray,
@@ -19,7 +19,10 @@ import useColumns from "./hooks/useColumns";
 import "./styles.scss";
 import { flatColumns2 } from "./hooks/columns";
 import Group from "./table/Group";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
 dayjs.extend(customParseFormat);
+const MySwal = withReactContent(Swal);
 
 // const ASCEND = 'ascend';
 // const DESCEND = 'descend';
@@ -77,6 +80,8 @@ const InternalTable = props => {
     groupAble,
     groupSetting,
     groupColumns,
+    commandClick,
+    commandSettings,
     ...rest
   } = props;
   const rowKey = React.useMemo(() => {
@@ -202,6 +207,126 @@ const InternalTable = props => {
     // setMergedData(newData)
     onDataChange?.(newData);
   };
+  const triggerCommandClick = args => {
+    const {
+      id,
+      rowId,
+      rowData,
+      index
+    } = args;
+    const tmpData = [...dataSource];
+    if (id === 'DELETE') {
+      // bật modal confirm
+      if (commandSettings && commandSettings.confirmDialog) {
+        MySwal.fire({
+          title: t ? t('Confirm') : 'Confirm',
+          text: t ? t('Do you want to delete item?') : 'Do you want to delete item?',
+          // icon: 'warning',
+          allowOutsideClick: false,
+          showCancelButton: true,
+          confirmButtonText: t ? t('Delete') : 'Delete',
+          cancelButtonText: t ? t('Cancel') : 'Cancel',
+          customClass: {
+            confirmButton: 'be-button btn-primary',
+            cancelButton: 'be-button btn-danger ms-1'
+          },
+          buttonsStyling: false
+        }).then(async result => {
+          if (result.value) {
+            if (!commandSettings || commandSettings && commandSettings.client !== false) {
+              // client
+
+              // kiểm tra dòng hiện tại có parent
+
+              let newData = [];
+              if (rowData?.parentId) {
+                const parent = findItemByKey(dataSource, rowKey, rowData.parentId);
+                const childData = parent?.children ? [...parent.children] : [];
+                const findIndex = childData.findIndex(obj => obj[rowKey] === rowData[rowKey]);
+                childData.splice(Number(findIndex), 1);
+                const newRowData = {
+                  ...parent,
+                  children: childData
+                };
+                // const newDataSource =  updateArrayByKey(tmpData, newRowData, rowKey as string)
+                newData = updateArrayByKey(tmpData, newRowData, rowKey);
+              } else {
+                tmpData.splice(Number(index), 1);
+                newData = [...tmpData];
+              }
+              if (commandClick) {
+                commandClick({
+                  id,
+                  rowId: rowData.rowId,
+                  rowData,
+                  index,
+                  // rows: [...tmpData]
+                  rows: [...newData]
+                });
+              }
+            } else {
+              // server ~~ không làm gì
+              if (commandClick) {
+                commandClick({
+                  id,
+                  rowId: rowData.rowId,
+                  rowData,
+                  index,
+                  rows: [...dataSource]
+                });
+              }
+            }
+          } else if (result.dismiss === MySwal.DismissReason.cancel) {}
+        });
+      } else {
+        // -------------------
+
+        if (!commandSettings || commandSettings && commandSettings.client !== false) {
+          // client
+
+          let newData2 = [];
+          if (rowData?.parentId) {
+            const parent = findItemByKey(dataSource, rowKey, rowData.parentId);
+            const childData = parent?.children ? [...parent.children] : [];
+            const findIndex = childData.findIndex(obj => obj[rowKey] === rowData[rowKey]);
+            childData.splice(Number(findIndex), 1);
+            const newRowData = {
+              ...parent,
+              children: childData
+            };
+            newData2 = updateArrayByKey(tmpData, newRowData, rowKey);
+          } else {
+            tmpData.splice(Number(index), 1);
+            newData2 = [...tmpData];
+          }
+          if (commandClick) {
+            commandClick({
+              id,
+              rowId,
+              rowData,
+              index,
+              rows: [...newData2]
+            });
+          }
+        } else {
+          // server
+          if (commandClick) {
+            commandClick({
+              id,
+              rowId,
+              rowData,
+              index,
+              rows: [...dataSource]
+            });
+          }
+        }
+      }
+    } else {
+      if (commandClick) {
+        commandClick(args);
+      }
+    }
+  };
   const triggerPaste = (pastedRows, pastedColumnsArray, newData) => {
     const handlePasteCallback = callbackData => {
       const newDataUpdate = updateData(dataSource, callbackData, rowKey);
@@ -257,7 +382,8 @@ const InternalTable = props => {
     clickHeaderToSort: clickHeaderToSort,
     groupSetting: groupSetting,
     groupAble: groupAble,
-    groupColumns: groupColumns
+    groupColumns: groupColumns,
+    commandClick: triggerCommandClick
   }));
 };
 export default InternalTable;

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

@@ -364,8 +364,9 @@ export const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, vis
         className: 'mb-1'
       }, /*#__PURE__*/React.createElement(Select
       // options={translateOption(numberOperator, t)}
+      // options={find ? options : column.source ?? []}
       , {
-        options: find ? options : column.source ?? [],
+        options: column.source ? column.source : options ?? [],
         style: {
           width: '100%',
           marginBottom: 8

package/es/grid-component/hooks/useColumns.js

@@ -164,7 +164,10 @@ const useColumns = config => {
           // title: () => (<span>{t ? t(col.columnGroupText ?? col.headerText ?? col.title) : col.columnGroupText ?? col.headerText ?? col.title}</span>),
           ellipsis: col.ellipsis !== false,
           align: col.textAlign ?? col.align,
-          fixed: col.frozen ? col.frozen.toLowerCase() : col.fixed
+          fixed: col.fixedType ?? col.fixed,
+          isSummary: col.isSummary ?? col.haveSum,
+          hidden: col.hidden ?? col.visible === false
+          // hidden: true
         };
         if (transformedColumn.children && transformedColumn.children?.length) {
           return {
@@ -269,7 +272,7 @@ const useColumns = config => {
             }
             return renderContent(col, value, record, rowIndex, format);
           },
-          hidden: groupSetting && groupSetting.hiddenColumnGroup === false ? col.hidden : groupAble && groupColumns && groupColumns.includes(col.field) ? true : col.hidden
+          hidden: groupSetting && groupSetting.hiddenColumnGroup === false ? transformedColumn.hidden : groupAble && groupColumns && groupColumns.includes(col.field) ? true : transformedColumn.hidden
         };
       });
     };

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

@@ -68,4 +68,4 @@ export declare const removeColumns: <RecordType>(columns: ColumnsTable<RecordTyp
 export declare const convertFlatColumn: (array: ColumnsTable) => ColumnsTable[];
 export declare const convertColumns: <RecordType>(cols: ColumnsTable<RecordType>) => ColumnsTable<RecordType>;
 export declare const checkChild: (inputArray: any[]) => boolean;
-export declare const isEditable: <RecordType>(column: ColumnEditType, rowData: RecordType) => boolean | ((rowData: any) => boolean);
+export declare const isEditable: <RecordType>(column: ColumnEditType, rowData: RecordType) => (boolean | ((rowData: any) => boolean)) & (boolean | ((rowData: any) => boolean));

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

@@ -737,7 +737,7 @@ export const convertColumns = cols => {
       // title: () => (<span>{t ? t(col.columnGroupText ?? col.headerText ?? col.title) : col.columnGroupText ?? col.headerText ?? col.title}</span>),
       ellipsis: col.ellipsis !== false,
       align: col.textAlign ?? col.align,
-      fixed: col.frozen ? col.frozen.toLowerCase() : col.fixed
+      fixed: col.fixedType ?? col.fixed
     };
     if (transformedColumn.children && transformedColumn.children?.length) {
       return {

package/es/grid-component/styles.scss

@@ -205,6 +205,8 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
         border-bottom: 1px solid $tableBorderColor;
         //background: #fff;
         font-weight: 500;
+        //line-height: 23px;
+        //height: 40px;
       }
     }
 
@@ -336,10 +338,18 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
 .#{$prefix}-table-wrapper {
 
   .#{$prefix}-table.#{$prefix}-table-small {
-    .#{$prefix}-table-selection-column{
-      //padding: 8px 8px;
-      //padding: 6px 8px;
+    .ui-rc-table-thead {
+      >tr >th.#{$prefix}-table-selection-column{
+        //padding-block: 7px;
+        padding: 0;
+        //padding: 6px 8px;
+      }
     }
+    //.#{$prefix}-table-selection-column{
+    //  padding-block: 7px;
+    //  padding: 0;
+    //  //padding: 6px 8px;
+    //}
   }
 
   &.grid-editable {

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

@@ -120,7 +120,7 @@ const GridEdit = props => {
   const handleAddSingle = item => {
     const defaultRowValue = getDefaultValue(defaultValue);
     const rowId = defaultRowValue && defaultRowValue.id ? defaultRowValue.id : newGuid();
-    if (item.onClick) {
+    if (item && item.onClick) {
       item.onClick({
         toolbar: item
       });
@@ -183,7 +183,7 @@ const GridEdit = props => {
         toolbar: item
       });
     } else {
-      if (!record.parentId) {
+      if (!record?.parentId) {
         // Cập nhật data mới
         const newData = [...dataSource];
         const index = newData.findIndex(obj => obj[rowKey] === record[rowKey]);
@@ -228,7 +228,7 @@ const GridEdit = props => {
         toolbar: item
       });
     } else {
-      if (!record.parentId) {
+      if (!record?.parentId) {
         // Cập nhật data mới
         const newData = [...dataSource];
         const index = newData.findIndex(obj => obj[rowKey] === record[rowKey]);
@@ -328,7 +328,7 @@ const GridEdit = props => {
                   color: '#28c76f'
                 },
                 onClick: () => handleAddSingle(item)
-              }, item.title ? t ? t(item.title) : item.title : t ? t('Add item') : 'Add item'))));
+              }, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item'))));
             }
           };
         }
@@ -346,7 +346,7 @@ const GridEdit = props => {
                 variant: 'outlined',
                 onClick: handleDeleteAll,
                 className: "d-flex toolbar-button"
-              }, item.title ? t ? t(item.title) : item.title : t ? t('Delete all item') : 'Delete all item'));
+              }, item.label ? t ? t(item.label) : item.label : t ? t('Delete all item') : 'Delete all item'));
             }
           };
         }
@@ -377,7 +377,7 @@ const GridEdit = props => {
                 color: '#28c76f'
               },
               onClick: () => handleAddSingle(item)
-            }, item.title ? t ? t(item.title) : item.title : t ? t('Add item') : 'Add item'))));
+            }, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item'))));
           }
         };
       }
@@ -395,7 +395,7 @@ const GridEdit = props => {
               variant: 'outlined',
               onClick: handleDuplicate,
               className: "d-flex toolbar-button"
-            }, item.title ? t ? t(item.title) : item.title : t ? t('Duplicate') : 'Duplicate')));
+            }, item.label ? t ? t(item.label) : item.label : t ? t('Duplicate') : 'Duplicate')));
           }
         };
       }
@@ -413,7 +413,7 @@ const GridEdit = props => {
               variant: 'outlined',
               onClick: () => handleInsertBefore(item),
               className: "d-flex toolbar-button"
-            }, item.title ? t ? t(item.title) : item.title : t ? t('Insert item before') : 'Insert item before')));
+            }, item.label ? t ? t(item.label) : item.label : t ? t('Insert item before') : 'Insert item before')));
           }
         };
       }
@@ -431,7 +431,7 @@ const GridEdit = props => {
               variant: 'outlined',
               onClick: () => handleInsertAfter(item),
               className: "d-flex toolbar-button"
-            }, item.title ? t ? t(item.title) : item.title : t ? t('Insert item after') : 'Insert item after')));
+            }, item.label ? t ? t(item.label) : item.label : t ? t('Insert item after') : 'Insert item after')));
           }
         };
       }
@@ -449,7 +449,7 @@ const GridEdit = props => {
               variant: 'outlined',
               onClick: () => handleInsertChild(item),
               className: "d-flex toolbar-button"
-            }, item.title ? t ? t(item.title) : item.title : t ? t('Insert item after') : 'Insert item after')));
+            }, item.label ? t ? t(item.label) : item.label : t ? t('Insert item after') : 'Insert item after')));
           }
         };
       }
@@ -467,7 +467,7 @@ const GridEdit = props => {
               variant: 'outlined',
               onClick: handleDeleteAll,
               className: "d-flex toolbar-button"
-            }, item.title ? t ? t(item.title) : item.title : t ? t('Delete all item') : 'Delete all item'));
+            }, item.label ? t ? t(item.label) : item.label : t ? t('Delete all item') : 'Delete all item'));
           }
         };
       }
@@ -620,7 +620,7 @@ const GridEdit = props => {
     });
     const newRange = addRows8(table, getRowsPasteIndex(pastesArray).length);
     const record = flattenData(childrenColumnName, dataSource)[getFirstSelectCell(pastesArray).row];
-    if (!record.parentId) {
+    if (!record?.parentId) {
       // Cập nhật data mới
       const newData = [...dataSource];
 
@@ -898,7 +898,7 @@ const GridEdit = props => {
 
     // Chuyển đổi dữ liệu từ clipboard thành mảng
     const rows = pasteData.split("\n").map(row => row.replace(/\r/g, "").split("\t"));
-    if (!record.parentId) {
+    if (!record?.parentId) {
       // Cập nhật data mới
       const newData = [...dataSource];
 
@@ -1294,7 +1294,10 @@ const GridEdit = props => {
           onKeyDown: event => {
             const key = getRowKey(record, dataSource.indexOf(record));
             if (event.key.length === 1 && !event.ctrlKey && !event.metaKey || event.key === 'Enter') {
-              if (!isEditing(record) && record[rowKey] !== editingKey) {
+              if (record[rowKey] !== editingKey) {
+                // ~~ khi editingKey = ''
+                event.preventDefault();
+                event.stopPropagation();
                 handleEdit(record, column, column.editType, event);
                 handleCellClick(rowNumber, record, column);
                 const hasKey = mergedExpandedKeys.has(key);
@@ -1304,9 +1307,24 @@ const GridEdit = props => {
                 } else {
                   onTriggerExpand(record);
                 }
-              }
-              if (editingKey && editingKey !== '' && (rowNumber ?? 0) + 1 < flattenArray(dataSource).length && event.key === 'Enter') {
-                handleFocusCell((rowNumber ?? 0) + 1, colIndex, column, 'vertical', event);
+              } else {
+                if (event.key === 'Enter') {
+                  event.preventDefault();
+                  event.stopPropagation();
+                  if (editingKey && editingKey !== '' && (rowNumber ?? 0) + 1 < flattenArray(dataSource).length && event.key === 'Enter') {
+                    handleFocusCell((rowNumber ?? 0) + 1, colIndex, column, 'vertical', event);
+                  } else {
+                    // focus cell hiện tại và tắt edit
+                    handleFocusCell(rowNumber ?? 0, colIndex, column, 'vertical', event);
+                    setEditingKey('');
+
+                    // thêm dòng mới
+
+                    // handleAddSingle()
+                    //
+                    // handleFocusCell((rowNumber ?? 0) + 1, colIndex, column, 'vertical', event)
+                  }
+                }
               }
             }
             if (event.key === 'Tab') {
@@ -1359,7 +1377,7 @@ const GridEdit = props => {
           },
           onClick: () => {
             if (record[rowKey] !== editingKey && editingKey !== '') {
-              setEditingKey('');
+              // setEditingKey('')
             }
           },
           // className: isEditing(record) ? 'rc-ui-cell-editable cell-editing' : 'rc-ui-cell-editable cell-editable',

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

@@ -7,15 +7,17 @@ import type { ToolbarItem as RcToolbarItem } from "rc-master-ui/es/toolbar";
 import type { ItemType } from "rc-master-ui/es/menu/interface";
 import type { FieldNames, FilterFunc } from "rc-select/es/Select";
 import type { ColorPickerProps } from "antd";
+import type { FixedType } from "rc-base-table/lib/interface";
 export type IColumnType = "number" | "time" | "date" | "week" | "month" | "file" | "quarter" | "year" | "datetime" | "string" | "boolean" | "checkbox" | "color" | null | undefined;
 export type AnyObject = Record<PropertyKey, any>;
-export type ToolbarItem = Omit<RcToolbarItem, 'position'> & {
-    position?: 'Top' | 'Bottom';
-    onClick?: (args: any) => void;
-};
 export type SelectMode = 'checkbox' | 'radio' | undefined;
 export type ITextAlign = 'center' | 'left' | 'right';
 export type Frozen = 'left' | 'right' | 'Left' | 'Right';
+export type ToolbarItem = Omit<RcToolbarItem, 'position' | 'align'> & {
+    position?: 'Top' | 'Bottom';
+    align?: ITextAlign;
+    onClick?: (args: any) => void;
+};
 export type ContextMenuItem = ItemType & {};
 export type ITemplateColumn = {
     value: any;
@@ -26,7 +28,7 @@ export type ITemplateColumn = {
 };
 export type ColumnSelectTable = {
     field: string;
-    dataIndex: string;
+    dataIndex?: string;
     type?: IColumnType;
     headerText?: string;
     fixedType?: 'left' | 'right' | undefined;
@@ -86,6 +88,8 @@ export type ColumnType<RecordType> = Omit<RcColumnType<RecordType>, 'headerTempl
     field?: string;
     key?: any;
     type?: IColumnType;
+    /** @deprecated This function is deprecated and should use `onChange` instead */
+    haveSum?: boolean;
     isSummary?: boolean;
     summaryTemplate?: (data: number, key: string) => ReactElement | ReactNode;
     maxWidth?: string | number;
@@ -100,16 +104,34 @@ export type ColumnType<RecordType> = Omit<RcColumnType<RecordType>, 'headerTempl
     source?: any[];
     showFilterSearch?: boolean;
     headerText?: string;
+    visible?: boolean;
     headerTooltip?: boolean | string | (() => ReactNode | ReactElement);
     columnGroupText?: string;
     textAlign?: ITextAlign;
-    frozen?: Frozen;
-    template?: ReactNode | ReactElement | ((value: any, record: RecordType, index: number) => ReactNode | ReactElement);
+    template?: ReactNode | ReactElement | ((args: ColumnTemplate<RecordType>) => ReactNode | ReactElement);
     showTooltip?: boolean;
     tooltipDescription?: ReactNode | ReactElement | ((value: any, record: RecordType, index: number) => ReactNode | ReactElement);
     headerTemplate?: React.ReactNode | React.ReactElement | ((column: ColumnType<RecordType>) => React.ReactNode | React.ReactElement);
     commandItems?: CommandItem[];
     children?: ColumnType<RecordType>[];
+    editType?: EditType | ((rowData?: RecordType) => EditType);
+    disable?: boolean | ((rowData: any) => boolean);
+    editEnable?: boolean | ((rowData: any) => boolean);
+    isClearable?: boolean;
+    maxDate?: any;
+    minDate?: any;
+    maxTime?: any;
+    minTime?: any;
+    max?: number;
+    min?: number;
+    editSelectSettings?: IEditSelectSettings;
+    fixedType?: FixedType;
+};
+export type ColumnTemplate<RecordType> = {
+    value: any;
+    rowData: RecordType;
+    index: number;
+    field: string;
 };
 export type ColumnEditType<RecordType = AnyObject> = Omit<ColumnType<RecordType>, 'children'> & {
     editType?: EditType | ((rowData?: RecordType) => EditType);
@@ -180,6 +202,7 @@ export interface TableProps<RecordType> extends Omit<RcTableProps<RecordType>, '
     defaultValue?: AnyObject | (() => AnyObject);
     summary?: boolean | ((data: readonly RecordType[]) => React.ReactNode);
     showEmptyText?: boolean;
+    commandSettings?: CommandSettings;
 }
 export interface TableEditProps<RecordType = AnyObject> extends Omit<TableProps<RecordType>, 'columns'> {
     columns: ColumnsTable<RecordType>;
@@ -289,4 +312,8 @@ export type IFormat = {
 };
 export type GetRowKey<RecordType> = (record: RecordType, index?: number) => Key;
 export type Presets = Required<ColorPickerProps>['presets'][number];
+export type CommandSettings = {
+    client?: boolean;
+    confirmDialog?: boolean;
+};
 export {};

package/lib/grid-component/ColumnsChoose.js

@@ -545,7 +545,8 @@ const ColumnsChoose = props => {
     trigger: "click",
     open: clicked,
     onOpenChange: handleClickChange,
-    arrow: false
+    arrow: false,
+    zIndex: 1065
   }, /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
     arrow: false,
     title: 'Cài đặt'

package/lib/grid-component/ContextMenu.js

@@ -104,7 +104,8 @@ const ContextMenu = props => {
           items: contextMenuItems,
           style: {
             minWidth: 200,
-            maxHeight: pos.viewportHeight - 20
+            maxHeight: pos.viewportHeight - 20,
+            width: 'fit-content'
           },
           rootClassName: 'popup-context-menu',
           onClick: e => {