es-grid-template 1.8.64 → 1.8.66

package/es/grid-component/InternalTable.js

@@ -1,1170 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import React, { createContext, Fragment, useCallback, useContext, useState } from 'react';
-import 'react-resizable/css/styles.css';
-import customParseFormat from 'dayjs/plugin/customParseFormat';
-import { addRowIdArray, booleanOperator, checkDecimalSeparator, checkThousandSeparator, convertFilters, convertFlatColumn, filterDataByColumns4, findItemByKey, findItemPath, flattenArray, getAllRowKey, getFormat, getTypeFilter, groupArrayByColumns, isNullOrUndefined, numberOperator, removeColumns, removeInvisibleColumns, stringOperator, sumByField, translateOption, unFlattenData, updateArrayByKey, updateColumnsByGroup,
-// updateData,
-updateOrInsert } from "./hooks";
-import ReactDOMServer from 'react-dom/server';
-import dayjs from "dayjs";
-import 'dayjs/locale/es';
-import 'dayjs/locale/vi';
-
-// import GridEdit from "./table/GridEdit"
-// import InfiniteTable from "./table/InfiniteTable";
-
-// import Grid from "./table/Grid"
-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 enDr from "rc-master-ui/es/locales/en_US";
-import viDr from "rc-master-ui/es/locales/vi_VN";
-// import useColumns from "./hooks/useColumns";
-
-import "./styles.scss";
-// import 'rc-master-ui/es/date-range-picker/styles/index.less'
-// import 'rc-master-ui/assets/index.css'
-
-import { flatColumns2, renderContent, renderFilter } from "./hooks/columns";
-import Group from "./table/Group";
-import Swal from "sweetalert2";
-import withReactContent from "sweetalert2-react-content";
-import { Tooltip } from "react-tooltip";
-import classNames from "classnames";
-import HeaderContent from "./hooks/content/HeaderContent";
-import { ArrowDown, ArrowUp, FilterFill, SortCancel } from "becoxy-icons";
-import { Select } from "rc-master-ui";
-import { Button, Modal, Space } from "antd";
-import { SearchOutlined } from "@ant-design/icons";
-import { restrictToHorizontalAxis } from "@dnd-kit/modifiers";
-import { closestCenter, DndContext, DragOverlay, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
-import { arrayMove, horizontalListSortingStrategy, SortableContext, useSortable } from "@dnd-kit/sortable";
-// import {CSS} from "@dnd-kit/utilities";
-import { Resizable } from "react-resizable";
-import { faker } from "@faker-js/faker";
-import useMergedState from "rc-util/es/hooks/useMergedState";
-import { numericFormatter } from 'react-numeric-component';
-// import Modal from 'antd/es/modal/Modal'
-
-dayjs.extend(customParseFormat);
-const MySwal = withReactContent(Swal);
-const ASCEND = 'ascend';
-const DESCEND = 'descend';
-export const SELECTION_COLUMN = {};
-const dragActiveStyle = (dragState, id) => {
-  const {
-    active,
-    over,
-    direction
-  } = dragState;
-  // drag active style
-  let style = {};
-  if (active && active === id) {
-    style = {
-      backgroundColor: '#c0c0c0',
-      opacity: 0.3
-    };
-  } else if (over && id === over && active !== over) {
-    style = direction === 'right' ? {
-      borderRight: '1px dashed gray'
-    } : {
-      borderLeft: '1px dashed gray'
-    };
-  }
-  return style;
-};
-const DragIndexContext = /*#__PURE__*/createContext({
-  active: -1,
-  over: -1
-});
-const ResizableTitle = props => {
-  const {
-    onResize,
-    width,
-    ...restProps
-  } = props;
-  const dragState = useContext(DragIndexContext);
-  const style = {
-    ...props.style,
-    borderBottom: '1px solid #e0e0e0',
-    // cursor: 'move',
-    // ...(isDragging ? { position: 'relative', zIndex: 9999, userSelect: 'none' } : {}),
-    ...dragActiveStyle(dragState, props.id)
-  };
-  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: "rc-resizable-handle",
-        onClick: e => {
-          e.stopPropagation();
-        }
-      }),
-      onResize: onResize,
-      draggableOpts: {
-        enableUserSelectHack: false
-      }
-    }, /*#__PURE__*/React.createElement("th", _extends({}, restProps, {
-      style: style
-    })))
-  );
-};
-
-// const TableBodyCell = (props: any) => {
-//   const dragState = useContext<DragIndexState>(DragIndexContext)
-//   return <div {...props} style={{ ...props.style, ...dragActiveStyle(dragState, props.id) }} />
-// }
-
-const SortableHeaderCell = ({
-  children,
-  columnKey
-}) => {
-  const {
-    attributes,
-    listeners,
-    setNodeRef,
-    isDragging
-  } = useSortable({
-    id: columnKey
-  });
-  const style = {
-    // ...props.style,
-    cursor: 'move',
-    ...(isDragging ? {
-      position: 'relative',
-      zIndex: 9999,
-      userSelect: 'none'
-    } : {})
-    // ...dragActiveStyle(dragState, props.id),
-  };
-  return /*#__PURE__*/React.createElement("div", _extends({
-    ref: setNodeRef,
-    style: style
-  }, attributes, listeners), children);
-};
-const InternalTable = props => {
-  const {
-    t,
-    id: tableId,
-    // columns,
-    columns: propsColumns,
-    lang,
-    locale,
-    dataSource,
-    dataSourceFilter: propDataSourceFilter,
-    // onFilterClick,
-    // onFilter,
-    editAble,
-    // rowKey: propRowKey,
-    format,
-    onDataChange,
-    sortMultiple,
-    // expandable,
-    // @ts-ignore
-    onCellPaste,
-    clickHeaderToSort = true,
-    // components,
-    onChooseColumns,
-    groupAble,
-    groupSetting,
-    groupColumns,
-    commandClick,
-    commandSettings,
-    pagination,
-    height: propsHeight,
-    summary,
-    // infiniteScroll,
-    wrapSettings,
-    onFilter,
-    onSorter,
-    // defaultSorter,
-    toolbarItems,
-    allowSortering,
-    allowFiltering,
-    ...rest
-  } = props;
-  const theadRef = React.useRef(null);
-  const id = React.useMemo(() => {
-    return tableId ?? faker.string.alpha(20);
-    // return tableId ?? newGuid()
-  }, [tableId]);
-
-  // const rowKey = React.useMemo(() => {
-  //   return  propRowKey ?? 'rowId'
-  // }, [propRowKey])
-
-  const rowKey = 'rowId';
-  const getWindowSize = () => {
-    const {
-      innerWidth,
-      innerHeight
-    } = window;
-    return {
-      innerWidth,
-      innerHeight
-    };
-  };
-  const [windowSize, setWindowSize] = useState(getWindowSize());
-  React.useEffect(() => {
-    const handleWindowResize = () => {
-      setWindowSize(getWindowSize());
-    };
-    window.addEventListener("resize", handleWindowResize);
-    return () => {
-      window.removeEventListener("resize", handleWindowResize);
-    };
-  }, []);
-  const [scrollHeight, setHeight] = useState(0);
-  const [scrollHeight1, setHeight1] = useState(0);
-
-  // const [isModalOpen, setIsModalOpen] = useState(false)
-
-  const local = lang && lang === 'en' ? en : vi;
-  const dateRangeLocale = lang && lang === 'en' ? enDr : viDr;
-  const buddhistLocale = {
-    ...local,
-    lang: {
-      ...local.lang
-    }
-  };
-
-  // const [filterStates, setFilterState] = React.useState<any>(null)
-  // const [isFilter, setIsFilter] = React.useState<boolean>(false);
-  // const [cellTooltip, seCellTooltip] = React.useState<any>(undefined);
-
-  const [dragIndex, setDragIndex] = useState({
-    active: -1,
-    over: -1
-  });
-  // const [tooltipContent, setTooltipContent] = useState<any>('')
-
-  const [filterStates, setFilterState] = React.useState(null);
-  const [isFullScreen, setIsFullScreen] = React.useState(false);
-  const [isOpenTooltip, setIsOpenTooltip] = React.useState(false);
-  const mergedData = React.useMemo(() => {
-    if (groupSetting && groupSetting.client !== false) {
-      return groupArrayByColumns(dataSource, groupColumns);
-    }
-    return addRowIdArray(dataSource);
-  }, [dataSource, groupColumns, groupSetting?.client]);
-
-  // ========================= Keys =========================
-  const [mergedFilterKeys, setMergedFilterKeys] = useMergedState(getAllRowKey(mergedData), {
-    value: undefined
-  });
-  const [columns, setColumns] = React.useState([]);
-  React.useEffect(() => {
-    const totalHeight = propsHeight;
-    if (totalHeight) {
-      const table = document.querySelector(`#${id}`);
-      const title = table?.querySelector(`.ui-rc-table-title`);
-      const tableScrollRight = table?.querySelector(`.ui-rc-table-ping-right`);
-      const paginationE = table?.querySelector(`.ui-rc-pagination`);
-      const toolbar = table?.querySelector(`.ui-rc-toolbar-bottom`);
-      const summaryE = table?.querySelector(`.ui-rc-table-summary`);
-      const hhh = (totalHeight ?? 0) - (title ? title.offsetHeight : 0) - (theadRef ? theadRef.current.clientHeight : 0) - (paginationE ? paginationE.offsetHeight : 0) - (toolbar ? toolbar.offsetHeight : 0) - (summaryE ? 40 : 0) - (tableScrollRight ? 10 : 0);
-      setHeight(hhh > 0 ? hhh : 0);
-    }
-  }, [id, propsHeight, summary, theadRef, columns]);
-  React.useEffect(() => {
-    // const totalHeight = isFullScreen ? windowSize.innerHeight - 50 : propsHeight
-    const totalHeight = windowSize.innerHeight - 60;
-    if (totalHeight && isFullScreen) {
-      const table = document.querySelector(`#${id}`);
-      const title = table?.querySelector(`.ui-rc-table-title`);
-      const header = table?.querySelector(`.ui-rc-table-header`);
-      const paginationE = table?.querySelector(`.ui-rc-pagination`);
-      const toolbar = table?.querySelector(`.ui-rc-toolbar-bottom`);
-      const summaryE = table?.querySelector(`.ui-rc-table-summary`);
-      const scrollbar = table?.querySelector(`.ui-rc-table-tbody-virtual-scrollbar.ui-rc-table-tbody-virtual-scrollbar-horizontal`);
-      const hhh = (totalHeight ?? 0) - (title ? title.offsetHeight : 0) - (header ? header.offsetHeight : 0) - (paginationE ? paginationE.offsetHeight : 0) - (toolbar ? toolbar.offsetHeight : 0) - (summaryE ? summaryE.offsetHeight : 0) - (scrollbar ? scrollbar.offsetHeight : 0);
-      setHeight1(hhh > 0 ? hhh : 0);
-    }
-  }, [id, isFullScreen, windowSize.innerHeight, toolbarItems]);
-  const tableRef = React.useRef(null);
-  React.useEffect(() => {
-    setColumns(propsColumns);
-  }, [propsColumns]);
-  const handleOnFilter = queries => {
-    if (onFilter) {
-      onFilter?.(convertFilters(queries));
-    } else {
-      setFilterState(convertFilters(queries));
-      const b = filterDataByColumns4(mergedData, convertFilters(queries), []);
-      setMergedFilterKeys(getAllRowKey(b));
-      if (queries && queries.length > 0) {
-        // setIsFilter?.(true)
-      } else {
-        // setIsFilter?.(false)
-      }
-    }
-  };
-  const handleResize = column => (e, {
-    size
-  }) => {
-    const newColumn = {
-      ...column,
-      width: size.width
-    };
-    const newColumns = updateArrayByKey(columns, newColumn, 'field');
-    setColumns(newColumns);
-  };
-
-  // ============================ RowKey ============================
-  const getRowKey = React.useMemo(() => {
-    if (typeof rowKey === 'function') {
-      return rowKey;
-    }
-    // @ts-ignore
-    return record => record?.[rowKey];
-  }, [rowKey]);
-  const firstNonGroupColumn = flatColumns2(columns).find(col => col.field && col.field !== '#' && !groupColumns?.includes(col.field) && col.hidden !== true);
-  const nonGroupColumns = flatColumns2(columns).filter(col => col.field && col.field !== '#' && !groupColumns?.includes(col.field) && col.hidden !== true);
-  const getColumnSearchProps = useCallback(column => ({
-    filterDropdown: ({
-      setSelectedKeys,
-      selectedKeys,
-      confirm,
-      setOperatorKey,
-      operatorKey,
-      visible,
-      searchValue,
-      setSearchValue
-    }) => {
-      const type = getTypeFilter(column);
-      // const operatorOptions = type === ('Checkbox' || 'Dropdown' || 'DropTree' || 'CheckboxDropdown') ? booleanOperator : (!type || type === 'Text' ? stringOperator : numberOperator)
-
-      const operatorOptions = ['Checkbox', 'Dropdown', 'DropTree', 'CheckboxDropdown'].includes(type) ? booleanOperator : !type || type === 'Text' ? stringOperator : numberOperator;
-      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(operatorOptions, 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, propDataSourceFilter ?? [], buddhistLocale, locale, t, format, dateRangeLocale)), /*#__PURE__*/React.createElement(Space, {
-        style: {
-          justifyContent: 'end',
-          width: '100%'
-        }
-      }, /*#__PURE__*/React.createElement(Button, {
-        type: "primary",
-        onClick: () => {
-          // confirm({closeDropdown: false})
-          const typeFilter = getTypeFilter(column);
-          if ((!typeFilter || typeFilter === 'Text') && isNullOrUndefined(selectedKeys[0])) {
-            setSelectedKeys(['']);
-          }
-          confirm();
-          // handleSearch(selectedKeys as string[], confirm)
-        },
-        icon: /*#__PURE__*/React.createElement(SearchOutlined, null),
-        size: "small",
-        style: {
-          width: 90
-        }
-      }, t ? t('Filter') : 'Filter'), /*#__PURE__*/React.createElement(Button, {
-        type: "link",
-        size: "small",
-        onClick: () => {
-          // setSearchValue('')
-          setSelectedKeys([]);
-          confirm();
-          // handleSearch()
-          // close()
-        }
-      }, t ? t("Clear") : 'Clear')));
-    },
-    filterIcon: filtered => /*#__PURE__*/React.createElement(FilterFill, {
-      fontSize: 12
-      // onClick={() => {
-      //   onFilterClick?.(column, onFilterCallback)
-      // }}
-      ,
-      style: {
-        color: filtered ? '#E3165B' : '#283046'
-      }
-    }),
-    filterDropdownProps: {
-      onOpenChange(open) {
-        if (open) {
-          // setTimeout(() => searchInput.current?.select(), 100)
-        }
-      }
-    }
-  }), [t, propDataSourceFilter, buddhistLocale, locale, format, dateRangeLocale]);
-  const convertColumns = React.useMemo(() => {
-    return flatColumns2(columns).map((column, colIndex) => {
-      if (column === SELECTION_COLUMN) {
-        return SELECTION_COLUMN;
-      }
-      const transformedColumn = {
-        ...column,
-        dataIndex: column.field ?? column.dataIndex,
-        key: column.field ?? column.key,
-        // title: () => (<HeaderContent column={{...column} as any} t={t}/>),
-        title:
-        /*#__PURE__*/
-        // <SortableHeaderCell columnKey={column.field}>
-        React.createElement(HeaderContent, {
-          column: {
-            ...column
-          },
-          t: t,
-          id: id,
-          wrapSettings: wrapSettings
-        })
-        // </SortableHeaderCell>
-        ,
-        // ellipsis: editAble || column.ellipsis !== false && wrapSettings && wrapSettings.wrapMode !== 'Content' && wrapSettings.wrapMode !== 'Both',
-        // ellipsis: column.ellipsis !== false || (wrapSettings && wrapSettings.wrapMode !== 'Content' && wrapSettings.wrapMode !== 'Both'),
-        ellipsis: false,
-        align: column.textAlign ?? column.align,
-        fixed: column.fixedType ?? column.fixed,
-        isSummary: column.isSummary ?? column.haveSum,
-        hidden: column.hidden ?? column.visible === false
-      };
-      const headerTooltip = t ? t?.(column.headerTooltip ?? column.columnGroupText ?? column.headerText) : column.headerTooltip ?? column.columnGroupText ?? column.headerText;
-      if (transformedColumn.field === '#') {
-        return {
-          ...transformedColumn,
-          title: () => /*#__PURE__*/React.createElement(HeaderContent, {
-            column: {
-              ...column
-            },
-            t: t,
-            id: id,
-            wrapSettings: wrapSettings
-          }),
-          onCell: data => ({
-            // className: 'cell-number',
-            className: classNames('cell-number', {
-              'cell-group': groupColumns && data.children
-            })
-          }),
-          render: (val, record) => {
-            const tmpData = filterDataByColumns4(mergedData, filterStates, mergedFilterKeys);
-            if (pagination && pagination.onChange && pagination.currentPage && pagination.pageSize) {
-              return findItemPath(tmpData, record, rowKey, pagination.currentPage, pagination.pageSize);
-            }
-            return findItemPath(tmpData, record, rowKey);
-          }
-        };
-      }
-      if (transformedColumn.field === 'command') {
-        return {
-          ...transformedColumn,
-          title: () => /*#__PURE__*/React.createElement(HeaderContent, {
-            column: {
-              ...column
-            },
-            t: t,
-            id: id,
-            wrapSettings: wrapSettings
-          }),
-          onCell: data => ({
-            // className: 'cell-number',
-            className: classNames('', {
-              'cell-group': groupColumns && data.children
-            }),
-            style: {
-              padding: '2px 8px'
-            }
-          })
-        };
-      }
-      return {
-        ...transformedColumn,
-        ...(transformedColumn.allowFiltering === false || allowFiltering === false ? {} : {
-          ...getColumnSearchProps(column)
-        }),
-        sorter: column.sorter === false || allowSortering === false ? undefined : {
-          // @ts-ignore
-          compare: (a, b) => onSorter ? a : a[column.field] - b[column.field],
-          multiple: sortMultiple ? colIndex : undefined
-        },
-        // @ts-ignore
-        // sorter: (a, b) => a[column.field] - b[column.field],
-
-        sortIcon: args => {
-          const {
-            sortOrder
-          } = args;
-          return /*#__PURE__*/React.createElement(Fragment, null, !sortOrder && /*#__PURE__*/React.createElement(SortCancel, {
-            fontSize: 15,
-            style: {
-              display: 'flex',
-              opacity: 0,
-              marginLeft: 4
-            },
-            className: classNames(`ui-rc-table-column-sorter-up`, {
-              active: true
-            })
-          }), sortOrder === ASCEND && /*#__PURE__*/React.createElement("span", {
-            className: classNames(`ui-rc-table-column-sorter-up`, {
-              active: sortOrder === ASCEND
-            }),
-            style: {
-              display: 'flex',
-              marginLeft: 4
-            }
-          }, /*#__PURE__*/React.createElement(ArrowUp, {
-            fontSize: 15,
-            color: '#000'
-          })), sortOrder === DESCEND && /*#__PURE__*/React.createElement("span", {
-            className: classNames(`ui-rc-table-column-sorter-up`, {
-              active: sortOrder === DESCEND
-            }),
-            style: {
-              display: 'flex',
-              marginLeft: 4
-            }
-          }, /*#__PURE__*/React.createElement(ArrowDown, {
-            fontSize: 15,
-            color: '#000'
-          })));
-        },
-        onHeaderCell: () => ({
-          id: `${column.field}`,
-          // width: column.width,
-
-          'data-tooltip-id': `${id}-tooltip-header`,
-          'data-tooltip-content': headerTooltip,
-          onResize: handleResize?.(column),
-          className: classNames('', {
-            'head-align-center': column.headerTextAlign === 'center',
-            'head-align-right': column.headerTextAlign === 'right',
-            'ui-rc-table-cell-ellipsis': !wrapSettings || !!(wrapSettings && wrapSettings.wrapMode === 'Content'),
-            // mặc định = true
-            'ui-rc-table-cell-wrap': wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Header')
-          })
-        }),
-        onCell: (data, index) => {
-          const tooltipContent = isOpenTooltip === false ? '' : column?.tooltipDescription ? typeof column.tooltipDescription === 'function' ? column.tooltipDescription({
-            value: data[column.field ?? ''],
-            record: data
-          }) : column.tooltipDescription : column.template && typeof column.template !== 'function' ? column.template : data[column.field ?? ''];
-          return {
-            id: `${column.field}`,
-            colSpan: groupColumns && data.children && column.field === firstNonGroupColumn?.field ? groupSetting?.groupColumnSpan ?? 2 : groupColumns && data.children && nonGroupColumns[1].field === column.field ? 0 : 1,
-            // 'z-index': data?.children && column.field === firstNonGroupColumn?.field ? 11 : undefined,
-            ...transformedColumn?.onCell?.(data, index),
-            className: classNames(transformedColumn?.onCell?.(data, index).className ?? '', {
-              'cell-group': groupColumns && data.children,
-              'cell-group-fixed': groupColumns && data.children && column.field === firstNonGroupColumn?.field,
-              'ui-rc-table-cell-ellipsis': !wrapSettings || wrapSettings && (wrapSettings.wrapMode === 'Header' || wrapSettings.wrapMode !== 'Both'),
-              // mặc định = true
-              'ui-rc-table-cell-wrap': wrapSettings && (wrapSettings.wrapMode === 'Content' || wrapSettings.wrapMode === 'Both')
-            }),
-            'data-tooltip-id': `${id}-tooltip-cell-content`,
-            "data-tooltip-html": ReactDOMServer.renderToStaticMarkup( /*#__PURE__*/React.createElement(React.Fragment, null, tooltipContent)),
-            onMouseEnter: e => {
-              if (e.target.firstChild?.clientWidth <= e.target.firstChild?.scrollWidth) {
-                if (e.target.firstChild?.clientWidth < e.target.firstChild?.scrollWidth) {
-                  setIsOpenTooltip(true);
-                } else {
-                  setIsOpenTooltip(false);
-                }
-              } else {
-                if (e.target.clientWidth < e.target.scrollWidth) {
-                  setIsOpenTooltip(true);
-                } else {
-                  setIsOpenTooltip(false);
-                }
-              }
-            }
-          };
-        },
-        render: (value, record, rowIndex) => {
-          const colFormat = typeof column.format === 'function' ? column.format(record) : column.format;
-          const cellFormat = getFormat(colFormat, format);
-          if (groupAble && groupSetting && groupSetting.hiddenColumnGroup === false) {
-            if (record.children) {
-              return renderContent(column, value, record, rowIndex, colIndex, false, cellFormat);
-            }
-            if (groupColumns?.includes(column.field)) {
-              return '';
-            }
-            return renderContent(column, value, record, rowIndex, colIndex, false, cellFormat);
-          }
-          if (groupAble && column.field === firstNonGroupColumn?.field && record.children) {
-            const currentGroupColumn = flatColumns2(columns).find(it => it.field === record.field);
-            if (currentGroupColumn?.template) {
-              return renderContent(currentGroupColumn, record[record.field], record, rowIndex, colIndex, false, cellFormat);
-            }
-            return /*#__PURE__*/React.createElement("span", null, currentGroupColumn?.headerText, ": ", renderContent(currentGroupColumn, record[record.field], record, rowIndex, colIndex, false, cellFormat));
-          }
-          if (groupAble && record.children && column.sumGroup === true && column.type === 'number') {
-            const thousandSeparator = cellFormat?.thousandSeparator;
-            const decimalSeparator = cellFormat?.decimalSeparator;
-            const dec = cellFormat?.decimalScale;
-            const numericFormatProps = {
-              thousandSeparator: checkThousandSeparator(thousandSeparator, decimalSeparator),
-              decimalSeparator: checkDecimalSeparator(thousandSeparator, decimalSeparator),
-              allowNegative: cellFormat?.allowNegative ?? true,
-              prefix: cellFormat?.prefix,
-              suffix: cellFormat?.suffix,
-              decimalScale: dec,
-              fixedDecimalScale: cellFormat?.fixedDecimalScale ?? false
-            };
-            const sumValue = sumByField(filterDataByColumns4(record.children, [], []), column?.field);
-            return /*#__PURE__*/React.createElement(React.Fragment, null, numericFormatter(sumValue.toString(), numericFormatProps));
-          }
-          return renderContent(column, value, record, rowIndex, colIndex, false, cellFormat);
-        },
-        // defaultSortOrder: 'ascend',
-
-        hidden: groupSetting && groupSetting.hiddenColumnGroup === false ? transformedColumn.hidden : groupAble && groupColumns && groupColumns.includes(column.field) ? true : transformedColumn.hidden
-      };
-    });
-  }, [columns, t, id, wrapSettings, editAble, getColumnSearchProps, groupSetting, groupAble, groupColumns, mergedData, filterStates, mergedFilterKeys, pagination, handleResize, firstNonGroupColumn?.field, nonGroupColumns, format]);
-  const transformColumns = React.useCallback(cols => {
-    return cols.map(column => {
-      const find = convertColumns.find(it => it.field === column.field);
-      if (column === SELECTION_COLUMN) {
-        return SELECTION_COLUMN;
-      }
-      const tmpColumn = {
-        ...column,
-        dataIndex: column.field ?? column.dataIndex,
-        key: column.field ?? column.key,
-        title: /*#__PURE__*/React.createElement(SortableHeaderCell, {
-          columnKey: column.field
-        }, /*#__PURE__*/React.createElement(HeaderContent, {
-          column: {
-            ...column
-          },
-          t: t,
-          id: id,
-          wrapSettings: wrapSettings
-        })),
-        ellipsis: false,
-        // ellipsis: editAble || column.ellipsis !== false && wrapSettings && wrapSettings.wrapMode !== 'Content' && wrapSettings.wrapMode !== 'Both',
-
-        align: column.textAlign ?? column.align,
-        fixed: column.fixedType ?? column.fixed,
-        isSummary: column.isSummary ?? column.haveSum,
-        hidden: column.hidden ?? column.visible === false
-        // defaultSortOrder: 'ascend'
-      };
-
-      // Xử lý đệ quy cho children
-      if (column.children?.length) {
-        return {
-          ...column,
-          ...tmpColumn,
-          children: transformColumns(column.children)
-        };
-      }
-      if (find) {
-        return {
-          ...find
-        };
-      }
-      if (!find) {
-        return {
-          ...column,
-          ...tmpColumn
-        };
-      }
-    });
-  }, [convertColumns, editAble, id, t, wrapSettings]);
-  const mergedColumns = React.useMemo(() => {
-    return transformColumns(columns);
-  }, [columns, transformColumns]);
-  const sensors = useSensors(useSensor(PointerSensor, {
-    activationConstraint: {
-      distance: 1
-    }
-  }));
-  const triggerChangeColumns = (newColumns, type) => {
-    setColumns(newColumns);
-    if (tableRef.current && type === 'columnChoose') {
-      tableRef.current.scrollTo({
-        left: 0.1,
-        behavior: "smooth"
-      });
-    }
-    onChooseColumns?.({
-      showColumns: removeInvisibleColumns([...newColumns]),
-      columns: [...newColumns],
-      flattenColumns: convertFlatColumn([...newColumns])
-    });
-  };
-  const onDragEnd = ({
-    active,
-    over
-  }) => {
-    if (active.id !== over?.id) {
-      const targetColumn = flatColumns2(columns).find(it => it.field === over?.id);
-      const activeIndex = flatColumns2(columns).findIndex(i => i.field === active?.id);
-      const overIndex = flatColumns2(columns).findIndex(i => i.field === over?.id);
-      const rs = arrayMove(columns, activeIndex, overIndex);
-      triggerChangeColumns(rs, targetColumn && targetColumn.fixed === 'left' ? 'columnChoose' : '');
-    }
-    setDragIndex({
-      active: -1,
-      over: -1
-    });
-  };
-  const onDragOver = ({
-    active,
-    over
-  }) => {
-    const activeIndex = columns.findIndex(i => i.field === active.id);
-    const overIndex = columns.findIndex(i => i.field === over?.id);
-    setDragIndex({
-      active: active.id,
-      over: over?.id,
-      direction: overIndex > activeIndex ? 'right' : 'left'
-    });
-  };
-  const triggerGroupColumns = groupedColumns => {
-    setColumns(updateColumnsByGroup(mergedColumns, groupedColumns));
-    if (groupSetting) {
-      if (groupSetting.client === false) {
-
-        // setIsTree(true)
-
-        // setGroupOpen([])
-
-        // const dt = ungroupArray(dataSource)
-
-        // const rs = groupArrayByColumns2(dt, [...value])
-
-        // setResource([...rs])
-
-        // if (groupSetting.onGroup) {
-        //   groupSetting.onGroup({
-        //     columnGrouped: value,
-        //     columns: removeColumns(columns as any, value),
-        //     flattenColumns: convertFlatColumn(removeColumns(columns as any, value)) as any
-        //
-        //   })
-        // }
-      } else {
-        if (groupSetting.onGroup) {
-          groupSetting.onGroup({
-            columnGrouped: groupedColumns,
-            columns: removeColumns(columns, groupedColumns),
-            flattenColumns: flatColumns2(removeColumns(columns, groupedColumns))
-          });
-        }
-      }
-    }
-  };
-  const triggerChangeData = newData => {
-    // setIsManualUpdate(true)
-    // setData(newData)
-    // setMergedData(newData)
-    onDataChange?.(newData);
-    // onDataChange?.(removeFieldRecursive(newData, 'isFilterState'))
-  };
-  const triggerCommandClick = args => {
-    const {
-      id: idCommand,
-      rowId,
-      rowData,
-      index
-    } = args;
-
-    // const tmpData = [...mergedData]
-    const tmpData = filterDataByColumns4(mergedData, filterStates, mergedFilterKeys);
-    if (idCommand === 'DELETE') {
-      // bật modal confirm
-      if (commandSettings && commandSettings.confirmDialog) {
-        MySwal.fire({
-          title: t ? t('Confirm') : 'Confirm',
-          text: t ? t('Do you want to delete item?') : 'Do you want to delete item?',
-          // icon: 'warning',
-          allowOutsideClick: false,
-          showCancelButton: true,
-          confirmButtonText: t ? t('Delete') : 'Delete',
-          cancelButtonText: t ? t('Cancel') : 'Cancel',
-          customClass: {
-            confirmButton: 'be-button btn-primary',
-            cancelButton: 'be-button btn-danger ms-1'
-          },
-          buttonsStyling: false
-        }).then(async result => {
-          if (result.value) {
-            if (!commandSettings || commandSettings && commandSettings.client !== false) {
-              // client
-
-              // kiểm tra dòng hiện tại có parent
-
-              let newData = [];
-              if (rowData?.parentId) {
-                const parent = findItemByKey(tmpData, rowKey, rowData.parentId);
-                const childData = parent?.children ? [...parent.children] : [];
-                const findIndex = childData.findIndex(obj => obj[rowKey] === rowData[rowKey]);
-                childData.splice(Number(findIndex), 1);
-                const newRowData = {
-                  ...parent,
-                  children: childData
-                };
-                // const newDataSource =  updateArrayByKey(tmpData, newRowData, rowKey as string)
-                newData = updateArrayByKey(tmpData, newRowData, rowKey);
-              } else {
-                tmpData.splice(Number(index), 1);
-                newData = [...tmpData];
-              }
-              if (commandClick) {
-                commandClick({
-                  id: idCommand,
-                  rowId: rowData.rowId,
-                  rowData,
-                  index,
-                  // rows: [...tmpData]
-                  rows: [...newData]
-                });
-              }
-            } else {
-              // server ~~ không làm gì
-              if (commandClick) {
-                commandClick({
-                  id: idCommand,
-                  rowId: rowData.rowId,
-                  rowData,
-                  index,
-                  rows: [...mergedData]
-                });
-              }
-            }
-          } else if (result.dismiss === MySwal.DismissReason.cancel) {}
-        });
-      } else {
-        // -------------------
-
-        if (!commandSettings || commandSettings && commandSettings.client !== false) {
-          // client
-
-          let newData2 = [];
-          if (rowData?.parentId) {
-            const parent = findItemByKey(mergedData, rowKey, rowData.parentId);
-            const childData = parent?.children ? [...parent.children] : [];
-            const findIndex = childData.findIndex(obj => obj[rowKey] === rowData[rowKey]);
-            childData.splice(Number(findIndex), 1);
-            const newRowData = {
-              ...parent,
-              children: childData
-            };
-            newData2 = updateArrayByKey(tmpData, newRowData, rowKey);
-          } else {
-            tmpData.splice(Number(index), 1);
-            newData2 = [...tmpData];
-          }
-          if (commandClick) {
-            commandClick({
-              id: idCommand,
-              rowId,
-              rowData,
-              index,
-              rows: [...newData2]
-            });
-          }
-        } else {
-          // server
-          if (commandClick) {
-            commandClick({
-              id: idCommand,
-              rowId,
-              rowData,
-              index,
-              rows: [...mergedData]
-            });
-          }
-        }
-      }
-    } else {
-      if (commandClick) {
-        commandClick(args);
-      }
-    }
-  };
-  const triggerPaste = (pastedRows, pastedColumnsArray, newData, copyRows) => {
-    const handlePasteCallback = callbackData => {
-      // const newDataUpdate  = updateData(mergedData, callbackData, rowKey as any)
-
-      const rsFilterData = updateOrInsert(flattenArray([...mergedData]), callbackData);
-      const rs = unFlattenData(rsFilterData);
-      triggerChangeData(rs);
-
-      // onCellPaste?.dataChange?.(newDataUpdate)
-    };
-    if (onCellPaste && onCellPaste.onPasted) {
-      if (onCellPaste.onPasted.length > 1) {
-        // có callback
-        onCellPaste.onPasted({
-          pasteData: pastedRows,
-          copyRows,
-          type: 'onPaste',
-          data: mergedData,
-          pastedColumns: pastedColumnsArray
-        }, handlePasteCallback);
-      } else {
-        // không có callback
-        onCellPaste.onPasted({
-          pasteData: pastedRows,
-          type: 'onPaste',
-          copyRows,
-          data: mergedData,
-          pastedColumns: pastedColumnsArray
-        }, handlePasteCallback);
-        triggerChangeData(newData);
-
-        // onCellPaste.dataChange?.(newData)
-      }
-    } else {
-      triggerChangeData(newData);
-    }
-  };
-  const handleChange = (paging, filters, sorter) => {
-    onSorter?.(sorter);
-  };
-
-  // const fullScreenChange = (state: boolean) => {
-
-  //   setIsFullScreen(state)
-
-  // }
-
-  const handleFullScreen = () => {
-    setIsFullScreen(!isFullScreen);
-  };
-  const CustomThead = headerProps => {
-    const {
-      children,
-      className
-    } = headerProps;
-    return /*#__PURE__*/React.createElement("thead", {
-      ref: theadRef,
-      className: className
-    }, children);
-  };
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(DndContext, {
-    sensors: sensors,
-    modifiers: [restrictToHorizontalAxis],
-    onDragEnd: onDragEnd,
-    onDragOver: onDragOver,
-    collisionDetection: closestCenter
-  }, /*#__PURE__*/React.createElement(SortableContext, {
-    items: columns.map(i => i.field),
-    strategy: horizontalListSortingStrategy
-  }, /*#__PURE__*/React.createElement(DragIndexContext.Provider, {
-    value: dragIndex
-  }, /*#__PURE__*/React.createElement(Group, _extends({}, rest, {
-    t: t,
-    id: id,
-    locale: locale,
-    tableRef: tableRef
-    // dataSource={mergedData}
-    ,
-    originData: mergedData
-    // dataSource={filterStates && filterStates.length ? filterData : mergedData}
-    ,
-    dataSource: filterDataByColumns4(mergedData, filterStates, mergedFilterKeys),
-    format: format,
-    columns: mergedColumns
-
-    // showSorterTooltip={false}
-    ,
-    showSorterTooltip: {
-      target: 'sorter-icon'
-    },
-    triggerChangeColumns: triggerChangeColumns,
-    triggerChangeData: triggerChangeData,
-    triggerGroupColumns: triggerGroupColumns,
-    rowKey: rowKey,
-    getRowKey: getRowKey,
-    triggerPaste: triggerPaste,
-    clickHeaderToSort: clickHeaderToSort,
-    groupSetting: groupSetting,
-    groupAble: groupAble,
-    groupColumns: groupColumns,
-    commandClick: triggerCommandClick,
-    summary: summary,
-    pagination: pagination,
-    scroll: scrollHeight - (summary ? 1 : 1) < 0 ? {
-      y: 500
-    } : {
-      y: scrollHeight - (summary ? 1 : 1)
-    } // scroll height auto, không quá  600
-    ,
-    height: propsHeight,
-    scrollHeight: scrollHeight,
-    toolbarItems: toolbarItems,
-    components: {
-      header: {
-        cell: ResizableTitle,
-        wrapper: CustomThead
-      }
-    },
-    onFilter: val => {
-      handleOnFilter(val);
-    },
-    setMergedFilterKeys: setMergedFilterKeys,
-    mergedFilterKeys: mergedFilterKeys,
-    wrapSettings: wrapSettings,
-    onChange: handleChange,
-    handleFullScreen: handleFullScreen,
-    isFullScreen: isFullScreen
-  })))), /*#__PURE__*/React.createElement(DragOverlay, {
-    style: {
-      minWidth: 100,
-      width: columns[columns.findIndex(i => i.field === dragIndex.active)]?.width
-    }
-  }, /*#__PURE__*/React.createElement("th", {
-    style: {
-      backgroundColor: '#f0f0f0',
-      padding: 6,
-      borderRadius: 6,
-      fontWeight: 500
-    }
-  }, columns[columns.findIndex(i => i.field === dragIndex.active)]?.headerText))), /*#__PURE__*/React.createElement(Modal, {
-    open: isFullScreen,
-    footer: null,
-    centered: true,
-    closable: true,
-    width: '100%',
-    style: {
-      maxWidth: '100%',
-      height: '100%'
-    },
-    onClose: () => setIsFullScreen(false),
-    onCancel: () => setIsFullScreen(false)
-
-    // destroyOnClose
-    ,
-    styles: {
-      content: {
-        height: '100vh',
-        borderRadius: 0
-      },
-      wrapper: {
-        zIndex: 1060
-      }
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      paddingTop: 20
-    }
-  }, /*#__PURE__*/React.createElement(DndContext, {
-    sensors: sensors,
-    modifiers: [restrictToHorizontalAxis],
-    onDragEnd: onDragEnd,
-    onDragOver: onDragOver,
-    collisionDetection: closestCenter
-  }, /*#__PURE__*/React.createElement(SortableContext, {
-    items: columns.map(i => i.field),
-    strategy: horizontalListSortingStrategy
-  }, /*#__PURE__*/React.createElement(DragIndexContext.Provider, {
-    value: dragIndex
-  }, /*#__PURE__*/React.createElement(Group, _extends({}, rest, {
-    t: t,
-    id: faker.string.alpha(20),
-    locale: locale,
-    tableRef: tableRef
-    // dataSource={mergedData}
-    ,
-    originData: mergedData
-    // dataSource={filterStates && filterStates.length ? filterData : mergedData}
-    ,
-    dataSource: filterDataByColumns4(mergedData, filterStates, mergedFilterKeys),
-    format: format,
-    columns: mergedColumns,
-    showSorterTooltip: {
-      target: 'sorter-icon'
-    },
-    triggerChangeColumns: triggerChangeColumns,
-    triggerChangeData: triggerChangeData,
-    triggerGroupColumns: triggerGroupColumns,
-    rowKey: rowKey,
-    getRowKey: getRowKey,
-    triggerPaste: triggerPaste,
-    clickHeaderToSort: clickHeaderToSort,
-    groupSetting: groupSetting,
-    groupAble: groupAble,
-    groupColumns: groupColumns,
-    commandClick: triggerCommandClick,
-    summary: summary,
-    pagination: pagination,
-    toolbarItems: toolbarItems,
-    scroll: scrollHeight1 - (summary ? 1 : 1) < 0 ? {
-      y: 500
-    } : {
-      y: scrollHeight1 - (summary ? 1 : 1)
-    } // scroll height auto, không quá  600
-    ,
-
-    height: windowSize.innerHeight - 35,
-    scrollHeight: scrollHeight1,
-    components: {
-      header: {
-        cell: ResizableTitle
-      }
-      // body: { cell: TableBodyCell }
-    }
-    // setTooltipContent={setTooltipContent}
-    ,
-
-    onFilter: val => {
-      handleOnFilter(val);
-      // triggerFilter?.(convertFilters(val))
-      // onFilter?.(convertFilters(val))
-    },
-    setMergedFilterKeys: setMergedFilterKeys,
-    mergedFilterKeys: mergedFilterKeys,
-    wrapSettings: wrapSettings,
-    onChange: handleChange,
-    handleFullScreen: handleFullScreen,
-    isFullScreen: isFullScreen
-
-    // onChange={(paging, filters, sorter) => {
-    //   handleChange(sorter)
-    // }}
-  })))), /*#__PURE__*/React.createElement(DragOverlay, {
-    style: {
-      minWidth: 100,
-      width: columns[columns.findIndex(i => i.field === dragIndex.active)]?.width
-    }
-  }, /*#__PURE__*/React.createElement("th", {
-    style: {
-      backgroundColor: '#f0f0f0',
-      padding: 6,
-      borderRadius: 6,
-      fontWeight: 500
-    }
-  }, columns[columns.findIndex(i => i.field === dragIndex.active)]?.headerText))))), /*#__PURE__*/React.createElement(Tooltip, {
-    id: `${id}-tooltip-form-error`,
-    style: {
-      zIndex: 1999
-    }
-  }), /*#__PURE__*/React.createElement(Tooltip, {
-    id: `${id}-tooltip-cell-content`,
-    style: {
-      zIndex: 1999
-    }
-  }));
-};
-export default InternalTable;