react-table-edit 1.3.6 → 1.3.8

package/dist/index.mjs

@@ -16227,12 +16227,12 @@ const keydownHandler = (innerParams, event, dismissWith) => {
 
   // ENTER
   if (event.key === 'Enter') {
-    handleEnter(event, innerParams);
+    handleEnter$1(event, innerParams);
   }
 
   // TAB
   else if (event.key === 'Tab') {
-    handleTab(event);
+    handleTab$1(event);
   }
 
   // ARROWS - switch focus between buttons
@@ -16250,7 +16250,7 @@ const keydownHandler = (innerParams, event, dismissWith) => {
  * @param {KeyboardEvent} event
  * @param {SweetAlertOptions} innerParams
  */
-const handleEnter = (event, innerParams) => {
+const handleEnter$1 = (event, innerParams) => {
   // https://github.com/sweetalert2/sweetalert2/issues/2386
   if (!callIfFunction(innerParams.allowEnterKey)) {
     return;
@@ -16268,7 +16268,7 @@ const handleEnter = (event, innerParams) => {
 /**
  * @param {KeyboardEvent} event
  */
-const handleTab = event => {
+const handleTab$1 = event => {
   const targetElement = event.target;
   const focusableElements = getFocusableElements();
   let btnIndex = -1;
@@ -19163,7 +19163,7 @@ const checkDecimalSeparator = (thousandSeparator, decimalSeparator) => {
     }
 };
 const isNullOrUndefined$1 = (d) => {
-    if (d === null || d === undefined) {
+    if (d === null || d === undefined || d === '') {
         return true;
     }
     return false;
@@ -19254,6 +19254,21 @@ const formatDateTime = (data, format = 'dd/MM/yyyy') => {
     };
     return format.replace(/dd|MM|yyyy|HH|mm/g, (match) => map[match]);
 };
+// Hàm tìm vị trí theo chuỗi index
+const FindNodeByPath = (tree, path) => {
+    const levels = path.split('-').map(num => parseInt(num, 10));
+    let current = tree;
+    let node = null;
+    for (let index = 0; index < levels.length - 1; index++) {
+        const level = levels[index];
+        if (!current[level] || !current[level].children) {
+            return null;
+        }
+        node = current[level];
+        current = current[level].children ?? [];
+    }
+    return { parent: current, lastIndex: levels.at(-1), firstIndex: levels.length === 1 ? levels[0] : -1, node };
+};
 
 var isCheckBoxInput = (element) => element.type === 'checkbox';
 
@@ -22970,7 +22985,7 @@ const SelectTable = forwardRef((props, ref) => {
                                         inputRef?.current.focus();
                                         e.preventDefault();
                                     }
-                                }, children: jsxs("div", { className: 'r-select-grid', children: [jsx("div", { className: classnames('r-select-gridtable', { 'no-header': noHeader || (columns?.length ?? 0) === 0 }), ref: selectMenuTableRef, style: { width: menuWidth, minWidth: selectTableRef?.current?.clientWidth, maxHeight: maxHeight ?? defaultMaxHeight$1 }, children: jsx(RenderTable, {}) }), jsxs("div", { className: classnames('r-select-footer', { 'd-none': !(showFooter === true || handleAdd) }), children: [jsxs(Button$1, { outline: true, color: "primary", onClick: e => handleAdd?.(), className: classnames('r-btn d-flex align-items-center', { 'd-none': !handleAdd }), children: [jsx(SvgPlus, { className: "me-50", fontSize: 16 }), t('AddNew'), " (F9)"] }), footerComponent ? footerComponent() : null] })] }) }) }) })] }) }) }));
+                                }, children: jsxs("div", { className: 'r-select-grid', children: [jsx("div", { className: classnames('r-select-gridtable', { 'no-header': noHeader || (columns?.length ?? 0) === 0 }), ref: selectMenuTableRef, style: { width: menuWidth, minWidth: selectTableRef?.current?.clientWidth, maxHeight: maxHeight ?? defaultMaxHeight$1 }, children: jsx(RenderTable, {}) }), jsxs("div", { className: classnames('r-select-footer', { 'd-none': !(showFooter === true || handleAdd) }), children: [jsxs(Button$1, { outline: true, color: "primary", onClick: () => handleAdd?.(), className: classnames('r-btn d-flex align-items-center', { 'd-none': !handleAdd }), children: [jsx(SvgPlus, { className: "me-50", fontSize: 16 }), t('AddNew'), " (F9)"] }), footerComponent ? footerComponent() : null] })] }) }) }) })] }) }) }));
 });
 
 const SelectTableBox = (props) => {
@@ -25374,15 +25389,15 @@ const IconCustom = (props) => {
 };
 
 const CommandElement = (props) => {
-    const { commandItems, rowData, indexRow, handleCommandClick, indexFocus, setIndexFocus } = props;
+    const { commandItems, rowData, indexRow, handleCommandClick, itemFocus, setItemFocus, currentItem } = props;
     const { t } = useTranslation();
     return (jsx(Fragment, { children: jsx("div", { className: 'd-flex align-items-center', style: { columnGap: 10 }, children: commandItems.map((item, index) => {
                 return (jsxs(Button$1, { id: `command-item-${indexRow}-${index}`, tabIndex: -1, style: { padding: '5px', minWidth: 45, height: '100%' }, className: classnames('command-item', {
                         'btn-icon': item.tooltip === ''
                     }), color: item.color ? item.color : '#000', onClick: (e) => {
                         handleCommandClick(item.id, rowData, indexRow);
-                        if (indexRow === indexFocus) {
-                            setIndexFocus(undefined);
+                        if (currentItem === itemFocus) {
+                            setItemFocus('');
                         }
                         e.preventDefault();
                     }, children: [item.icon && jsx(IconCustom, { iconName: item.icon, size: 16 }), jsx(UncontrolledTooltip, { className: "r-tooltip", target: `command-item-${indexRow}-${index}`, place: "top", children: t(item.tooltip ?? '') })] }, `command-${index}`));
@@ -25740,16 +25755,6 @@ const SelectTableTree = forwardRef((props, ref) => {
                                 }, children: jsxs("div", { className: 'r-select-grid r-select-tree-grid', children: [jsx("div", { className: "r-select-gridtable ", ref: selectMenuTableRef, style: { width: menuWidth, minWidth: selectTableRef?.current?.clientWidth, maxHeight: maxHeight ?? defaultMaxHeight }, children: jsx(RenderTable, {}) }), jsxs("div", { className: classnames('r-select-footer', { 'd-none': !(showFooter === true || handleAdd || isMulti) }), children: [jsxs(Button$1, { outline: true, color: "primary", onClick: handleAdd, className: classnames('r-btn d-flex align-items-center', { 'd-none': !handleAdd }), children: [jsx(SvgPlus, { className: "me-50", fontSize: 16 }), t('AddNew'), " (F9)"] }), isMulti && jsx("div", { className: "ms-50 text-primary h-100 d-flex align-items-center", onClick: handleAdd, children: t('countSelected', { item: value?.length ?? 0 }) }), footerComponent ? footerComponent() : null] })] }) }) }) })] }) }) }));
 });
 
