es-grid-template 1.7.23 → 1.7.25

package/es/table-component/TableContainerEdit.js

@@ -0,0 +1,1301 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React, { Fragment } from "react";
+import TableBody from "./body/TableBody";
+import TableHead from "./header/TableHead";
+import { checkDecimalSeparator, checkThousandSeparator, detectSeparators, findItemByKey, flattenArray, flattenData, getAllRowKey, getColIdsBetween, getDefaultValue, getFormat, getRowIdsBetween, getSelectedCellMatrix, isEditable, isFormattedNumber, newGuid, sumSize, unFlattenData, updateArrayByKey, 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 { Maximize, Minimize } from "becoxy-icons";
+import { ColumnsChoose } from "./ColumnsChoose";
+import TableFooter from "./footer/TableFooter";
+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,
+    id,
+    prefix,
+    commandClick,
+    editAble,
+    rowKey,
+    format,
+    dataSource,
+    originData,
+    expandable,
+    wrapSettings,
+    recordDoubleClick,
+    // triggerFilter,
+    selectionSettings,
+    setIsSelectionChange,
+    onContextMenu,
+    contextMenuItems,
+    setSorterChange,
+    setFilterChange,
+    // tableHeight,
+    onCellPaste,
+    // triggerPaste,
+    validate,
+    // triggerChangeData,
+    onCellChange,
+    onDataChange,
+    defaultValue,
+    toolbarItems,
+    mergedFilterKeys,
+    setMergedFilterKeys,
+    expanded,
+    setExpanded,
+    onBlur,
+    fullScreen,
+    pagination,
+    showToolbar,
+    actionTemplate,
+    showColumnChoose,
+    height,
+    summary,
+    locale,
+    groupColumns,
+    columns,
+    propsColumns,
+    triggerChangeColumns,
+    columnHidden
+  } = 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 visibleColumns = table.getVisibleLeafColumns();
+  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: 1 //how many columns to render on each side off screen each way (adjust this for performance)
+  });
+  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(() => {
+    requestAnimationFrame(() => {
+      columnVirtualizer.measure();
+    });
+  }, [columnSizingState, columnVirtualizer]);
+  React.useEffect(() => {
+    if (validate && dataSource && dataSource.length) {
+      validateData(dataSource, validate).then(error => {
+        setDataErrors([...error]);
+        // if (getErrors) {
+        //   getErrors([...error])
+        // }
+      });
+    }
+  }, [validate, dataSource]);
+  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 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(() => {});
+  }, [startCell, endCell, table]);
+  const triggerChangeData = React.useCallback(newData => {
+    onDataChange?.(newData);
+  }, [onDataChange]);
+  const triggerPaste = React.useCallback((pastedRows, pastedColumnsArray, newData, copyRows) => {
+    const handlePasteCallback = callbackData => {
+      const rsFilterData = updateOrInsert(flattenArray([...dataSource]), 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: dataSource,
+          pastedColumns: pastedColumnsArray
+        }, handlePasteCallback);
+      } else {
+        // không có callback
+        onCellPaste.onPasted({
+          pasteData: pastedRows,
+          type: 'onPaste',
+          copyRows,
+          data: dataSource,
+          pastedColumns: pastedColumnsArray
+        }, handlePasteCallback);
+        triggerChangeData(newData);
+      }
+    } else {
+      triggerChangeData(newData);
+    }
+  }, [dataSource, onCellPaste, 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())) {
+              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 ?? cellFormat?.thousandSeparator;
+              const decimalSeparator = valuePasteFormat?.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 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);
+          }
+        });
+
+        // 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 handlePasteToTable = React.useCallback(pasteData => {
+    if (!startCell) return;
+
+    // const pastedRows = pasted.trim().split('\n').map(row => row.split('\t'));
+
+    // Chuyển đổi dữ liệu từ clipboard thành mảng
+    const rowsPasted = pasteData.split("\n").filter(row => row !== '').map(row =>
+    // const rows = pasteData.split("\n").map((row: any) =>
+    row.replace(/\r/g, "").split("\t"));
+    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 (500 d\xF2ng).Ph\u1EA7n m\u1EC1n s\u1EBD ch\u1EC9 l\u1EA5y 500 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: () => {
+          handlePasted(rowsPasted);
+        }
+        // footer: (_, { OkBtn, CancelBtn }) => (
+        //   <>
+        //     <OkBtn />
+        //     <CancelBtn />
+        //   </>
+        // ),
+      });
+    } else {
+      handlePasted(rowsPasted);
+    }
+  }, [handlePasted, onCellPaste?.maxRowsPaste, startCell]);
+  React.useEffect(() => {
+    const handleKeyDown = e => {
+      if (e.ctrlKey && e.key === 'c' && startCell && endCell) {
+        e.preventDefault();
+        copySelectionToClipboard();
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [startCell, endCell, table, copySelectionToClipboard]);
+  React.useEffect(() => {
+    const handlePaste = e => {
+      if (startCell) {
+        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]);
+  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) {
+        return;
+      }
+      if (containerRef.current && tableBody && !tableBody.contains(event.target)) {
+        if (editingKey) {
+          onBlur?.(dataSource);
+        }
+        setTimeout(() => {
+          setEditingKey('');
+          // editingKey.current = ''
+        });
+        setEndCell(undefined);
+        setStartCell(undefined);
+        setRangeState(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]);
+  React.useEffect(() => {
+    const totalHeight = height;
+    if (totalHeight && topToolbarRef.current && bottomToolbarRef.current) {
+      settableHeight(totalHeight - topToolbarRef.current.offsetHeight - bottomToolbarRef.current.offsetHeight);
+    }
+  }, [id, height, editAble]);
+  const {
+    control,
+    handleSubmit,
+    setValue,
+    // trigger,
+    getValues,
+    reset,
+    formState: {
+      errors
+    }
+  } = useForm({
+    mode: 'onChange',
+    resolver: validate ? yupResolver(validate) : undefined
+  });
+  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 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 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 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);
+
+    // 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, 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.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);
+      triggerChangeData?.([...newDaa]);
+    }
+  }, [originData, rowKey, rowsFocus, triggerChangeData]);
+  const handleDeleteAll = React.useCallback(() => {
+    triggerChangeData?.([]);
+  }, [triggerChangeData]);
+  const handleDeleteContent = React.useCallback(() => {
+    if (startCell && endCell) {
+      const tmpData = flattenArray([...dataSource]);
+      const rs = tmpData.map(row => {
+        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;
+          if (isEditable(column, row)) {
+            updatedRow[colId] = '';
+          }
+        }
+        return updatedRow;
+      });
+      const newData = unFlattenData(rs);
+      triggerChangeData?.([...newData]);
+    }
+  }, [dataSource, endCell, rangeState, startCell, table, triggerChangeData]);
+  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,
+                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]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: containerRef,
+    id: id
+  }, (showToolbar !== false || fullScreen !== false || showColumnChoose) && /*#__PURE__*/React.createElement("div", {
+    ref: topToolbarRef,
+    className: classNames(`${prefix}-grid-top-toolbar`, {})
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      gap: '.75rem'
+    }
+  }, toolbarItems && toolbarItems?.length > 0 && /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1,
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/React.createElement(Toolbar, {
+    items: (toolbarItems ?? []).filter(it => it.position !== 'Bottom'),
+    mode: 'scroll'
+  })), fullScreen !== false && (isFullScreen ? /*#__PURE__*/React.createElement(Minimize, {
+    fontSize: 16
+    // onClick={() => handleFullScreen?.()}
+    ,
+    "data-tooltip-id": "tooltip-icon",
+    "data-tooltip-content": t ? t('Minimized') : 'Minimized'
+  }) : /*#__PURE__*/React.createElement(Maximize, {
+    fontSize: 16
+    // onClick={() => handleFullScreen?.()}
+    ,
+    "data-tooltip-id": "tooltip-icon",
+    "data-tooltip-content": t ? t('Full screen') : 'Full screen'
+  })), /*#__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, 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("div", {
+    // className="container"
+    className: classNames(`${prefix}-grid-container`, {
+      'ui-rc-table-ping-right': tableContainerRef && (tableContainerRef.current?.scrollLeft ?? 0) >= 0 && (tableContainerRef.current?.scrollLeft ?? 0) + (tableContainerRef.current?.clientWidth ?? 0) < (tableContainerRef.current?.scrollWidth ?? 0),
+      'ui-rc-table-ping-left': tableContainerRef && (tableContainerRef.current?.scrollLeft ?? 0) > 0
+    }),
+    ref: tableContainerRef,
+    style: {
+      overflow: 'auto',
+      //our scrollable table container
+      position: 'relative',
+      //needed for sticky header
+      height: tableHeight //should be a fixed height
+    }
+  }, /*#__PURE__*/React.createElement(TableContext.Provider, {
+    value: {
+      locale,
+      prefix,
+      id,
+      rowKey,
+      format,
+      expandable,
+      expanded,
+      setExpanded,
+      dataSource,
+      originData,
+      wrapSettings,
+      recordDoubleClick,
+      selectionSettings,
+      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,
+      triggerPaste,
+      handleDeleteContent,
+      handleAddMulti,
+      dataErrors
+    }
+  }, /*#__PURE__*/React.createElement("table", {
+    // className={`${prefix}-grid-container`}
+    style: {
+      display: 'grid',
+      minWidth: table.getTotalSize()
+    }
+  }, /*#__PURE__*/React.createElement(TableHead, {
+    tableContainerRef: tableContainerRef,
+    columnVirtualizer: columnVirtualizer,
+    table: table,
+    virtualPaddingLeft: virtualPaddingLeft,
+    virtualPaddingRight: virtualPaddingRight,
+    fixedLeftColumns: fixedLeftColumns,
+    fixedRightColumns: fixedRightColumns
+  }), /*#__PURE__*/React.createElement(TableBody, {
+    tableId: id,
+    columnVirtualizer: columnVirtualizer,
+    table: table,
+    tableContainerRef: tableContainerRef,
+    virtualPaddingLeft: virtualPaddingLeft,
+    virtualPaddingRight: virtualPaddingRight,
+    fixedLeftColumns: fixedLeftColumns,
+    fixedRightColumns: fixedRightColumns,
+    commandClick: commandClick,
+    editAble: editAble,
+    contextMenuItems: contextMenuItems
+  }), summary && /*#__PURE__*/React.createElement(TableFooter, {
+    columnVirtualizer: columnVirtualizer,
+    table: table,
+    virtualPaddingLeft: virtualPaddingLeft,
+    virtualPaddingRight: virtualPaddingRight,
+    fixedLeftColumns: fixedLeftColumns,
+    fixedRightColumns: fixedRightColumns
+  }))))), /*#__PURE__*/React.createElement("div", {
+    ref: bottomToolbarRef
+  }, toolbarItemsBottom && toolbarItemsBottom.length > 0 && /*#__PURE__*/React.createElement("div", {
+    className: 'ui-rc-toolbar-bottom'
+    // 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 && /*#__PURE__*/React.createElement(Pagination
+  // style={{padding: '0.75rem 1rem'}}
+  , _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;