es-grid-template 1.8.71 → 1.8.72

package/es/group-component/TableContainerEdit.js

@@ -0,0 +1,2068 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React, { Fragment } from "react";
+import { useCopyToClipboard } from 'usehooks-ts';
+import { checkDecimalSeparator, checkThousandSeparator, detectSeparators, findItemByKey, flattenArray, flattenData, getAllRowKey, getColIdsBetween, getDefaultValue, getFormat, getRowIdsBetween, getSelectedCellMatrix, getTableHeight, isEditable, isFormattedNumber, newGuid, parseExcelClipboardText, sumSize,
+// sumSize,
+unFlattenData, updateArrayByKey, updateColumnWidthsRecursive, updateOrInsert } from "./hook/utils";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { useForm } from 'react-hook-form';
+import { Button, Modal, Typography, Dropdown } from "antd";
+import Pagination from "rc-master-ui/es/pagination";
+import { numericFormatter, removeNumericFormat } from "react-numeric-component";
+import { TableContext } from "./useContext";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { Toolbar } from "rc-master-ui";
+import classNames from "classnames";
+import { Collapse2, Expand2, Maximize, Minimize } from "becoxy-icons";
+import { ColumnsChoose } from "./ColumnsChoose";
+import TableWrapper from "./table/TableWrapper";
+import withReactContent from "sweetalert2-react-content";
+import Swal from "sweetalert2";
+import { convertToObjTrue, findAllChildrenKeys2, flatColumns2, isObjEmpty } from "../table-component/hook/utils";
+import { ColumnsGroup } from "./ColumnsGroup";
+import { unGroupData } from "../table-virtuoso/hook/utils";
+const MySwal = withReactContent(Swal);
+const {
+  Paragraph,
+  Title
+} = Typography;
+const validateData = async (data, formSchema) => {
+  if (!formSchema) {
+    return [];
+  } else {
+    const errors = [];
+    for (let i = 0; i < data.length; i++) {
+      try {
+        await formSchema.validate(data[i], {
+          abortEarly: false
+        });
+      } catch (error) {
+        errors.push(error.inner.reduce((acc, err) => {
+          acc[err.path] = {
+            field: err.path,
+            index: i,
+            message: err.message,
+            type: err.type,
+            ref: {
+              name: err.path
+            }
+          };
+          return {
+            ...acc,
+            index: i,
+            id: data[i].rowId
+          };
+        }, {}));
+      }
+    }
+    return errors;
+  }
+};
+const TableContainerEdit = props => {
+  const {
+    t,
+    table,
+    title,
+    id,
+    prefix,
+    commandClick,
+    editAble,
+    rowEditable,
+    rowKey,
+    format,
+    dataSource,
+    originData,
+    expandable,
+    wrapSettings,
+    recordDoubleClick,
+    // triggerFilter,
+    selectionSettings,
+    isSelectionChange,
+    setIsSelectionChange,
+    // onContextMenu,
+    contextMenuItems,
+    setSorterChange,
+    setFilterChange,
+    onCellPaste,
+    // triggerPaste,
+    validate,
+    // triggerChangeData,
+    onCellChange,
+    onDataChange,
+    defaultValue,
+    toolbarItems,
+    mergedFilterKeys,
+    setMergedFilterKeys,
+    expanded,
+    setExpanded,
+    onBlur,
+    fullScreen,
+    pagination,
+    showToolbar,
+    actionTemplate,
+    showColumnChoose,
+    height,
+    minHeight,
+    summary,
+    locale,
+    groupColumns,
+    groupSetting,
+    columns,
+    propsColumns,
+    triggerChangeColumns,
+    columnHidden,
+    showEmptyText,
+    isFullScreen,
+    setIsFullScreen,
+    infiniteScroll,
+    windowSize,
+    next,
+    loading,
+    contextMenuOpen,
+    contextMenuClick,
+    contextMenuHidden,
+    commandSettings,
+    isDataTree,
+    onCellClick,
+    // setColumnSizing,
+    setColumns,
+    columnSizing,
+    columnSizingInfo,
+    rowClassName,
+    onRowStyles,
+    dataSourceFilter,
+    triggerGroupColumns
+  } = props;
+  const containerRef = React.useRef(null);
+  const bottomToolbarRef = React.useRef(null);
+  const topToolbarRef = React.useRef(null);
+  const childrenColumnName = 'children';
+
+  // const visibleColumns = table.getVisibleLeafColumns()
+
+  // //The virtualizers need to know the scrollable container element
+  const tableContainerRef = React.useRef(null);
+  const [, copy] = useCopyToClipboard();
+
+  // const columnSizingState = table.getState().columnSizing;
+
+  const itemsAdd = React.useMemo(() => {
+    return [{
+      key: '10',
+      label: `10 ${t ? t('rows') : 'rows'}`
+    }, {
+      key: '50',
+      label: `50 ${t ? t('rows') : 'rows'}`
+    }, {
+      key: '100',
+      label: `100 ${t ? t('rows') : 'rows'}`
+    }];
+  }, [t]);
+  const [dataErrors, setDataErrors] = React.useState([]);
+  React.useEffect(() => {
+    if (validate && dataSource && dataSource.length) {
+      validateData(dataSource, validate).then(error => {
+        setDataErrors([...error]);
+        // if (getErrors) {
+        //   getErrors([...error])
+        // }
+      });
+    }
+  }, [validate, dataSource]);
+  const visibleColumns = table.getVisibleLeafColumns();
+  // const visibleColumns = table.getVisibleFlatColumns();
+
+  const fixedLeftColumns = table.getState().columnPinning.left ? visibleColumns.filter(vc => table.getState().columnPinning.left?.includes(vc.id)) : [];
+  const fixedRightColumns = table.getState().columnPinning.right ? visibleColumns.filter(vc => table.getState().columnPinning.right?.includes(vc.id)) : [];
+
+  //we are using a slightly different virtualization strategy for columns (compared to virtual rows) in order to support dynamic row heights
+  const columnVirtualizer = useVirtualizer({
+    count: visibleColumns.length,
+    estimateSize: index => visibleColumns[index].getSize(),
+    //estimate width of each column for accurate scrollbar dragging
+    getScrollElement: () => tableContainerRef.current,
+    horizontal: true,
+    // measureElement(element) {
+
+    //   return element?.getBoundingClientRect().width;
+    // },
+
+    measureElement: typeof window !== 'undefined' && navigator.userAgent.indexOf('Firefox') === -1 ? element => element?.getBoundingClientRect().height : undefined,
+    overscan: 0 //how many columns to render on each side off screen each way (adjust this for performance)
+  });
+  const virtualColumns = columnVirtualizer.getVirtualItems();
+  const cacheColumns = columnVirtualizer.measurementsCache;
+  const rightCols = table.getState().columnPinning.right?.length ? [...cacheColumns].slice(-(table.getState().columnPinning.right?.length ?? 0)) : [];
+  const leftCols = [...cacheColumns].slice(0, table.getState().columnPinning.left?.length ?? 0);
+  const rightWidth = sumSize(rightCols);
+  const leftWidth = sumSize(leftCols);
+
+  //different virtualization strategy for columns - instead of absolute and translateY, we add empty columns to the left and right
+  let virtualPaddingLeft;
+  let virtualPaddingRight;
+  const pdRight = columnVirtualizer.getTotalSize() - (virtualColumns[virtualColumns.length - 1]?.end ?? 0);
+  if (columnVirtualizer && virtualColumns?.length) {
+    virtualPaddingLeft = fixedLeftColumns && fixedLeftColumns.length > 0 ? (virtualColumns[0]?.start ?? 0) - leftWidth > 0 ? (virtualColumns[0]?.start ?? 0) - leftWidth : 0 : virtualColumns[0]?.start ?? 0;
+
+    // virtualPaddingLeft = leftCols.length === rss.length ?  (virtualColumns[0]?.start ?? 0) : 0;
+    // columnVirtualizer.getTotalSize() - (virtualColumns[virtualColumns.length - 1]?.end ?? 0) - rightWidth > 0 ? columnVirtualizer.getTotalSize() - (virtualColumns[virtualColumns.length - 1]?.end ?? 0) - rightWidth : 0;
+    virtualPaddingRight = fixedRightColumns && fixedRightColumns.length > 0 ? pdRight - rightWidth > 0 ? pdRight - rightWidth : 0 : pdRight;
+    // virtualPaddingRight = columnVirtualizer.getTotalSize() - (virtualColumns[virtualColumns.length - 1]?.end ?? 0)
+  }
+  const [editingKey, setEditingKey] = React.useState('');
+  const [rangeState, setRangeState] = React.useState({
+    startRowIndex: undefined,
+    endRowIndex: undefined,
+    startColIndex: undefined,
+    endColIndex: undefined,
+    rowIds: [],
+    colIds: [],
+    colRange: [],
+    rowRange: []
+  });
+  const [rangePasteState, setRangePasteState] = React.useState({
+    startRowIndex: undefined,
+    endRowIndex: undefined,
+    startColIndex: undefined,
+    endColIndex: undefined,
+    rowIds: [],
+    colIds: [],
+    colRange: [],
+    rowRange: []
+  });
+  const [focusedCell, setFocusedCell] = React.useState(undefined);
+  const [startCell, setStartCell] = React.useState(undefined);
+  const [endCell, setEndCell] = React.useState(undefined);
+  const [startPasteCell, setStartPasteCell] = React.useState(undefined);
+  const [endPasteCell, setEndPasteCell] = React.useState(undefined);
+  const [isSelecting, setIsSelecting] = React.useState(false);
+  const [isPasting, setIsPasting] = React.useState(false);
+  // const [isFullScreen] = React.useState(false);
+  const [tableHeight, settableHeight] = React.useState(0);
+
+  // const [isAddNewRow, setIsAddNewRow] = React.useState(false)
+
+  const rowsFocus = React.useMemo(() => {
+    return startCell && endCell ? getRowIdsBetween(table, startCell.rowId, endCell.rowId) : [];
+  }, [endCell, startCell, table]);
+  const copySelectionToClipboard = React.useCallback(() => {
+    if (!startCell || !endCell) {
+      return;
+    }
+
+    // const allRows = table.getRowModel().rows;
+    const allRows = table.getRowModel().flatRows;
+    // const allColumns = table.getAllLeafColumns();
+
+    const rowIds = getRowIdsBetween(table, startCell.rowId, endCell.rowId);
+    const colIds = getColIdsBetween(table, startCell.colId, endCell.colId);
+    const dataToCopy = [];
+    rowIds.forEach(rowId => {
+      const row = allRows.find(r => r.id === rowId);
+      if (!row) return;
+      const rowData = [];
+      colIds.forEach(colId => {
+        const cellll = row.getVisibleCells().find(c => c.column.id === colId);
+        const value = cellll?.getValue();
+        rowData.push(value !== undefined ? String(value) : '');
+      });
+      dataToCopy.push(rowData);
+    });
+
+    // Convert to TSV string
+    const tsv = dataToCopy.map(row => row.join('\t')).join('\n');
+
+    // Copy to clipboard
+    // navigator.clipboard.writeText(tsv).then(() => {
+    // });
+
+    copy(tsv).then(() => {}).catch(() => {});
+  }, [startCell, endCell, table]);
+  const triggerChangeData = React.useCallback(newData => {
+    onDataChange?.(newData);
+  }, [onDataChange, dataSource]);
+  const triggerPaste = React.useCallback((pastedRows, pastedColumnsArray, newData, copyRows) => {
+    const handlePasteCallback = callbackData => {
+      const rsFilterData = updateOrInsert(flattenArray([...originData]), flattenArray([...callbackData]));
+      const rs = unFlattenData(rsFilterData);
+      triggerChangeData(rs);
+    };
+    if (onCellPaste && onCellPaste.onPasted) {
+      if (onCellPaste.onPasted.length > 1) {
+        // có callback
+        onCellPaste.onPasted({
+          pasteData: pastedRows,
+          copyRows,
+          type: 'onPaste',
+          data: originData,
+          pastedColumns: pastedColumnsArray
+        }, handlePasteCallback);
+      } else {
+        // không có callback
+        onCellPaste.onPasted({
+          pasteData: pastedRows,
+          type: 'onPaste',
+          copyRows,
+          data: originData,
+          pastedColumns: pastedColumnsArray
+        }, handlePasteCallback);
+        triggerChangeData(newData);
+      }
+    } else {
+      triggerChangeData(newData);
+    }
+  }, [onCellPaste, originData, triggerChangeData]);
+  const handlePasted = React.useCallback(pasteData => {
+    if (!startCell) {
+      return;
+    }
+    const rows = pasteData.slice(0, onCellPaste?.maxRowsPaste ?? 200);
+
+    // const allRows = table.getRowModel().rows;
+    const allRows = table.getRowModel().flatRows;
+    const allCols = table.getVisibleLeafColumns();
+    const startRowIdx = allRows.findIndex(r => r.id === startCell.rowId);
+    const startColIdx = allCols.findIndex(c => c.id === startCell.colId);
+
+    // const record: any  = allRows[startRowIdx].original
+
+    const record = table.getRow(startCell.rowId).original;
+    const row = table.getRow(startCell.rowId);
+    if (!row.parentId) {
+      // Cập nhật data mới
+      const newData = flattenArray([...dataSource]);
+
+      // Lấy vị trí bắt đầu
+
+      // const startRow = newData.findIndex((it) => it[rowKey as any] === record[rowKey])
+      const startRow = startRowIdx;
+      const startCol = startColIdx;
+      const pastedRows = [];
+      const pastedColumns = new Set();
+      rows.forEach((rowValues, rowIndex) => {
+        const targetRow = startRow + rowIndex;
+
+        // Nếu vượt quá số dòng hiện có, thêm dòng mới
+        if (targetRow >= newData.length) {
+          newData.push({
+            id: undefined,
+            rowId: newGuid()
+          });
+        }
+        rowValues.forEach((cellValue, colIndex) => {
+          const targetCol = startCol + colIndex;
+          if (targetCol >= allCols.length) {
+            // Không vượt quá số cột
+            return;
+          }
+          const columnTarget = allCols[targetCol];
+          const columnOri = columnTarget.columnDef.meta ?? {};
+          const isEdit = typeof columnOri?.editEnable === 'function' ? columnOri.editEnable(newData[targetRow]) : columnOri.editEnable;
+          if (isEdit) {
+            const columnKey = allCols[targetCol].id;
+
+            // if (columnOri.type === 'number' && isFormattedNumber(cellValue.trim())) {
+            if (columnOri.type === 'number') {
+              if (cellValue.trim() === '') {
+                newData[targetRow] = {
+                  ...newData[targetRow],
+                  [columnKey]: null
+                };
+              }
+              if (isFormattedNumber(cellValue.trim()) || !isNaN(Number(cellValue.trim()))) {
+                const colFormat = typeof columnOri.format === 'function' ? columnOri.format(record) : columnOri.format;
+                const valuePasteFormat = detectSeparators(cellValue.trim());
+                const cellFormat = getFormat(colFormat, format);
+                const thousandSeparator = valuePasteFormat?.thousandSeparator;
+                const decimalSeparator = valuePasteFormat?.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 val = removeNumericFormat(cellValue.trim(), undefined, numericFormatProps);
+                newData[targetRow] = {
+                  ...newData[targetRow],
+                  [columnKey]: Number(val)
+                };
+              }
+            } else {
+              newData[targetRow] = {
+                ...newData[targetRow],
+                [columnKey]: cellValue.trim()
+              };
+            }
+            pastedColumns.add(columnKey);
+          }
+        });
+
+        // Lưu dòng được paste
+        pastedRows.push(newData[targetRow]);
+      });
+      const pastedColumnsArray = Array.from(pastedColumns) ?? [];
+      const rsFilterData = updateOrInsert(flattenArray([...originData]), newData);
+      const rs = unFlattenData(rsFilterData);
+      triggerPaste?.(pastedRows, pastedColumnsArray, rs, []);
+    } else {
+      // const parent = findItemByKey(dataSource, rowKey as any, record.parentId)
+      const parent = row.getParentRow()?.original;
+
+      // Cập nhật childData mới
+      const childData = parent?.children ? [...parent.children] : [];
+
+      // Lấy vị trí bắt đầu
+      // const { row: startRow, col: startCol } = selectedCell;
+      const startRow = childData.findIndex(it => it[rowKey] === record[rowKey]);
+      const startCol = startColIdx;
+      const pastedRows = [];
+      const pastedColumns = new Set();
+      rows.forEach((rowValues, rowIndex) => {
+        const targetRow = startRow + rowIndex;
+
+        // Nếu vượt quá số dòng hiện có, thêm dòng mới
+        if (targetRow >= childData.length) {
+          childData.push({
+            id: undefined,
+            rowId: newGuid(),
+            parentId: parent[rowKey ?? 'id']
+          });
+        }
+        rowValues.forEach((cellValue, colIndex) => {
+          const targetCol = startCol + colIndex;
+          if (targetCol >= allCols.length) {
+            // Không vượt quá số cột
+            return;
+          }
+          const columnTarget = allCols[targetCol];
+
+          // const isEdit = typeof columnTarget.editEnable === 'function' ? columnTarget.editEnable(childData[targetRow]) : columnTarget.editEnable
+
+          const columnOri = columnTarget.columnDef.meta ?? {};
+          const isEdit = typeof columnOri?.editEnable === 'function' ? columnOri.editEnable(childData[targetRow]) : columnOri.editEnable;
+
+          // if (isEdit) {
+
+          //   const columnKey = allCols[targetCol].id
+
+          //   childData[targetRow] = { ...childData[targetRow], [columnKey]: cellValue.trim() }
+
+          //   pastedColumns.add(columnKey)
+          // }
+
+          if (isEdit) {
+            const columnKey = allCols[targetCol].id;
+
+            // if (columnOri.type === 'number' && isFormattedNumber(cellValue.trim())) {
+            if (columnOri.type === 'number') {
+              if (cellValue.trim() === '') {
+                childData[targetRow] = {
+                  ...childData[targetRow],
+                  [columnKey]: null
+                };
+              }
+              if (isFormattedNumber(cellValue.trim()) || !isNaN(Number(cellValue.trim()))) {
+                const colFormat = typeof columnOri.format === 'function' ? columnOri.format(record) : columnOri.format;
+                const valuePasteFormat = detectSeparators(cellValue.trim());
+                const cellFormat = getFormat(colFormat, format);
+                const thousandSeparator = valuePasteFormat?.thousandSeparator;
+                const decimalSeparator = valuePasteFormat?.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 val = removeNumericFormat(cellValue.trim(), undefined, numericFormatProps);
+                childData[targetRow] = {
+                  ...childData[targetRow],
+                  [columnKey]: Number(val)
+                };
+              }
+            } else {
+              childData[targetRow] = {
+                ...childData[targetRow],
+                [columnKey]: cellValue.trim()
+              };
+            }
+            pastedColumns.add(columnKey);
+          }
+        });
+
+        // Lưu dòng được paste
+        pastedRows.push(childData[targetRow]);
+      });
+      const pastedColumnsArray = Array.from(pastedColumns) ?? [];
+      const newRowData = {
+        ...parent,
+        children: childData
+      }; // item đã được filter
+
+      const newDataSource = updateArrayByKey(originData, newRowData, rowKey);
+      triggerPaste?.(pastedRows, pastedColumnsArray, newDataSource, []);
+    }
+  }, [dataSource, format, onCellPaste?.maxRowsPaste, originData, rowKey, startCell, table, triggerPaste]);
+  const handlePastedGroup = React.useCallback(pasteData => {
+    if (!startCell) {
+      return;
+    }
+    const rows = pasteData.slice(0, onCellPaste?.maxRowsPaste ?? 200);
+
+    // const allRows = table.getRowModel().flatRows;
+    const allCols = table.getVisibleLeafColumns();
+
+    // const startRowIdx = allRows.findIndex(r => r.id === startCell.rowId);
+    const startColIdx = allCols.findIndex(c => c.id === startCell.colId);
+
+    // const record: any  = allRows[startRowIdx].original
+
+    const record = table.getRow(startCell.rowId).original;
+    const row = table.getRow(startCell.rowId);
+    if (!row.parentId) {
+
+      // // Cập nhật data mới
+      // const newData = flattenArray([...dataSource])
+
+      // // Lấy vị trí bắt đầu
+
+      // // const startRow = newData.findIndex((it) => it[rowKey as any] === record[rowKey])
+      // const startRow = startRowIdx
+
+      // const startCol = startColIdx
+
+      // const pastedRows: RecordType[] = []
+      // const pastedColumns = new Set()
+
+      // rows.forEach((rowValues: any, rowIndex: any) => {
+      //   const targetRow = startRow + rowIndex
+
+      //   // Nếu vượt quá số dòng hiện có, thêm dòng mới
+      //   if (targetRow >= newData.length) {
+
+      //     newData.push({ id: undefined, rowId: newGuid() })
+      //   }
+
+      //   rowValues.forEach((cellValue: any, colIndex: any) => {
+
+      //     const targetCol = startCol + colIndex
+
+      //     if (targetCol >= allCols.length) { // Không vượt quá số cột
+      //       return
+      //     }
+
+      //     const columnTarget = allCols[targetCol]
+
+      //     const columnOri: any = columnTarget.columnDef.meta ?? {}
+
+      //     const isEdit = typeof columnOri?.editEnable === 'function' ? columnOri.editEnable(newData[targetRow]) : columnOri.editEnable
+
+      //     if (isEdit) {
+
+      //       const columnKey = allCols[targetCol].id
+
+      //       // if (columnOri.type === 'number' && isFormattedNumber(cellValue.trim())) {
+      //       if (columnOri.type === 'number') {
+      //         if (cellValue.trim() === '') {
+      //           newData[targetRow] = { ...newData[targetRow], [columnKey]: null }
+      //         }
+
+      //         if (isFormattedNumber(cellValue.trim()) || !isNaN(Number(cellValue.trim()))) {
+
+      //           const colFormat = typeof columnOri.format === 'function' ? columnOri.format(record) : columnOri.format
+
+      //           const valuePasteFormat = detectSeparators(cellValue.trim())
+
+      //           const cellFormat = getFormat(colFormat, format)
+      //           const thousandSeparator = valuePasteFormat?.thousandSeparator
+      //           const decimalSeparator = valuePasteFormat?.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 val = removeNumericFormat(cellValue.trim(), undefined, numericFormatProps)
+
+      //           newData[targetRow] = { ...newData[targetRow], [columnKey]: Number(val) }
+
+      //         }
+
+      //       } else {
+
+      //         newData[targetRow] = { ...newData[targetRow], [columnKey]: cellValue.trim() }
+
+      //       }
+
+      //       pastedColumns.add(columnKey)
+
+      //     }
+
+      //   }
+      //   )
+
+      //   // Lưu dòng được paste
+      //   pastedRows.push(newData[targetRow])
+
+      // })
+
+      // const pastedColumnsArray = Array.from(pastedColumns) ?? []
+
+      // const rsFilterData = updateOrInsert(flattenArray([...originData]), newData)
+      // const rsFilterData1 = updateOrInsert(flattenArray([...dataSource]), newData)
+
+      // const rs = unFlattenData(rsFilterData)
+
+      // const dta = unGroupData(rs, originData)
+
+      // triggerPaste?.(pastedRows, pastedColumnsArray as string[], rs, [])
+    } else {
+      // const parent = findItemByKey(dataSource, rowKey as any, record.parentId)
+      const parent = row.getParentRow()?.original;
+
+      // Cập nhật childData mới
+      const childData = parent?.children ? [...parent.children] : [];
+
+      // Lấy vị trí bắt đầu
+      // const { row: startRow, col: startCol } = selectedCell;
+      const startRow = childData.findIndex(it => it[rowKey] === record[rowKey]);
+      const startCol = startColIdx;
+      const pastedRows = [];
+      const pastedColumns = new Set();
+      rows.forEach((rowValues, rowIndex) => {
+        const targetRow = startRow + rowIndex;
+
+        // Nếu vượt quá số dòng hiện có, thêm dòng mới
+        if (targetRow >= childData.length) {
+          childData.push({
+            id: undefined,
+            rowId: newGuid(),
+            parentId: parent[rowKey ?? 'id']
+          });
+        }
+        rowValues.forEach((cellValue, colIndex) => {
+          const targetCol = startCol + colIndex;
+          if (targetCol >= allCols.length) {
+            // Không vượt quá số cột
+            return;
+          }
+          const columnTarget = allCols[targetCol];
+
+          // const isEdit = typeof columnTarget.editEnable === 'function' ? columnTarget.editEnable(childData[targetRow]) : columnTarget.editEnable
+
+          const columnOri = columnTarget.columnDef.meta ?? {};
+          const isEdit = typeof columnOri?.editEnable === 'function' ? columnOri.editEnable(childData[targetRow]) : columnOri.editEnable;
+
+          // if (isEdit) {
+
+          //   const columnKey = allCols[targetCol].id
+
+          //   childData[targetRow] = { ...childData[targetRow], [columnKey]: cellValue.trim() }
+
+          //   pastedColumns.add(columnKey)
+          // }
+
+          if (isEdit) {
+            const columnKey = allCols[targetCol].id;
+
+            // if (columnOri.type === 'number' && isFormattedNumber(cellValue.trim())) {
+            if (columnOri.type === 'number') {
+              if (cellValue.trim() === '') {
+                childData[targetRow] = {
+                  ...childData[targetRow],
+                  [columnKey]: null
+                };
+              }
+              if (isFormattedNumber(cellValue.trim()) || !isNaN(Number(cellValue.trim()))) {
+                const colFormat = typeof columnOri.format === 'function' ? columnOri.format(record) : columnOri.format;
+                const valuePasteFormat = detectSeparators(cellValue.trim());
+                const cellFormat = getFormat(colFormat, format);
+                const thousandSeparator = valuePasteFormat?.thousandSeparator;
+                const decimalSeparator = valuePasteFormat?.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 val = removeNumericFormat(cellValue.trim(), undefined, numericFormatProps);
+                childData[targetRow] = {
+                  ...childData[targetRow],
+                  [columnKey]: Number(val)
+                };
+              }
+            } else {
+              childData[targetRow] = {
+                ...childData[targetRow],
+                [columnKey]: cellValue.trim()
+              };
+            }
+            pastedColumns.add(columnKey);
+          }
+        });
+
+        // Lưu dòng được paste
+        pastedRows.push(childData[targetRow]);
+      });
+      const pastedColumnsArray = Array.from(pastedColumns) ?? [];
+      const newRowData = {
+        ...parent,
+        children: childData
+      }; // item đã được filter
+
+      // const newDataSource = updateArrayByKey(originData, newRowData, rowKey as string)
+      const newDataSource = updateArrayByKey(dataSource, newRowData, rowKey);
+      const dta = unGroupData(newDataSource, originData);
+      triggerPaste?.(pastedRows, pastedColumnsArray, dta, []);
+    }
+  }, [dataSource, format, onCellPaste?.maxRowsPaste, originData, rowKey, startCell, table, triggerPaste]);
+  const handlePasteToTable = React.useCallback(pasteData => {
+    if (!startCell) return;
+
+    // const pastedRows = pasted.trim().split('\n').map(row => row.split('\t'));
+
+    // const clipboardText = e.clipboardData?.getData('text/plain') ?? '';
+
+    // Chuyển đổi dữ liệu từ clipboard thành mảng
+    // const rowsPasted = pasteData.split("\n").filter((row: any) => row !== '').map((row: any) =>
+    //   row.replace(/\r/g, "").split("\t")
+
+    // )
+
+    // const rowsPasted  = parseExcelText(pasteData)
+    const rowsPasted = parseExcelClipboardText(pasteData);
+    if (rowsPasted.length > (onCellPaste?.maxRowsPaste ?? 200)) {
+      // bật popup thông báo
+
+      Modal.confirm({
+        content: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Paragraph, {
+          style: {
+            marginBottom: '.25rem',
+            fontSize: 14
+          }
+        }, "D\u1EEF li\u1EC7u sao ch\xE9p v\u01B0\u1EE3t qu\xE1 s\u1ED1 d\xF2ng cho ph\xE9p (", onCellPaste?.maxRowsPaste ?? 200, " d\xF2ng).Ph\u1EA7n m\u1EC1n s\u1EBD ch\u1EC9 l\u1EA5y (", onCellPaste?.maxRowsPaste ?? 200, " d\xF2ng \u0111\u1EA7u ti\xEAn."), /*#__PURE__*/React.createElement(Title, {
+          level: 5,
+          style: {
+            marginTop: '.75rem'
+          }
+        }, "B\u1EA1n c\xF3 mu\u1ED1n ti\u1EBFp t\u1EE5c sao ch\xE9p kh\xF4ng?")),
+        centered: true,
+        className: 'be-popup-container',
+        onOk: () => {
+          if (groupColumns && groupColumns.length > 0) {
+            handlePastedGroup(rowsPasted);
+          } else {
+            handlePasted(rowsPasted);
+          }
+        }
+        // footer: (_, { OkBtn, CancelBtn }) => (
+        //   <>
+        //     <OkBtn />
+        //     <CancelBtn />
+        //   </>
+        // ),
+      });
+    } else {
+      if (groupColumns && groupColumns.length > 0) {
+        handlePastedGroup(rowsPasted);
+      } else {
+        handlePasted(rowsPasted);
+      }
+    }
+  }, [handlePasted, onCellPaste?.maxRowsPaste, startCell, handlePastedGroup, groupColumns]);
+  React.useEffect(() => {
+    const handleKeyDown = e => {
+      if (e.ctrlKey && e.key === 'c' && startCell && endCell && !editingKey) {
+        e.preventDefault();
+        copySelectionToClipboard();
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [startCell, endCell, table, copySelectionToClipboard, editingKey]);
+  React.useEffect(() => {
+    const handlePaste = e => {
+      if (startCell && !editingKey) {
+        e.preventDefault(); // Chặn hành vi mặc định
+        const clipboardText = e.clipboardData?.getData('text/plain') ?? '';
+        handlePasteToTable(clipboardText);
+      }
+    };
+    window.addEventListener('paste', handlePaste);
+    return () => window.removeEventListener('paste', handlePaste);
+  }, [startCell, endCell, table, handlePasteToTable, editingKey]);
+  React.useEffect(() => {
+    const handleClickOutside = event => {
+      const element = event.target;
+      const container = document.querySelector(".be-popup-container");
+      const containerContextMenu = document.querySelector(".popup-context-menu");
+      const tableBody = document.querySelector(`#${id} .ui-rc-grid-tbody`);
+      const itemContainer = document.querySelector(`#${id} .ui-rc-toolbar-selection-overflow-item`);
+      const itemHeader = document.querySelector(`#${id} .ui-rc-table-thead`);
+      const isInsideContainer = element.closest(".be-popup-container") && container;
+      const isInsideContainerContext = containerContextMenu && element.closest(".popup-context-menu");
+      const isInsideToolbar = element.closest(`.ui-rc-toolbar-selection-overflow-item`) && itemContainer;
+      const isInsideHeader = itemHeader && itemHeader.contains(event.target);
+      if (isInsideContainer || isInsideToolbar || isInsideHeader || isInsideContainerContext || element.id === id) {
+        return;
+      }
+      if (containerRef.current && tableBody && !tableBody.contains(event.target)) {
+        if (editingKey) {
+          onBlur?.(dataSource);
+        }
+        setTimeout(() => {
+          setEditingKey('');
+          // editingKey.current = ''
+        });
+        setEndCell(undefined);
+        setStartCell(undefined);
+        setRangeState(undefined);
+        setFocusedCell(undefined);
+      }
+    };
+
+    // document.addEventListener('click', handleClickOutside)
+    document.addEventListener('mousedown', handleClickOutside);
+    // document.addEventListener('touchstart', handleClickOutside)
+
+    return () => {
+      // document.removeEventListener('click', handleClickOutside)
+      document.removeEventListener('mousedown', handleClickOutside);
+      // document.removeEventListener('touchstart', handleClickOutside)
+    };
+  }, [dataSource, editingKey, id, onBlur]);
+  const columnSizingState = table.getState().columnSizing;
+  React.useEffect(() => {
+    requestAnimationFrame(() => {
+      columnVirtualizer.measure();
+    });
+  }, [columnSizingState, columnVirtualizer]);
+  React.useEffect(() => {
+    if (!tableContainerRef.current) {
+      return;
+    }
+    if (columnSizingInfo.isResizingColumn === false) {
+      const aa = updateColumnWidthsRecursive(propsColumns, columnSizing);
+      setColumns(aa);
+    }
+  }, [columnSizingInfo]);
+  React.useEffect(() => {
+    // const totalHeight = minHeight ?? height
+    const totalHeight = getTableHeight(height, minHeight);
+    if (totalHeight) {
+      const topHeight = topToolbarRef.current ? topToolbarRef.current.offsetHeight : 0;
+      const bottomHeight = bottomToolbarRef.current ? bottomToolbarRef.current.offsetHeight : 0;
+      settableHeight(totalHeight - topHeight - bottomHeight);
+    }
+  }, [id, height, editAble, minHeight, toolbarItems]);
+  const {
+    control,
+    handleSubmit,
+    setValue,
+    // trigger,
+    getValues,
+    reset,
+    formState: {
+      errors
+    }
+  } = useForm({
+    mode: 'onChange',
+    resolver: validate ? yupResolver(validate) : undefined
+  });
+  const handleAddMulti = React.useCallback((item, n, newId) => {
+    if (item.onClick) {
+      item.onClick({
+        toolbar: item
+      });
+    } else {
+      const defaultRowValue = getDefaultValue(defaultValue);
+      const newRows = Array.from({
+        length: n
+      }).map(() => defaultRowValue ? {
+        ...defaultRowValue,
+        id: undefined,
+        rowId: n === 1 && newId ? newId : newGuid()
+      } : {
+        id: undefined,
+        rowId: n === 1 && newId ? newId : newGuid()
+      });
+      const kkk = getAllRowKey(newRows) ?? [];
+      const rs = mergedFilterKeys ? [...mergedFilterKeys, ...kkk] : [...kkk];
+      setMergedFilterKeys?.(rs);
+      const newData = dataSource.concat(newRows);
+      triggerChangeData?.(newData);
+    }
+  }, [dataSource, defaultValue, mergedFilterKeys, setMergedFilterKeys, triggerChangeData]);
+  const onSubmit = formData => {
+    try {
+      // const record = (await form.validateFields()) as RecordType;
+      const row = {
+        ...formData
+      };
+
+      // const newData = [...dataSource]
+      const newData = [...originData];
+
+      // @ts-ignore
+      const index = flattenData(childrenColumnName, newData).findIndex(item => formData[rowKey] === item[rowKey]);
+      const rs = updateArrayByKey(newData, row, rowKey);
+      if (index > -1) {
+        triggerChangeData?.(rs);
+      }
+    } catch (errInfo) {
+      console.log('Validate Failed:', errInfo);
+    }
+  };
+  const onSubmit2 = (formData, newOriginData) => {
+    try {
+      // const record = (await form.validateFields()) as RecordType;
+      const row = {
+        ...formData
+      };
+
+      // const newData = [...dataSource]
+      const newData = [...newOriginData];
+
+      // @ts-ignore
+      const index = flattenData(childrenColumnName, newData).findIndex(item => formData[rowKey] === item[rowKey]);
+      const rs = updateArrayByKey(newData, row, rowKey);
+      if (index > -1) {
+        triggerChangeData?.(rs);
+      }
+    } catch (errInfo) {
+      console.log('Validate Failed:', errInfo);
+    }
+  };
+  const handleCellChange = args => {
+    const {
+      record,
+      type: changeType,
+      newState,
+      prevState,
+      option,
+      field,
+      indexCol,
+      indexRow,
+      key
+    } = args;
+    if (changeType === 'blur') {
+      const handleChangeCallback = callbackData => {
+        const callbackRecord = callbackData;
+        Object.entries(callbackRecord).forEach(([name, value]) => {
+          setValue(name, value);
+        });
+        onSubmit(callbackRecord);
+      };
+      if (onCellChange) {
+        if (onCellChange.length > 1) {
+          onCellChange({
+            field,
+            indexCol,
+            type: 'onChange',
+            value: newState,
+            option,
+            indexRow,
+            rowData: record,
+            rowId: key,
+            // rowsData: [...dataSource],
+            rowsData: [...originData],
+            sumValue: []
+          }, handleChangeCallback);
+        } else {
+          onCellChange({
+            field,
+            indexCol,
+            type: 'onChange',
+            option,
+            value: newState,
+            indexRow,
+            rowData: record,
+            rowId: key,
+            // rowsData: [...dataSource],
+            rowsData: [...originData],
+            sumValue: []
+          }, handleChangeCallback);
+          onSubmit(record);
+        }
+      }
+    }
+    if (prevState && newState && prevState !== newState && changeType === 'enter') {
+      onSubmit(record);
+    }
+  };
+  const handleCellChangeAndAddRow = args => {
+    const {
+      record,
+      type: changeType,
+      newState,
+      option,
+      field,
+      indexCol,
+      indexRow,
+      key
+    } = args;
+
+    // add new row
+
+    const defaultRowValue = getDefaultValue(defaultValue);
+    const newRowId = newGuid();
+    const newRows = Array.from({
+      length: 1
+    }).map(() => defaultRowValue ? {
+      ...defaultRowValue,
+      id: undefined,
+      rowId: newRowId
+    } : {
+      id: undefined,
+      rowId: newRowId
+    });
+    const kkk = getAllRowKey(newRows) ?? [];
+    const rs = mergedFilterKeys ? [...mergedFilterKeys, ...kkk] : [...kkk];
+    setMergedFilterKeys?.(rs);
+    const newData = originData.concat(newRows);
+    setFocusedCell?.({
+      rowId: newRowId,
+      colId: field
+    });
+    setStartCell?.({
+      rowId: newRowId,
+      colId: field
+    });
+    setEndCell?.({
+      rowId: newRowId,
+      colId: field
+    });
+    setTimeout(() => {
+      setRangeState?.(getSelectedCellMatrix(table, {
+        rowId: newRowId,
+        colId: field
+      }, {
+        rowId: newRowId,
+        colId: field
+      }));
+    });
+    setTimeout(() => {
+      const row = document.querySelector(`.ui-rc-grid-row[data-row-key="${newRowId}"]`);
+      const cellFocus = row?.querySelector('.ui-rc-grid-cell:not(.ui-rc-grid-cell-selection)');
+      if (cellFocus) {
+        cellFocus.scrollIntoView({
+          behavior: "smooth",
+          block: "start"
+        });
+        cellFocus.focus();
+      }
+    }, 100);
+    if (changeType === 'blur') {
+      const handleChangeCallback = callbackData => {
+        const callbackRecord = callbackData;
+        onSubmit2(callbackRecord, [...newData]);
+      };
+      if (onCellChange) {
+        if (onCellChange.length > 1) {
+          onCellChange({
+            field,
+            indexCol,
+            type: 'onChange',
+            value: newState,
+            option,
+            indexRow,
+            rowData: record,
+            rowId: key,
+            rowsData: [...newData],
+            sumValue: []
+          }, handleChangeCallback);
+        } else {
+          onCellChange({
+            field,
+            indexCol,
+            type: 'onChange',
+            option,
+            value: newState,
+            indexRow,
+            rowData: record,
+            rowId: key,
+            rowsData: [...newData],
+            sumValue: []
+          }, handleChangeCallback);
+          onSubmit2(record, [...newData]);
+        }
+      }
+    }
+
+    // if (prevState && newState && prevState !== newState && changeType === 'enter') {
+
+    //   onSubmit(record)
+
+    // }
+  };
+  const handleDuplicate = React.useCallback(() => {
+    // không tính tree
+
+    // Cập nhật data mới
+    const newData = flattenArray([...dataSource]);
+
+    // const duplicatedItems = rowsFocus.map(index => ({ ...newData[index], rowId: newGuid(), id: undefined, isDuplicate: true }))
+
+    const duplicatedItem = table.getRowModel().flatRows.find(it => it.id === focusedCell?.rowId);
+
+    // setStartCell(focusedCell)
+    // setEndCell(focusedCell)
+
+    // setRangeState(getSelectedCellMatrix(table, focusedCell, focusedCell))
+
+    const duplicatedItems = [{
+      ...duplicatedItem?.original,
+      rowId: newGuid(),
+      id: undefined,
+      isDuplicate: true
+    }];
+
+    // Vị trí chèn là ngay sau phần tử lớn nhất trong rowsFocus
+
+    // const insertAfter = Math.max(...rowsFocus)
+    const insertAfter = newData.findIndex(it => it[rowKey] === focusedCell?.rowId);
+    const rsFilter = [...newData.slice(0, insertAfter + 1), ...duplicatedItems, ...newData.slice(insertAfter + 1)];
+
+    // const rs  = updateOrInsertInOrder(originData, rsFilter)
+    const rs = updateOrInsert(originData, rsFilter);
+    // const rs2  = mergeWithFilter(originData, rsFilter)
+
+    triggerChangeData?.(rs);
+  }, [dataSource, focusedCell, originData, rowKey, table, triggerChangeData]);
+
+  // thêm n dòng bên trên
+  const handleInsertBefore = React.useCallback((item, n) => {
+    const defaultRowValue = getDefaultValue(defaultValue);
+    setStartCell(focusedCell);
+    setEndCell(focusedCell);
+    setRangeState(getSelectedCellMatrix(table, focusedCell, focusedCell));
+
+    // const record: any = table.getRowModel().rows.find((it) => it.id === rowsFocus[rowsFocus.length - 1])?.original
+    const record = table.getRowModel().flatRows.find(it => it.id === rowsFocus[rowsFocus.length - 1])?.original;
+    if (item.onClick) {
+      item.onClick({
+        toolbar: item
+      });
+    } else {
+      if (!record?.parentId) {
+        // Cập nhật data mới
+
+        const newData = [...originData];
+        const newRows = Array.from({
+          length: n
+        }).map(() => defaultRowValue ? {
+          ...defaultRowValue,
+          id: undefined,
+          rowId: newGuid()
+        } : {
+          id: undefined,
+          rowId: newGuid()
+        });
+        const kkk = getAllRowKey(newRows) ?? [];
+        const rs = mergedFilterKeys ? [...mergedFilterKeys, ...kkk] : [...kkk];
+        setMergedFilterKeys?.(rs);
+        const index = newData.findIndex(obj => obj[rowKey] === record[rowKey]);
+        newData.splice(index, 0, ...newRows);
+        triggerChangeData?.(newData);
+      } else {
+        const newData = [...originData];
+        const parent = findItemByKey(newData, rowKey, record.parentId);
+        const newRows = Array.from({
+          length: n
+        }).map(() => defaultRowValue ? {
+          ...defaultRowValue,
+          id: undefined,
+          rowId: newGuid(),
+          parentId: parent.rowId
+        } : {
+          id: undefined,
+          rowId: newGuid(),
+          parentId: parent.rowId
+        });
+
+        // Cập nhật childData mới
+        const childData = parent?.children ? [...parent.children] : [];
+        const index = childData.findIndex(obj => obj[rowKey] === record[rowKey]);
+        childData.splice(index, 0, ...newRows);
+        const newRowData = {
+          ...parent,
+          children: childData
+        };
+        const newDataSource = updateArrayByKey(newData, newRowData, rowKey);
+        triggerChangeData?.(newDataSource);
+      }
+    }
+  }, [defaultValue, focusedCell, mergedFilterKeys, originData, rowKey, rowsFocus, setMergedFilterKeys, table, triggerChangeData]);
+
+  //thêm 1 dòng bên dưới
+  const handleInsertAfter = React.useCallback((item, n) => {
+    const defaultRowValue = getDefaultValue(defaultValue);
+
+    // const insertAfter = Math.max(...rowsFocus)
+
+    // const record: RecordType = flattenData(childrenColumnName, dataSource)[insertAfter]
+
+    // const record: any = table.getRowModel().rows.find((it) => it.id === focusedCell?.rowId)?.original
+    const record = table.getRowModel().flatRows.find(it => it.id === focusedCell?.rowId)?.original;
+    if (item.onClick) {
+      item.onClick({
+        toolbar: item
+      });
+    } else {
+      if (!record?.parentId) {
+        // Cập nhật data mới
+        const newData = [...originData];
+        const newRows = Array.from({
+          length: n
+        }).map(() => defaultRowValue ? {
+          ...defaultRowValue,
+          id: undefined,
+          rowId: newGuid()
+        } : {
+          id: undefined,
+          rowId: newGuid()
+        });
+        const kkk = getAllRowKey(newRows) ?? [];
+        const rs = mergedFilterKeys ? [...mergedFilterKeys, ...kkk] : [...kkk];
+        setMergedFilterKeys?.(rs);
+        const index = newData.findIndex(obj => obj[rowKey] === record[rowKey]);
+        newData.splice(index + 1, 0, ...newRows);
+        triggerChangeData?.(newData);
+      } else {
+        const newData = [...originData];
+        const parent = findItemByKey(newData, rowKey, record.parentId);
+        const newRows = Array.from({
+          length: n
+        }).map(() => defaultRowValue ? {
+          ...defaultRowValue,
+          id: undefined,
+          rowId: newGuid(),
+          parentId: parent.rowId
+        } : {
+          id: undefined,
+          rowId: newGuid(),
+          parentId: parent.rowId
+        });
+        const kkk = getAllRowKey(newRows) ?? [];
+        const rs = mergedFilterKeys ? [...mergedFilterKeys, ...kkk] : [...kkk];
+        setMergedFilterKeys?.(rs);
+
+        // Cập nhật childData mới
+        const childData = parent?.children ? [...parent.children] : [];
+        const index = childData.findIndex(obj => obj[rowKey] === record[rowKey]);
+        childData.splice(index + 1, 0, ...newRows);
+        const newRowData = {
+          ...parent,
+          children: childData
+        };
+        const newDataSource = updateArrayByKey(newData, newRowData, rowKey);
+        triggerChangeData?.(newDataSource);
+      }
+    }
+  }, [defaultValue, table, focusedCell?.rowId, originData, mergedFilterKeys, setMergedFilterKeys, triggerChangeData, rowKey]);
+  const handleInsertChild = React.useCallback(item => {
+    const defaultRowValue = getDefaultValue(defaultValue);
+    const rowId = newGuid();
+    const record = table.getRowModel().rows.find(it => it.id === focusedCell?.rowId)?.original;
+    if (item.onClick) {
+      item.onClick({
+        toolbar: item
+      });
+    } else {
+      // const newData = [...dataSource]
+      const newData = [...originData];
+      let newElement;
+      if (!record?.children || record?.children && record.children.length === 0) {
+        newElement = {
+          ...record,
+          children: [{
+            ...defaultRowValue,
+            parentId: record?.rowId,
+            rowId
+          }]
+        };
+      } else {
+        newElement = {
+          ...record,
+          children: [...record.children, {
+            ...defaultRowValue,
+            parentId: record.rowId,
+            rowId
+          }]
+        };
+      }
+      const rs = mergedFilterKeys ? [...mergedFilterKeys, rowId] : [rowId];
+      setMergedFilterKeys?.(rs);
+      const newDataSource = updateArrayByKey(newData, newElement, rowKey);
+      triggerChangeData?.(newDataSource);
+    }
+    setTimeout(() => {
+      const row = table.getRowModel().rows.find(it => it.id === focusedCell?.rowId);
+      if (row) {
+        setExpanded(old => ({
+          ...old,
+          [row.id]: true
+        }));
+      }
+    }, 10);
+
+    // const hasKey = mergedExpandedKeys.has(key)
+    // if (!hasKey) {
+    //   const newExpandedKeys = [...mergedExpandedKeys, key]
+    //   setInnerExpandedKeys(newExpandedKeys)
+    // }
+  }, [defaultValue, focusedCell?.rowId, mergedFilterKeys, originData, rowKey, setExpanded, setMergedFilterKeys, table, triggerChangeData]);
+  const handleDeleteRows = React.useCallback(item => {
+    if (item.onClick) {
+      item.onClick({
+        toolbar: item
+      });
+    } else {
+      const filterData = flattenArray([...originData]);
+      const rs = filterData.filter(it => !rowsFocus.includes(it[rowKey]));
+      const newDaa = unFlattenData(rs);
+      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) {
+            triggerChangeData?.([...newDaa]);
+          } else if (result.dismiss === MySwal.DismissReason.cancel) {}
+        });
+      } else {
+        // không hiện dialog  
+        triggerChangeData?.([...newDaa]);
+      }
+    }
+  }, [commandSettings, originData, rowKey, rowsFocus, t, triggerChangeData]);
+  const handleDeleteAll = React.useCallback(item => {
+    if (item.onClick) {
+      item.onClick({
+        toolbar: item
+      });
+    } else {
+      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) {
+            triggerChangeData?.([]);
+          } else if (result.dismiss === MySwal.DismissReason.cancel) {}
+        });
+      } else {
+        triggerChangeData?.([]);
+      }
+    }
+  }, [commandSettings, t, triggerChangeData]);
+  const handleDeleteContent = () => {
+    if (startCell && endCell) {
+      const tmpData = flattenArray([...dataSource]);
+      const rs = tmpData.map((row, index) => {
+        if (!rangeState?.rowRange.includes(row.rowId)) {
+          return row;
+        }
+        const updatedRow = {
+          ...row
+        };
+        for (const colId of rangeState.colRange) {
+          const column = table.getVisibleFlatColumns().find(it => it.id === colId)?.columnDef.meta;
+          const columnIndex = table.getVisibleFlatColumns().findIndex(it => it.id === colId);
+          if (isEditable(column, row)) {
+            updatedRow[colId] = '';
+            handleCellChange({
+              key: row[rowKey],
+              field: column.field ?? column.dataIndex,
+              record: updatedRow,
+              prevState: row[column.field],
+              newState: '',
+              option: '',
+              indexCol: columnIndex,
+              indexRow: index,
+              type: 'blur'
+            });
+          }
+        }
+        return updatedRow;
+      });
+      const newData = unFlattenData(rs);
+      triggerChangeData?.([...newData]);
+    }
+  };
+  const toolbarItemsBottom = React.useMemo(() => {
+    if (!rowsFocus || rowsFocus.length === 0) {
+      return toolbarItems?.filter(it => it.position === 'Bottom' && it.visible !== false && it.key !== 'DUPLICATE' && it.key !== 'INSERT_BEFORE' && it.key !== 'INSERT_AFTER' && it.key !== 'DELETE_ROWS' && it.key !== 'INSERT_CHILDREN').map(item => {
+        if (item.key === 'ADD') {
+          return {
+            ...item,
+            template: () => {
+              return /*#__PURE__*/React.createElement(Fragment, null, item.key === 'ADD' && /*#__PURE__*/React.createElement("div", {
+                className: classNames(`be-toolbar-item`, item?.className)
+              }, /*#__PURE__*/React.createElement(Dropdown.Button, {
+                overlayClassName: 'be-popup-container',
+                trigger: ['click'],
+                style: {
+                  color: '#28c76f',
+                  borderColor: '#28c76f'
+                },
+                className: 'toolbar-button toolbar-dropdown-button',
+                menu: {
+                  items: itemsAdd,
+                  onClick: e => handleAddMulti(item, Number(e.key))
+                }
+              }, /*#__PURE__*/React.createElement("span", {
+                style: {
+                  color: '#28c76f'
+                },
+                onClick: () => handleAddMulti(item, 1)
+              }, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item'))));
+            }
+          };
+        }
+        if (item.key === 'DELETE') {
+          return {
+            ...item,
+            template: () => {
+              return /*#__PURE__*/React.createElement("div", {
+                className: classNames(`be-toolbar-item`, item?.className)
+              }, /*#__PURE__*/React.createElement(Button, {
+                style: {
+                  color: '#eb4619',
+                  borderColor: '#eb4619'
+                },
+                variant: 'outlined',
+                onClick: () => handleDeleteAll(item),
+                className: "d-flex toolbar-button"
+              }, item.label ? t ? t(item.label) : item.label : t ? t('Delete all item') : 'Delete all item'));
+            }
+          };
+        }
+        return {
+          ...item
+        };
+      });
+    }
+    return toolbarItems?.filter(it => it.position === 'Bottom' && it.visible !== false).map(item => {
+      if (item.key === 'ADD') {
+        return {
+          ...item,
+          template: () => {
+            return /*#__PURE__*/React.createElement(Fragment, null, item.key === 'ADD' && /*#__PURE__*/React.createElement("div", {
+              className: classNames(`be-toolbar-item`, item?.className)
+            }, /*#__PURE__*/React.createElement(Dropdown.Button, {
+              overlayClassName: 'be-popup-container',
+              style: {
+                color: '#28c76f',
+                borderColor: '#28c76f'
+              },
+              className: 'toolbar-button toolbar-dropdown-button',
+              menu: {
+                items: itemsAdd,
+                onClick: e => handleAddMulti(item, Number(e.key))
+              }
+            }, /*#__PURE__*/React.createElement("span", {
+              style: {
+                color: '#28c76f'
+              },
+              onClick: () => handleAddMulti(item, 1)
+            }, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item'))));
+          }
+        };
+      }
+      if (item.key === 'DUPLICATE') {
+        return {
+          ...item,
+          template: () => {
+            return /*#__PURE__*/React.createElement(Fragment, null, item.key === 'DUPLICATE' && item.visible !== false && rowsFocus.length > 0 && /*#__PURE__*/React.createElement("div", {
+              className: classNames(`be-toolbar-item`, item?.className)
+            }, /*#__PURE__*/React.createElement(Button, {
+              style: {
+                color: '#28c76f',
+                borderColor: '#28c76f'
+              },
+              variant: 'outlined',
+              onClick: handleDuplicate,
+              className: "d-flex toolbar-button"
+            }, item.label ? t ? t(item.label) : item.label : t ? t('Duplicate') : 'Duplicate')));
+          }
+        };
+      }
+      if (item.key === 'INSERT_BEFORE') {
+        return {
+          ...item,
+          template: () => {
+            return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+              className: classNames(`be-toolbar-item`, item?.className)
+            }, /*#__PURE__*/React.createElement(Dropdown.Button, {
+              overlayClassName: 'be-popup-container',
+              style: {
+                color: '#28c76f',
+                borderColor: '#28c76f'
+              },
+              className: 'toolbar-button toolbar-dropdown-button',
+              menu: {
+                items: itemsAdd,
+                onClick: e => handleInsertBefore(item, Number(e.key))
+              }
+            }, /*#__PURE__*/React.createElement("span", {
+              style: {
+                color: '#28c76f'
+              },
+              onClick: () => handleInsertBefore(item, 1)
+            }, item.label ? t ? t(item.label) : item.label : t ? t('Insert item before') : 'Insert item before'))));
+          }
+        };
+      }
+      if (item.key === 'INSERT_AFTER') {
+        return {
+          ...item,
+          template: () => {
+            return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+              className: classNames(`be-toolbar-item`, item?.className)
+            }, /*#__PURE__*/React.createElement(Dropdown.Button, {
+              overlayClassName: 'be-popup-container',
+              style: {
+                color: '#28c76f',
+                borderColor: '#28c76f'
+              },
+              className: 'toolbar-button toolbar-dropdown-button',
+              menu: {
+                items: itemsAdd,
+                onClick: e => handleInsertAfter(item, Number(e.key))
+              }
+            }, /*#__PURE__*/React.createElement("span", {
+              style: {
+                color: '#28c76f'
+              },
+              onClick: () => handleInsertAfter(item, 1)
+            }, item.label ? t ? t(item.label) : item.label : t ? t('Insert item after') : 'Insert item after'))));
+          }
+        };
+      }
+      if (item.key === 'INSERT_CHILDREN') {
+        return {
+          ...item,
+          template: () => {
+            return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+              className: classNames(`be-toolbar-item`, item?.className)
+            }, /*#__PURE__*/React.createElement(Button, {
+              style: {
+                color: '#28c76f',
+                borderColor: '#28c76f'
+              },
+              variant: 'outlined',
+              onClick: () => handleInsertChild(item),
+              className: "d-flex toolbar-button"
+            }, item.label ? t ? t(item.label) : item.label : t ? t('Insert item children') : 'Insert item children')));
+          }
+        };
+      }
+      if (item.key === 'DELETE') {
+        return {
+          ...item,
+          template: () => {
+            return /*#__PURE__*/React.createElement("div", {
+              className: classNames(`be-toolbar-item`, item?.className)
+            }, /*#__PURE__*/React.createElement(Button, {
+              style: {
+                color: '#eb4619',
+                borderColor: '#eb4619'
+              },
+              variant: 'outlined',
+              onClick: handleDeleteAll,
+              className: "d-flex toolbar-button"
+            }, item.label ? t ? t(item.label) : item.label : t ? t('Delete all item') : 'Delete all item'));
+          }
+        };
+      }
+      if (item.key === 'DELETE_ROWS') {
+        return {
+          ...item,
+          template: () => {
+            return /*#__PURE__*/React.createElement("div", {
+              className: classNames(`be-toolbar-item`, item?.className)
+            }, /*#__PURE__*/React.createElement(Button, {
+              style: {
+                color: '#eb4619',
+                borderColor: '#eb4619'
+              },
+              variant: 'outlined',
+              onClick: () => handleDeleteRows(item),
+              className: "d-flex toolbar-button"
+            }, t ? `${t('Delete')} ${rowsFocus.length} ${t('row')}` : `Delete ${rowsFocus.length} item`));
+          }
+        };
+      }
+      return {
+        ...item
+      };
+    });
+  }, [handleAddMulti, handleDeleteAll, handleDeleteRows, handleDuplicate, handleInsertAfter, handleInsertBefore, handleInsertChild, itemsAdd, rowsFocus, t, toolbarItems]);
+  const triggerCommandClick = args => {
+    const {
+      id: idCommand,
+      rowId,
+      rowData,
+      index
+    } = args;
+    const tmpData = [...dataSource];
+    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: [...newData]
+                });
+              }
+            } else {
+              // server ~~ không làm gì
+              if (commandClick) {
+                commandClick({
+                  id: idCommand,
+                  rowId: rowData.rowId,
+                  rowData,
+                  index,
+                  rows: [...originData]
+                });
+              }
+            }
+          } else if (result.dismiss === MySwal.DismissReason.cancel) {}
+        });
+      } else {
+        // -------------------
+
+        if (!commandSettings || commandSettings && commandSettings.client !== false) {
+          // client
+
+          let newData2 = [];
+          if (rowData?.parentId) {
+            const parent = findItemByKey(originData, 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: [...originData]
+            });
+          }
+        }
+      }
+    } else {
+      if (commandClick) {
+        commandClick({
+          ...args,
+          rows: originData
+        });
+      }
+    }
+  };
+  const triggerContextMenuClick = args => {
+    if (args.item?.parentKey && args.item.parentKey === 'INSERT_BEFORE') {
+      if (args.item.key === 'INSERT_BEFORE_ADV') {
+        // mở Modal
+
+        // setOpenModalAddRow((prev) => (
+        //   {
+        //     ...prev,
+        //     open: true,
+        //     type: 'INSERT_BEFORE'
+        //   }
+        // ))
+      } else {
+        handleInsertBefore(args.item, args.item.row);
+      }
+      return;
+    }
+    if (args.item?.parentKey && args.item.parentKey === 'INSERT_AFTER') {
+      if (args.item.key === 'INSERT_AFTER_ADV') {
+
+        // setOpenModalAddRow((prev) => (
+        //   {
+        //     ...prev,
+        //     open: true,
+        //     type: 'INSERT_AFTER'
+        //   }
+        // ))
+      } else {
+        handleInsertAfter(args.item, args.item.row);
+      }
+      return;
+    }
+    if (args.item.key === 'INSERT_CHILDREN') {
+      handleInsertChild(args.item);
+      return;
+    }
+    if (args.item.key === 'DELETE_ROWS') {
+      handleDeleteRows(args.item);
+      return;
+    }
+    if (args.item.key === 'DELETE_CONTENT') {
+      handleDeleteContent();
+      return;
+    }
+    contextMenuClick?.(args);
+  };
+  const handleCellClick = (rowNumber, record, column, rowId, cellValue) => {
+    const cellClickCallback = newOptions => {
+      if (newOptions) {
+        const newElem = {
+          ...column,
+          editSelectSettings: {
+            ...(column?.editSelectSettings ? {
+              ...column?.editSelectSettings
+            } : {}),
+            options: newOptions
+          }
+        };
+        const rrr = updateArrayByKey([...propsColumns], newElem, 'field');
+        triggerChangeColumns?.(rrr, [], "cellClick");
+      }
+    };
+    if (onCellClick) {
+      onCellClick({
+        index: rowNumber,
+        rowId,
+        cellValue,
+        type: "Editing",
+        field: column.field,
+        rowData: record
+      }, cellClickCallback);
+    }
+  };
+  const handleOnGroup = value => {
+    triggerGroupColumns?.(value);
+  };
+  const handleCollapseAllGroup = () => {
+    setExpanded({});
+  };
+  const handleExpandAllGroup = () => {
+    const allKeys = findAllChildrenKeys2(dataSource, rowKey, 'children');
+    setExpanded(convertToObjTrue(allKeys));
+  };
+  const groupToolbar = () => {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        gap: '10px',
+        marginRight: 10
+      }
+    }, groupSetting?.showGroupIcon !== false && /*#__PURE__*/React.createElement(ColumnsGroup, {
+      t: t
+      // defaultGroupColumns={['name']}
+      ,
+      unClearableLevel: groupSetting?.unClearableLevel
+      // unClearableLevel={2}
+      ,
+      columns: propsColumns ? flatColumns2(propsColumns) : [],
+      columnsGrouped: groupColumns,
+      onSubmit: handleOnGroup
+    }), /*#__PURE__*/React.createElement(React.Fragment, null, !isObjEmpty(expanded) ? /*#__PURE__*/React.createElement(Collapse2, {
+      fontSize: 16,
+      color: '#555555',
+      onClick: handleCollapseAllGroup
+    }) : /*#__PURE__*/React.createElement(Expand2, {
+      fontSize: 16,
+      color: '#555555',
+      onClick: handleExpandAllGroup
+    })));
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    ref: containerRef,
+    id: id
+  }, (showToolbar !== false || fullScreen !== false || showColumnChoose || title) && /*#__PURE__*/React.createElement("div", {
+    ref: topToolbarRef,
+    className: classNames(`${prefix}-grid-top-toolbar`, {})
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      textAlign: 'center'
+    }
+  }, typeof title === 'function' ? title?.(originData) : title), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      gap: '.75rem'
+    }
+  }, groupToolbar(), /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1,
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/React.createElement(Toolbar, {
+    items: (toolbarItems ?? []).filter(it => it.position !== 'Bottom'),
+    mode: 'scroll'
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      gap: '.75rem'
+    }
+  }, pagination && pagination.onChange && pagination?.position && pagination?.position[0] === 'topRight' && /*#__PURE__*/React.createElement(Pagination, _extends({
+    showSizeChanger: true,
+    responsive: true,
+    size: 'small',
+    rootClassName: 'top-pagination',
+    showTotal: (total, range) =>
+    // @ts-ignore
+    `${range[0]}-${range[1]} / ${total} ${t ? t(pagination?.locale?.items ?? 'items') : 'items'}`
+  }, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, fullScreen !== false && (isFullScreen ? /*#__PURE__*/React.createElement(Minimize, {
+    fontSize: 16,
+    onClick: () => {
+      setIsFullScreen(!isFullScreen);
+    },
+    "data-tooltip-id": `${id}-tooltip-content`,
+    "data-tooltip-content": t ? t('Minimized') : 'Minimized'
+  }) : /*#__PURE__*/React.createElement(Maximize, {
+    fontSize: 16,
+    onClick: () => {
+      setIsFullScreen(!isFullScreen);
+    },
+    "data-tooltip-id": `${id}-tooltip-content`,
+    "data-tooltip-content": t ? t('Full screen') : 'Full screen'
+  })), showColumnChoose && /*#__PURE__*/React.createElement(ColumnsChoose, {
+    columns: columns,
+    originColumns: propsColumns,
+    t: t,
+    columnsGroup: groupColumns,
+    triggerChangeColumns: triggerChangeColumns,
+    columnHidden: columnHidden
+  })))), /*#__PURE__*/React.createElement("form", {
+    onSubmit: handleSubmit(onSubmit)
+  }, /*#__PURE__*/React.createElement(TableContext.Provider, {
+    value: {
+      t,
+      isDataTree,
+      locale,
+      prefix,
+      id,
+      rowKey,
+      format,
+      expandable,
+      expanded,
+      setExpanded,
+      dataSource,
+      originData,
+      wrapSettings,
+      recordDoubleClick,
+      selectionSettings,
+      isSelectionChange,
+      setIsSelectionChange,
+      // onContextMenu,
+      setSorterChange,
+      setFilterChange,
+      rangeState,
+      setRangeState,
+      rangePasteState,
+      setRangePasteState,
+      focusedCell,
+      setFocusedCell,
+      startCell,
+      editingKey,
+      endCell,
+      isSelecting,
+      isPasting,
+      startPasteCell,
+      endPasteCell,
+      setEditingKey,
+      setEndCell,
+      setIsSelecting,
+      setStartCell,
+      setIsPasting,
+      setEndPasteCell,
+      setStartPasteCell,
+      // 
+      control,
+      // trigger,
+      errors,
+      getValues,
+      setValue,
+      reset,
+      handleCellChange,
+      handleCellChangeAndAddRow,
+      triggerPaste,
+      handleDeleteContent,
+      handleAddMulti,
+      dataErrors,
+      windowSize,
+      handleCellClick,
+      pagination,
+      rowClassName,
+      rowEditable,
+      onRowStyles,
+      dataSourceFilter,
+      groupColumns
+    }
+  }, /*#__PURE__*/React.createElement(TableWrapper, {
+    contextMenuItems: contextMenuItems,
+    height: tableHeight,
+    minHeight: minHeight,
+    id: id,
+    prefix: prefix,
+    table: table,
+    tableContainerRef: tableContainerRef,
+    commandClick: triggerCommandClick,
+    contextMenuClick: triggerContextMenuClick,
+    contextMenuHidden: contextMenuHidden,
+    contextMenuOpen: contextMenuOpen,
+    editAble: editAble,
+    showEmptyText: showEmptyText,
+    summary: summary,
+    dataSource: dataSource,
+    infiniteScroll: infiniteScroll,
+    next: next,
+    loading: loading,
+    columnVirtualizer: columnVirtualizer,
+    virtualPaddingLeft: virtualPaddingLeft,
+    virtualPaddingRight: virtualPaddingRight,
+    fixedLeftColumns: fixedLeftColumns,
+    fixedRightColumns: fixedRightColumns
+  }))), /*#__PURE__*/React.createElement("div", {
+    ref: bottomToolbarRef
+  }, toolbarItemsBottom && toolbarItemsBottom.length > 0 && /*#__PURE__*/React.createElement("div", {
+    className: classNames('ui-rc-toolbar-bottom', {
+      'ui-rc-toolbar-bottom_border-bottom': !pagination || infiniteScroll
+    })
+    // style={{ border: '0 1px 1px 1px solid #e0e0e0' }}
+    // style={{
+    //   borderBottom: '1px solid #e0e0e0',
+    //   borderRight: '1px solid #e0e0e0',
+    //   borderLeft: '1px solid #e0e0e0'
+    // }}
+  }, /*#__PURE__*/React.createElement(Toolbar, {
+    style: {
+      width: '100%'
+    },
+    items: toolbarItemsBottom ?? [],
+    mode: 'scroll',
+    onClick: ({}) => {
+      setEditingKey('');
+    }
+  })), pagination && !infiniteScroll && /*#__PURE__*/React.createElement(Pagination, _extends({}, pagination, {
+    rootClassName: 'pagination-template',
+    showSizeChanger: true,
+    responsive: true,
+    size: 'small',
+    total: pagination.total,
+    pageSize: pagination.onChange ? pagination?.pageSize : table.getState().pagination.pageSize,
+    pageSizeOptions: [20, 50, 100, 1000, 10000],
+    onChange: (page, pageSize) => {
+      if (pagination.onChange) {
+        pagination.onChange(page, pageSize);
+      } else {
+        table.setPageIndex(page - 1);
+        table.setPageSize(pageSize);
+      }
+    },
+    showTotal: (total, range) => `${numericFormatter((range[0] ?? 0).toString(), {
+      thousandSeparator: '.'
+    })}-${numericFormatter((range[1] ?? 0).toString(), {
+      thousandSeparator: '.'
+    })} / ${numericFormatter((total ?? 0).toString(), {
+      thousandSeparator: '.'
+    })} items`
+  }))));
+};
+export default TableContainerEdit;