es-grid-template 0.0.4 → 0.0.7

package/es/GridTable.js

@@ -0,0 +1,927 @@
+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;