es-grid-template 0.0.7 → 0.0.13

package/es/GridTable.js

@@ -1,927 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import React, { Fragment, useLayoutEffect, useMemo, useRef, useState } from 'react';
-import { Table } from "ui-rc";
-import { Resizable } from 'react-resizable';
-import { createStyles } from 'antd-style';
-import { NumericFormat, numericFormatter } from "react-numeric-component";
-// import {Button, DatePicker, Input, Space} from "antd"
-import { SearchOutlined } from '@ant-design/icons';
-import { Select, Toolbar, DatePicker, Input } from "ui-rc";
-// import {flatColumns} from "../../hooks/useColumns";
-// import {
-//   checkDecimalSeparator,
-//   checkThousandSeparator,
-//   convertDateToDayjs,
-//   convertDayjsToDate,
-//   getTypeFilter,
-//   getDatepickerFormat,
-//   isColor,
-//   isEmpty,
-//   numberOperator,
-//   sumDataByField,
-//   translateOption
-// } from "../hooks";
-
-// import type {ColumnsType, ColumnType, GridTableProps} from "../../type";
-import dayjs from "dayjs";
-import 'dayjs/locale/es';
-import 'dayjs/locale/vi';
-import "./styles.scss";
-
-// import en from 'antd/es/date-picker/locale/en_US'
-
-// import vi from 'antd/es/date-picker/locale/vi_VN'
-
-import moment from "moment";
-import CheckboxFilter from "./CheckboxFilter";
-import ContextMenu from "./ContextMenu";
-import { ColumnsChoose } from "./ColumnsChoose";
-import classNames from "classnames";
-// import type {PickerLocale} from "antd/es/date-picker/generatePicker";
-
-import { checkDecimalSeparator, checkThousandSeparator, convertDateToDayjs, convertDayjsToDate, getTypeFilter, getDatepickerFormat, isColor, isEmpty, numberOperator, sumDataByField, translateOption } from "./hooks";
-// import type {PickerLocale} from "ui-rc/dist/date-picker/generatePicker";
-
-import { Button } from "antd";
-import { flatColumns } from "./hooks/useColumns";
-const {
-  RangePicker
-} = DatePicker;
-const convertFilters = filters => {
-  const result = [];
-  filters.forEach(({
-    key,
-    column,
-    filteredKeys,
-    operator
-  }) => {
-    if (!filteredKeys || filteredKeys.length === 0) return;
-    if (column.typeFilter === "DateRange" && filteredKeys.length === 2) {
-      result.push({
-        key,
-        field: column.dataIndex,
-        value: filteredKeys[0],
-        predicate: "and",
-        operator: "greaterthanorequal"
-      }, {
-        key,
-        field: column.dataIndex,
-        value: filteredKeys[1],
-        predicate: "and",
-        operator: "lessthanorequal"
-      });
-    } else if (column.typeFilter === 'Checkbox') {
-      filteredKeys.forEach(value => {
-        result.push({
-          key,
-          field: column.dataIndex,
-          value,
-          predicate: "or",
-          operator
-        });
-      });
-    } else {
-      result.push({
-        key,
-        field: column.dataIndex,
-        value: filteredKeys[0],
-        predicate: 'and',
-        operator
-      });
-    }
-  });
-  return result;
-};
-const ResizableTitle = props => {
-  const {
-    onResize,
-    width,
-    ...restProps
-  } = props;
-  if (!width) {
-    return /*#__PURE__*/React.createElement("th", restProps);
-  }
-  return (
-    /*#__PURE__*/
-    // @ts-ignore
-    React.createElement(Resizable, {
-      width: width,
-      height: 0,
-      handle: /*#__PURE__*/React.createElement("span", {
-        className: "react-resizable-handle",
-        onClick: e => {
-          e.stopPropagation();
-        }
-      }),
-      onResize: onResize,
-      draggableOpts: {
-        enableUserSelectHack: false
-      }
-    }, /*#__PURE__*/React.createElement("th", restProps))
-  );
-};
-const useStyle = createStyles(({
-  css
-}) => {
-  // const { antCls } = token
-  const antCls = 'ui-rc';
-  return {
-    customTable: css`
-      ${antCls}-table {
-        ${antCls}-table-container {
-          ${antCls}-table-body,
-          ${antCls}-table-content {
-            scrollbar-width: thin;
-            scrollbar-color: #eaeaea transparent;
-            scrollbar-gutter: stable;
-          }
-        }
-      }
-    `
-  };
-});
-const GridTable = props => {
-  const {
-    columns: defaultColumns,
-    dataSource,
-    format,
-    virtual = true,
-    t,
-    lang,
-    contextMenuOpen,
-    contextMenuItems: propContextMenuItems,
-    contextMenuHidden,
-    contextMenuClick,
-    recordDoubleClick,
-    toolbarItems,
-    showColumnChoose,
-    onFilter,
-    selectionSettings,
-    rowSelection,
-    rowSelected,
-    rowKey = 'id',
-    ...rest
-  } = props;
-  const {
-    styles
-  } = useStyle();
-
-  // const locale = lang && lang === 'en' ? en : vi
-
-  // const buddhistLocale: PickerLocale = {
-  //   ...locale,
-  //   lang: {
-  //     ...locale.lang
-  //
-  //   }
-  // }
-
-  // console.log('buddhistLocale', buddhistLocale)
-  const clickRef = useRef(null);
-  const searchInput = useRef(null);
-  const menuRef = useRef(null);
-  const viewportWidth = window.innerWidth;
-  const viewportHeight = window.innerHeight;
-  const defaultSelected = useMemo(() => {
-    return selectionSettings?.defaultSelectedRowKeys ?? [];
-  }, [selectionSettings?.defaultSelectedRowKeys]);
-  const [menuVisible, setMenuVisible] = React.useState(false);
-  const [selectedRowData, setSelectedRowData] = React.useState(null);
-  const [position, setPosition] = React.useState({
-    x: 0,
-    y: 0,
-    viewportWidth,
-    viewportHeight
-  });
-  // const [filters, setFilters] = React.useState<any[]>([])
-
-  const [selectedRowKeys, setSelectedRowKeys] = useState(defaultSelected);
-  const contextMenuItems = React.useMemo(() => {
-    if (typeof contextMenuHidden === "function" && propContextMenuItems && selectedRowData) {
-      const hiddenItems = contextMenuHidden({
-        rowInfo: {
-          rowData: selectedRowData
-        }
-      });
-      return propContextMenuItems.filter(item => !hiddenItems.includes(item?.key));
-    }
-    if (contextMenuHidden && typeof contextMenuHidden !== 'function' && propContextMenuItems) {
-      return propContextMenuItems.filter(item => !contextMenuHidden.includes(item?.key));
-    }
-    return propContextMenuItems;
-  }, [propContextMenuItems, contextMenuHidden, selectedRowData]);
-  useLayoutEffect(() => {
-    setMenuVisible(false);
-  }, []);
-  const handleSearch = (selectedKeys, confirm
-  // dataIndex: any
-  ) => {
-    confirm();
-  };
-  const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, visible, searchValue, setSearchValue) => {
-    const type = getTypeFilter(column);
-    const dateFormat = getDatepickerFormat(column.type, column) ?? 'DD/MM/YYYY';
-    const dateRangeFormat = getDatepickerFormat(column.type, column) ?? 'DD/MM/YYYY';
-    switch (type) {
-      case 'Number':
-        return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-          className: 'mb-1'
-        }, /*#__PURE__*/React.createElement(NumericFormat, {
-          value: selectedKeys[0]
-          // thousandSeparator={checkThousandSeparator(thousandSeparator, decimalSeparator)}
-          // decimalSeparator={checkDecimalSeparator(thousandSeparator, decimalSeparator)}
-          // allowNegative={col.format && col.format.allowNegative === true}
-          ,
-          allowNegative: true,
-          customInput: Input,
-          className: ' rounded-0 input-element form-control',
-          onValueChange: values => {
-            // onChangeValueFilter(type, values.floatValue)
-            setSelectedKeys(values.floatValue || values.floatValue === 0 ? [values.floatValue] : []);
-          }
-        }))));
-      case 'NumberRange':
-        return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-          className: 'mb-1 d-flex flex-column gap-1'
-        }, /*#__PURE__*/React.createElement("div", {
-          style: {
-            marginBottom: 8
-          }
-        }, /*#__PURE__*/React.createElement(NumericFormat, {
-          value: selectedKeys[0]
-          // thousandSeparator={checkThousandSeparator(thousandSeparator, decimalSeparator)}
-          // decimalSeparator={checkDecimalSeparator(thousandSeparator, decimalSeparator)}
-          ,
-          allowNegative: true,
-          customInput: Input,
-          className: ' rounded-0 input-element form-control'
-          // onValueChange={(values: any) => {
-          //   onChangeValueFilter(type, values.floatValue, 'min')
-          // }}
-          ,
-          placeholder: 'Min',
-          autoFocus: true
-        })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(NumericFormat, {
-          value: selectedKeys[1]
-          // thousandSeparator={checkThousandSeparator(thousandSeparator, decimalSeparator)}
-          // decimalSeparator={checkDecimalSeparator(thousandSeparator, decimalSeparator)}
-          ,
-          allowNegative: true,
-          customInput: Input,
-          className: ' rounded-0 input-element form-control',
-          onValueChange: () => {
-            // onChangeValueFilter(type, values.floatValue, 'max')
-          },
-          placeholder: 'Max'
-        })))));
-      case 'Date':
-        const dateValue = selectedKeys[0] ? convertDateToDayjs(new Date(selectedKeys[0]), dateFormat) : null;
-        return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-          className: 'mb-1'
-        }, /*#__PURE__*/React.createElement(DatePicker, {
-          format: {
-            format: dateFormat,
-            type: 'mask'
-          }
-          // locale={buddhistLocale}
-          ,
-          style: {
-            width: '100%',
-            height: '100%'
-          },
-          value: dateValue,
-          defaultValue: dateValue,
-          placeholder: column.placeholder,
-          onChange: (valueDate, dateString) => {
-            const newDateValue = dateString ? moment(convertDayjsToDate(dateString, dateFormat)).format() : null;
-            setSelectedKeys(newDateValue ? [newDateValue] : []);
-          }
-        }))));
-      case 'DateRange':
-        const dateRangeValue = [selectedKeys[0] ? convertDateToDayjs(new Date(selectedKeys[0]), dateRangeFormat) : '', selectedKeys[1] ? convertDateToDayjs(new Date(selectedKeys[1]), dateRangeFormat) : ''];
-        return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-          className: 'mb-1'
-        }, /*#__PURE__*/React.createElement(RangePicker, {
-          format: {
-            format: dateRangeFormat,
-            type: 'mask'
-          }
-          // defaultValue={dateRangeValue}
-          ,
-          value: dateRangeValue,
-          placeholder: ['Ngày bắt đầu', 'Ngày kết thúc'],
-          popupStyle: {
-            zIndex: 9999
-          },
-          onChange: (value, dateString) => {
-            const newDateRangeValue = dateString[0] ? [dateString[0] ? moment(convertDayjsToDate(dateString[0], dateRangeFormat)).format() : '', dateString[1] ? moment(convertDayjsToDate(dateString[1], dateRangeFormat)).format() : ''] : '';
-
-            // setSelectedKeys(newDateValue ? [newDateValue] : [])
-            setSelectedKeys(newDateRangeValue);
-          },
-          style: {
-            width: '100%'
-          }
-          // popupClassName={'adv-popup-container'}
-          // getPopupContainer={() => menuRef.current}
-        }))));
-      case 'Dropdown':
-        return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-          className: 'mb-1'
-        }, /*#__PURE__*/React.createElement(Select, {
-          options: translateOption(numberOperator, t),
-          style: {
-            width: '100%',
-            marginBottom: 8
-          },
-          value: selectedKeys[0],
-          onChange: val => {
-            // setOperatorKey(val)
-            setSelectedKeys(val ? [val] : []);
-          },
-          showSearch: true,
-          allowClear: true
-        }))));
-
-      // case 'DropTree':
-      //   return (
-      //     <Fragment>
-      //       <div>
-      //         {col.filterOption && col.filterOption.showOperator === false ? (
-      //           ''
-      //         ) : (
-      //           <div className={'mb-1'}>
-      //             <Select
-      //               options={translateOption(numberOperator, t)}
-      //               // options={t ? numberOperator.map((it: any) => ({...it, label: t(it.label)})) : numberOperator}
-      //
-      //               classNamePrefix='select'
-      //               className={`react-select`}
-      //               value={translateOption(numberOperator, t).find(
-      //                 ope => ope.value === (operator ? operator : getDefaultOperator(col))
-      //               )}
-      //               onChange={(val: any) => {
-      //                 setCurrentFilter((prevState: any) => ({ ...prevState, operator: val.value }))
-      //               }}
-      //             />
-      //           </div>
-      //         )}
-      //
-      //         <div className={'mb-1'}>
-      //           <Input
-      //             placeholder={'Nhập giá trị'}
-      //             value={value}
-      //             onChange={(val: any) => {
-      //               onChangeValueFilter(type, val.value)
-      //             }}
-      //           />
-      //         </div>
-      //
-      //         <div className={'d-flex justify-content-end'}>
-      //           <Button color='flat-primary' className={'me-1 be-button'} onClick={(e: any) => handleOnFilter(e)}>
-      //             {t ? t('Filter') : 'Filter'}
-      //           </Button>
-      //           <Button color='flat-secondary' className={'be-button'} onClick={(e: any) => handleClearFilter(e)}>
-      //             {t ? t('Delete') : 'Delete'}
-      //           </Button>
-      //         </div>
-      //       </div>
-      //     </Fragment>
-      //   )
-      //
-      case 'Checkbox':
-        return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-          className: 'mb-1'
-        }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CheckboxFilter
-        // column={column}
-        , {
-          locale: {
-            filterTitle: 'Chọn tất cả',
-            filterCheckall: 'Chọn tất cả'
-          },
-          selectedKeys: selectedKeys,
-          onSelect: setSelectedKeys,
-          options: [{
-            text: 'Joe',
-            value: 'Joe'
-          }, {
-            text: 'Jim',
-            value: 'Jim'
-          }, {
-            text: 'Green',
-            value: 'Green'
-          }, {
-            text: 'Black',
-            value: 'Black'
-          }, {
-            text: 'Category 1',
-            value: 'Category 1'
-          }, {
-            text: 'Yellow',
-            value: 'Yellow'
-          }, {
-            text: 'Pink',
-            value: 'Pink'
-          }, {
-            text: 'Category 2',
-            value: 'Category 666'
-          }, {
-            text: 'Category 2',
-            value: 'Category 555'
-          }, {
-            text: 'Category 2',
-            value: 'Category 55'
-          }, {
-            text: 'Category 2',
-            value: 'Category 44'
-          }, {
-            text: 'Category 2',
-            value: 'Category 33'
-          }, {
-            text: 'Category 2',
-            value: 'Category 22'
-          }, {
-            text: 'Category 2',
-            value: 'Category 11'
-          }
-          // {
-          //   text: 'Submenu',
-          //   value: 'Submenu',
-          //   children: [
-          //     {
-          //       text: 'Green',
-          //       value: 'Green',
-          //     },
-          //     {
-          //       text: 'Black',
-          //       value: 'Black',
-          //     },
-          //   ],
-          // },
-          ],
-          filterMultiple: true,
-          open: visible,
-          searchValue: searchValue,
-          setSearchValue: setSearchValue
-        })))));
-      case 'Text':
-      default:
-        return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-          className: 'mb-1'
-        }, /*#__PURE__*/React.createElement(Input, {
-          ref: searchInput,
-          placeholder: `Search ${column.key}`,
-          value: selectedKeys[0],
-          onChange: e => setSelectedKeys(e.target.value ? [e.target.value] : []),
-          onPressEnter: () => handleSearch(selectedKeys, confirm),
-          allowClear: true
-        }))));
-    }
-  };
-  const getColumnSearchProps = column => ({
-    filterDropdown: ({
-      setSelectedKeys,
-      selectedKeys,
-      confirm,
-      // clearFilters,
-      close,
-      setOperatorKey,
-      operatorKey,
-      visible,
-      searchValue,
-      setSearchValue
-    }) => {
-      // const typeFilter = getTypeFilter(columns as RcColumnType)
-      return /*#__PURE__*/React.createElement("div", {
-        style: {
-          padding: 8,
-          minWidth: 275
-        },
-        onKeyDown: e => e.stopPropagation()
-      }, (column.showOperator !== false || column.typeFilter !== 'DateRange' && column.typeFilter !== 'NumberRange') && /*#__PURE__*/React.createElement("div", {
-        className: 'mb-1'
-      }, /*#__PURE__*/React.createElement(Select, {
-        options: translateOption(numberOperator, t),
-        style: {
-          width: '100%',
-          marginBottom: 8
-        },
-        value: operatorKey,
-        onChange: val => {
-          setOperatorKey(val);
-        }
-      })), /*#__PURE__*/React.createElement("div", {
-        style: {
-          marginBottom: 8
-        }
-      }, renderFilter(column, selectedKeys, setSelectedKeys, confirm, visible, searchValue, setSearchValue)), /*#__PURE__*/React.createElement("div", {
-        style: {
-          justifyContent: 'end',
-          width: '100%'
-        }
-      }, /*#__PURE__*/React.createElement(Button, {
-        type: "primary",
-        onClick: () => {
-          confirm({
-            closeDropdown: false
-          });
-          handleSearch(selectedKeys, confirm);
-        },
-        icon: /*#__PURE__*/React.createElement(SearchOutlined, null),
-        size: "small",
-        style: {
-          width: 90
-        }
-      }, "Filter"), /*#__PURE__*/React.createElement(Button, {
-        type: "link",
-        size: "small",
-        onClick: () => {
-          close();
-        }
-      }, "close")));
-    },
-    // filterIcon: (filtered: boolean) => (
-    //   <SearchOutlined style={{ color: filtered ? '#1677ff' : undefined }} />
-    // ),
-
-    onFilter: (value, record) => {
-      // @ts-ignore
-      return record[column.dataIndex];
-    },
-    filterDropdownProps: {
-      onOpenChange(open) {
-        if (open) {
-          setTimeout(() => searchInput.current?.select(), 100);
-        }
-      }
-
-      // trigger: ['hover']
-    }
-  });
-  const renderContent = column => value => {
-    switch (column?.type) {
-      case 'number':
-        const thousandSeparator = column.format?.thousandSeparator ? column.format?.thousandSeparator : format?.thousandSeparator;
-        const decimalSeparator = column.format?.decimalSeparator ? column.format?.decimalSeparator : format?.decimalSeparator;
-        const dec = column.format?.decimalScale || column.format?.decimalScale === 0 ? column.format?.decimalScale : format?.decimalScale;
-        const content = !isEmpty(value) ? dec || dec === 0 ? parseFloat(Number(value).toFixed(dec)).toString() : value.toString() : '0';
-        const numericFormatProps = {
-          thousandSeparator: checkThousandSeparator(thousandSeparator, decimalSeparator),
-          decimalSeparator: checkDecimalSeparator(thousandSeparator, decimalSeparator),
-          allowNegative: (column.format?.allowNegative ? column.format?.allowNegative : format?.allowNegative) ?? true,
-          prefix: column.format?.prefix ? column.format?.prefix : format?.prefix,
-          suffix: column.format?.suffix ? column.format?.suffix : format?.suffix,
-          decimalScale: column.format?.decimalScale || column.format?.decimalScale === 0 ? column.format?.decimalScale : format?.decimalScale,
-          fixedDecimalScale: (column.format?.fixedDecimalScale ? column.format?.fixedDecimalScale : format?.fixedDecimalScale) ?? false
-        };
-        return !isEmpty(content) ? numericFormatter(content, numericFormatProps) : '';
-      case 'date':
-        return value ? dayjs(value).format(column.format?.dateFormat ?? format?.dateFormat ?? 'DD/MM/YYYY') : '';
-      case 'time':
-        return value ? value : '';
-      case 'year':
-        const year = value ? moment(value).format('yyyy') : '';
-        return /*#__PURE__*/React.createElement(Fragment, null, year);
-      case 'datetime':
-        return value ? moment(value).format(column.format?.datetimeFormat ?? format?.datetimeFormat ?? 'DD/MM/YYYY HH:mm') : '';
-      case 'boolean':
-        return value ? 'true' : 'false';
-      case 'color':
-        return /*#__PURE__*/React.createElement(Fragment, null, isColor(value) ? /*#__PURE__*/React.createElement("div", {
-          className: 'w-100 h-100',
-          style: {
-            backgroundColor: value,
-            border: '1px solid #f0f0f0'
-          }
-        }) : '');
-      case 'checkbox':
-        return /*#__PURE__*/React.createElement(Input, {
-          checked: !!content,
-          readOnly: true,
-          type: "checkbox"
-        });
-      case 'file':
-        const nameFile = typeof value === 'object' && !Array.isArray(value) ? value.name : Array.isArray(value) ? value.map(it => typeof it === 'object' ? it.name : it).filter(Boolean).join(", ") : '';
-        return value ? nameFile : '';
-      default:
-        if (Array.isArray(value)) {
-          return value.join(', ');
-        }
-        return value;
-    }
-  };
-  const addIsFilter = columns => {
-    return columns.map(column => {
-      // @ts-ignore
-      if (!column?.dataIndex && !column.key) {
-        return column;
-      }
-      // @ts-ignore
-      if (column?.children && column.children.length > 0) {
-        return {
-          ...column,
-          // @ts-ignore
-          children: addIsFilter(column.children) // Xử lý đệ quy cho cấp con
-        };
-      }
-      // @ts-ignore
-      if (column?.dataIndex === 'index' || column.allowFiltering === false) {
-        return {
-          ...column
-        };
-      }
-      return {
-        ...getColumnSearchProps(column),
-        render: renderContent(column),
-        ...column
-      };
-    });
-  };
-  const tmpColumns = useMemo(() => {
-    // return addIsFilter(defaultColumns ?? [])
-    return addIsFilter(defaultColumns ? [Table.SELECTION_COLUMN, ...defaultColumns] : []);
-  }, [defaultColumns]);
-  const [columns, setColumns] = useState(tmpColumns ?? []);
-  const handleResize = indexPath => (e, {
-    size
-  }) => {
-    const updateColumns = (cols, path) => {
-      const [currentIndex, ...restPath] = path;
-      return cols.map((col, idx) => {
-        if (idx === currentIndex) {
-          if (restPath.length === 0) {
-            // Cập nhật width của cột cuối cùng trong path
-            // return { ...col, width: size.width }
-
-            // Kiểm tra minWidth trước khi cập nhật width
-            if (col.minWidth && size.width < col.minWidth) {
-              e.preventDefault();
-              return col; // Không cập nhật nếu nhỏ hơn minWidth
-            }
-
-            // Kiểm tra minWidth trước khi cập nhật width
-            if (col.maxWidth && size.width > col.maxWidth) {
-              e.preventDefault();
-              return col; // Không cập nhật nếu nhỏ hơn minWidth
-            }
-            return {
-              ...col,
-              width: size.width
-            };
-          } else if (col.children) {
-            // Tiếp tục cập nhật các cấp con
-            return {
-              ...col,
-              children: updateColumns(col.children, restPath)
-            };
-          }
-        }
-        // e.preventDefault()
-        return col;
-      });
-    };
-    setColumns(prevColumns => updateColumns(prevColumns, indexPath));
-  };
-  const addResizeHandlers = (cols, parentPath = []) => {
-    return cols.map((col, index) => {
-      const currentPath = [...parentPath, index];
-      if (!col?.dataIndex && !col.key) {
-        return col;
-      }
-      if (col.children) {
-        return {
-          ...col,
-          ellipsis: col.ellipsis !== true,
-          children: addResizeHandlers(col.children, currentPath)
-        };
-      }
-      return {
-        ...col,
-        ellipsis: col.ellipsis !== true,
-        onHeaderCell: () => ({
-          width: col.width,
-          onResize: handleResize(currentPath)
-        })
-      };
-    });
-  };
-
-  // const resizableColumns = createResizableColumns(columns)
-
-  // const resizableColumns = addResizeHandlers(columns)
-  const resizableColumns = useMemo(() => {
-    return addResizeHandlers(columns);
-  }, [columns]);
-
-  // const handleReset = (clearFilters: () => void) => {
-  //   clearFilters()
-  // }
-
-  // const handleChangeOperator = (val: IFilterOperator) => {
-  //   setOperator(val)
-  // }
-
-  const onContextMenu = data => event => {
-    event.preventDefault(); // Ngăn chặn menu mặc định của trình duyệt
-
-    setSelectedRowData(data);
-    contextMenuOpen?.({
-      rowInfo: {
-        rowData: data
-      },
-      event
-    });
-    setMenuVisible(true);
-
-    // Đợi DOM cập nhật và lấy kích thước menu
-    setTimeout(() => {
-      const menuElement = menuRef.current; // Lấy menu từ DOM
-      const menuWidth = menuElement?.offsetWidth || 200; // Mặc định 200px nếu chưa render
-      const menuHeight = menuElement?.offsetHeight; // Mặc định 450px nếu chưa render
-
-      // Điều chỉnh vị trí menu
-      let x = event.clientX;
-      let y = event.clientY;
-      if (x + menuWidth > viewportWidth) {
-        x = x - menuWidth - 10; // Cách cạnh phải 10px
-      }
-      if (y + menuHeight > viewportHeight) {
-        if (y < menuHeight) {
-          y = 10;
-        } else {
-          y = y - 10 - menuHeight; // Cách cạnh dưới 10px
-        }
-      }
-      setPosition(prevState => ({
-        ...prevState,
-        x,
-        y
-      }));
-    }, 100);
-    if (!menuVisible) {
-      document.addEventListener(`click`, function onClickOutside(e) {
-        const element = e.target;
-        const menuContainer = document.querySelector(".popup-context-menu");
-        const isInsideContainer = element.closest(".popup-context-menu") && menuContainer;
-        if (isInsideContainer) {
-          return;
-        }
-        setMenuVisible(false);
-        document.removeEventListener(`click`, onClickOutside);
-      });
-    }
-  };
-  const handleRowClick = () => {
-    if (clickRef.current) return;
-
-    // @ts-ignore
-    clickRef.current = setTimeout(() => {
-      // console.log("Single Click:", record);
-      clickRef.current = null;
-    }, 250);
-  };
-  const handleRowDoubleClick = (record, index) => e => {
-    if (clickRef.current) {
-      clearTimeout(clickRef.current);
-      clickRef.current = null;
-    }
-    recordDoubleClick?.({
-      e,
-      rowIndex: index,
-      rowData: record
-    });
-  };
-  const onSelectChange = (keys, selectedRows, info, selectedRow) => {
-    if (info.type === 'all') {
-      // setSelectedRowKeys(keys)
-      rowSelected?.({
-        selected: selectedRows,
-        type: 'rowSelected',
-        rowData: {}
-      });
-    } else {
-      if (selectionSettings?.type === 'multiple') {
-        // setSelectedRowKeys(keys)
-        rowSelected?.({
-          selected: selectedRows,
-          type: 'rowSelected',
-          rowData: selectedRow
-        });
-      } else {
-        // @ts-ignore
-        setSelectedRowKeys([selectedRow[rowKey]]);
-        rowSelected?.({
-          selected: [selectedRow],
-          type: 'rowSelected',
-          rowData: selectedRow
-        });
-      }
-    }
-  };
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(ContextMenu, {
-    open: menuVisible,
-    pos: position,
-    setOpen: setMenuVisible,
-    menuRef: menuRef,
-    contextMenuItems: contextMenuItems,
-    contextMenuClick: contextMenuClick,
-    rowData: selectedRowData
-  }), /*#__PURE__*/React.createElement(Table, _extends({}, rest, {
-    dataSource: dataSource
-    // className={styles.customTable}
-    ,
-    className: classNames('', {
-      'table-none-column-select': selectionSettings?.mode === undefined && selectionSettings?.type !== 'multiple'
-    }, styles.customTable),
-    bordered: true,
-    virtual: virtual,
-    columns: resizableColumns,
-    rowKey: rowKey,
-    rowHoverable: true,
-    components: {
-      header: {
-        cell: ResizableTitle
-      }
-    },
-    onRow: (data, index) => {
-      return {
-        onDoubleClick: handleRowDoubleClick(data, index),
-        // onClick: handleRowClick(data),
-        onClick: handleRowClick,
-        onContextMenu: onContextMenu(data)
-      };
-    },
-    rowSelection: {
-      type: selectionSettings?.mode === 'checkbox' || selectionSettings?.type === 'multiple' ? 'checkbox' : "radio",
-      // columnWidth: selectionSettings?.mode === 'checkbox' || selectionSettings?.mode === 'radio' || selectionSettings?.type === 'multiple' ? 50 : 0.000001,
-      columnWidth: !selectionSettings?.mode ? 0.0000001 : selectionSettings?.columnWidth ?? 50,
-      onChange: onSelectChange,
-      // onSelect: (record, selected, selectedRows, nativeEvent)=> {
-      //   // console.log(record, selected, selectedRows, nativeEvent)
-      // },
-
-      selectedRowKeys: selectionSettings?.mode === 'checkbox' && selectionSettings?.type === 'single' ? selectedRowKeys : undefined,
-      defaultSelectedRowKeys: selectionSettings?.defaultSelectedRowKeys,
-      preserveSelectedRowKeys: true,
-      ...rowSelection,
-      // hideSelectAll: !selectionSettings?.type || selectionSettings?.type === 'single' || selectionSettings?.mode === 'radio' ? true : rowSelection?.hideSelectAll ?? selectionSettings?.type !== 'multiple',
-      hideSelectAll: !selectionSettings?.type || selectionSettings?.type === 'single' || selectionSettings?.mode === 'radio' ? true : selectionSettings?.hideSelectAll ?? selectionSettings?.type !== 'multiple'
-    },
-    onScroll: () => {
-      setMenuVisible(false);
-    },
-    title: () => {
-      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, "Header"), toolbarItems && /*#__PURE__*/React.createElement("div", {
-        style: {
-          display: 'flex',
-          justifyContent: 'space-between'
-        }
-      }, /*#__PURE__*/React.createElement(Toolbar, {
-        style: {
-          width: '100%'
-        },
-        items: toolbarItems,
-        mode: 'responsive'
-        // mode={'scroll'}
-        ,
-        onClick: val => {
-          console.log(val);
-        }
-      }), showColumnChoose && /*#__PURE__*/React.createElement(ColumnsChoose, {
-        columns: columns,
-        setColumns: setColumns
-      }), /*#__PURE__*/React.createElement("div", null)));
-    },
-    summary: () => /*#__PURE__*/React.createElement(Table.Summary, {
-      fixed: true
-    }, /*#__PURE__*/React.createElement(Table.Summary.Row, null, flatColumns(tmpColumns).filter(col => col.hidden !== true).map((col, index) => {
-      const thousandSeparator = col.format?.thousandSeparator ? col.format?.thousandSeparator : format?.thousandSeparator;
-      const decimalSeparator = col.format?.decimalSeparator ? col.format?.decimalSeparator : format?.decimalSeparator;
-      const dec = col.format?.decimalScale || col.format?.decimalScale === 0 ? col.format?.decimalScale : format?.decimalScale;
-      const sumValue = col.type === 'number' ? sumDataByField(dataSource, col?.key) : 0;
-      const value = !isEmpty(sumValue) ? dec || dec === 0 ? parseFloat(Number(sumValue).toFixed(dec)).toString() : sumValue.toString() : '0';
-      const cellValue = col.type === 'number' && col.isSummary !== false ? value : '';
-      const numericFormatProps = {
-        thousandSeparator: checkThousandSeparator(thousandSeparator, decimalSeparator),
-        decimalSeparator: checkDecimalSeparator(thousandSeparator, decimalSeparator),
-        allowNegative: (col.format?.allowNegative ? col.format?.allowNegative : format?.allowNegative) ?? false,
-        prefix: col.format?.prefix ? col.format?.prefix : format?.prefix,
-        suffix: col.format?.suffix ? col.format?.suffix : format?.suffix,
-        decimalScale: dec,
-        fixedDecimalScale: (col.format?.fixedDecimalScale ? col.format?.fixedDecimalScale : format?.fixedDecimalScale) ?? false
-      };
-      return (
-        /*#__PURE__*/
-        // <Table.Summary.Cell index={index}>{col.summaryTemplate ? col.summaryTemplate(cellValue, (col.key || col.dataIndex) as string) : numericFormatter(cellValue, numericFormatProps)}</Table.Summary.Cell>
-        React.createElement(Table.Summary.Cell, {
-          key: index,
-          index: index
-        }, col.summaryTemplate ? col.summaryTemplate(cellValue, col.key) : numericFormatter(cellValue, numericFormatProps))
-      );
-    }))),
-    onFilter: val => {
-      onFilter?.(convertFilters(val));
-    }
-  })));
-};
-export default GridTable;