es-grid-template 1.9.59 → 1.9.60

package/es/ali-table/InternalTable.js

@@ -3,12 +3,14 @@ import { features, useTablePipeline } from "./pipeline";
 import * as fusion from '@alifd/next';
 import { useLocale } from "rc-master-ui/es/locale";
 import { faker } from "@faker-js/faker";
-import React from "react";
+import React, { Fragment, useRef } from "react";
 import "./base-table/styles.scss";
-import { addRowIdArray, filterDataByColumns, flatColumns2,
+import { addRowIdArray, findItemByKey, flatColumns2, flattenArray, flattenData,
+// getAllRowKey,
+getDefaultValue, getRowIdsBetween3, getRowIndexMap,
 // getInvisibleColumns, 
-getVisibleFields, groupArrayByColumns, isTreeArray, revertConvertFilters, sortByType, sumFields } from "../table-component/hook/utils";
-import { CustomProvider, ConfigProvider, Modal } from 'rc-master-ui';
+getVisibleFields, groupArrayByColumns, isTreeArray, newGuid, revertConvertFilters, sortByType, sumFields, unFlattenData, updateArrayByKey, updateOrInsert } from "../table-component/hook/utils";
+import { CustomProvider, ConfigProvider, Modal, Button, Dropdown } from 'rc-master-ui';
 import { getLocale, getLocales } from "../locale/useLocale";
 import { TableContext } from "./useContext";
 import Grid from "./Grid";
@@ -16,6 +18,15 @@ import { getParentKeysLarge, getRowsByKeysKeepTreeOrder } from "./utils/selected
 import { DndContext, KeyboardSensor, MouseSensor, TouchSensor, closestCenter, useSensor, useSensors } from '@dnd-kit/core';
 import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
 import { arrayMove } from "@dnd-kit/sortable";