-const renderToolbarTop = (toolbarTopOption) => {
-    return (jsx("div", { id: "table_custom_top_toolbar", className: "r-toolbar r-toolbar-top", "aria-orientation": "horizontal", children: jsxs("div", { className: "r-toolbar-items", children: [jsx("div", { className: "r-toolbar-left", children: toolbarTopOption?.map((item, index) => {
-                        return ((item.align === 'left') ? jsx(Fragment$1, { children: jsx("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-left-${index}`) }) : '');
-                    }) }), jsx("div", { className: "r-toolbar-center", children: toolbarTopOption?.map((item, index) => {
-                        return ((item.align === 'center') ? jsx(Fragment$1, { children: jsx("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-center-${index}`) }) : '');
-                    }) }), jsx("div", { className: "r-toolbar-right", children: toolbarTopOption?.map((item, index) => {
-                        return ((item.align === 'right') ? jsx(Fragment$1, { children: jsx("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-right-${index}`) }) : '');
-                    }) })] }) }));
-};
-
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
 /**
@@ -42091,16 +42096,356 @@ const DateInput = (props) => {
         } }));
 };
 
+const handleArrowRight = (e, params) => {
+    const { indexCol, contentColumns, row, parents, indexRow, focusNewElement } = params;
+    let newIndexCol = -1;
+    for (let i = indexCol; i < contentColumns.length; i++) {
+        if (contentColumns[i].editEnable && contentColumns[i].visible !== false && !contentColumns[i].disabledCondition?.(row)) {
+            newIndexCol = i + 1;
+            break;
+        }
+    }
+    if (newIndexCol > -1) {
+        focusNewElement(newIndexCol, parents, indexRow);
+        e.preventDefault();
+        return e.code;
+    }
+};
+const handleArrowLeft = (e, params) => {
+    const { indexCol, contentColumns, row, parents, indexRow, focusNewElement } = params;
+    let newIndexCol = -1;
+    for (let i = indexCol - 2; i >= 0; i--) {
+        if (contentColumns[i].editEnable && contentColumns[i].visible !== false && !contentColumns[i].disabledCondition?.(row)) {
+            newIndexCol = i + 1;
+            break;
+        }
+    }
+    if (newIndexCol > -1) {
+        focusNewElement(newIndexCol, parents, indexRow);
+        e.preventDefault();
+        return e.code;
+    }
+};
+const isSelectMenuOpen = (element) => {
+    return element && ["select__control--menu-is-open", "select-100__control--menu-is-open", "select-200__control--menu-is-open", "select-300__control--menu-is-open", "select-400__control--menu-is-open", "select-500__control--menu-is-open"].some(className => element.getElementsByClassName(className).length > 0);
+};
+const handleArrowUp = (e, params) => {
+    const { idElement, indexCol, indexRow, parents, pagingClient, pagingSetting, setItemFocus, getNewParents, focusNewElement } = params;
+    const element = document.getElementById(idElement);
+    if (!isSelectMenuOpen(element)) {
+        if (indexRow > 1) {
+            if (parents === "" && pagingClient && pagingSetting?.currentPage !== 1 && indexRow % (pagingSetting?.pageSize ?? 0) === 1 && pagingSetting?.setCurrentPage) {
+                pagingSetting.setCurrentPage((pagingSetting?.currentPage ?? 1) - 1);
+            }
+            setItemFocus(getNewParents(parents, indexRow - 2));
+            focusNewElement(indexCol, parents, indexRow - 1, true);
+            e.preventDefault();
+            return e.code;
+        }
+        else if (parents !== "") {
+            setItemFocus(parents);
+            focusNewElement(indexCol, parents, undefined, true);
+            e.preventDefault();
+            return e.code;
+        }
+    }
+};
+const handleArrowDown = (e, params) => {
+    const { idElement, row, fieldChildren, itemFocus, dataSource, indexCol, indexRow, parents, totalCount, pagingClient, pagingSetting, setItemFocus, getNewParents, focusNewElement } = params;
+    const element = document.getElementById(idElement);
+    if (!isSelectMenuOpen(element)) {
+        if (row[fieldChildren ?? 'children']?.length > 0 && row.expanded) {
+            setItemFocus(getNewParents(itemFocus, 0));
+            focusNewElement(indexCol, itemFocus, 1, true);
+            e.preventDefault();
+            return e.code;
+        }
+        else {
+            if (parents === '') {
+                if (indexRow < totalCount) {
+                    if (pagingClient && (indexRow % (pagingSetting?.pageSize ?? 0)) === 0 && pagingSetting?.setCurrentPage) {
+                        pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) + 1);
+                    }
+                    setItemFocus(getNewParents(parents, indexRow));
+                    focusNewElement(indexCol, parents, indexRow + 1, true);
+                    e.preventDefault();
+                    return e.code;
+                }
+            }
+            else {
+                const result = FindNodeByPath(dataSource, itemFocus);
+                if (!result) {
+                    return;
+                }
+                const { parent, lastIndex } = result;
+                if (!parent) {
+                    return;
+                }
+                if ((lastIndex ?? 0) < parent.length - 1) {
+                    setItemFocus(getNewParents(parents, indexRow));
+                    focusNewElement(indexCol, parents, indexRow + 1, true);
+                    e.preventDefault();
+                    return e.code;
+                }
+                else {
+                    const result = FindNodeByPath(dataSource, parents);
+                    if (!result) {
+                        return '';
+                    }
+                    const { lastIndex } = result;
+                    setItemFocus(getNewParents(parents.split('-').slice(0, -1).join('-'), (lastIndex ?? 0) + 1));
+                    focusNewElement(indexCol, parents.split('-').slice(0, -1).join('-'), (lastIndex ?? 0) + 2, true);
+                    e.preventDefault();
+                    return e.code;
+                }
+            }
+        }
+    }
+};
+const handleTab = (e, params) => {
+    const { indexCol, columnLastEdit, indexRow, totalCount, moveIndexRowToNewPage, pagingClient, pagingSetting, setItemFocus, getNewParents, parents, focusNewElement } = params;
+    if (indexCol === columnLastEdit) {
+        if (indexRow === totalCount) {
+            moveIndexRowToNewPage();
+        }
+        else {
+            if (pagingClient && (indexRow % (pagingSetting?.pageSize ?? 0)) === 0 && pagingSetting?.setCurrentPage) {
+                pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) + 1);
+            }
+            setItemFocus(getNewParents(parents, indexRow));
+            focusNewElement(indexCol, parents, indexRow + 1, true);
+        }
+        e.preventDefault();
+        return e.code;
+    }
+};
+const handleEnter = (e, params) => {
+    const { idElement, row, fieldChildren, addDisable, dataSource, editDisable, moveIndexRowToNewPage, itemFocus, indexCol, indexRow, parents, totalCount, pagingClient, pagingSetting, setItemFocus, getNewParents, focusNewElement } = params;
+    if (!editDisable && !addDisable) {
+        const element = document.getElementById(idElement);
+        if (!isSelectMenuOpen(element)) {
+            if (row[fieldChildren ?? 'children']?.length > 0 && row.expanded) {
+                setItemFocus(getNewParents(itemFocus, 0));
+                focusNewElement(indexCol, itemFocus, 1, true);
+                e.preventDefault();
+                return e.code;
+            }
+            else {
+                if (parents === '') {
+                    if (indexRow === totalCount) {
+                        moveIndexRowToNewPage();
+                    }
+                    else {
+                        if (pagingClient && (indexRow % (pagingSetting?.pageSize ?? 0)) === 0 && pagingSetting?.setCurrentPage) {
+                            pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) + 1);
+                        }
+                        setItemFocus(getNewParents(parents, indexRow));
+                        focusNewElement(indexCol, parents, indexRow + 1, true);
+                    }
+                    e.preventDefault();
+                    return e.code;
+                }
+                else {
+                    const result = FindNodeByPath(dataSource, itemFocus);
+                    if (!result) {
+                        return;
+                    }
+                    const { parent, lastIndex } = result;
+                    if (!parent) {
+                        return;
+                    }
+                    if ((lastIndex ?? 0) < parent.length - 1) {
+                        setItemFocus(getNewParents(parents, indexRow));
+                        focusNewElement(indexCol, parents, indexRow + 1, true);
+                        e.preventDefault();
+                        return e.code;
+                    }
+                    else {
+                        const result = FindNodeByPath(dataSource, parents);
+                        if (!result) {
+                            return '';
+                        }
+                        const { lastIndex } = result;
+                        setItemFocus(getNewParents(parents.split('-').slice(0, -1).join('-'), (lastIndex ?? 0) + 1));
+                        focusNewElement(indexCol, parents.split('-').slice(0, -1).join('-'), (lastIndex ?? 0) + 2, true);
+                        e.preventDefault();
+                        return e.code;
+                    }
+                }
+            }
+        }
+    }
+};
+const handleCtrlD = (e, params) => {
+    const { editDisable, addDisable, handleDuplicate } = params;
+    if (!editDisable && !addDisable) {
+        handleDuplicate();
+        e.preventDefault();
+        return e.code;
+    }
+};
+
+const ToolbarBottom = ({ handleAdd, handleDuplicate, handleInsertBefore, handleInsertAfter, handleDeleteAll, setOpenPopupSetupColumn, itemFocus, editDisable, addDisable, buttonSetting, toolbarSetting, headerColumns, t
+// isTree
+ }) => {
+    return (jsx("div", { id: "table_custom_bottom_toolbar", className: "r-toolbar r-toolbar-bottom", role: "toolbar", children: jsxs("div", { className: "r-toolbar-items", children: [jsxs("div", { className: "r-toolbar-left", children: [jsx("div", { className: classnames('r-toolbar-item', { 'd-none': editDisable || addDisable }), children: jsx(Button$1, { color: 'success', outline: true, onClick: handleAdd, className: 'd-flex', children: t('Add item') }) }), itemFocus && jsxs(Fragment$1, { children: [jsx("div", { className: classnames('r-toolbar-item', { 'd-none': editDisable || addDisable || buttonSetting?.duplicateDisable }), children: jsx(Button$1, { color: 'success', outline: true, onClick: handleDuplicate, className: 'd-flex', children: t('Duplicate') }) }), jsx("div", { className: classnames('r-toolbar-item', { 'd-none': editDisable || addDisable || buttonSetting?.insertBeforeDisable }), children: jsx(Button$1, { color: 'success', outline: true, onClick: handleInsertBefore, className: 'd-flex', children: t('Insert item before') }) }), jsx("div", { className: classnames('r-toolbar-item', { 'd-none': editDisable || addDisable || buttonSetting?.insertAfterDisable }), children: jsx(Button$1, { color: 'success', outline: true, onClick: handleInsertAfter, className: 'd-flex', children: t('Insert item after') }) })] }), jsx("div", { className: classnames('r-toolbar-item', { 'd-none': editDisable || buttonSetting?.deleteAllDisable }), children: jsx(Button$1, { color: 'primary', outline: true, onClick: handleDeleteAll, className: 'd-flex', children: t('Delete all item') }) }), toolbarSetting?.toolbarBottomOptions?.map((item, index) => (item.align === 'left' && (jsx("div", { className: "r-toolbar-item", children: item.template() }, `toolbar-bottom-left-${index}`))))] }), jsx("div", { className: "r-toolbar-center", children: toolbarSetting?.toolbarBottomOptions?.map((item, index) => (item.align === 'center' && (jsx("div", { className: "r-toolbar-item", children: item.template() }, `toolbar-bottom-center-${index}`)))) }), jsxs("div", { className: "r-toolbar-right", children: [toolbarSetting?.toolbarBottomOptions?.map((item, index) => (item.align === 'right' && (jsx("div", { className: "r-toolbar-item", children: item.template() }, `toolbar-bottom-right-${index}`)))), jsx("div", { className: classnames('r-toolbar-item me-25', { 'd-none': headerColumns.length > 1 }), children: jsx(SvgSettings, { className: "text-primary cursor-pointer", onClick: () => setOpenPopupSetupColumn(true) }) }), jsx("div", { className: classnames('r-toolbar-item me-25', { 'd-none': editDisable || addDisable }), children: jsxs(UncontrolledDropdown, { className: 'dropdown-user nav-item', children: [jsx(DropdownToggle$1, { tag: 'div', color: "primary", onClick: (e) => e.preventDefault(), children: jsx(SvgInfo, { className: "cursor-pointer text-primary" }) }), jsx(DropdownMenu$1, { className: 'formula-dropdown icon-dropdown', children: jsxs("ul", { className: "mb-0 pe-50", children: [jsx("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\u00E0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\u00E0ng v\u00E0 nh\u1EA5n Ctrl + D \u0111\u1EC3 nh\u00E2n b\u1EA3n" }), jsx("li", { style: { fontSize: 13 }, children: "Ch\u1ECDn \u00F4 v\u00E0 Ctrl + V \u0111\u1EC3 d\u00E1n th\u00F4ng tin t\u1EEB excel" }), jsx("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\u00E0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\u00E0ng v\u00E0 nh\u1EA5n Ctrl + C \u0111\u1EC3 sao ch\u00E9p h\u00E0ng" }), jsx("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\u00E0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\u00E0ng v\u00E0 nh\u1EA5n Ctrl + V \u0111\u1EC3 d\u00E1n h\u00E0ng" })] }) })] }) })] })] }) }));
+};
+
+const RenderToolbarTop = ({ toolbarTopOption }) => {
+    return (jsx("div", { id: "table_custom_top_toolbar", className: "r-toolbar r-toolbar-top", "aria-orientation": "horizontal", children: jsxs("div", { className: "r-toolbar-items", children: [jsx("div", { className: "r-toolbar-left", children: toolbarTopOption?.map((item, index) => {
+                        return ((item.align === 'left') ? jsx(Fragment$1, { children: jsx("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-left-${index}`) }) : '');
+                    }) }), jsx("div", { className: "r-toolbar-center", children: toolbarTopOption?.map((item, index) => {
+                        return ((item.align === 'center') ? jsx(Fragment$1, { children: jsx("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-center-${index}`) }) : '');
+                    }) }), jsx("div", { className: "r-toolbar-right", children: toolbarTopOption?.map((item, index) => {
+                        return ((item.align === 'right') ? jsx(Fragment$1, { children: jsx("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-right-${index}`) }) : '');
+                    }) })] }) }));
+};
+
+const FooterCol = ({ col, indexCol, dataSource, objWidthFix, formatSetting }) => {
+    const sumValue = (col.haveSum === true && col.editType === "numeric") ? dataSource.reduce(function (accumulator, currentValue) { return (Number(accumulator ?? 0) + Number(currentValue[col.field] ?? 0)); }, 0) : 0;
+    return (jsx(Fragment, { children: col.visible !== false && (jsx("td", { className: classnames(`p-0 px-50 r-footer fix-${col.fixedType}`, { "cell-fixed": col.fixedType }), style: {
+                left: col.fixedType === "left" ? objWidthFix[indexCol] : undefined,
+                right: col.fixedType === "right" ? objWidthFix[indexCol] : undefined,
+                textAlign: col.textAlign ?? "left"
+            }, children: jsx("div", { className: "r-footer-div", children: col.haveSum === true && col.editType === "numeric" && (jsx(Fragment$1, { children: Number(sumValue) >= 0 ? (jsx(Fragment$1, { children: formartNumberic(sumValue, formatSetting?.decimalSeparator ?? ",", formatSetting?.thousandSeparator ?? ".", col.numericSettings?.fraction, true, false) })) : (jsx("div", { style: { color: formatSetting?.colorNegative ?? "red" }, children: `${formatSetting?.prefixNegative ?? "-"}${formartNumberic(sumValue, formatSetting?.decimalSeparator ?? ",", formatSetting?.thousandSeparator ?? ".", col.numericSettings?.fraction, true, false)}${formatSetting?.suffixNegative ?? ""}` })) })) }) })) }, `summarycell-${indexCol}`));
+};
+
+const handleAdd = (dataSource, tableElement, columnFistEdit, 
+/*eslint-disable*/
+changeDataSource, pagingSetting, setItemFocus, focusNewElement
+/*eslint-enable*/
+) => {
+    const lengthData = dataSource.length;
+    changeDataSource(dataSource, true);
+    if (pagingSetting?.setCurrentPage) {
+        pagingSetting.setCurrentPage(Math.floor(lengthData / (pagingSetting?.pageSize ?? 0)) + 1);
+    }
+    if (tableElement) {
+        setItemFocus(`${lengthData}`);
+        focusNewElement(columnFistEdit, '', lengthData + 1, true);
+    }
+};
+const handleDuplicate = async (dataSource, itemFocus, fieldKey, defaultValue, fieldUniKey, 
+/*eslint-disable*/
+changeDataSource, tableElement, totalCount, toolbarSetting, buttonSetting, editDisable, addDisable, onDuplicate // sự kiện khi duplicate
+/*eslint-enable*/
+) => {
+    if (toolbarSetting?.showBottomToolbar && !buttonSetting?.duplicateDisable && !editDisable && !addDisable) {
+        const result = FindNodeByPath(dataSource, itemFocus);
+        if (!result) {
+            return;
+        }
+        const { parent, lastIndex, node } = result;
+        if (!parent || !node) {
+            return;
+        }
+        const newData = { ...node };
+        if (fieldKey && defaultValue) {
+            fieldUniKey.forEach((item) => {
+                newData[item] = defaultValue[item];
+            });
+            newData[fieldKey] = defaultValue[fieldKey];
+        }
+        if (onDuplicate) {
+            await onDuplicate(newData, (lastIndex ?? 0));
+        }
+        parent.splice((lastIndex ?? -1) + 1, 0, newData);
+        changeDataSource([...dataSource]);
+        if (tableElement && lastIndex === totalCount) {
+            setTimeout(() => {
+                tableElement.current?.scrollTo(0, tableElement.current.scrollHeight);
+            }, 100);
+        }
+    }
+};
+const handleInsertAfter = (dataSource, itemFocus, defaultValue, 
+/*eslint-disable*/
+changeDataSource, 
+/*eslint-enable*/
+tableElement, totalCount, pagingClient, pagingSetting, toolbarSetting, buttonSetting, editDisable, addDisable) => {
+    if (toolbarSetting?.showBottomToolbar && !buttonSetting?.insertAfterDisable && !editDisable && !addDisable) {
+        const result = FindNodeByPath(dataSource, itemFocus);
+        if (!result) {
+            return;
+        }
+        const { parent, lastIndex, firstIndex } = result;
+        if (!parent) {
+            return;
+        }
+        if (firstIndex >= 0) {
+            if (pagingClient) {
+                dataSource.splice(((((pagingSetting?.currentPage ?? 1) - 1) * (pagingSetting?.pageSize ?? 0)) + (firstIndex ?? -1) + 1), 0, { ...defaultValue });
+            }
+            else {
+                dataSource.splice((firstIndex ?? -1) + 1, 0, { ...defaultValue });
+            }
+            if (tableElement && firstIndex === totalCount) {
+                setTimeout(() => {
+                    tableElement.current?.scrollTo(0, tableElement.current.scrollHeight);
+                }, 100);
+            }
+        }
+        else {
+            // Chèn vào sau phần tử cuối cùng
+            parent.splice((lastIndex ?? -1) + 1, 0, { ...defaultValue });
+        }
+        changeDataSource([...dataSource]);
+    }
+};
+const handleInsertBefore = (dataSource, itemFocus, defaultValue, 
+/*eslint-disable*/
+changeDataSource, 
+/*eslint-enable*/
+pagingClient, pagingSetting, toolbarSetting, buttonSetting, editDisable, addDisable) => {
+    if (toolbarSetting?.showBottomToolbar && !buttonSetting?.insertAfterDisable && !editDisable && !addDisable) {
+        const result = FindNodeByPath(dataSource, itemFocus);
+        if (!result) {
+            return;
+        }
+        const { parent, lastIndex, firstIndex } = result;
+        if (!parent) {
+            return;
+        }
+        if (firstIndex >= 0) {
+            if (pagingClient) {
+                dataSource.splice(((((pagingSetting?.currentPage ?? 1) - 1) * (pagingSetting?.pageSize ?? 0)) + (firstIndex ?? -1)), 0, { ...defaultValue });
+            }
+            else {
+                dataSource.splice((firstIndex ?? -1), 0, { ...defaultValue });
+            }
+        }
+        else {
+            // Chèn vào sau phần tử cuối cùng
+            parent.splice((lastIndex ?? -1), 0, { ...defaultValue });
+        }
+        changeDataSource([...dataSource]);
+    }
+};
+const handleDeleteAll = (t, 
+/*eslint-disable*/
+messageBoxConfirmDelete, setItemFocus, changeDataSource, 
+/*eslint-enable*/
+editDisable, addDisable, toolbarSetting, buttonSetting) => {
+    if (toolbarSetting?.showBottomToolbar && !buttonSetting?.deleteAllDisable && !editDisable && !addDisable) {
+        messageBoxConfirmDelete(t, () => {
+            if (!editDisable && !addDisable) {
+                setItemFocus('');
+                changeDataSource([], false);
+            }
+        }, '');
+    }
+};
+
 const TableEdit = forwardRef((props, ref) => {
     const { t } = useTranslation();
-    const { idTable, dataSource, columns, commandClick, dataSourceChange, rowChange, pagingSetting, setDataSource, height, maxHeight, minHeight, defaultValue, toolbarSetting, searchSetting, setSelectedItem, selectedItem, selectEnable, editDisable, addDisable, buttonSetting, formatSetting, handleSelect, haveSum, isMulti, disableAutoKey, onDuplicate } = props;
+    const { idTable, dataSource, columns, commandClick, dataSourceChange, rowChange, pagingSetting, setDataSource, height, maxHeight, minHeight, defaultValue, toolbarSetting, searchSetting, setSelectedItem, selectedItem, selectEnable, editDisable, addDisable, buttonSetting, formatSetting, handleSelect, haveSum, isMulti, disableAutoKey, fieldChildren = "children", isTree = false, onDuplicate } = props;
     useImperativeHandle(ref, () => {
         return {
             refeshFocusRow: handleRefeshRow
         };
     });
     const [refreshRow, setRefreshRow] = useState(false);
-    const [indexFocus, setIndexFocus] = useState();
+    const [itemFocus, setItemFocus] = useState('');
     const [selectedRows, setSelectedRows] = useState([]);
     const [headerColumns, setHeaderColumns] = useState([[]]);
     const [contentColumns, setContentColumns] = useState([]);
@@ -42117,6 +42462,7 @@ const TableEdit = forwardRef((props, ref) => {
     const searchClient = searchSetting?.searchEnable && (searchSetting?.searchClient || !(editDisable || addDisable));
     const fieldKey = columns.find((item) => item.isPrimarykey === true)?.field ?? 'id';
     const fieldUniKey = columns.filter((item) => item.isUnikey === true)?.map((item) => item.field);
+    const getNewParents = (parents, index) => (parents ? `${parents}-${index}` : `${index}`);
     useEffect(() => {
         if (pagingClient && pagingSetting.setCurrentPage && Math.ceil(totalCount / (pagingSetting?.pageSize ?? 1)) < (pagingSetting.currentPage ?? 1)) {
             pagingSetting.setCurrentPage(1);
@@ -42267,30 +42613,251 @@ const TableEdit = forwardRef((props, ref) => {
     else {
         toolbarTopOption = [...defaultToolbarOption];
     }
-    const RenderEdit = (row, col, indexCol, indexRow) => {
+    const onChangePage = (args) => {
+        if (pagingSetting?.setCurrentPage) {
+            if (args.currentPage === args.oldPage) {
+                return;
+            }
+            pagingSetting.setCurrentPage(args.currentPage);
+        }
+    };
+    const onChangePageSize = (args) => {
+        if (pagingSetting?.allowPaging) {
+            if (pagingSetting?.pageSize !== args.pageSize) {
+                if (pagingSetting?.setPageSize) {
+                    pagingSetting.setPageSize(args.pageSize);
+                }
+                if (pagingSetting?.setCurrentPage) {
+                    pagingSetting.setCurrentPage(1);
+                }
+            }
+        }
+    };
+    useOnClickOutside(gridRef, () => {
+        setTimeout(() => {
+            setItemFocus('');
+        }, 50);
+    });
+    const getColumn = (col, index) => {
+        const column = contentColumns.filter(e => e.visible !== false)[col + index];
+        if (column) {
+            return { ...column };
+        }
+        return undefined;
+    };
+    const pasteDataFromExcel = async (currenRowIndex, col, e) => {
+        const clipboard = (e.clipboardData || window.Clipboard).getData('text');
+        const rowsClipboard = clipboard.trimEnd().split('\n');
+        setItemFocus('');
+        if (rowsClipboard.length > 200) {
+            messageBoxError(t, 'You can only paste up to 200 rows.');
+        }
+        if (rowsClipboard.length > 0) {
+            const columnsDataChange = [];
+            for (let index = 0; index < rowsClipboard[0].trimEnd().split('\t').length; index++) {
+                const stringData = [];
+                rowsClipboard.forEach((element) => {
+                    if (element.trimEnd().split('\t')[index] && !stringData.includes(element.trimEnd().split('\t')[index].toString().trim())) {
+                        stringData.push(element.trimEnd().split('\t')[index].toString().trim());
+                    }
+                });
+                const column = getColumn(col, index);
+                if (column) {
+                    if ((!column.disabledCondition || !column.disabledCondition(dataSource[currenRowIndex + 0])) && column.editEnable && column.onPasteValidate) {
+                        const rs = await column.onPasteValidate(stringData.join(','), currenRowIndex + 0, dataSource[currenRowIndex + 0]);
+                        if (rs) {
+                            column.resultValidate = rs;
+                        }
+                    }
+                    columnsDataChange.push(column);
+                }
+            }
+            for (let indexRow = 0; indexRow < rowsClipboard.length; indexRow++) {
+                const item = rowsClipboard[indexRow];
+                const colsClipboard = item.trimEnd().split('\t');
+                let dataRow = dataSource[currenRowIndex + indexRow];
+                if (!dataRow) {
+                    dataRow = { ...defaultValue };
+                    dataSource.push(dataRow);
+                }
+                for (let index = 0; index < colsClipboard.length; index++) {
+                    const stringData = colsClipboard[index].toString().trim();
+                    const column = columnsDataChange[index];
+                    if (column) {
+                        if (((!column.disabledCondition || !column.disabledCondition(dataSource[currenRowIndex + indexRow])) && column.editEnable) || column.onPaste) {
+                            if (column.onPasteValidate && column.resultValidate) {
+                                const rs = column.resultValidate.find((item) => item[column.selectSettings?.fieldValue ?? 'value'] === stringData);
+                                if (rs) {
+                                    if (column.onPaste) {
+                                        dataRow[column.field] = column.onPaste(dataRow, stringData);
+                                    }
+                                    else {
+                                        dataRow[column.field] = stringData;
+                                    }
+                                    if (column.callback) {
+                                        column.callback(rs, currenRowIndex + indexRow);
+                                    }
+                                }
+                                else {
+                                    notificationError(t('PasteExcelNotExist', { index: (currenRowIndex + indexRow + 1), field: t(column.headerText ?? ''), value: stringData }));
+                                }
+                            }
+                            else {
+                                if (column.editType === 'date') {
+                                    const date = new Date(stringData);
+                                    if (!isNaN(date.getTime())) {
+                                        if (column.onPaste) {
+                                            dataRow[column.field] = column.onPaste(dataRow, date);
+                                        }
+                                        else {
+                                            dataRow[column.field] = date;
+                                        }
+                                        if (column.callback) {
+                                            column.callback(date, currenRowIndex + indexRow);
+                                        }
+                                    }
+                                    else {
+                                        notificationError(t('PasteExcelIncorrectFormat', { index: (currenRowIndex + indexRow + 1), field: t(column.headerText ?? ''), value: stringData }));
+                                    }
+                                }
+                                else if (column.editType === 'numeric') {
+                                    const number = Number(stringData);
+                                    if (!isNaN(number)) {
+                                        if (column.onPaste) {
+                                            dataRow[column.field] = column.onPaste(dataRow, number);
+                                        }
+                                        else {
+                                            dataRow[column.field] = number;
+                                        }
+                                        if (column.callback) {
+                                            column.callback(number, currenRowIndex + indexRow);
+                                        }
+                                    }
+                                    else {
+                                        notificationError(t('PasteExcelIncorrectFormat', { index: (currenRowIndex + indexRow + 1), field: t(column.headerText ?? ''), value: stringData }));
+                                    }
+                                }
+                                else if (column.editType === 'select') {
+                                    const rs = ((column.selectSettings?.optionsField ? item[column.selectSettings?.optionsField] : column.selectSettings?.options) ?? []).find((item) => item[column.selectSettings?.fieldValue ?? 'value'] === stringData);
+                                    if (rs) {
+                                        if (column.onPaste) {
+                                            dataRow[column.field] = column.onPaste(dataRow, stringData);
+                                        }
+                                        else {
+                                            dataRow[column.field] = stringData;
+                                        }
+                                        if (column.callback) {
+                                            column.callback(rs, currenRowIndex + indexRow);
+                                        }
+                                    }
+                                    else {
+                                        notificationError(t('PasteExcelNotExist', { index: (currenRowIndex + indexRow + 1), field: t(column.headerText ?? ''), value: stringData }));
+                                    }
+                                }
+                                else {
+                                    if (column.onPaste) {
+                                        column.onPaste(dataRow, stringData);
+                                    }
+                                    else {
+                                        dataRow[column.field] = stringData;
+                                    }
+                                    if (column.callback) {
+                                        column.callback(stringData, currenRowIndex + indexRow);
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+                if (rowChange) {
+                    rowChange(dataRow, currenRowIndex + indexRow, '');
+                }
+            }
+        }
+        changeDataSource(dataSource);
+    };
+    const changeDataSource = (data, haveNew = false) => {
+        if (!editDisable && setDataSource) {
+            if (haveNew && !addDisable) {
+                data.push(defaultValue ? { ...defaultValue, [fieldKey]: disableAutoKey ? undefined : generateUUID() } : {});
+                setDataSource([...data]);
+            }
+            else {
+                setDataSource([...data]);
+            }
+        }
+    };
+    useEffect(() => {
+        setItemFocus('');
+        if (setSelectedItem) {
+            if (isMulti) {
+                if (dataSource && selectedRows && selectedRows?.length !== selectedItem?.length) {
+                    setSelectedItem([...selectedRows]);
+                    if (handleSelect) {
+                        handleSelect([...selectedRows]);
+                    }
+                }
+            }
+            else {
+                if (dataSource && selectedRows?.length > 0) {
+                    if ((!selectedItem || (selectedItem[fieldKey] !== selectedRows[0][fieldKey]))) {
+                        setSelectedItem({ ...selectedRows[0] });
+                        if (handleSelect) {
+                            handleSelect({ ...selectedRows[0] });
+                        }
+                    }
+                }
+                else {
+                    setSelectedItem(undefined);
+                    if (handleSelect) {
+                        handleSelect(undefined);
+                    }
+                }
+            }
+        }
+    }, [selectedRows]);
+    useEffect(() => {
+        if (!isMulti) {
+            if (dataSource && selectedItem && selectedItem[fieldKey]) {
+                if (selectedRows?.length === 0 || selectedItem[fieldKey] !== selectedRows[0][fieldKey]) {
+                    setSelectedRows([selectedItem]);
+                }
+            }
+            else {
+                setSelectedRows([]);
+            }
+        }
+        else {
+            if (dataSource && selectedItem && selectedRows?.length !== selectedItem.length) {
+                setSelectedRows(selectedItem ? [...selectedItem] : []);
+            }
+        }
+    }, [selectedItem]);
+    const RenderEdit = (row, col, parents, indexCol, indexRow) => {
+        const idElement = `${idTable}-col${indexCol + 1}-row${getNewParents(parents, indexRow + 1)}`;
         /*eslint-disable */
         switch (col?.editTypeCondition ? col?.editTypeCondition(row) : col.editType) {
             case 'date':
-                return (jsx(DateInput, { id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`, className: classnames('form-control border-0 rounded-0 input-numeric', { 'is-invalid': col.validate && col.validate(row[col.field], row) }), value: row[col.field], onChange: (date) => {
+                return (jsx(DateInput, { id: idElement, className: classnames('form-control border-0 rounded-0 input-numeric', { 'is-invalid': col.validate && col.validate(row[col.field], row) }), value: row[col.field], onChange: (date) => {
                         row[col.field] = date ? new Date(date.getTime() + 7 * 60 * 60 * 1000) : undefined;
                         if (col.callback) {
-                            col.callback(row[col.field], indexRow);
+                            col.callback(row[col.field], indexRow, row);
                         }
                         handleDataChange(row, col, indexRow);
                     }, dateFormat: "dd/MM/yyyy", onKeyDown: (e) => {
-                        if (checkKeyDown(e, row, col, indexRow + 1, indexCol + 1)) {
+                        if (checkKeyDown(e, row, parents, indexRow + 1, indexCol + 1)) {
                             return true;
                         }
                     } }));
             case 'datetime':
-                return (jsx(DateInput, { id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`, className: classnames('form-control border-0 rounded-0 input-numeric', { 'is-invalid': col.validate && col.validate(row[col.field], row) }), value: row[col.field], onChange: (date) => {
+                return (jsx(DateInput, { id: idElement, className: classnames('form-control border-0 rounded-0 input-numeric', { 'is-invalid': col.validate && col.validate(row[col.field], row) }), value: row[col.field], onChange: (date) => {
                         row[col.field] = date;
                         if (col.callback) {
-                            col.callback(row[col.field], indexRow);
+                            col.callback(row[col.field], indexRow, row);
                         }
                         handleDataChange(row, col, indexRow);
                     }, dateFormat: "dd/MM/yyyy HH:mm", onKeyDown: (e) => {
-                        if (checkKeyDown(e, row, col, indexRow + 1, indexCol + 1)) {
+                        if (checkKeyDown(e, row, parents, indexRow + 1, indexCol + 1)) {
                             return true;
                         }
                     } }));
@@ -42312,7 +42879,7 @@ const TableEdit = forwardRef((props, ref) => {
                         valueSelect = col.selectSettings?.defaultValue(row);
                     }
                 }
-                return (jsx(SelectTable, { id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`, value: valueSelect, options: optionsSelect, onChange: (val) => {
+                return (jsx(SelectTable, { id: idElement, value: valueSelect, options: optionsSelect, onChange: (val) => {
                         if (col.selectSettings?.isMulti) {
                             row[col.field] = (val?.length ?? 0) > 0 ? val.map((item) => item[col.selectSettings?.fieldValue ?? 'value']) : [];
                         }
@@ -42334,11 +42901,11 @@ const TableEdit = forwardRef((props, ref) => {
                             }
                         }
                         if (col.callback) {
-                            col.callback(val, indexRow);
+                            col.callback(val, indexRow, row);
                         }
                         handleDataChange(row, col, indexRow);
-                    }, fieldValue: col.selectSettings?.fieldValue, fieldLabel: col.selectSettings?.fieldLabel, component: gridRef, columns: col.selectSettings?.columns, isClearable: col.selectSettings?.isClearable ?? false, formatSetting: formatSetting, placeholder: t('Select'), loadOptions: col.selectSettings?.loadOptions, handleAdd: col.selectSettings?.handAddNew ? (e) => col.selectSettings?.handAddNew(e, indexRow, row) : undefined, isMulti: col.selectSettings?.isMulti, noHeader: col.selectSettings?.noHeader, showFooter: col.selectSettings?.showFooter, formatOptionLabel: col.selectSettings?.formatOptionLabel, footerComponent: col.selectSettings?.footerComponent, invalid: col.validate && col.validate(row[col.field], row), maxHeight: col.selectSettings?.heightPopup ? Number(col.selectSettings?.heightPopup) : undefined, menuWidth: col.selectSettings?.widthPopup ? Number(col.selectSettings?.widthPopup) : undefined, textAlign: col.textAlign ?? 'left', allowCreate: col.selectSettings?.allowCreate, onKeyDown: (e) => {
-                        if (checkKeyDown(e, row, col, indexRow + 1, indexCol + 1)) ;
+                    }, fieldValue: col.selectSettings?.fieldValue, fieldLabel: col.selectSettings?.fieldLabel, component: gridRef, columns: col.selectSettings?.columns, isClearable: col.selectSettings?.isClearable ?? false, formatSetting: formatSetting, placeholder: t('Select'), loadOptions: col.selectSettings?.loadOptions, handleAdd: col.selectSettings?.handAddNew ? (e) => col.selectSettings?.handAddNew(e, indexRow, row) : undefined, isMulti: col.selectSettings?.isMulti, noHeader: col.selectSettings?.noHeader, showFooter: col.selectSettings?.showFooter, formatOptionLabel: col.selectSettings?.formatOptionLabel, footerComponent: col.selectSettings?.footerComponent, invalid: (col.validate && !isNullOrUndefined$1(col.validate(row[col.field], row))), maxHeight: col.selectSettings?.heightPopup ? Number(col.selectSettings?.heightPopup) : undefined, menuWidth: col.selectSettings?.widthPopup ? Number(col.selectSettings?.widthPopup) : undefined, textAlign: col.textAlign ?? 'left', allowCreate: col.selectSettings?.allowCreate, onKeyDown: (e) => {
+                        if (checkKeyDown(e, row, parents, indexRow + 1, indexCol + 1)) ;
                     }, onOpenMenu: () => {
                         if (col.selectSettings?.onOpenMenu) {
                             col.selectSettings?.onOpenMenu(row, col, indexRow);
@@ -42379,8 +42946,8 @@ const TableEdit = forwardRef((props, ref) => {
                     valueSelectTree = (!isNullOrUndefined$1(row[col.field]) && row[col.field] !== '') ? findItemInTree(optionsSelectTree, row[col.field]) : '';
                 }
                 return (jsx("div", { onKeyDown: (e) => {
-                        if (checkKeyDown(e, row, col, indexRow + 1, indexCol + 1)) ;
-                    }, children: jsx(SelectTableTree, { id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`, value: valueSelectTree, options: optionsSelectTree, onChange: (val) => {
+                        if (checkKeyDown(e, row, parents, indexRow + 1, indexCol + 1)) ;
+                    }, children: jsx(SelectTableTree, { id: idElement, value: valueSelectTree, options: optionsSelectTree, onChange: (val) => {
                             if (col.selectSettings?.isMulti) {
                                 row[col.field] = !isNullOrUndefined$1(val) ? val : [];
                             }
@@ -42388,7 +42955,7 @@ const TableEdit = forwardRef((props, ref) => {
                                 row[col.field] = !isNullOrUndefined$1(val) ? val[col.selectSettings?.fieldValue ?? 'value'] : undefined;
                             }
                             if (col.callback) {
-                                col.callback(val, indexRow);
+                                col.callback(val, indexRow, row);
                             }
                             handleDataChange(row, col, indexRow);
                         }, fieldValue: col.selectSettings?.fieldValue, fieldLabel: col.selectSettings?.fieldLabel, component: gridRef, columns: col.selectSettings?.columns, isClearable: col.selectSettings?.isClearable ?? false, formatSetting: formatSetting, placeholder: t('Select'), onOpenMenu: () => {
@@ -42396,7 +42963,7 @@ const TableEdit = forwardRef((props, ref) => {
                                 col.selectSettings?.onOpenMenu(row, col, indexRow);
                             }
                         }, loadOptions: col.selectSettings?.loadOptions, handleAdd: col.selectSettings?.handAddNew ? (e) => col.selectSettings?.handAddNew(e, indexRow, row) : undefined, fieldChildren: col.selectSettings?.fieldChild ?? 'children', selectChilds: col.selectSettings?.selectChilds, showFooter: col.selectSettings?.showFooter, formatOptionLabel: col.selectSettings?.formatOptionLabel, footerComponent: col.selectSettings?.footerComponent, width: col.selectSettings?.widthPopup ? Number(col.selectSettings?.widthPopup) : undefined, isMulti: col.selectSettings?.isMulti, noHeader: col.selectSettings?.noHeader, invalid: col.validate && col.validate(row[col.field], row), maxHeight: col.selectSettings?.heightPopup ? Number(col.selectSettings?.heightPopup) : undefined, menuWidth: col.selectSettings?.widthPopup ? Number(col.selectSettings?.widthPopup) : undefined, textAlign: col.textAlign ?? 'left', onKeyDown: (e) => {
-                            if (checkKeyDown(e, row, col, indexRow + 1, indexCol + 1)) ;
+                            if (checkKeyDown(e, row, parents, indexRow + 1, indexCol + 1)) ;
                         }, onPaste: (e) => {
                             if (toolbarSetting?.showBottomToolbar && !editDisable && !addDisable && !col.disablePaste) {
                                 pasteDataFromExcel(indexRow, indexCol, e);
@@ -42404,14 +42971,14 @@ const TableEdit = forwardRef((props, ref) => {
                             }
                         } }) }));
             case 'checkbox':
-                return (jsx(Input$1, { checked: row[col.field], id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`, type: "checkbox", className: "input-checkbox cursor-pointer", style: { textAlign: col.textAlign ?? 'left', marginTop: 6 }, onChange: (val) => {
+                return (jsx(Input$1, { checked: row[col.field], id: idElement, type: "checkbox", className: "input-checkbox cursor-pointer", style: { textAlign: col.textAlign ?? 'left', marginTop: 6 }, onChange: (val) => {
                         row[col.field] = val.currentTarget.checked;
                         if (col.callback) {
-                            col.callback(val.target.value, indexRow);
+                            col.callback(val.target.value, indexRow, row);
                         }
                         handleDataChange(row, col, indexRow);
                     }, onKeyDown: (e) => {
-                        if (checkKeyDown(e, row, col, indexRow + 1, indexCol + 1)) ;
+                        if (checkKeyDown(e, row, parents, indexRow + 1, indexCol + 1)) ;
                     } }));
             case 'numeric':
                 const numericFormatProps = {
@@ -42422,7 +42989,7 @@ const TableEdit = forwardRef((props, ref) => {
                     decimalScale: col.numericSettings?.fraction ?? 0
                 };
                 let floatValue = parseFloat(row[col.field]);
-                return (jsx(NumericFormat, { id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`, style: { textAlign: col.textAlign, height: 29 }, ...numericFormatProps, defaultValue: formartNumberic(row[col.field], formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction), className: classnames('form-control border-0 rounded-0 input-numeric', { 'is-invalid': col.validate && col.validate(row[col.field], row) }), onValueChange: (values) => {
+                return (jsx(NumericFormat, { id: idElement, style: { textAlign: col.textAlign, height: 29 }, ...numericFormatProps, defaultValue: formartNumberic(row[col.field], formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction), className: classnames('form-control border-0 rounded-0 input-numeric', { 'is-invalid': col.validate && col.validate(row[col.field], row) }), onValueChange: (values) => {
                         floatValue = values?.floatValue;
                     }, onFocus: (e) => {
                         e.target.setSelectionRange(0, e.target.innerText.length - 1);
@@ -42430,7 +42997,7 @@ const TableEdit = forwardRef((props, ref) => {
                         if (floatValue !== row[col.field]) {
                             row[col.field] = !isNaN(floatValue) ? floatValue : 0;
                             if (col.callback) {
-                                col.callback(row[col.field], indexRow);
+                                col.callback(row[col.field], indexRow, row);
                             }
                             handleDataChange(row, col, indexRow);
                         }
@@ -42439,12 +43006,12 @@ const TableEdit = forwardRef((props, ref) => {
                             if (floatValue !== row[col.field]) {
                                 row[col.field] = !isNaN(floatValue) ? floatValue : 0;
                                 if (col.callback) {
-                                    col.callback(row[col.field], indexRow);
+                                    col.callback(row[col.field], indexRow, row);
                                 }
                                 handleDataChange(row, col, indexRow);
                             }
                         }
-                        checkKeyDown(e, row, col, indexRow + 1, indexCol + 1);
+                        checkKeyDown(e, row, parents, indexRow + 1, indexCol + 1);
                     }, onPaste: (e) => {
                         if (toolbarSetting?.showBottomToolbar && !editDisable && !addDisable && !col.disablePaste) {
                             pasteDataFromExcel(indexRow, indexCol, e);
@@ -42456,19 +43023,19 @@ const TableEdit = forwardRef((props, ref) => {
                             if (row[col.field] != val.target?.value) {
                                 row[col.field] = val.target?.value;
                                 if (col.callback) {
-                                    col.callback(val.target.value, indexRow);
+                                    col.callback(val.target.value, indexRow, row);
                                 }
                                 handleDataChange(row, col, indexRow);
                             }
                         }, onKeyDown: (val) => {
-                            checkKeyDown(val, row, col, indexRow + 1, indexCol + 1);
+                            checkKeyDown(val, row, parents, indexRow + 1, indexCol + 1);
                         } }, `col-${indexRow}-${indexCol}`) }));
             case 'form':
-                return (jsx(EditForm, { id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`, ...col.formSettings, field: col.field, displayValue: col.formSettings?.displayValue ? col.formSettings?.displayValue(row) : '', placeholder: col.placeholder ? t(col.placeholder) : '', rowData: row, indexRow: indexRow, onChange: (val) => {
+                return (jsx(EditForm, { id: idElement, ...col.formSettings, field: col.field, displayValue: col.formSettings?.displayValue ? col.formSettings?.displayValue(row) : '', placeholder: col.placeholder ? t(col.placeholder) : '', rowData: row, indexRow: indexRow, onChange: (val) => {
                         row = { ...row, ...val };
                         handleDataChange(row, col, indexRow);
                     }, invalid: col.validate && col.validate(row[col.field], row), textAlign: col.textAlign, onKeyDown: (e) => {
-                        return checkKeyDown(e, row, col, indexRow + 1, indexCol + 1);
+                        return checkKeyDown(e, row, parents, indexRow + 1, indexCol + 1);
                     }, onPaste: (e) => {
                         if (toolbarSetting?.showBottomToolbar && !editDisable && !addDisable && !col.disablePaste) {
                             pasteDataFromExcel(indexRow, indexCol, e);
@@ -42476,16 +43043,16 @@ const TableEdit = forwardRef((props, ref) => {
                         }
                     } }));
             default:
-                return (jsx(Input$1, { id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`, style: { textAlign: col.textAlign, height: 29 }, value: isNullOrUndefined$1(row[col.field]) ? '' : row[col.field], className: classnames('border-0 rounded-0 input-element', { 'is-invalid': col.validate && col.validate(row[col.field], row) }), onChange: (val) => {
+                return (jsx(Input$1, { id: idElement, style: { textAlign: col.textAlign, height: 29 }, value: isNullOrUndefined$1(row[col.field]) ? '' : row[col.field], className: classnames('border-0 rounded-0 input-element', { 'is-invalid': col.validate && col.validate(row[col.field], row) }), onChange: (val) => {
                         if (row[col.field] != val.target?.value) {
                             row[col.field] = val.target?.value;
                             if (col.callback) {
-                                col.callback(val.target.value, indexRow);
+                                col.callback(val.target.value, indexRow, row);
                             }
                             handleDataChange(row, col, indexRow);
                         }
                     }, onKeyDown: (e) => {
-                        checkKeyDown(e, row, col, indexRow + 1, indexCol + 1);
+                        checkKeyDown(e, row, parents, indexRow + 1, indexCol + 1);
                     }, onPaste: (e) => {
                         if (toolbarSetting?.showBottomToolbar && !editDisable && !addDisable && !col.disablePaste) {
                             pasteDataFromExcel(indexRow, indexCol, e);
@@ -42500,9 +43067,14 @@ const TableEdit = forwardRef((props, ref) => {
         }
     };
     // focus vào dòng mới
-    const focusNewElement = (col, row, onLoad = false) => {
+    const focusNewElement = (col, parents, row, onLoad = false) => {
+        let indexRow = row;
+        if (indexRow === undefined) {
+            indexRow = (parents.length > 0 ? parseInt(parents.split('-').pop() ?? '0') : 0) + 1;
+            parents = parents.split('-').slice(0, -1).join('-');
+        }
         setTimeout(() => {
-            const element = document.getElementById(`${idTable}-col${col}-row${row}`);
+            const element = document.getElementById(`${idTable}-col${col}-row${getNewParents(parents, indexRow)}`);
             if (element) {
                 if (element.className.includes('react-select') || element.className.includes('form-edit')) {
                     element.getElementsByTagName('input')[0]?.focus();
@@ -42510,459 +43082,98 @@ const TableEdit = forwardRef((props, ref) => {
                 else {
                     element.focus();
                 }
-                if (!onLoad) {
-                    if (tableElement.current) {
-                        const parentRect = tableElement.current.getBoundingClientRect();
-                        const childRect = element.getBoundingClientRect();
-                        const offset = childRect.left - parentRect.left + tableElement.current.scrollLeft - (parentRect.width / 2) + (childRect.width / 2);
-                        tableElement.current.scrollTo({ left: offset, behavior: 'smooth' });
-                    }
-                }
-                if ((tableElement.current?.scrollHeight ?? 0) > 0) {
-                    if ((tableElement.current?.scrollTop ?? 0) > ((row - 1) % (pagingSetting?.pageSize ?? 1)) * 34) {
-                        tableElement.current?.scrollTo({ behavior: 'smooth', top: ((row - 1) % (pagingSetting?.pageSize ?? 1)) * 34 });
+                if (isTree) {
+                    if (!onLoad) {
+                        if (tableElement.current) {
+                            const parentRect = tableElement.current.getBoundingClientRect();
+                            const childRect = element.getBoundingClientRect();
+                            const offset = childRect.left - parentRect.left + tableElement.current.scrollLeft - (parentRect.width / 2) + (childRect.width / 2);
+                            tableElement.current.scrollTo({ left: offset, behavior: 'smooth' });
+                        }
                     }
-                    else if (((tableElement.current?.clientHeight ?? 0) - (haveSum ? 30 : 0) - (headerColumns.length * 42)) < (((row % (pagingSetting?.pageSize ?? 1)) * 34) - (tableElement.current?.scrollTop ?? 0))) {
-                        tableElement.current?.scrollTo({ behavior: 'smooth', top: (tableElement.current?.scrollTop ?? 0) + 34 });
+                    if ((tableElement.current?.scrollHeight ?? 0) > 0) {
+                        if ((tableElement.current?.scrollTop ?? 0) > ((indexRow - 1) % (pagingSetting?.pageSize ?? 1)) * 34) {
+                            tableElement.current?.scrollTo({ behavior: 'smooth', top: ((indexRow - 1) % (pagingSetting?.pageSize ?? 1)) * 34 });
+                        }
+                        else if (((tableElement.current?.clientHeight ?? 0) - (haveSum ? 30 : 0) - (headerColumns.length * 42)) < (((indexRow % (pagingSetting?.pageSize ?? 1)) * 34) - (tableElement.current?.scrollTop ?? 0))) {
+                            tableElement.current?.scrollTo({ behavior: 'smooth', top: (tableElement.current?.scrollTop ?? 0) + 34 });
+                        }
                     }
                 }
             }
         }, onLoad ? 100 : 0);
     };
-    //Thêm dòng mới
+    //cần sửa
     const moveIndexRowToNewPage = () => {
         changeDataSource(dataSource, true);
         if (pagingClient && pagingSetting?.setCurrentPage && (totalCount % (pagingSetting?.pageSize ?? 0)) === 0) {
             pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 0) + 1);
         }
         if (tableElement) {
-            setIndexFocus(totalCount);
-            focusNewElement(columnFistEdit, totalCount + 1, true);
+            setItemFocus(`${totalCount}`);
+            focusNewElement(columnFistEdit, '', totalCount + 1, true);
         }
     };
-    const checkKeyDown = (e, row, col, indexRow, indexCol) => {
-        if (e.code === 'ArrowRight') {
-            let newIndexCol = -1;
-            for (let i = indexCol; i < contentColumns.length; i++) {
-                if (contentColumns[i].editEnable && (contentColumns[i].visible !== false) && (!contentColumns[i].disabledCondition?.(row))) {
-                    newIndexCol = i + 1;
-                    break;
-                }
-            }
-            if (newIndexCol > -1) {
-                focusNewElement(newIndexCol, indexRow);
-                e.preventDefault();
-                return e.code;
-            }
-        }
-        else if (e.code === 'ArrowLeft') {
-            let newIndexCol = -1;
-            for (let i = indexCol - 2; i >= 0; i--) {
-                if (contentColumns[i].editEnable && (contentColumns[i].visible !== false) && (!contentColumns[i].disabledCondition?.(row))) {
-                    newIndexCol = i + 1;
-                    break;
-                }
-            }
-            if (newIndexCol > -1) {
-                focusNewElement(newIndexCol, indexRow);
-                e.preventDefault();
-                return e.code;
-            }
-        }
-        else if (e.code === 'ArrowUp') {
-            const element = document.getElementById(`${idTable}-col${indexCol}-row${indexRow}`);
-            if (element && !(element.getElementsByClassName('select__control--menu-is-open').length > 0 ||
-                element.getElementsByClassName('select-100__control--menu-is-open').length > 0 ||
-                element.getElementsByClassName('select-200__control--menu-is-open').length > 0 ||
-                element.getElementsByClassName('select-300__control--menu-is-open').length > 0 ||
-                element.getElementsByClassName('select-400__control--menu-is-open').length > 0 ||
-                element.getElementsByClassName('select-500__control--menu-is-open').length > 0)) {
-                if (indexRow > 1) {
-                    if (pagingClient && (pagingSetting?.currentPage ?? 0) !== 1 && (indexRow % (pagingSetting?.pageSize ?? 0)) === 1 && pagingSetting?.setCurrentPage) {
-                        pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) - 1);
-                    }
-                    setIndexFocus(indexRow - 2);
-                    focusNewElement(indexCol, indexRow - 1, true);
-                    e.preventDefault();
-                    return e.code;
-                }
-            }
-        }
-        else if (e.code === 'ArrowDown') {
-            const element = document.getElementById(`${idTable}-col${indexCol}-row${indexRow}`);
-            if (element && !(element.getElementsByClassName('select__control--menu-is-open').length > 0 ||
-                element.getElementsByClassName('select-100__control--menu-is-open').length > 0 ||
-                element.getElementsByClassName('select-200__control--menu-is-open').length > 0 ||
-                element.getElementsByClassName('select-300__control--menu-is-open').length > 0 ||
-                element.getElementsByClassName('select-400__control--menu-is-open').length > 0 ||
-                element.getElementsByClassName('select-500__control--menu-is-open').length > 0)) {
-                if (indexRow < totalCount) {
-                    if (pagingClient && (indexRow % (pagingSetting?.pageSize ?? 0)) === 0 && pagingSetting?.setCurrentPage) {
-                        pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) + 1);
-                    }
-                    setIndexFocus(indexRow);
-                    focusNewElement(indexCol, indexRow + 1, true);
-                    e.preventDefault();
-                    return e.code;
-                }
-            }
-        }
-        else if (e.code === 'Tab' && indexCol === columnLastEdit) {
-            if (indexRow === totalCount) {
-                moveIndexRowToNewPage();
-            }
-            else {
-                if (pagingClient && (indexRow % (pagingSetting?.pageSize ?? 0)) === 0 && pagingSetting?.setCurrentPage) {
-                    pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) + 1);
-                }
-                setIndexFocus(indexRow);
-                focusNewElement(indexCol, indexRow + 1, true);
-            }
-            e.preventDefault();
-            return e.code;
-        }
-        else if ((e.code === 'Enter' || e.code === 'NumpadEnter') && (!editDisable && !addDisable)) {
-            const element = document.getElementById(`${idTable}-col${indexCol}-row${indexRow}`);
-            if (element && !(element.getElementsByClassName('select__control--menu-is-open').length > 0 ||
-                element.getElementsByClassName('select-100__control--menu-is-open').length > 0 ||
-                element.getElementsByClassName('select-200__control--menu-is-open').length > 0 ||
-                element.getElementsByClassName('select-300__control--menu-is-open').length > 0 ||
-                element.getElementsByClassName('select-400__control--menu-is-open').length > 0 ||
-                element.getElementsByClassName('select-500__control--menu-is-open').length > 0)) {
-                if (indexRow === totalCount) {
-                    moveIndexRowToNewPage();
-                }
-                else {
-                    if (pagingClient && (indexRow % (pagingSetting?.pageSize ?? 0)) === 0 && pagingSetting?.setCurrentPage) {
-                        pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) + 1);
-                    }
-                    setIndexFocus(indexRow);
-                    focusNewElement(indexCol, indexRow + 1, true);
-                }
-                e.preventDefault();
-                return e.code;
-            }
-        }
-        else if (e.code === 'KeyD' && e.ctrlKey == true && (!editDisable && !addDisable)) {
-            handleDuplicate(dataSource[indexFocus ?? -1], indexRow);
-            e.preventDefault();
-            return e.code;
-        }
-        return '';
-    };
-    const onChangePage = (args) => {
-        if (pagingSetting?.setCurrentPage) {
-            if (args.currentPage === args.oldPage) {
-                return;
-            }
-            pagingSetting.setCurrentPage(args.currentPage);
-        }
-    };
-    const onChangePageSize = (args) => {
-        if (pagingSetting?.allowPaging) {
-            if (pagingSetting?.pageSize !== args.pageSize) {
-                if (pagingSetting?.setPageSize) {
-                    pagingSetting.setPageSize(args.pageSize);
-                }
-                if (pagingSetting?.setCurrentPage) {
-                    pagingSetting.setCurrentPage(1);
-                }
-            }
-        }
-    };
-    useOnClickOutside(gridRef, () => {
-        setTimeout(() => {
-            setIndexFocus(-1);
-        }, 50);
-    });
-    const handleAdd = () => {
-        const lengthData = dataSource.length;
-        changeDataSource(dataSource, true);
-        if (pagingSetting?.setCurrentPage) {
-            pagingSetting?.setCurrentPage(Math.floor(lengthData / (pagingSetting?.pageSize ?? 0)) + 1);
-        }
-        if (tableElement) {
-            setIndexFocus(lengthData);
-            focusNewElement(columnFistEdit, lengthData + 1, true);
-        }
-    };
-    const handleDuplicate = async (data, index) => {
-        const newData = { ...data };
-        if (toolbarSetting?.showBottomToolbar && !buttonSetting?.duplicateDisable && !editDisable && !addDisable) {
-            if (fieldKey && defaultValue) {
-                fieldUniKey.forEach((item) => {
-                    newData[item] = defaultValue[item];
-                });
-                newData[fieldKey] = defaultValue[fieldKey];
-            }
-            if (onDuplicate) {
-                await onDuplicate(newData, index);
-            }
-            if (pagingClient) {
-                dataSource.splice((((pagingSetting?.currentPage ?? 1) - 1) * (pagingSetting?.pageSize ?? 0) + index) + 1, 0, newData);
-            }
-            else {
-                dataSource.splice(index + 1, 0, newData);
-            }
-            changeDataSource(dataSource);
-            if (tableElement && index === totalCount) {
-                setTimeout(() => {
-                    tableElement.current?.scrollTo(0, tableElement.current.scrollHeight);
-                }, 100);
-            }
-        }
-    };
-    const handleInsertAfter = () => {
-        if (toolbarSetting?.showBottomToolbar && !buttonSetting?.insertAfterDisable && !editDisable && !addDisable) {
-            if (pagingClient) {
-                dataSource.splice((((pagingSetting?.currentPage ?? 1) - 1) * (pagingSetting?.pageSize ?? 0) + (indexFocus ?? -1) + 1), 0, { ...{ ...defaultValue } });
-            }
-            else {
-                dataSource.splice((indexFocus ?? -1) + 1, 0, { ...defaultValue });
-            }
-            changeDataSource(dataSource);
-            if (tableElement && indexFocus === totalCount) {
-                setTimeout(() => {
-                    tableElement.current?.scrollTo(0, tableElement.current.scrollHeight);
-                }, 100);
-            }
-        }
-    };
-    const handleInsertBefore = () => {
-        if (toolbarSetting?.showBottomToolbar && !buttonSetting?.insertBeforeDisable && !editDisable && !addDisable) {
-            if (pagingClient) {
-                dataSource.splice((((pagingSetting?.currentPage ?? 1) - 1) * (pagingSetting?.pageSize ?? 0) + (indexFocus ?? -1)), 0, { ...{ ...defaultValue } });
-            }
-            else {
-                dataSource.splice((indexFocus ?? -1), 0, { ...defaultValue });
-            }
-            changeDataSource(dataSource);
-        }
-    };
-    const handleDeleteAll = () => {
-        if (toolbarSetting?.showBottomToolbar && !buttonSetting?.deleteAllDisable && !editDisable && !addDisable) {
-            messageBoxConfirmDelete(t, deleteAll, '');
-        }
-    };
-    const deleteAll = () => {
-        if (!editDisable && !addDisable) {
-            setIndexFocus(-1);
-            changeDataSource([], false);
-        }
-    };
-    const getColumn = (col, index) => {
-        const column = contentColumns.filter(e => e.visible !== false)[col + index];
-        if (column) {
-            return { ...column };
-        }
-        return undefined;
+    const checkKeyDown = (e, row, parents, indexRow, indexCol) => {
+        const idElement = `${idTable}-col${indexCol}-row${getNewParents(parents, indexRow)}`;
+        const params = {
+            columnLastEdit,
+            contentColumns,
+            dataSource,
+            addDisable,
+            editDisable,
+            focusNewElement,
+            getNewParents,
+            handleDuplicate: () => handleDuplicate(dataSource, itemFocus, fieldKey, defaultValue, fieldUniKey, changeDataSource, tableElement, totalCount, toolbarSetting, buttonSetting, editDisable, addDisable, onDuplicate),
+            idElement,
+            indexCol,
+            indexRow,
+            itemFocus,
+            moveIndexRowToNewPage,
+            pagingClient,
+            pagingSetting,
+            parents,
+            row,
+            setItemFocus,
+            totalCount,
+            fieldChildren
+        };
+        const handlers = {
+            ArrowRight: () => handleArrowRight(e, params),
+            ArrowLeft: () => handleArrowLeft(e, params),
+            ArrowUp: () => handleArrowUp(e, params),
+            ArrowDown: () => handleArrowDown(e, params),
+            Tab: () => handleTab(e, params),
+            Enter: () => handleEnter(e, params),
+            NumpadEnter: () => handleEnter(e, params),
+            KeyD: () => (e.ctrlKey ? handleCtrlD(e, params) : undefined)
+        };
+        return handlers[e.code]?.() || "";
     };
-    const pasteDataFromExcel = async (currenRowIndex, col, e) => {
-        const clipboard = (e.clipboardData || window.Clipboard).getData('text');
-        const rowsClipboard = clipboard.trimEnd().split('\n');
-        setIndexFocus(undefined);
-        if (rowsClipboard.length > 200) {
-            messageBoxError(t, 'You can only paste up to 200 rows.');
-        }
-        if (rowsClipboard.length > 0) {
-            const columnsDataChange = [];
-            for (let index = 0; index < rowsClipboard[0].trimEnd().split('\t').length; index++) {
-                const stringData = [];
-                rowsClipboard.forEach((element) => {
-                    if (element.trimEnd().split('\t')[index] && !stringData.includes(element.trimEnd().split('\t')[index].toString().trim())) {
-                        stringData.push(element.trimEnd().split('\t')[index].toString().trim());
-                    }
-                });
-                const column = getColumn(col, index);
-                if (column) {
-                    if ((!column.disabledCondition || !column.disabledCondition(dataSource[currenRowIndex + 0])) && column.editEnable && column.onPasteValidate) {
-                        const rs = await column.onPasteValidate(stringData.join(','), currenRowIndex + 0, dataSource[currenRowIndex + 0]);
-                        if (rs) {
-                            column.resultValidate = rs;
-                        }
-                    }
-                    columnsDataChange.push(column);
-                }
-            }
-            for (let indexRow = 0; indexRow < rowsClipboard.length; indexRow++) {
-                const item = rowsClipboard[indexRow];
-                const colsClipboard = item.trimEnd().split('\t');
-                let dataRow = dataSource[currenRowIndex + indexRow];
-                if (!dataRow) {
-                    dataRow = { ...defaultValue };
-                    dataSource.push(dataRow);
-                }
-                for (let index = 0; index < colsClipboard.length; index++) {
-                    const stringData = colsClipboard[index].toString().trim();
-                    const column = columnsDataChange[index];
-                    if (column) {
-                        if (((!column.disabledCondition || !column.disabledCondition(dataSource[currenRowIndex + indexRow])) && column.editEnable) || column.onPaste) {
-                            if (column.onPasteValidate && column.resultValidate) {
-                                const rs = column.resultValidate.find((item) => item[column.selectSettings?.fieldValue ?? 'value'] === stringData);
-                                if (rs) {
-                                    if (column.onPaste) {
-                                        dataRow[column.field] = column.onPaste(dataRow, stringData);
-                                    }
-                                    else {
-                                        dataRow[column.field] = stringData;
-                                    }
-                                    if (column.callback) {
-                                        column.callback(rs, currenRowIndex + indexRow);
-                                    }
-                                }
-                                else {
-                                    notificationError(t('PasteExcelNotExist', { index: (currenRowIndex + indexRow + 1), field: t(column.headerText ?? ''), value: stringData }));
-                                }
-                            }
-                            else {
-                                if (column.editType === 'date') {
-                                    const date = new Date(stringData);
-                                    if (!isNaN(date.getTime())) {
-                                        if (column.onPaste) {
-                                            dataRow[column.field] = column.onPaste(dataRow, date);
-                                        }
-                                        else {
-                                            dataRow[column.field] = date;
-                                        }
-                                        if (column.callback) {
-                                            column.callback(date, currenRowIndex + indexRow);
-                                        }
-                                    }
-                                    else {
-                                        notificationError(t('PasteExcelIncorrectFormat', { index: (currenRowIndex + indexRow + 1), field: t(column.headerText ?? ''), value: stringData }));
-                                    }
-                                }
-                                else if (column.editType === 'numeric') {
-                                    const number = Number(stringData);
-                                    if (!isNaN(number)) {
-                                        if (column.onPaste) {
-                                            dataRow[column.field] = column.onPaste(dataRow, number);
-                                        }
-                                        else {
-                                            dataRow[column.field] = number;
-                                        }
-                                        if (column.callback) {
-                                            column.callback(number, currenRowIndex + indexRow);
-                                        }
-                                    }
-                                    else {
-                                        notificationError(t('PasteExcelIncorrectFormat', { index: (currenRowIndex + indexRow + 1), field: t(column.headerText ?? ''), value: stringData }));
-                                    }
-                                }
-                                else if (column.editType === 'select') {
-                                    const rs = ((column.selectSettings?.optionsField ? item[column.selectSettings?.optionsField] : column.selectSettings?.options) ?? []).find((item) => item[column.selectSettings?.fieldValue ?? 'value'] === stringData);
-                                    if (rs) {
-                                        if (column.onPaste) {
-                                            dataRow[column.field] = column.onPaste(dataRow, stringData);
-                                        }
-                                        else {
-                                            dataRow[column.field] = stringData;
-                                        }
-                                        if (column.callback) {
-                                            column.callback(rs, currenRowIndex + indexRow);
-                                        }
-                                    }
-                                    else {
-                                        notificationError(t('PasteExcelNotExist', { index: (currenRowIndex + indexRow + 1), field: t(column.headerText ?? ''), value: stringData }));
-                                    }
-                                }
-                                else {
-                                    if (column.onPaste) {
-                                        column.onPaste(dataRow, stringData);
-                                    }
-                                    else {
-                                        dataRow[column.field] = stringData;
-                                    }
-                                    if (column.callback) {
-                                        column.callback(stringData, currenRowIndex + indexRow);
-                                    }
-                                }
-                            }
-                        }
-                    }
-                }
-                if (rowChange) {
-                    rowChange(dataRow, currenRowIndex + indexRow, '');
-                }
-            }
+    const checkSearch = (keyword, data, fieldKey) => {
+        if (!keyword || fieldKey.length === 0) {
+            return true;
         }
-        changeDataSource(dataSource);
-    };
-    const changeDataSource = (data, haveNew = false) => {
-        if (!editDisable && setDataSource) {
-            if ((searchSetting?.searchTerm !== undefined ? searchSetting?.searchTerm : searchTerm)) {
-                if (searchSetting?.setSearchTerm) {
-                    searchSetting?.setSearchTerm('');
-                }
-                else {
-                    setSearchTerm('');
-                }
-            }
-            if (haveNew && !addDisable) {
-                data.push(defaultValue ? { ...defaultValue, [fieldKey]: disableAutoKey ? undefined : generateUUID() } : {});
-                setDataSource([...data]);
-            }
-            else {
-                setDataSource([...data]);
+        for (let index = 0; index < fieldKey.length; index++) {
+            const key = fieldKey[index].trim();
+            if (data[key] && data[key].toString().trim().toLowerCase().includes(keyword.trim().toLowerCase())) {
+                return true;
             }
         }
+        return false;
     };
-    useEffect(() => {
-        setIndexFocus(-1);
-        if (setSelectedItem) {
-            if (isMulti) {
-                if (dataSource && selectedRows && selectedRows?.length !== selectedItem?.length) {
-                    setSelectedItem([...selectedRows]);
-                    if (handleSelect) {
-                        handleSelect([...selectedRows]);
-                    }
-                }
-            }
-            else {
-                if (dataSource && selectedRows?.length > 0) {
-                    if ((!selectedItem || (selectedItem[fieldKey] !== selectedRows[0][fieldKey]))) {
-                        setSelectedItem({ ...selectedRows[0] });
-                        if (handleSelect) {
-                            handleSelect({ ...selectedRows[0] });
-                        }
-                    }
-                }
-                else {
-                    setSelectedItem(undefined);
-                    if (handleSelect) {
-                        handleSelect(undefined);
-                    }
-                }
-            }
-        }
-    }, [selectedRows]);
-    useEffect(() => {
-        if (!isMulti) {
-            if (dataSource && selectedItem && selectedItem[fieldKey]) {
-                if (selectedRows?.length === 0 || selectedItem[fieldKey] !== selectedRows[0][fieldKey]) {
-                    setSelectedRows([selectedItem]);
-                }
-            }
-            else {
-                setSelectedRows([]);
-            }
-        }
-        else {
-            if (dataSource && selectedItem && selectedRows?.length !== selectedItem.length) {
-                setSelectedRows(selectedItem ? [...selectedItem] : []);
-            }
-        }
-    }, [selectedItem]);
-    const renderContentCol = (col, row, indexRow, indexCol, isSelected) => {
+    const renderContentCol = (col, row, indexRow, indexCol, parents, isSelected) => {
+        const currentItem = getNewParents(parents, indexRow);
+        const level = parents ? parents.split('-').length : 0;
         if (col.field === 'command') {
-            return (col.visible !== false && jsx("td", { className: classnames(`r-rowcell p-0 fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'r-active': (isSelected && editDisable) || indexFocus === indexRow }), style: {
+            return (col.visible !== false && jsx("td", { className: classnames(`r-rowcell p-0 fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'r-active': (isSelected && editDisable) || itemFocus === currentItem }), style: {
                     left: col.fixedType === 'left' ? objWidthFix[indexCol] : undefined,
                     right: col.fixedType === 'right' ? objWidthFix[indexCol] : undefined,
                     textAlign: col.textAlign ? col.textAlign : 'left',
-                }, children: jsx("div", { className: "r-rowcell-div command", children: jsx(CommandElement, { commandItems: col.commandItems ?? [], handleCommandClick: handleCommandClick, indexRow: indexRow, rowData: row, setIndexFocus: setIndexFocus, indexFocus: indexFocus }) }) }, `col-${indexRow}-${indexCol}`));
+                }, children: jsx("div", { className: "r-rowcell-div command", children: jsx(CommandElement, { commandItems: col.commandItems ?? [], handleCommandClick: handleCommandClick, indexRow: indexRow, rowData: row, currentItem: currentItem, setItemFocus: setItemFocus, itemFocus: itemFocus }) }) }, `col-${indexRow}-${indexCol}`));
         }
         else if (col.field === '#') {
-            return (col.visible !== false && jsx("td", { className: classnames(`r-rowcell p-0 cursor-pointer fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'r-active': (isSelected && editDisable) || indexFocus === indexRow }), tabIndex: Number(`${indexRow}${indexCol}`), style: {
+            return (col.visible !== false && jsx("td", { className: classnames(`r-rowcell p-0 cursor-pointer fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'r-active': (isSelected && editDisable) || itemFocus === currentItem }), tabIndex: Number(`${indexRow}${indexCol}`), style: {
                     left: col.fixedType === 'left' ? objWidthFix[indexCol] : undefined,
                     right: col.fixedType === 'right' ? objWidthFix[indexCol] : undefined,
                     textAlign: 'center',
@@ -42986,21 +43197,31 @@ const TableEdit = forwardRef((props, ref) => {
                     }
                 }, onClick: (e) => {
                     if (e.target.nodeName === 'DIV' || e.target.nodeName === 'TD') {
-                        if (!editDisable && indexRow != indexFocus) {
-                            setIndexFocus(indexRow);
+                        if (!editDisable && itemFocus !== currentItem) {
+                            setItemFocus(currentItem);
                         }
                         e.stopPropagation();
                     }
                 }, onKeyDown: (e) => {
                     if (e.code === 'KeyD' && e.ctrlKey == true && (!editDisable && !addDisable) && (e.target.nodeName === 'DIV' || e.target.nodeName === 'TD')) {
-                        handleDuplicate(row, indexRow);
+                        handleDuplicate(dataSource, itemFocus, fieldKey, defaultValue, fieldUniKey, changeDataSource, tableElement, totalCount, toolbarSetting, buttonSetting, editDisable, addDisable, onDuplicate);
                         e.preventDefault();
                         e.stopPropagation();
                     }
-                }, children: jsx("div", { className: "r-rowcell-div", children: indexRow + 1 }) }, `col-${indexRow}-${indexCol}`));
+                }, children: jsxs("div", { className: "r-rowcell-div", style: { paddingLeft: level * 10 }, children: [isTree && row[fieldChildren ?? 'children']?.length > 0 &&
+                            jsx(SvgChevronRight, { onClick: (e) => {
+                                    if (row.expanded) {
+                                        row.expanded = false;
+                                    }
+                                    else {
+                                        row.expanded = true;
+                                    }
+                                    handleDataChange(row, col, indexRow);
+                                    e.stopPropagation();
+                                }, fontSize: 18, className: classnames('r-icon-expand', { 'is-open': row.expanded }) }), indexRow + 1] }) }, `col-${indexRow}-${indexCol}`));
         }
         else if (col.field === 'checkbox') {
-            return (jsx("td", { className: classnames(`r-rowcell p-0 fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'r-active': (isSelected && editDisable) || indexFocus === indexRow }), style: {
+            return (jsx("td", { className: classnames(`r-rowcell p-0 fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'r-active': (isSelected && editDisable) || itemFocus === currentItem }), style: {
                     left: col.fixedType === 'left' ? objWidthFix[indexCol] : undefined,
                     right: col.fixedType === 'right' ? objWidthFix[indexCol] : undefined,
                     textAlign: col.textAlign ? col.textAlign : 'center',
@@ -43039,18 +43260,18 @@ const TableEdit = forwardRef((props, ref) => {
             else if (col.editType === 'datetime') {
                 value = value ? formatDateTime(value, formatSetting?.dateFormat ?? 'DD/MM/yyyy HH:mm') : '';
             }
-            const typeDis = !editDisable && (indexFocus === indexRow || col.editType === 'checkbox') && (!col.disabledCondition || !col.disabledCondition(row)) ? (col.editEnable ? 1 : (col.template ? 2 : 3)) : (col.template ? 2 : 3);
+            const typeDis = !editDisable && (itemFocus === currentItem || col.editType === 'checkbox') && (!col.disabledCondition || !col.disabledCondition(row)) ? (col.editEnable ? 1 : (col.template ? 2 : 3)) : (col.template ? 2 : 3);
             const errorMessage = typeDis === 1 || col.field === '' || !col.validate ? '' : col.validate(row[col.field], row);
-            return (jsx(Fragment, { children: col.visible !== false && jsx("td", { className: classnames(`r-rowcell fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'r-active': (isSelected && editDisable) || indexFocus === indexRow }), style: {
+            return (jsx(Fragment, { children: col.visible !== false && jsx("td", { className: classnames(`r-rowcell fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'r-active': (isSelected && editDisable) || itemFocus === currentItem }), style: {
                         left: col.fixedType === 'left' ? objWidthFix[indexCol] : undefined,
                         right: col.fixedType === 'right' ? objWidthFix[indexCol] : undefined,
                         padding: 0,
                         textAlign: col.textAlign ? col.textAlign : 'left'
                     }, onClick: (e) => {
                         if (e.target.nodeName === 'DIV' || e.target.nodeName === 'TD') {
-                            if (!editDisable && indexRow != indexFocus) {
-                                setIndexFocus(indexRow);
-                                focusNewElement(indexCol + 1, indexRow + 1, true);
+                            if (!editDisable && itemFocus !== currentItem) {
+                                setItemFocus(currentItem);
+                                focusNewElement(indexCol + 1, parents, indexRow + 1, true);
                             }
                             if (selectEnable && editDisable) {
                                 const index = selectedRows?.findIndex((x) => x[fieldKey] === row[fieldKey]);
@@ -43074,73 +43295,47 @@ const TableEdit = forwardRef((props, ref) => {
                             }
                             e.stopPropagation();
                         }
-                    }, children: jsx("div", { className: classnames('r-rowcell-div'), children: jsxs("div", { id: indexFocus === indexRow && typeDis !== 1 ? `${idTable}-col${indexCol + 1}-row${indexRow + 1}` : '', className: classnames('r-rowcell-content', { 'r-is-invalid': errorMessage }), style: {
+                    }, children: jsx("div", { className: classnames('r-rowcell-div'), children: jsxs("div", { id: itemFocus === currentItem && typeDis !== 1 ? `${idTable}-col${indexCol + 1}-row${indexRow + 1}` : '', className: classnames('r-rowcell-content', { 'r-is-invalid': errorMessage }), style: {
                                 margin: typeDis === 1 ? 2 : !errorMessage ? '7px 9px' : 2
-                            }, children: [typeDis === 1 && !refreshRow ? RenderEdit(row, col, indexCol, indexRow) : jsx("div", { id: `content-${idTable}-row${indexRow}col-${indexCol}`, className: "r-cell-text", children: typeDis === 2 ? (col.template && col.template(row, indexRow)) ?? '' : (col.editType === 'numeric' && Number(row[col.field]) < 0 ? jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${value}${formatSetting?.suffixNegative ?? ''}`] }) : value) }), jsx("span", { id: `error-${indexRow}-${indexCol}`, className: classnames('cursor-pointer text-primary icon-table', { 'd-none': !errorMessage }), children: jsx(SvgAlertCircle, { fontSize: 15.5 }) }), (!(typeDis === 1 && !refreshRow)) && jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `content-${idTable}-row${indexRow}col-${indexCol}`, children: typeDis === 2 ? (col.template && col.template(row, indexRow)) ?? '' : (col.editType === 'numeric' && Number(row[col.field]) < 0 ? jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${value}${formatSetting?.suffixNegative ?? ''}`] }) : value) }), jsx(UncontrolledTooltip, { target: `error-${indexRow}-${indexCol}`, className: "r-tooltip tooltip-error", children: errorMessage?.toString() ?? '' })] }) }) }, `col-${indexRow}-${indexCol}`) }, indexCol));
-        }
-    };
-    const renderFooterCol = (col, indexCol) => {
-        const sumValue = (col.haveSum === true && col.editType === "numeric") ? dataSource.reduce(function (accumulator, currentValue) { return (Number(accumulator ?? 0) + Number(currentValue[col.field] ?? 0)); }, 0) : 0;
-        return (jsx(Fragment, { children: (col.visible !== false) && jsx("td", { className: classnames(`p-0 px-50 r-footer fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }), style: {
-                    left: col.fixedType === 'left' ? objWidthFix[indexCol] : undefined,
-                    right: col.fixedType === 'right' ? objWidthFix[indexCol] : undefined,
-                    textAlign: col.textAlign ? col.textAlign : 'left'
-                }, children: jsxs("div", { className: "r-footer-div", children: [col.haveSum === true && col.editType === "numeric" && (Number(sumValue) >= 0) && jsx(Fragment$1, { children: formartNumberic(sumValue, formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false) }), col.haveSum === true && col.editType === "numeric" && (Number(sumValue) < 0) && jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${formartNumberic(sumValue, formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false)}${formatSetting?.suffixNegative ?? ''}`] })] }) }) }, `summarycell-${indexCol}`));
-    };
-    const renderToolbarBottom = () => {
-        return (jsx("div", { id: "table_custom_bottom_toolbar", className: "r-toolbar r-toolbar-bottom", role: "toolbar", "aria-disabled": "false", "aria-haspopup": "false", "aria-orientation": "horizontal", children: jsxs("div", { className: "r-toolbar-items", children: [jsxs("div", { className: "r-toolbar-left", children: [jsx("div", { className: classnames('r-toolbar-item', { 'd-none': editDisable || addDisable }), "aria-disabled": "false", children: jsx(Button$1, { color: 'success', outline: true, onClick: handleAdd, className: 'd-flex', children: t('Add item') }) }), (indexFocus ?? -1) > -1 ? jsxs(Fragment$1, { children: [jsx("div", { className: classnames('r-toolbar-item', { 'd-none': editDisable || addDisable || buttonSetting?.duplicateDisable }), "aria-disabled": "false", children: jsx(Button$1, { color: 'success', outline: true, onClick: () => { handleDuplicate(dataSource[indexFocus ?? -1], indexFocus ?? -1); }, className: 'd-flex', children: t('Duplicate') }) }), jsx("div", { className: classnames('r-toolbar-item', { 'd-none': editDisable || addDisable || buttonSetting?.insertBeforeDisable }), "aria-disabled": "false", children: jsx(Button$1, { color: 'success', outline: true, onClick: handleInsertBefore, className: 'd-flex', children: t('Insert item before') }) }), jsx("div", { className: classnames('r-toolbar-item', { 'd-none': editDisable || addDisable || buttonSetting?.insertAfterDisable }), "aria-disabled": "false", children: jsx(Button$1, { color: 'success', outline: true, onClick: handleInsertAfter, className: 'd-flex', children: t('Insert item after') }) })] }) : jsx(Fragment$1, { children: " " }), jsx("div", { className: classnames('r-toolbar-item', { 'd-none': editDisable || buttonSetting?.deleteAllDisable }), "aria-disabled": "false", children: jsx(Button$1, { color: 'primary', outline: true, onClick: handleDeleteAll, className: 'd-flex', children: t('Delete all item') }) }), toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
-                                return ((item.align === 'left') ?
-                                    jsx("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-left-${index}`) : '');
-                            })] }), jsx("div", { className: "r-toolbar-center", children: toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
-                            return ((item.align === 'center') ?
-                                jsx("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-center-${index}`) : '');
-                        }) }), jsxs("div", { className: "r-toolbar-right", children: [toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
-                                return ((item.align === 'right') ?
-                                    jsx("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-right-${index}`) : '');
-                            }), jsx("div", { className: classnames('r-toolbar-item me-25', { 'd-none': headerColumns.length > 1 }), "aria-disabled": "false", children: jsx(SvgSettings, { className: "text-primary cursor-pointer", onClick: () => setOpenPopupSetupColumn(true) }) }), jsx("div", { className: classnames('r-toolbar-item me-25', { 'd-none': editDisable || addDisable }), "aria-disabled": "false", children: jsxs(UncontrolledDropdown, { className: 'dropdown-user nav-item', children: [jsx(DropdownToggle$1, { tag: 'div', color: "primary", onClick: (e) => e.preventDefault(), children: jsx(SvgInfo, { className: "cursor-pointer text-primary" }) }), jsx(DropdownMenu$1, { className: 'formula-dropdown icon-dropdown', children: jsxs("ul", { className: "mb-0 pe-50", children: [jsx("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\u00E0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\u00E0ng v\u00E0 nh\u1EA5n Ctrl + D \u0111\u1EC3 nh\u00E2n b\u1EA3n" }), jsx("li", { style: { fontSize: 13 }, children: "Ch\u1ECDn \u00F4 v\u00E0 Ctrl + V \u0111\u1EC3 d\u00E1n th\u00F4ng tin t\u1EEB excel" }), jsx("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\u00E0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\u00E0ng v\u00E0 nh\u1EA5n Ctrl + C \u0111\u1EC3 sao ch\u00E9p h\u00E0ng" }), jsx("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\u00E0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\u00E0ng v\u00E0 nh\u1EA5n Ctrl + V \u0111\u1EC3  d\u00E1n h\u00E0ng" })] }) })] }) })] })] }) }));
-    };
-    const checkSearch = (keyword, data, fieldKey) => {
-        if (!keyword || fieldKey.length === 0) {
-            return true;
-        }
-        for (let index = 0; index < fieldKey.length; index++) {
-            const key = fieldKey[index].trim();
-            if (data[key] && data[key].toString().trim().toLowerCase().includes(keyword.trim().toLowerCase())) {
-                return true;
-            }
+                            }, children: [typeDis === 1 && !refreshRow ? RenderEdit(row, col, parents, indexCol, indexRow) : jsx("div", { id: `content-${idTable}-row${indexRow}col-${indexCol}`, className: "r-cell-text", children: typeDis === 2 ? (col.template && col.template(row, indexRow)) ?? '' : (col.editType === 'numeric' && Number(row[col.field]) < 0 ? jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${value}${formatSetting?.suffixNegative ?? ''}`] }) : value) }), jsx("span", { id: `error-${indexRow}-${indexCol}`, className: classnames('cursor-pointer text-primary icon-table', { 'd-none': !errorMessage }), children: jsx(SvgAlertCircle, { fontSize: 15.5 }) }), (!(typeDis === 1 && !refreshRow)) && jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `content-${idTable}-row${indexRow}col-${indexCol}`, children: typeDis === 2 ? (col.template && col.template(row, indexRow)) ?? '' : (col.editType === 'numeric' && Number(row[col.field]) < 0 ? jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${value}${formatSetting?.suffixNegative ?? ''}`] }) : value) }), jsx(UncontrolledTooltip, { target: `error-${indexRow}-${indexCol}`, className: "r-tooltip tooltip-error", children: errorMessage?.toString() ?? '' })] }) }) }, `col-${indexRow}-${indexCol}`) }, indexCol));
         }
-        return false;
     };
     const renderData = () => {
         totalCount = 0;
-        let countDisplay = -1;
-        return (dataSource.map((row, indexRow) => {
+        const renderRow = (row, indexRow, parents = '') => {
             const isSelected = selectedRows?.some((x) => x[fieldKey] === row[fieldKey]);
-            const flagSearch = !searchClient || checkSearch(searchSetting?.searchTerm !== undefined ? searchSetting?.searchTerm : searchTerm, row, searchSetting?.keyField ?? []);
-            if (flagSearch) {
+            const flagSearch = !searchClient || checkSearch(searchSetting?.searchTerm ?? searchTerm, row, searchSetting?.keyField ?? []);
+            if (!flagSearch)
+                return null;
+            if (parents === '')
                 totalCount += 1;
-                const flagDisplay = !pagingClient || (totalCount > ((pagingSetting.pageSize ?? 0) * ((pagingSetting.currentPage ?? 0) - 1)) && totalCount <= ((pagingSetting.pageSize ?? 0) * ((pagingSetting.currentPage ?? 0))));
-                if (flagDisplay) {
-                    countDisplay++;
-                    return (jsx("tr", { className: classnames('r-row', { 'fisrt-row': countDisplay === 0 }), children: contentColumns.map((col, indexCol) => {
-                            return (renderContentCol(col, row, indexRow, indexCol, isSelected));
-                        }) }, `row-${indexRow}`));
-                }
-            }
-        }));
+            const flagDisplay = !pagingClient || (totalCount > ((pagingSetting.pageSize ?? 0) * ((pagingSetting.currentPage ?? 0) - 1)) && totalCount <= ((pagingSetting.pageSize ?? 0) * ((pagingSetting.currentPage ?? 0))));
+            return (flagDisplay && jsxs(Fragment$1, { children: [jsx("tr", { className: classnames('r-row'), children: contentColumns.map((col, indexCol) => renderContentCol(col, row, indexRow, indexCol, parents, isSelected)) }, `row-${parents}-${indexRow}`), isTree && row.expanded && row[fieldChildren ?? 'children']?.length > 0 && row[fieldChildren ?? 'children'].map((child, indexChild) => renderRow(child, indexChild, getNewParents(parents, indexRow)))] }));
+        };
+        return dataSource.map((row, indexRow) => renderRow(row, indexRow));
     };
     useEffect(() => {
         if (pagingClient && pagingSetting?.setCurrentPage && (searchSetting?.searchTerm !== undefined ? searchSetting?.searchTerm : searchTerm)) {
             pagingSetting?.setCurrentPage(1);
         }
     }, [searchTerm, searchSetting?.searchTerm]);
-    return (jsxs(Fragment, { children: [jsxs("div", { className: "react-table-edit", children: [jsxs("div", { className: 'r-grid', ref: gridRef, children: [toolbarSetting?.showTopToolbar ? jsx(Fragment$1, { children: renderToolbarTop(toolbarTopOption) }) : jsx(Fragment$1, {}), jsx("div", { ref: tableElement, className: "r-gridtable", style: { height: `${height ? `${height}px` : 'auto'}`, minHeight: `${minHeight ? `${minHeight}px` : ''}`, maxHeight: `${maxHeight ? `${maxHeight}px` : '400px'}` }, children: jsxs("table", { style: { width: '100%' }, children: [jsx("thead", { className: 'r-gridheader', children: headerColumns.map((element, indexParent) => {
+    return (jsxs(Fragment, { children: [jsxs("div", { className: "react-table-edit", children: [jsxs("div", { className: 'r-grid', ref: gridRef, children: [toolbarSetting?.showTopToolbar && jsx(RenderToolbarTop, { toolbarTopOption: toolbarTopOption }), jsx("div", { ref: tableElement, className: "r-gridtable", style: { height: `${height ? `${height}px` : 'auto'}`, minHeight: `${minHeight ? `${minHeight}px` : ''}`, maxHeight: `${maxHeight ? `${maxHeight}px` : '400px'}` }, children: jsxs("table", { style: { width: '100%' }, children: [jsx("thead", { className: 'r-gridheader', children: headerColumns.map((element, indexParent) => {
                                                 return (jsx("tr", { className: "r-row", role: "row", children: element?.map((col, index) => {
                                                         return (jsx(HeaderTableCol, { col: col, dataSource: dataSource, indexCol: index, indexParent: indexParent, isMulti: isMulti ?? false, objWidthFix: objWidthFix, selectEnable: selectEnable ?? false, selectedRows: selectedRows, setSelectedRows: setSelectedRows, column: contentColumns, setColumn: setContentColumns, totalCount: totalCount }, `header-${indexParent}-${index}`));
                                                     }) }, `header-${-indexParent}`));
                                             }) }), jsx("tbody", { className: 'r-gridcontent', children: renderData() }), jsx("tfoot", { className: "r-gridfoot", children: haveSum == true ? jsx("tr", { className: 'r-row', children: contentColumns.map((col, index) => {
-                                                    return (renderFooterCol(col, index));
-                                                }) }) : jsx(Fragment$1, {}) })] }) }), toolbarSetting?.showBottomToolbar ? jsx(Fragment$1, { children: renderToolbarBottom() }) : jsx(Fragment$1, {})] }), pagingSetting?.allowPaging ? jsx(PagingComponent, { onChangePage: onChangePage, pageSize: pagingSetting?.pageSize ?? 0, currentPage: pagingSetting?.currentPage ?? 0, pageOptions: pagingSetting?.pageOptions ?? [20, 30, 50, 100], totalItem: pagingClient ? totalCount : (pagingSetting?.totalItem ?? 0), onChangePageSize: onChangePageSize }) : jsx(Fragment$1, {})] }), jsx(SidebarSetColumn, { handleSidebar: () => { setOpenPopupSetupColumn(!openPopupSetupColumn); }, openSidebar: openPopupSetupColumn, column: [...contentColumns], setColumn: setContentColumns })] }));
+                                                    return jsx(FooterCol, { col: col, indexCol: index, dataSource: dataSource, objWidthFix: objWidthFix, formatSetting: formatSetting });
+                                                }) }) : jsx(Fragment$1, {}) })] }) }), toolbarSetting?.showBottomToolbar && jsx(ToolbarBottom, { handleAdd: () => {
+                                    handleAdd(dataSource, tableElement.current, columnFistEdit, changeDataSource, pagingSetting, setItemFocus, focusNewElement);
+                                }, handleDuplicate: () => {
+                                    handleDuplicate(dataSource, itemFocus, fieldKey, defaultValue, fieldUniKey, changeDataSource, tableElement, totalCount, toolbarSetting, buttonSetting, editDisable, addDisable, onDuplicate);
+                                }, handleInsertAfter: () => {
+                                    handleInsertAfter(dataSource, itemFocus, defaultValue, changeDataSource, tableElement, totalCount, pagingClient, pagingSetting, toolbarSetting, buttonSetting, editDisable, addDisable);
+                                }, handleInsertBefore: () => {
+                                    handleInsertBefore(dataSource, itemFocus, defaultValue, changeDataSource, pagingClient, pagingSetting, toolbarSetting, buttonSetting, editDisable, addDisable);
+                                }, handleDeleteAll: () => {
+                                    handleDeleteAll(t, messageBoxConfirmDelete, setItemFocus, changeDataSource, editDisable, addDisable, toolbarSetting, buttonSetting);
+                                }, setOpenPopupSetupColumn: setOpenPopupSetupColumn, itemFocus: itemFocus, editDisable: editDisable, addDisable: addDisable, buttonSetting: buttonSetting, toolbarSetting: toolbarSetting, headerColumns: headerColumns, t: t })] }), pagingSetting?.allowPaging ? jsx(PagingComponent, { onChangePage: onChangePage, pageSize: pagingSetting?.pageSize ?? 0, currentPage: pagingSetting?.currentPage ?? 0, pageOptions: pagingSetting?.pageOptions ?? [20, 30, 50, 100], totalItem: pagingClient ? totalCount : (pagingSetting?.totalItem ?? 0), onChangePageSize: onChangePageSize }) : jsx(Fragment$1, {})] }), jsx(SidebarSetColumn, { handleSidebar: () => { setOpenPopupSetupColumn(!openPopupSetupColumn); }, openSidebar: openPopupSetupColumn, column: [...contentColumns], setColumn: setContentColumns })] }));
 });
 
 const TabsMenuComponent = ({ buttonWidth, tabParent, tabChild, resourceCodeParent, resources, resourceCode, windowSize, renderModal }) => {
@@ -64900,7 +65095,7 @@ const TabMergeImportExcel = (props) => {
                             return jsx(Fragment$1, { children: data.isRequired ? jsx(SvgCheckSquare, { color: 'green', fontSize: 18 }) : jsx(SvgXSquare, { color: 'red', fontSize: 18 }) });
                         },
                         disabledCondition: (row) => {
-                            return row.disableEdit;
+                            return row.disableEdit ?? false;
                         },
                         width: 80,
                         minWidth: 80,
@@ -65475,5 +65670,5 @@ const ImportExcelComponent = (props) => {
             } }) }));
 };
 
-export { ExportExcelComponent, ImportExcelComponent, InputStyleComponent, SelectTable, SelectTableTree, TabsMenuComponent, checkDecimalSeparator, checkThousandSeparator, TableEdit as default, formartNumberic, formatDateTime, generateUUID, isNullOrUndefined$1 as isNullOrUndefined, messageBoxConfirm, messageBoxConfirm2, messageBoxConfirmDelete, messageBoxError, messageHtmlBoxConfirm, messageHtmlBoxError, notificationError, notificationSuccess, roundNumber, useOnClickOutside };
+export { ExportExcelComponent, FindNodeByPath, ImportExcelComponent, InputStyleComponent, SelectTable, TabsMenuComponent, checkDecimalSeparator, checkThousandSeparator, TableEdit as default, formartNumberic, formatDateTime, generateUUID, isNullOrUndefined$1 as isNullOrUndefined, messageBoxConfirm, messageBoxConfirm2, messageBoxConfirmDelete, messageBoxError, messageHtmlBoxConfirm, messageHtmlBoxError, notificationError, notificationSuccess, roundNumber, useOnClickOutside };
 //# sourceMappingURL=index.mjs.map