es-grid-template 0.0.8 → 0.1.0

package/es/TableGrid.js

@@ -1,1055 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import React, { Fragment, useLayoutEffect, useMemo, useRef, useState } from 'react';
-import { Resizable } from 'react-resizable';
-import { createStyles } from 'antd-style';
-import { NumericFormat, numericFormatter } from "react-numeric-component";
-import { SearchOutlined } from '@ant-design/icons';
-import { Select, DatePicker, Input, Table, Toolbar } from "rc-master-ui";
-import dayjs from "dayjs";
-import 'dayjs/locale/es';
-import 'dayjs/locale/vi';
-import "./styles.scss";
-import en from 'rc-master-ui/es/date-picker/locale/en_US';
-import vi from 'rc-master-ui/es/date-picker/locale/vi_VN';
-import moment from "moment";
-import CheckboxFilter from "./CheckboxFilter";
-import ContextMenu from "./ContextMenu";
-import classNames from "classnames";
-import { checkDecimalSeparator, checkThousandSeparator, convertDateToDayjs, convertDayjsToDate, getTypeFilter, getDatepickerFormat, isColor, isEmpty, numberOperator, sumDataByField, translateOption, updateArrayByKey
-// updateArrayByKey
-} from "./hooks";
-import { Button, ConfigProvider } from "antd";
-import { flatColumns } from "./hooks/useColumns";
-import customParseFormat from 'dayjs/plugin/customParseFormat';
-import Pagination from "rc-master-ui/es/pagination";
-// import styled from "styled-components";
-import Space from "rc-master-ui/es/space";
-import { FilterFill } from "becoxy-icons";
-import ComponentSpinner from "./LoadingSpinner";
-import { ColumnsChoose } from "./ColumnsChoose";
-dayjs.extend(customParseFormat);
-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;
-          }
-        }
-      }
-    `
-  };
-});
-// type OnChange = NonNullable<TableProps<any>['onChange']>;
-
-const TableGrid = props => {
-  const {
-    columns: defaultColumns,
-    dataSource,
-    title,
-    format,
-    virtual = true,
-    t,
-    lang,
-    contextMenuOpen,
-    contextMenuItems: propContextMenuItems,
-    contextMenuHidden,
-    contextMenuClick,
-    recordDoubleClick,
-    toolbarItems,
-    showColumnChoose,
-    onFilter,
-    selectionSettings,
-    rowSelection,
-    rowSelected,
-    rowKey = 'id',
-    pagination,
-    scroll,
-    onFilterClick,
-    dataSourceFilter: propDataSourceFilter,
-    loading,
-    setColumns,
-    // dataSourceFilter,
-    ...rest
-  } = props;
-  const {
-    styles
-  } = useStyle();
-  const locale = lang && lang === 'en' ? en : vi;
-  // const locale =  vi
-
-  const buddhistLocale = {
-    ...locale,
-    lang: {
-      ...locale.lang
-    }
-  };
-  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 [selectedRowKeys, setSelectedRowKeys] = useState(defaultSelected);
-  const [dataSourceFilter, setDataSourceFilter] = useState(propDataSourceFilter ?? []);
-  React.useEffect(() => {
-    setDataSourceFilter(propDataSourceFilter ?? []);
-  }, [propDataSourceFilter]);
-  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) => {
-    confirm();
-  };
-  const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, visible, searchValue, setSearchValue) => {
-    const type = getTypeFilter(column);
-    const dateFormat = getDatepickerFormat(column?.typeFilter ?? column?.type, column) ?? 'DD/MM/YYYY';
-    const dateRangeFormat = getDatepickerFormat(column?.type, column) ?? 'DD/MM/YYYY';
-    const find = dataSourceFilter?.find(it => it.key === column?.key);
-    const options = find ? find.data : [];
-    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: (date, 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 'Week':
-        const weekValue = !isEmpty(selectedKeys[0]) ? dayjs(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'
-          },
-          picker: 'week',
-          locale: buddhistLocale,
-          style: {
-            width: '100%',
-            height: '100%'
-          },
-          value: weekValue,
-          defaultValue: weekValue,
-          placeholder: column?.placeholder,
-          onChange: (date, dateString) => {
-            const newDateValue = dateString ?? null;
-            setSelectedKeys(newDateValue ? [newDateValue] : []);
-          }
-        }))));
-      case 'Month':
-        const monthValue = !isEmpty(selectedKeys[0]) ? dayjs(selectedKeys[0], dateFormat) : null;
-        return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
-          className: 'mb-1'
-        }, /*#__PURE__*/React.createElement(DatePicker, {
-          format: {
-            format: dateFormat,
-            type: 'mask'
-          },
-          picker: 'month',
-          locale: buddhistLocale,
-          style: {
-            width: '100%',
-            height: '100%'
-          },
-          value: monthValue,
-          defaultValue: monthValue,
-          placeholder: column?.placeholder,
-          onChange: (date, dateString) => {
-            const newDateValue = dateString ?? null;
-            setSelectedKeys(newDateValue ? [newDateValue] : []);
-          }
-        })));
-
-      // case 'Quarter':
-      //
-      //   // const monthValue = selectedKeys[0] ? convertDateToDayjs(new Date(selectedKeys[0]), dateFormat) : null
-      //
-      //   const pickerFormat  = getDatepickerFormat(getEditType(col) as IEditType, col)
-      //   const pickerValue = !isEmpty(selectedKeys[0]) ? dayjs(selectedKeys[0], pickerFormat) : null
-      //
-      //   return (
-      //     <Fragment>
-      //       <div>
-      //
-      //
-      //         <div className={'mb-1'}>
-      //
-      //           <DatePicker
-      //             format={{
-      //               format: dateFormat,
-      //               type: 'mask'
-      //             }}
-      //             locale={buddhistLocale}
-      //             style={{width: '100%', height: '100%'}}
-      //             value={pickerValue}
-      //             defaultValue={pickerValue}
-      //             placeholder={column.placeholder}
-      //             onChange={(date, dateString) => {
-      //               const newDateValue = dateString ? moment(convertDayjsToDate(dateString as string, dateFormat)).format() : null
-      //               setSelectedKeys(newDateValue ? [newDateValue] : [])
-      //
-      //             }}
-      //
-      //           />
-      //         </div>
-      //
-      //
-      //       </div>
-      //     </Fragment>
-      //   )
-      //
-      // case 'Year':
-      //
-      //   // const monthValue = selectedKeys[0] ? convertDateToDayjs(new Date(selectedKeys[0]), dateFormat) : null
-      //
-      //   const pickerFormat  = getDatepickerFormat(getEditType(col) as IEditType, col)
-      //   const pickerValue = !isEmpty(selectedKeys[0]) ? dayjs(selectedKeys[0], pickerFormat) : null
-      //
-      //   return (
-      //     <Fragment>
-      //       <div>
-      //
-      //
-      //         <div className={'mb-1'}>
-      //
-      //           <DatePicker
-      //             format={{
-      //               format: dateFormat,
-      //               type: 'mask'
-      //             }}
-      //             locale={buddhistLocale}
-      //             style={{width: '100%', height: '100%'}}
-      //             value={pickerValue}
-      //             defaultValue={pickerValue}
-      //             placeholder={column.placeholder}
-      //             onChange={(date, dateString) => {
-      //               const newDateValue = dateString ? moment(convertDayjsToDate(dateString as string, dateFormat)).format() : null
-      //               setSelectedKeys(newDateValue ? [newDateValue] : [])
-      //
-      //             }}
-      //
-      //           />
-      //         </div>
-      //
-      //
-      //       </div>
-      //     </Fragment>
-      //   )
-
-      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)}
-        , {
-          options: options,
-          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',
-          //     //     },
-          //     //   ],
-          //     // },
-          //   ]
-          // }
-          ,
-
-          options: options,
-          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?.dataIndex}`,
-          value: selectedKeys[0],
-          onChange: e => setSelectedKeys(e.target.value ? [e.target.value] : []),
-          onPressEnter: () => handleSearch(selectedKeys, confirm),
-          allowClear: true
-        }))));
-    }
-  };
-  const onFilterCallback = (key, data) => {
-    // console.log(key, data)
-
-    const find = dataSourceFilter.find(it => it.key === key);
-    if (find) {
-      const newData = updateArrayByKey(dataSourceFilter, {
-        key,
-        data
-      }, 'key');
-      setDataSourceFilter(newData);
-    } else {
-      const newData = [...dataSourceFilter, {
-        key,
-        data
-      }];
-      setDataSourceFilter(newData);
-    }
-
-    // setDataSourceFilter([{key, data}])
-  };
-
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const getColumnSearchProps = column => ({
-    filterDropdown: ({
-      setSelectedKeys,
-      selectedKeys,
-      confirm,
-      close,
-      setOperatorKey,
-      operatorKey,
-      visible,
-      searchValue,
-      setSearchValue
-    }) => {
-      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(Space, {
-        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 => /*#__PURE__*/React.createElement(FilterFill, {
-      fontSize: 12,
-      onClick: () => {
-        console.log('onFilterClick', column);
-        onFilterClick?.(column, onFilterCallback);
-      },
-      style: {
-        color: filtered ? '#283046' : undefined
-      }
-    }),
-    filterDropdownProps: {
-      onOpenChange(open) {
-        if (open) {
-          setTimeout(() => searchInput.current?.select(), 100);
-        }
-      }
-    }
-  });
-
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  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 addFilter = React.useCallback(cols => {
-    return cols.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: addFilter(column?.children) // Xử lý đệ quy cho cấp con
-        };
-      }
-      // @ts-ignore
-      if (column?.dataIndex === 'index' || column?.allowFiltering === false) {
-        return {
-          ...column
-        };
-      }
-      return {
-        ...getColumnSearchProps(column),
-        onFilter: (value, record) => {
-          // @ts-ignore
-          return record[column?.dataIndex];
-        },
-        render: renderContent(column),
-        ...column,
-        ellipsis: column?.ellipsis !== false,
-        sorter: () => {
-          // console.log('a, b, sortOrder', a, b, sortOrder)
-        }
-      };
-    });
-  }, [getColumnSearchProps, renderContent]);
-  const tmpColumns = useMemo(() => {
-    // @ts-ignore
-    return addFilter(defaultColumns ?? []);
-  }, [addFilter, defaultColumns]);
-  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
-        });
-      }
-    }
-  };
-  const handleChange = sorter => {
-    console.log('Various parameters', sorter);
-    // setFilteredInfo(filters);
-    // setSortedInfo(sorter as Sorts);
-  };
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(ConfigProvider, {
-    theme: {
-      components: {
-        Table: {
-          rowHoverBg: '#eb461912',
-          rowSelectedBg: '#eb4619',
-          rowSelectedHoverBg: '#eb4619'
-        }
-      }
-    }
-  }, /*#__PURE__*/React.createElement(ContextMenu, {
-    open: menuVisible,
-    pos: position,
-    setOpen: setMenuVisible,
-    menuRef: menuRef,
-    contextMenuItems: contextMenuItems,
-    contextMenuClick: contextMenuClick,
-    rowData: selectedRowData
-  }), /*#__PURE__*/React.createElement(Table
-  // loading={defaultColumns && defaultColumns.length === 0}
-  // loading={true}
-  , _extends({
-    loading: {
-      spinning: defaultColumns && defaultColumns.length === 0 || loading === true,
-      indicator: /*#__PURE__*/React.createElement(ComponentSpinner, null)
-    },
-    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 as any}
-    ,
-    columns: tmpColumns
-    // scroll={{ y: 550 }}
-    ,
-    rowKey: rowKey,
-    rowHoverable: true,
-    components: {
-      header: {
-        cell: ResizableTitle
-      }
-    }
-    // scroll={scroll}
-    ,
-    size: "small",
-    scroll: scroll ? scroll : {
-      y: 500
-    },
-    onRow: (data, index) => {
-      return {
-        onDoubleClick: handleRowDoubleClick(data, index),
-        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,
-      // onChange: (selectedRowKeys, selectedRows, info, selectedRow) => {
-      //
-      // },
-      // 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);
-    },
-    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__*/React.createElement(Table.Summary.Cell, {
-        key: col.key,
-        index: index
-      }, col.summaryTemplate ? col.summaryTemplate(cellValue, col.key) : numericFormatter(cellValue, numericFormatProps));
-    }))),
-    pagination: pagination && pagination.onChange ? false : {
-      showTotal: (total, range) => `${range[0]}-${range[1]} / ${total} items`,
-      ...pagination
-    },
-    onFilter: val => {
-      onFilter?.(convertFilters(val));
-    },
-    onChange: (paging, filters, sorter) => handleChange(sorter),
-    title: () => {
-      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, title?.(dataSource)), (toolbarItems || showColumnChoose !== false) && /*#__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: tmpColumns,
-        setColumns: setColumns
-      }), /*#__PURE__*/React.createElement("div", null)));
-    }
-  }, rest)), pagination && pagination.onChange && /*#__PURE__*/React.createElement(Pagination
-  // style={{padding: '0.75rem 1rem'}}
-  , _extends({
-    showSizeChanger: true,
-    responsive: true,
-    size: 'small',
-    showTotal: (total, range) => `${range[0]}-${range[1]} / ${total} items`
-  }, pagination))));
-};
-export default TableGrid;