+import { useForm } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { filterDataByColumns1 } from "./utils/utility";
+import { stateKeyEndCell, stateKeyFocusedCell, stateKeyIsEditing, stateKeyStartCell } from "./utils/constants";
+import classNames from "classnames";
+import { getToolbarTemplate } from "../grid-component/hooks";
+import withReactContent from "sweetalert2-react-content";
+import Swal from "sweetalert2";
+const MySwal = withReactContent(Swal);
 const InternalTable = props => {
   const {
     t,
@@ -45,13 +56,27 @@ const InternalTable = props => {
     summary,
     useVirtual,
     rowDnd,
+    // Edit
+    editAble,
+    headerEditAble,
+    rowEditable,
+    validate,
+    onCellPaste,
+    onDataChange,
+    onCellChange,
+    onHeaderCellChange,
+    toolbarItems,
+    defaultValue,
+    commandSettings,
     ...rest
   } = props;
+  const tableRef = useRef(null);
   const prefix = 'ui-rc';
   const rowKey = 'rowId';
+  const childrenColumnName = 'children';
   const childrenKey = 'children';
   const [tableLocal] = useLocale('Table');
-  const id = React.useMemo(() => {
+  const tableId = React.useMemo(() => {
     return faker.string.alpha(20);
   }, []);
   const language = React.useMemo(() => {
@@ -100,7 +125,10 @@ const InternalTable = props => {
     if (shouldSkip) {
       return convertData;
     }
-    return filterDataByColumns(convertData, onFilter ? undefined : filterState ?? defaultFilter, onSorter ? undefined : sortState ?? defaultSorter, [], ignoreAccents);
+
+    // const rs  = filterDataByColumns(convertData, onFilter ? undefined : (filterState ?? defaultFilter), onSorter ? undefined : (sortState ?? defaultSorter), [], ignoreAccents)
+    const rss = filterDataByColumns1(convertData, onFilter ? undefined : filterState ?? defaultFilter, onSorter ? undefined : sortState ?? defaultSorter, [], ignoreAccents);
+    return rss;
   }, [convertData, filterState, ignoreAccents, sortState, onFilter, onSorter, defaultFilter, defaultSorter]);
   const footerData = React.useMemo(() => {
     if (!summary) {
@@ -135,6 +163,208 @@ const InternalTable = props => {
   const columnVisibility = React.useMemo(() => {
     return getVisibleFields(columns);
   }, [columns]);
+  const {
+    control,
+    handleSubmit,
+    setValue,
+    getValues,
+    reset,
+    formState: {
+      errors
+    }
+  } = useForm({
+    mode: 'onChange',
+    resolver: validate ? yupResolver(validate) : undefined
+  });
+  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 triggerChangeData = React.useCallback((newData, args) => {
+    onDataChange?.(newData, args);
+  }, [onDataChange]);
+  const triggerPaste = React.useCallback((pastedRows, pastedColumnsArray, newData, copyRows) => {
+    const handlePasteCallback = callbackData => {
+      const rsFilterData = updateOrInsert(flattenArray([...convertData]), flattenArray([...callbackData]));
+      const rs = unFlattenData(rsFilterData);
+      triggerChangeData(rs, {
+        type: 'OnPaste'
+      });
+    };
+    if (onCellPaste && onCellPaste.onPasted) {
+      if (onCellPaste.onPasted.length > 1) {
+        // có callback
+        onCellPaste.onPasted({
+          pasteData: pastedRows,
+          copyRows,
+          type: 'onPaste',
+          data: convertData,
+          pastedColumns: pastedColumnsArray
+        }, handlePasteCallback);
+      } else {
+        // không có callback
+        onCellPaste.onPasted({
+          pasteData: pastedRows,
+          type: 'onPaste',
+          copyRows,
+          data: convertData,
+          pastedColumns: pastedColumnsArray
+        }, handlePasteCallback);
+        triggerChangeData(newData, {
+          type: 'OnPaste'
+        });
+      }
+    } else {
+      triggerChangeData(newData, {
+        type: 'OnPaste'
+      });
+    }
+  }, [onCellPaste, convertData, triggerChangeData]);
+  const onSubmit = formData => {
+    try {
+      // const record = (await form.validateFields()) as RecordType;
+      const row = {
+        ...formData
+      };
+
+      // const newData = [...dataSource]
+      const newData = [...convertData];
+      const index = flattenData(childrenColumnName, newData).findIndex(item => formData[rowKey] === item[rowKey]);
+      const rs = updateArrayByKey(newData, row, rowKey);
+      if (index > -1) {
+        triggerChangeData?.(rs, {
+          type: 'CellChange'
+        });
+      }
+    } 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: [...convertData],
+            sumValue: []
+          }, handleChangeCallback);
+        } else {
+          onCellChange({
+            field,
+            indexCol,
+            type: 'onChange',
+            option,
+            value: newState,
+            indexRow,
+            rowData: record,
+            rowId: key,
+            // rowsData: [...dataSource],
+            rowsData: [...convertData],
+            sumValue: []
+          }, handleChangeCallback);
+          onSubmit(record);
+        }
+      }
+      if (!onCellChange) {
+        onSubmit(record);
+      }
+    }
+    if (prevState && newState && prevState !== newState && changeType === 'enter') {
+      onSubmit(record);
+    }
+  };
+  const handleHeaderCellChange = 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 (onHeaderCellChange) {
+        if (onHeaderCellChange.length > 1) {
+          onHeaderCellChange({
+            field,
+            indexCol,
+            type: 'onChange',
+            value: newState,
+            option,
+            indexRow,
+            rowData: record,
+            rowId: key,
+            // rowsData: [...dataSource],
+            rowsData: [...convertData],
+            sumValue: []
+          }, handleChangeCallback);
+        } else {
+          onHeaderCellChange({
+            field,
+            indexCol,
+            type: 'onChange',
+            option,
+            value: newState,
+            indexRow,
+            rowData: record,
+            rowId: key,
+            rowsData: [...convertData],
+            sumValue: []
+          }, handleChangeCallback);
+
+          // onSubmit(record)
+        }
+      }
+    }
+    if (prevState && newState && prevState !== newState && changeType === 'enter') {
+      onSubmit(record);
+    }
+  };
   const pipeline = useTablePipeline({
     components: fusion
   }).input({
@@ -146,8 +376,6 @@ const InternalTable = props => {
   .use(features.hiddenColumns({
     columns,
     visibleKeys: visibleKeys ?? columnVisibility
-    // visibleKeys: ['name']
-    // visibleKeys
   })).use(features.treeSelect({
     tree: mergedData,
     value: selectionSettings?.selectedRowKeys,
@@ -188,11 +416,12 @@ const InternalTable = props => {
     defaultOpenKeys: expandAllKeys ?? expandable?.defaultExpandedRowKeys,
     isTreeArray: !!isDataTree
   })).use(features.columnCustom({
-    id,
+    tableRef,
+    id: tableId,
     t,
     columns,
     mode: sortMultiple !== false ? 'multiple' : 'single',
-    dataSource: mergedData,
+    dataSource: convertData,
     columnResizeMode: 'onChange',
     disableUserSelectWhenResizing: true,
     allowFiltering,
@@ -223,7 +452,20 @@ const InternalTable = props => {
       } else {
         setSortState(val);
       }
-    }
+    },
+    // Edit
+    editAble,
+    rowEditable,
+    setValue,
+    reset,
+    control,
+    getValues,
+    errors,
+    handleSubmit,
+    onSubmit,
+    triggerPaste,
+    handleCellChange,
+    handleHeaderCellChange
   })).use(features.paginationFeature({
     pagination
   }));
@@ -233,6 +475,88 @@ const InternalTable = props => {
   // }
 
   // reorder rows after drag & drop
+
+  React.useEffect(() => {
+    const handleClickOutside = event => {
+      if (!editAble) {
+        return;
+      }
+      const isEditting = pipeline.getStateAtKey(stateKeyIsEditing);
+      const startCell = pipeline.getStateAtKey(stateKeyStartCell);
+      const endCell = pipeline.getStateAtKey(stateKeyEndCell);
+      const focusedCell = pipeline.getStateAtKey(stateKeyFocusedCell);
+      const element = event.target;
+      const container = document.querySelector(".be-popup-container");
+      const containerContextMenu = document.querySelector(".popup-context-menu");
+
+      // const tableBody = document.querySelector(`#${tableId} .ui-rc-grid-tbody`)
+      const tableBody = tableRef?.current?.domHelper?.tableBody;
+      // const tableHeader = tableRef?.current?.domHelper?.tableHeader
+
+      const itemContainer = document.querySelector(`#${tableId} .ui-rc-toolbar-selection-overflow-item`);
+      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(element as Node)
+
+      if (headerEditAble) {
+        const items = document.querySelectorAll(`#${tableId} .ui-rc-grid-table-header .header-cell-editable`);
+        const hasElement = Array.from(items).some(item => item.contains(element));
+        if (hasElement) {
+          return;
+        }
+      }
+      if (isInsideContainer || isInsideToolbar || isInsideContainerContext || element.id === tableId) {
+        return;
+      }
+
+      // trường hợp đặc biệt select table clear icon
+      const path = '<path d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"></path>';
+      const expectedD = path.match(/d="([^"]*)"/)?.[1];
+      const clickedPath = element.closest('path') ?? element.closest('svg')?.querySelector('path');
+      if (clickedPath) {
+        const isMatch = clickedPath.getAttribute('d') === expectedD;
+        if (isMatch) {
+          return;
+        }
+      }
+      // trường hợp đặc biệt select table clear icon
+
+      // if (tableRef.current && tableBody && !tableBody.contains(element as Node) && !tableHeader.contains(element as Node) ) {
+      if (tableRef.current && tableBody && !tableBody.contains(element)) {
+        if (isEditting) {}
+        if (isEditting) {
+          setTimeout(() => {
+            pipeline.setStateAtKey(stateKeyIsEditing, false);
+          });
+        }
+        if (endCell) {
+          pipeline.setStateAtKey(stateKeyEndCell, undefined);
+        }
+        if (startCell) {
+          pipeline.setStateAtKey(stateKeyStartCell, undefined);
+        }
+        if (focusedCell) {
+          setTimeout(() => {
+            pipeline.setStateAtKey(stateKeyFocusedCell, undefined);
+          });
+        }
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [tableId, pipeline, editAble, headerEditAble]);
+  const rowsFocus = React.useMemo(() => {
+    const startCell = pipeline.getStateAtKey(stateKeyStartCell);
+    const endCell = pipeline.getStateAtKey(stateKeyEndCell);
+    const allRows = pipeline.getDataSource(); // flat data
+    const rowIndexMap = getRowIndexMap(allRows);
+    const selectRowIds = startCell && endCell ? getRowIdsBetween3(convertData, rowIndexMap, startCell.rowId, endCell.rowId) : [];
+    return selectRowIds;
+  }, [convertData, pipeline]);
   function handleDragEnd(event) {
     const {
       active,
@@ -253,6 +577,859 @@ const InternalTable = props => {
     }
   }
   const sensors = useSensors(useSensor(MouseSensor, {}), useSensor(TouchSensor, {}), useSensor(KeyboardSensor, {}));
+  const handleDeleteRows = React.useCallback(item => {
+    if (item.onClick) {
+      item.onClick({
+        toolbar: item
+      });
+    } else {
+      const filterData = flattenArray([...convertData]);
+      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], {
+              type: 'DELETE_ROWS',
+              row: rowsFocus.length
+            });
+          } else if (result.dismiss === MySwal.DismissReason.cancel) {}
+        });
+      } else {
+        // không hiện dialog  
+        triggerChangeData?.([...newDaa], {
+          type: 'DELETE_ROWS',
+          row: rowsFocus.length
+        });
+      }
+    }
+  }, [commandSettings, convertData, 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?.([], {
+              type: 'DELETE'
+            });
+          } else if (result.dismiss === MySwal.DismissReason.cancel) {}
+        });
+      } else {
+        triggerChangeData?.([], {
+          type: 'DELETE'
+        });
+      }
+    }
+  }, [commandSettings, t, triggerChangeData]);
+  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 = convertData.concat(newRows);
+      triggerChangeData?.(newData);
+    }
+  }, [convertData, defaultValue, triggerChangeData]);
+  const handleDuplicate = React.useCallback(() => {
+    // không tính tree
+
+    // Cập nhật data mới
+    const newData = flattenArray([...convertData]);
+    const focusedCell = pipeline.getStateAtKey(stateKeyFocusedCell);
+    const duplicatedItem = newData.find(it => it.rowId === focusedCell?.rowId);
+    const duplicatedItems = [{
+      ...duplicatedItem,
+      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 = updateOrInsert(convertData, rsFilter);
+    triggerChangeData?.(rs, {
+      type: 'DUPLICATE'
+    });
+  }, [convertData, pipeline, 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 = convertData.find(it => it.rowId === rowsFocus[rowsFocus.length - 1]);
+    if (item.onClick) {
+      item.onClick({
+        toolbar: item
+      });
+    } else {
+      if (!record?.parentId) {
+        // Cập nhật data mới
+
+        const newData = [...convertData];
+        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, {
+          type: 'INSERT_BEFORE',
+          row: n
+        });
+      } else {
+        const newData = [...convertData];
+        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, {
+          type: 'INSERT_BEFORE',
+          row: n
+        });
+      }
+    }
+  }, [convertData, defaultValue, rowsFocus, triggerChangeData]);
+
+  //thêm 1 dòng bên dưới
+  const handleInsertAfter = React.useCallback((item, n) => {
+    const defaultRowValue = getDefaultValue(defaultValue);
+    const focusedCell = pipeline.getStateAtKey(stateKeyFocusedCell);
+
+    // 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 = convertData.find(it => it.rowId === focusedCell?.rowId);
+    if (item.onClick) {
+      item.onClick({
+        toolbar: item
+      });
+    } else {
+      if (!record?.parentId) {
+        // Cập nhật data mới
+        const newData = [...convertData];
+        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, {
+          type: 'INSERT_AFTER',
+          row: n
+        });
+      } else {
+        const newData = [...convertData];
+        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, {
+          type: 'INSERT_AFTER',
+          row: n
+        });
+      }
+    }
+  }, [defaultValue, pipeline, convertData, triggerChangeData]);
+  const handleInsertChild = React.useCallback(item => {
+    const defaultRowValue = getDefaultValue(defaultValue);
+    const focusedCell = pipeline.getStateAtKey(stateKeyFocusedCell);
+    const rowId = newGuid();
+    const record = convertData.find(it => it.rowId === focusedCell?.rowId);
+    if (item.onClick) {
+      item.onClick({
+        toolbar: item
+      });
+    } else {
+      // const newData = [...dataSource]
+      const newData = [...convertData];
+      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, {
+        type: 'INSERT_CHILDREN'
+      });
+    }
+
+    // setTimeout(() => {
+    //   const row = table.getRowModel().rows.find((it) => it.id === focusedCell?.rowId)
+
+    //   if (row) {
+
+    //     setExpanded((old: any) => ({
+    //       ...old,
+    //       [row.id]: true
+    //     }))
+
+    //   }
+
+    // }, 10)
+
+    // const hasKey = mergedExpandedKeys.has(key)
+    // if (!hasKey) {
+    //   const newExpandedKeys = [...mergedExpandedKeys, key]
+    //   setInnerExpandedKeys(newExpandedKeys)
+    // }
+  }, [convertData, defaultValue, pipeline, triggerChangeData]);
+  const toolbarItemsBottom = React.useMemo(() => {
+    // Chưa có dòng| ô được chọn
+    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,
+            label: item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item',
+            template: () => {
+              return /*#__PURE__*/React.createElement(Fragment, null, item.key === 'ADD' && /*#__PURE__*/React.createElement("div", {
+                className: classNames(`be-toolbar-item`, item?.className)
+              }, item?.hasMenu === false ? /*#__PURE__*/React.createElement(Button, {
+                style: {
+                  color: '#28c76f',
+                  borderColor: '#28c76f'
+                },
+                variant: 'outlined',
+                onClick: () => handleAddMulti(item, 1),
+                className: "d-flex toolbar-button"
+              }, item.template ? getToolbarTemplate(item.template) : /*#__PURE__*/React.createElement(React.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item')) : /*#__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.template ? getToolbarTemplate(item.template) : /*#__PURE__*/React.createElement(React.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item')))));
+            }
+          };
+        }
+        if (item.key === 'DELETE') {
+          return {
+            ...item,
+            label: item.label ? t ? t(item.label) : item.label : t ? t('Delete all item') : 'Delete all 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.template ? getToolbarTemplate(item.template) : /*#__PURE__*/React.createElement(React.Fragment, null, 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,
+          label: item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item',
+          template: () => {
+            return /*#__PURE__*/React.createElement(Fragment, null, item.key === 'ADD' && /*#__PURE__*/React.createElement("div", {
+              className: classNames(`be-toolbar-item`, item?.className)
+            }, item?.hasMenu === false ? /*#__PURE__*/React.createElement(Button, {
+              style: {
+                color: '#28c76f',
+                borderColor: '#28c76f'
+              },
+              variant: 'outlined',
+              onClick: () => handleAddMulti(item, 1),
+              className: "d-flex toolbar-button"
+            }, item.template ? getToolbarTemplate(item.template) : /*#__PURE__*/React.createElement(React.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item')) : /*#__PURE__*/React.createElement(Dropdown.Button, {
+              title: "",
+              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.template ? getToolbarTemplate(item.template) : /*#__PURE__*/React.createElement(React.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item')))));
+          }
+        };
+      }
+      if (item.key === 'DUPLICATE') {
+        return {
+          ...item,
+          label: item.label ? t ? t(item.label) : item.label : t ? t('Duplicate') : 'Duplicate',
+          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.template ? getToolbarTemplate(item.template) : /*#__PURE__*/React.createElement(React.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Duplicate') : 'Duplicate'))));
+          }
+        };
+      }
+      if (item.key === 'INSERT_BEFORE') {
+        return {
+          ...item,
+          label: item.label ? t ? t(item.label) : item.label : t ? t('Insert item before') : 'Insert item before',
+          template: () => {
+            return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+              className: classNames(`be-toolbar-item`, item?.className)
+            }, item?.hasMenu === false ? /*#__PURE__*/React.createElement(Button, {
+              style: {
+                color: '#28c76f',
+                borderColor: '#28c76f'
+              },
+              variant: 'outlined',
+              onClick: () => handleInsertBefore(item, 1),
+              className: "d-flex toolbar-button"
+            }, item.template ? getToolbarTemplate(item.template) : /*#__PURE__*/React.createElement(React.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Insert item before') : 'Insert item before')) : /*#__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.template ? getToolbarTemplate(item.template) : /*#__PURE__*/React.createElement(React.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Insert item before') : 'Insert item before')))));
+          }
+        };
+      }
+      if (item.key === 'INSERT_AFTER') {
+        return {
+          ...item,
+          label: item.label ? t ? t(item.label) : item.label : t ? t('Insert item after') : 'Insert item after',
+          template: () => {
+            return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+              className: classNames(`be-toolbar-item`, item?.className)
+            }, item?.hasMenu === false ? /*#__PURE__*/React.createElement(Button, {
+              style: {
+                color: '#28c76f',
+                borderColor: '#28c76f'
+              },
+              variant: 'outlined',
+              onClick: () => handleInsertAfter(item, 1),
+              className: "d-flex toolbar-button"
+            }, item.template ? getToolbarTemplate(item.template) : /*#__PURE__*/React.createElement(React.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Insert item after') : 'Insert item after')) : /*#__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.template ? getToolbarTemplate(item.template) : /*#__PURE__*/React.createElement(React.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Insert item after') : 'Insert item after')))));
+          }
+        };
+      }
+      if (item.key === 'INSERT_CHILDREN') {
+        return {
+          ...item,
+          label: item.label ? t ? t(item.label) : item.label : t ? t('Insert item children') : 'Insert item children',
+          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.template ? getToolbarTemplate(item.template) : /*#__PURE__*/React.createElement(React.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Insert item children') : 'Insert item children'))));
+          }
+        };
+      }
+      if (item.key === 'DELETE') {
+        return {
+          ...item,
+          label: item.label ? t ? t(item.label) : item.label : t ? t('Delete all item') : 'Delete all 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.template ? getToolbarTemplate(item.template) : /*#__PURE__*/React.createElement(React.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Delete all item') : 'Delete all item')));
+          }
+        };
+      }
+      if (item.key === 'DELETE_ROWS') {
+        return {
+          ...item,
+          label: t ? `${t('Delete')} ${rowsFocus.length} ${t('row')}` : `Delete ${rowsFocus.length} 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"
+            }, item.template ? getToolbarTemplate(item.template) : /*#__PURE__*/React.createElement(React.Fragment, null, 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 toolbarItemsTop = React.useMemo(() => {
+    // Chưa có dòng| ô được chọn
+    if (!rowsFocus || rowsFocus.length === 0) {
+      return toolbarItems?.filter(it => it.position !== 'Bottom' && it.visible !== false && it.fixedRight !== true && 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,
+            label: item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item',
+            template: () => {
+              return /*#__PURE__*/React.createElement(Fragment, null, item.key === 'ADD' && /*#__PURE__*/React.createElement("div", {
+                className: classNames(`be-toolbar-item`, item?.className)
+              }, item?.hasMenu === false ? /*#__PURE__*/React.createElement(Button, {
+                style: {
+                  color: '#28c76f',
+                  borderColor: '#28c76f'
+                },
+                variant: 'outlined',
+                onClick: () => handleAddMulti(item, 1),
+                className: "d-flex toolbar-button"
+              }, item.template ? getToolbarTemplate(item.template) : /*#__PURE__*/React.createElement(React.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item')) : /*#__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.template ? getToolbarTemplate(item.template) : /*#__PURE__*/React.createElement(React.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item')))));
+            }
+          };
+        }
+        if (item.key === 'DELETE') {
+          return {
+            ...item,
+            label: item.label ? t ? t(item.label) : item.label : t ? t('Delete all item') : 'Delete all 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.template ? getToolbarTemplate(item.template) : /*#__PURE__*/React.createElement(React.Fragment, null, 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 && it.fixedRight !== true).map(item => {
+      if (item.key === 'ADD') {
+        return {
+          ...item,
+          label: item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item',
+          template: () => {
+            return /*#__PURE__*/React.createElement(Fragment, null, item.key === 'ADD' && /*#__PURE__*/React.createElement("div", {
+              className: classNames(`be-toolbar-item`, item?.className)
+            }, item?.hasMenu === false ? /*#__PURE__*/React.createElement(Button, {
+              style: {
+                color: '#28c76f',
+                borderColor: '#28c76f'
+              },
+              variant: 'outlined',
+              onClick: () => handleAddMulti(item, 1),
+              className: "d-flex toolbar-button"
+            }, item.template ? getToolbarTemplate(item.template) : /*#__PURE__*/React.createElement(React.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item')) : /*#__PURE__*/React.createElement(Dropdown.Button, {
+              title: "",
+              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.template ? getToolbarTemplate(item.template) : /*#__PURE__*/React.createElement(React.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item')))));
+          }
+        };
+      }
+      if (item.key === 'DUPLICATE') {
+        return {
+          ...item,
+          label: item.label ? t ? t(item.label) : item.label : t ? t('Duplicate') : 'Duplicate',
+          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.template ? getToolbarTemplate(item.template) : /*#__PURE__*/React.createElement(React.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Duplicate') : 'Duplicate'))));
+          }
+        };
+      }
+      if (item.key === 'INSERT_BEFORE') {
+        return {
+          ...item,
+          label: item.label ? t ? t(item.label) : item.label : t ? t('Insert item before') : 'Insert item before',
+          template: () => {
+            return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+              className: classNames(`be-toolbar-item`, item?.className)
+            }, item?.hasMenu === false ? /*#__PURE__*/React.createElement(Button, {
+              style: {
+                color: '#28c76f',
+                borderColor: '#28c76f'
+              },
+              variant: 'outlined',
+              onClick: () => handleInsertBefore(item, 1),
+              className: "d-flex toolbar-button"
+            }, item.template ? getToolbarTemplate(item.template) : /*#__PURE__*/React.createElement(React.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Insert item before') : 'Insert item before')) : /*#__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.template ? getToolbarTemplate(item.template) : /*#__PURE__*/React.createElement(React.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Insert item before') : 'Insert item before')))));
+          }
+        };
+      }
+      if (item.key === 'INSERT_AFTER') {
+        return {
+          ...item,
+          label: item.label ? t ? t(item.label) : item.label : t ? t('Insert item after') : 'Insert item after',
+          template: () => {
+            return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+              className: classNames(`be-toolbar-item`, item?.className)
+            }, item?.hasMenu === false ? /*#__PURE__*/React.createElement(Button, {
+              style: {
+                color: '#28c76f',
+                borderColor: '#28c76f'
+              },
+              variant: 'outlined',
+              onClick: () => handleInsertAfter(item, 1),
+              className: "d-flex toolbar-button"
+            }, item.template ? getToolbarTemplate(item.template) : /*#__PURE__*/React.createElement(React.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Insert item after') : 'Insert item after')) : /*#__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.template ? getToolbarTemplate(item.template) : /*#__PURE__*/React.createElement(React.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Insert item after') : 'Insert item after')))));
+          }
+        };
+      }
+      if (item.key === 'INSERT_CHILDREN') {
+        return {
+          ...item,
+          label: item.label ? t ? t(item.label) : item.label : t ? t('Insert item children') : 'Insert item children',
+          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.template ? getToolbarTemplate(item.template) : /*#__PURE__*/React.createElement(React.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Insert item children') : 'Insert item children'))));
+          }
+        };
+      }
+      if (item.key === 'DELETE') {
+        return {
+          ...item,
+          label: item.label ? t ? t(item.label) : item.label : t ? t('Delete all item') : 'Delete all 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.template ? getToolbarTemplate(item.template) : /*#__PURE__*/React.createElement(React.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Delete all item') : 'Delete all item')));
+          }
+        };
+      }
+      if (item.key === 'DELETE_ROWS') {
+        return {
+          ...item,
+          label: t ? `${t('Delete')} ${rowsFocus.length} ${t('row')}` : `Delete ${rowsFocus.length} 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"
+            }, item.template ? getToolbarTemplate(item.template) : /*#__PURE__*/React.createElement(React.Fragment, null, 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 toolbarItemTopRight = React.useMemo(() => {
+    if (!toolbarItems) {
+      return undefined;
+    }
+    return toolbarItems.filter(it => it.position !== 'Bottom' && it.fixedRight);
+  }, [toolbarItems]);
   return /*#__PURE__*/React.createElement(ConfigProvider, {
     locale: language,
     theme: {
@@ -303,7 +1480,7 @@ const InternalTable = props => {
   }, /*#__PURE__*/React.createElement(TableContext.Provider, {
     value: {
       prefix,
-      id,
+      id: tableId,
       rowKey,
       dataSource: mergedData,
       originData: convertData,
@@ -317,18 +1494,21 @@ const InternalTable = props => {
     onDragEnd: handleDragEnd,
     sensors: sensors
   }, /*#__PURE__*/React.createElement(Grid, _extends({}, rest, {
-    id: id,
+    id: tableId,
     useVirtual: {
       header: false,
       horizontal: useVirtual?.horizontal ?? true,
       vertical: useVirtual?.vertical ?? true
     },
+    ref: tableRef,
     isFullScreen: isFullScreen,
     pagination: pagination,
     setIsFullScreen: setIsFullScreen,
     pipeline: pipeline
-  }, pipeline.getProps(), {
+    // {...pipeline.getProps()}
+    ,
     originData: convertData,
+    dataSource: dataSource,
     originColumns: columns,
     groupColumns: groupColumns,
     setVisibleKeys: setVisibleKeys,
@@ -337,7 +1517,12 @@ const InternalTable = props => {
     onSorter: onSorter,
     defaultFilter: defaultFilter,
     defaultSorter: defaultSorter,
-    dataRowIds: dataIds
+    dataRowIds: dataIds,
+    columns: columns,
+    editAble: editAble,
+    toolbarItemTopRight: toolbarItemTopRight,
+    toolbarItemsTop: toolbarItemsTop,
+    toolbarItemsBottom: toolbarItemsBottom
   })), /*#__PURE__*/React.createElement(Modal, {
     open: isFullScreen,
     footer: null,
@@ -368,7 +1553,7 @@ const InternalTable = props => {
   }, /*#__PURE__*/React.createElement("div", {
     style: {}
   }, /*#__PURE__*/React.createElement(Grid, _extends({}, rest, {
-    id: id,
+    id: tableId,
     useVirtual: {
       header: false,
       horizontal: useVirtual?.horizontal ?? true,
@@ -378,7 +1563,11 @@ const InternalTable = props => {
     setIsFullScreen: setIsFullScreen,
     pipeline: pipeline,
     pagination: pagination
-  }, pipeline.getProps(), {
+    // {...pipeline.getProps()}
+    ,
+
+    columns: columns,
+    dataSource: dataSource,
     originData: convertData,
     originColumns: columns,
     groupColumns: groupColumns,
@@ -388,7 +1577,8 @@ const InternalTable = props => {
     onSorter: onSorter,
     defaultFilter: defaultFilter,
     defaultSorter: defaultSorter,
-    dataRowIds: dataIds
+    dataRowIds: dataIds,
+    editAble: editAble
   }))))))));
 };
 export default InternalTable;