react-table-edit 1.5.32 → 1.5.34

package/dist/component/table/header.d.ts

@@ -3,7 +3,7 @@ import 'react-resizable/css/styles.css';
 import { IFFilterTable, IFOrderTable, IFTableEditFormat, IHeaderColumnTable } from '../type';
 type IFDataProps = {
     idTable: string;
-    selectEnable: boolean;
+    selectEnable?: boolean;
     dataSource: any[];
     setSelectedRows: Dispatch<SetStateAction<any[]>>;
     col: IHeaderColumnTable;

package/dist/component/table-view/content.d.ts

@@ -12,11 +12,12 @@ type IContentColProps = {
     objWidthFixRight: any;
     lastObjWidthFixLeft: number;
     fisrtObjWidthFixRight: number;
-    selectEnable?: boolean;
     isMulti?: boolean;
     fieldKey: string;
     zeroVisiable?: boolean;
     setSelectedRows: (value: any[]) => void;
+    handleCloseContext: () => void;
+    handleDoubleClick?: (row: any, col: IColumnTable) => void;
 };
 export declare const RenderContentCol: (props: IContentColProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/component/table-view/index.d.ts

@@ -5,8 +5,6 @@ type TableViewProps = {
     dataSource: any[];
     height?: number;
     columns: IColumnTable[];
-    selectEnable?: boolean;
-    isMutil?: boolean;
     isLoading?: boolean;
     formatSetting?: IFTableEditFormat;
     pagingSetting?: IFTableEditPaging;
@@ -39,7 +37,7 @@ type TableViewProps = {
     resetDefaultColumns?: () => void;
     saveSettingColumn?: (data: IFSettingColumns[]) => void;
     setSelectedItem?: Dispatch<SetStateAction<any>>;
-    handleDoubleClick?: (args: any) => void;
+    handleDoubleClick?: (row: any, col: IColumnTable) => void;
     contextMenuItems?: IContextItem[];
     handleContextMenuClick?: (context: IContextItem, data: any) => void;
     isMulti?: boolean;

package/dist/component/type/index.d.ts

@@ -224,6 +224,8 @@ export type IColumnTable = {
     onPaste?: (dataRow: any, dataPaste: any) => void;
     /** Xác thực dữ liệu được paste */
     onPasteValidate?: (dataPaste: string, dataRow: any, rowIndex: number) => Promise<any>;
+    /** Chỉ dùng cho bảng view */
+    onClick?: (dataRow: any, rowIndex: number) => void;
     /**Không có tác dụng */
     rowspan?: number;
 };
@@ -267,6 +269,8 @@ export type IFTableEditToolbar = {
     toolbarBottomOptions?: IFToolbarOptions[];
     /** Hiển thị thanh công cụ dưới */
     showBottomToolbar?: boolean;
+    /** Hiển thị nút cài đặt cột */
+    hiddenSetting?: boolean;
 };
 /** Cấu hình tìm kiếm trong bảng */
 export type IFTableEditSearchSetting = {

package/dist/component/utils.d.ts

@@ -56,3 +56,4 @@ export declare const calculateTableStructure: (columns: any[], settingColumns?:
  */
 export declare const CheckRowMatch: (row: Record<string, any>, filters: IFFilterTable[], keyword: string, searchKeys: string[]) => boolean;
 export declare const getMaxExpandedLevel: (items: any[], fieldChildren?: string, level?: number) => number;
+export declare const findItemInTree: (items: any[], filter: string, keyFilter?: string, keyChildren?: string) => any;

package/dist/index.d.ts

@@ -228,6 +228,8 @@ type IColumnTable = {
     onPaste?: (dataRow: any, dataPaste: any) => void;
     /** Xác thực dữ liệu được paste */
     onPasteValidate?: (dataPaste: string, dataRow: any, rowIndex: number) => Promise<any>;
+    /** Chỉ dùng cho bảng view */
+    onClick?: (dataRow: any, rowIndex: number) => void;
     /**Không có tác dụng */
     rowspan?: number;
 };
@@ -271,6 +273,8 @@ type IFTableEditToolbar = {
     toolbarBottomOptions?: IFToolbarOptions[];
     /** Hiển thị thanh công cụ dưới */
     showBottomToolbar?: boolean;
+    /** Hiển thị nút cài đặt cột */
+    hiddenSetting?: boolean;
 };
 /** Cấu hình tìm kiếm trong bảng */
 type IFTableEditSearchSetting = {
@@ -703,8 +707,6 @@ type TableViewProps = {
     dataSource: any[];
     height?: number;
     columns: IColumnTable[];
-    selectEnable?: boolean;
-    isMutil?: boolean;
     isLoading?: boolean;
     formatSetting?: IFTableEditFormat;
     pagingSetting?: IFTableEditPaging;
@@ -737,7 +739,7 @@ type TableViewProps = {
     resetDefaultColumns?: () => void;
     saveSettingColumn?: (data: IFSettingColumns[]) => void;
     setSelectedItem?: Dispatch<SetStateAction<any>>;
-    handleDoubleClick?: (args: any) => void;
+    handleDoubleClick?: (row: any, col: IColumnTable) => void;
     contextMenuItems?: IContextItem[];
     handleContextMenuClick?: (context: IContextItem, data: any) => void;
     isMulti?: boolean;
@@ -802,6 +804,7 @@ declare const calculateTableStructure: (columns: any[], settingColumns?: IFSetti
  */
 declare const CheckRowMatch: (row: Record<string, any>, filters: IFFilterTable[], keyword: string, searchKeys: string[]) => boolean;
 declare const getMaxExpandedLevel: (items: any[], fieldChildren?: string, level?: number) => number;
+declare const findItemInTree: (items: any[], filter: string, keyFilter?: string, keyChildren?: string) => any;
 
 type IFSteps = {
     id: string;
@@ -829,5 +832,5 @@ type IFProps = {
 };
 declare const Wizard: React.ForwardRefExoticComponent<IFProps & React.RefAttributes<unknown>>;
 
-export { CheckRowMatch, ExportExcelComponent, FindNodeByPath, InputStyleComponent, ModalImportComponent, SelectTable, SelectTableTree, TableView, TabsMenuComponent, Wizard, calculateTableStructure, checkDecimalSeparator, checkThousandSeparator, TableEdit as default, formartNumberic, formatDateTime, generateUUID, getMaxExpandedLevel, isNullOrUndefined, messageBoxConfirm, messageBoxConfirmAsync, messageBoxConfirmDelete, messageBoxError, messageHtmlBoxConfirm, messageHtmlBoxConfirmAsync, messageHtmlBoxError, notificationError, notificationSuccess, roundNumber, useOnClickOutside };
+export { CheckRowMatch, ExportExcelComponent, FindNodeByPath, InputStyleComponent, ModalImportComponent, SelectTable, SelectTableTree, TableView, TabsMenuComponent, Wizard, calculateTableStructure, checkDecimalSeparator, checkThousandSeparator, TableEdit as default, findItemInTree, formartNumberic, formatDateTime, generateUUID, getMaxExpandedLevel, isNullOrUndefined, messageBoxConfirm, messageBoxConfirmAsync, messageBoxConfirmDelete, messageBoxError, messageHtmlBoxConfirm, messageHtmlBoxConfirmAsync, messageHtmlBoxError, notificationError, notificationSuccess, roundNumber, useOnClickOutside };
 export type { FromItemsField, ICellInfo, IColumnTable, IColumnType, IColumnsAgg, ICommandItem, IContextItem, IFColumnSelectTable, IFColumnSelectTableTree, IFCurrentPage, IFCurrentPageConfig, IFFilterTable, IFOrderTable, IFPageSize, IFSettingColumns, IFTableEditButton, IFTableEditFormat, IFTableEditPaging, IFTableEditSearchSetting, IFTableEditToolbar, IFTableSelectFormat, IFTableTreeSelectFormat, IFToolbarOptions, IFilterType, IHeaderColumnTable, ISettingFormElement, ISettingNumericElement, ISettingSelectElement };

package/dist/index.js

@@ -19813,10 +19813,7 @@ const isNullOrUndefined$1 = (d) => {
 const generateUUID = () => {
     // Public Domain/MIT
     let d = new Date().getTime(); //Timestamp
-    let d2 = (typeof performance !== 'undefined' &&
-        performance.now &&
-        performance.now() * 1000) ||
-        0; //Time in microseconds since page-load or 0 if unsupported
+    let d2 = (typeof performance !== 'undefined' && performance.now && performance.now() * 1000) || 0; //Time in microseconds since page-load or 0 if unsupported
     return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
         let r = Math.random() * 16; //random number between 0 and 16
         if (d > 0) {
@@ -19841,23 +19838,19 @@ const generateUUID = () => {
  * @param isDone đã nhập xong
  * @returns
  */
-const formartNumberic = (str, decimalSeparator, thousandSeparator, fraction = 10, isDone, haveNegative = true) => {
+const formartNumberic = (str, decimalSeparator, thousandSeparator, fraction = 2, isDone, haveNegative = true) => {
     if (isDone) {
         str = roundNumber(Number(str), fraction);
     }
     // eslint-disable-next-line
     if (str || str == '0') {
         str = str.toString();
-        const value = decimalSeparator !== '.'
-            ? str.toString().replaceAll('.', decimalSeparator ?? '')
-            : str;
+        const value = decimalSeparator !== '.' ? str.toString().replaceAll('.', decimalSeparator ?? '') : str;
         const arr = value.toString().split(decimalSeparator ?? '', 2);
         let flag = value.toString().includes(decimalSeparator ?? '');
         if (arr[0].length < 3) {
             const intergerArr = haveNegative ? arr[0] : arr[0].replace('-', '');
-            return flag
-                ? `${intergerArr}${decimalSeparator}${arr[1]?.substring(0, fraction) ?? ''}`
-                : intergerArr;
+            return flag ? `${intergerArr}${decimalSeparator}${arr[1]?.substring(0, fraction) ?? ''}` : intergerArr;
         }
         else {
             let flagNegative = false;
@@ -19881,9 +19874,7 @@ const formartNumberic = (str, decimalSeparator, thousandSeparator, fraction = 10
             if (flagNegative && haveNegative) {
                 arr[0] = '-'.concat(arr[0]);
             }
-            return flag
-                ? `${arr[0]}${decimalSeparator}${arr[1]?.substring(0, fraction) ?? ''}`
-                : arr[0];
+            return flag ? `${arr[0]}${decimalSeparator}${arr[1]?.substring(0, fraction) ?? ''}` : arr[0];
         }
     }
     else {
@@ -19906,7 +19897,7 @@ const formatDateTime = (data, format = 'dd/MM/yyyy') => {
         MM: String(date.getMonth() + 1).padStart(2, '0'),
         yyyy: date.getFullYear(),
         HH: String(date.getHours()).padStart(2, '0'),
-        mm: String(date.getMinutes()).padStart(2, '0'),
+        mm: String(date.getMinutes()).padStart(2, '0')
     };
     return format.replace(/dd|DD|MM|yyyy|HH|mm/g, (match) => map[match]);
 };
@@ -19927,7 +19918,7 @@ const FindNodeByPath = (tree, path) => {
         parent: current,
         lastIndex: levels.at(-1),
         firstIndex: levels.length === 1 ? levels[0] : -1,
-        node,
+        node
     };
 };
 /**
@@ -19955,7 +19946,7 @@ const calculateTableStructure = (columns, settingColumns, groupColumns) => {
     const objHeaderWidthFixLeft = {};
     let maxDepth = 0;
     // Tính depth tối đa
-    const calculateDepth = (cols, depth = 1) => Math.max(...cols.map((col) => col.columns?.length ? calculateDepth(col.columns, depth + 1) : depth));
+    const calculateDepth = (cols, depth = 1) => Math.max(...cols.map((col) => (col.columns?.length ? calculateDepth(col.columns, depth + 1) : depth)));
     maxDepth = calculateDepth(columns);
     let leftTotal = 0;
     let rightTotal = 0;
@@ -19992,8 +19983,7 @@ const calculateTableStructure = (columns, settingColumns, groupColumns) => {
                         cell.numericSettings = { fraction: setting.fraction };
                     }
                 }
-                cell.headerDisplay =
-                    setting.headerText || (cell.headerDisplay ?? cell.headerText);
+                cell.headerDisplay = setting.headerText || (cell.headerDisplay ?? cell.headerText);
             }
             else {
                 if (cell.columns?.length) {
@@ -20029,13 +20019,11 @@ const calculateTableStructure = (columns, settingColumns, groupColumns) => {
                 ...col,
                 columns: col.columns ?? [],
                 colspan,
-                rowspan: hasChildren ? 1 : maxDepth - level,
+                rowspan: hasChildren ? 1 : maxDepth - level
             };
             levels[level].push(cell);
             const headerKey = `${level}-${indexCol}`;
-            if (cell.fixedType === 'left' &&
-                cell.visible !== false &&
-                cell.isGroup !== true) {
+            if (cell.fixedType === 'left' && cell.visible !== false && cell.isGroup !== true) {
                 objHeaderWidthFixLeft[headerKey] = leftTotal;
             }
             if (!hasChildren) {
@@ -20043,22 +20031,16 @@ const calculateTableStructure = (columns, settingColumns, groupColumns) => {
                 const width = cell.width ?? 40;
                 cell.index = index;
                 flat.push(cell);
-                if (cell.fixedType === 'left' &&
-                    cell.visible !== false &&
-                    cell.isGroup !== true) {
+                if (cell.fixedType === 'left' && cell.visible !== false && cell.isGroup !== true) {
                     objWidthFixLeft[index] = leftTotal;
                     leftTotal += width;
                 }
-                if (cell.fixedType === 'right' &&
-                    cell.visible !== false &&
-                    cell.isGroup !== true) {
+                if (cell.fixedType === 'right' && cell.visible !== false && cell.isGroup !== true) {
                     rightTotal -= width;
                     objWidthFixRight[index] = rightTotal;
                 }
             }
-            if (cell.fixedType === 'right' &&
-                cell.visible !== false &&
-                cell.isGroup !== true) {
+            if (cell.fixedType === 'right' && cell.visible !== false && cell.isGroup !== true) {
                 objHeaderWidthFixRight[headerKey] = rightTotal;
             }
             return colspanSum + colspan;
@@ -20071,20 +20053,13 @@ const calculateTableStructure = (columns, settingColumns, groupColumns) => {
     traverse(columns);
     // Danh sách các cột được hiển thị
     // const flatVisble = flat.filter((e) => e.visible !== false)
-    const flatVisbleContent = flat.filter((x) => x.visible !== false &&
-        x.field !== 'command' &&
-        x.field !== '#' &&
-        x.field !== 'checkbox');
+    const flatVisbleContent = flat.filter((x) => x.visible !== false && x.field !== 'command' && x.field !== '#' && x.field !== 'checkbox');
     // Tính toán vị trí đầu tiên và cuối cùng của các cột cố định
     const lastObjWidthFixLeft = Math.max(...Object.keys(objWidthFixLeft).map(Number), 0);
     const fisrtObjWidthFixRight = Math.min(...Object.keys(objWidthFixRight).map(Number), flat.length);
     // Tính toán vị trí đầu tiên và cuối cùng của các cột có thể sửa
     const indexFirstEdit = flat.findIndex((item) => item.editEnable && item.visible !== false && !item.disabledCondition);
-    const indexLastEdit = flat
-        .map((item, idx) => item.editEnable && item.visible !== false && !item.disabledCondition
-        ? idx
-        : -1)
-        .reduce((acc, val) => (val > acc ? val : acc), -1);
+    const indexLastEdit = flat.map((item, idx) => (item.editEnable && item.visible !== false && !item.disabledCondition ? idx : -1)).reduce((acc, val) => (val > acc ? val : acc), -1);
     return {
         levels,
         flat,
@@ -20097,7 +20072,7 @@ const calculateTableStructure = (columns, settingColumns, groupColumns) => {
         objHeaderWidthFixRight,
         objHeaderWidthFixLeft,
         indexFirstEdit,
-        indexLastEdit,
+        indexLastEdit
     };
 };
 /**
@@ -20107,10 +20082,7 @@ const CheckRowMatch = (row, filters, keyword, searchKeys) => {
     const isFilterMatch = filters.every((filter) => {
         const { key, value, ope } = filter;
         const rowValue = row[key];
-        if (rowValue === undefined ||
-            rowValue === null ||
-            value === undefined ||
-            value === null) {
+        if (rowValue === undefined || rowValue === null || value === undefined || value === null) {
             return false;
         }
         const valStr = String(rowValue).toLowerCase();
@@ -20143,10 +20115,7 @@ const CheckRowMatch = (row, filters, keyword, searchKeys) => {
     const isSearchMatch = !keyword ||
         searchKeys.some((key) => {
             const val = row[key];
-            return val
-                ?.toString()
-                .toLowerCase()
-                .includes(keyword.trim().toLowerCase());
+            return val?.toString().toLowerCase().includes(keyword.trim().toLowerCase());
         });
     return isFilterMatch && isSearchMatch;
 };
@@ -20159,6 +20128,20 @@ const getMaxExpandedLevel = (items, fieldChildren = 'children', level = 0) => {
     });
     return max;
 };
+const findItemInTree = (items, filter, keyFilter = 'value', keyChildren = 'children') => {
+    for (let index = 0; index < items.length; index++) {
+        const item = items[index];
+        if (item[keyFilter] === filter) {
+            return { ...item };
+        }
+        else if (item[keyChildren]?.length > 0) {
+            const itemFilter = findItemInTree(item[keyChildren], filter, keyFilter, keyChildren);
+            if (itemFilter) {
+                return itemFilter;
+            }
+        }
+    }
+};
 
 const defaultMaxHeight$1 = 250;
 const SelectTable = React$5.forwardRef((props, ref) => {
@@ -39059,7 +39042,7 @@ const HeaderTableCol = (props) => {
                     left: col.fixedType === 'left' ? objHeaderWidthFixLeft[`${indexParent}-${indexCol ?? 0}`] : undefined,
                     right: col.fixedType === 'right' ? objHeaderWidthFixRight[`${indexParent}-${indexCol ?? 0}`] : undefined
                 }, children: jsxRuntime.jsxs("div", { style: { justifyContent: col.textAlign === 'center' ? 'center' : 'space-between' }, onClick: () => {
-                        if (!allowSorting || col.columns?.length) {
+                        if (!allowSorting || col.columns?.length || col.field === 'checkbox') {
                             return;
                         }
                         if (order) {
@@ -39857,12 +39840,12 @@ const ToolbarBottom = ({ handleAdd, handleDuplicate, handleInsertBefore, handleI
     return (jsxRuntime.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: jsxRuntime.jsxs("div", { className: "r-toolbar-items", children: [jsxRuntime.jsxs("div", { className: "r-toolbar-left", children: [jsxRuntime.jsxs("div", { className: classNames$1('r-toolbar-item d-flex', { 'd-none': editDisable || addDisable }), "aria-disabled": "false", children: [jsxRuntime.jsx(Button$1$1, { color: "success", outline: true, onClick: () => handleAdd(1), className: "d-flex", children: t('Add item') }), !!buttonSetting?.disableAddMulti && (jsxRuntime.jsxs(UncontrolledDropdown, { className: "nav-item", children: [jsxRuntime.jsx(DropdownToggle$1, { tag: "div", className: "me-0 d-flex", children: jsxRuntime.jsx(Button$1$1, { type: "button", color: "success", outline: true, style: { marginLeft: -1 }, className: "px-25", children: jsxRuntime.jsx("svg", { fill: "#28c76f", height: "15", width: "20", viewBox: "0 0 20 20", children: jsxRuntime.jsx("path", { d: "M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z" }) }) }) }), jsxRuntime.jsxs(DropdownMenu$1, { className: "formula-dropdown icon-dropdown p-0", children: [jsxRuntime.jsx(DropdownItem$1, { className: "py-25", tag: "div", onClick: () => handleAdd(10), children: "10 h\u00E0ng" }), jsxRuntime.jsx(DropdownItem$1, { className: "py-25", tag: "div", onClick: () => handleAdd(20), children: "20 h\u00E0ng" }), jsxRuntime.jsx(DropdownItem$1, { className: "py-25", tag: "div", onClick: () => handleAdd(30), children: "30 h\u00E0ng" }), jsxRuntime.jsx(DropdownItem$1, { className: "py-25", tag: "div", onClick: () => handleAdd(40), children: "40 h\u00E0ng" }), jsxRuntime.jsx(DropdownItem$1, { className: "py-25", tag: "div", onClick: () => handleAdd(50), children: "50 h\u00E0ng" }), jsxRuntime.jsx(DropdownItem$1, { className: "py-25", tag: "div", onClick: () => handleAdd(100), children: "100 h\u00E0ng" }), jsxRuntime.jsx(DropdownItem$1, { className: "py-25", tag: "div", onClick: () => handleAdd(1000), children: "1000 h\u00E0ng" })] })] }))] }), (focusRow ?? -1) > -1 ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: classNames$1('r-toolbar-item', { 'd-none': editDisable || addDisable || buttonSetting?.duplicateDisable }), "aria-disabled": "false", children: jsxRuntime.jsx(Button$1$1, { color: "success", outline: true, onClick: () => {
                                             handleDuplicate();
                                         }, className: "d-flex", children: t('Duplicate') }) }), jsxRuntime.jsx("div", { className: classNames$1('r-toolbar-item', { 'd-none': editDisable || addDisable || buttonSetting?.insertBeforeDisable }), "aria-disabled": "false", children: jsxRuntime.jsx(Button$1$1, { color: "success", outline: true, onClick: handleInsertBefore, className: "d-flex", children: t('Insert item before') }) }), jsxRuntime.jsx("div", { className: classNames$1('r-toolbar-item', { 'd-none': editDisable || addDisable || buttonSetting?.insertAfterDisable }), "aria-disabled": "false", children: jsxRuntime.jsx(Button$1$1, { color: "success", outline: true, onClick: handleInsertAfter, className: "d-flex", children: t('Insert item after') }) })] })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: " " })), jsxRuntime.jsx("div", { className: classNames$1('r-toolbar-item', { 'd-none': editDisable || buttonSetting?.deleteAllDisable }), "aria-disabled": "false", children: jsxRuntime.jsx(Button$1$1, { color: "primary", outline: true, onClick: handleDeleteAll, className: "d-flex", children: t('Delete all item') }) }), toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
-                            return item.align === 'left' ? (jsxRuntime.jsx("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-left-${index}`)) : ('');
+                            return (item.align === 'left' && (jsxRuntime.jsx("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-left-${index}`)));
                         })] }), jsxRuntime.jsx("div", { className: "r-toolbar-center", children: toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
-                        return item.align === 'center' ? (jsxRuntime.jsx("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-center-${index}`)) : ('');
+                        return (item.align === 'center' && (jsxRuntime.jsx("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-center-${index}`)));
                     }) }), jsxRuntime.jsxs("div", { className: "r-toolbar-right", children: [toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
-                            return item.align === 'right' ? (jsxRuntime.jsx("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-right-${index}`)) : ('');
-                        }), jsxRuntime.jsx("div", { className: classNames$1('r-toolbar-item me-25'), "aria-disabled": "false", children: jsxRuntime.jsx(SvgSettings, { className: "text-primary cursor-pointer", onClick: () => setOpenPopupSetupColumn(true) }) }), jsxRuntime.jsx("div", { className: classNames$1('r-toolbar-item me-25', { 'd-none': editDisable || addDisable }), "aria-disabled": "false", children: jsxRuntime.jsxs(UncontrolledDropdown, { className: "dropdown-user nav-item", children: [jsxRuntime.jsx(DropdownToggle$1, { tag: "div", color: "primary", onClick: (e) => e.preventDefault(), children: jsxRuntime.jsx(SvgInfo, { className: "cursor-pointer text-primary" }) }), jsxRuntime.jsx(DropdownMenu$1, { className: "formula-dropdown icon-dropdown", children: jsxRuntime.jsxs("ul", { className: "mb-0 pe-50", children: [jsxRuntime.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" }), jsxRuntime.jsx("li", { style: { fontSize: 13 }, children: "Ch\u1ECDn \u00F4 v\u00E0 Ctrl + V \u0111\u1EC3 d\u00E1n th\u00F4ng tin t\u1EEB excel" }), jsxRuntime.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" }), jsxRuntime.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" }), jsxRuntime.jsx("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n Ctrl ho\u1EB7c Alt + Shift + \u2193 \u0111\u1EC3 sao ch\u00E9p d\u1EEF li\u1EC7u \u00F4 cho c\u00E1c d\u00F2ng d\u01B0\u1EDBi" }), jsxRuntime.jsx("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n Ctrl ho\u1EB7c Alt + Shift + \u2191 \u0111\u1EC3 sao ch\u00E9p d\u1EEF li\u1EC7u \u00F4 cho c\u00E1c d\u00F2ng tr\u00EAn" })] }) })] }) })] })] }) }));
+                            return (item.align === 'right' && (jsxRuntime.jsx("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-right-${index}`)));
+                        }), !toolbarSetting?.hiddenSetting && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: classNames$1('r-toolbar-item me-25'), "aria-disabled": "false", children: jsxRuntime.jsx(SvgSettings, { className: "text-primary cursor-pointer", onClick: () => setOpenPopupSetupColumn(true) }) }), jsxRuntime.jsx("div", { className: classNames$1('r-toolbar-item me-25', { 'd-none': editDisable || addDisable }), "aria-disabled": "false", children: jsxRuntime.jsxs(UncontrolledDropdown, { className: "dropdown-user nav-item", children: [jsxRuntime.jsx(DropdownToggle$1, { tag: "div", color: "primary", onClick: (e) => e.preventDefault(), children: jsxRuntime.jsx(SvgInfo, { className: "cursor-pointer text-primary" }) }), jsxRuntime.jsx(DropdownMenu$1, { className: "formula-dropdown icon-dropdown", children: jsxRuntime.jsxs("ul", { className: "mb-0 pe-50", children: [jsxRuntime.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" }), jsxRuntime.jsx("li", { style: { fontSize: 13 }, children: "Ch\u1ECDn \u00F4 v\u00E0 Ctrl + V \u0111\u1EC3 d\u00E1n th\u00F4ng tin t\u1EEB excel" }), jsxRuntime.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" }), jsxRuntime.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" }), jsxRuntime.jsx("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n Ctrl ho\u1EB7c Alt + Shift + \u2193 \u0111\u1EC3 sao ch\u00E9p d\u1EEF li\u1EC7u \u00F4 cho c\u00E1c d\u00F2ng d\u01B0\u1EDBi" }), jsxRuntime.jsx("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n Ctrl ho\u1EB7c Alt + Shift + \u2191 \u0111\u1EC3 sao ch\u00E9p d\u1EEF li\u1EC7u \u00F4 cho c\u00E1c d\u00F2ng tr\u00EAn" })] }) })] }) })] }))] })] }) }));
 };
 
 const RenderToolbarTop = ({ toolbarTopOption }) => {
@@ -40071,7 +40054,13 @@ const TableEdit = React$5.forwardRef((props, ref) => {
             return;
         }
         let objCallback;
-        const ele = column.selectSettings?.options?.find((item) => item[column.selectSettings?.fieldValue ?? 'value'] === copyData);
+        let ele;
+        if (column.type === 'select') {
+            ele = column.selectSettings?.options?.find((item) => item[column.selectSettings?.fieldValue ?? 'value'] === copyData);
+        }
+        else if (column.type === 'selectTree') {
+            ele = findItemInTree(column.selectSettings?.options ?? [], copyData, column.selectSettings?.fieldValue ?? 'value');
+        }
         if (ele) {
             objCallback = ele;
         }
@@ -68742,7 +68731,7 @@ const UnExpandAllIcon = ({ className, color = '#7F7F7F', size = 24, onClick, sty
 };
 
 const RenderContentCol = (props) => {
-    const { col, indexCol, indexRow, isSelected, row, zeroVisiable, formatSetting, idTable, fisrtObjWidthFixRight, lastObjWidthFixLeft, objWidthFixLeft, objWidthFixRight, selectedRows, selectEnable, setSelectedRows, fieldKey, isMulti } = props;
+    const { col, indexCol, indexRow, isSelected, row, zeroVisiable, formatSetting, idTable, fisrtObjWidthFixRight, lastObjWidthFixLeft, objWidthFixLeft, objWidthFixRight, selectedRows, setSelectedRows, handleCloseContext, handleDoubleClick, fieldKey, isMulti } = props;
     const cellId = `content-${idTable}-row${indexRow}col-${indexCol}`;
     const checkOverflow = () => {
         const element = document.getElementById(cellId);
@@ -68750,31 +68739,27 @@ const RenderContentCol = (props) => {
     };
     const RenderElement = () => {
         if (col.type === 'checkbox' || col.field === 'checkbox') {
-            return (jsxRuntime.jsx("div", { className: "r-rowcell-div cursor-pointer", style: { display: 'flex', justifyContent: col.textAlign === 'center' ? 'center' : col.textAlign === 'right' ? 'flex-end' : 'flex-start', alignItems: 'center' }, onClick: (e) => {
-                    console.log(isMulti);
-                    console.log(selectEnable);
-                    if (selectEnable) {
-                        const index = selectedRows?.findIndex((x) => x[fieldKey] === row[fieldKey]);
-                        if (index > -1) {
-                            if (isMulti) {
-                                selectedRows?.splice(index, 1);
-                                setSelectedRows([...selectedRows]);
-                            }
-                            else {
-                                setSelectedRows([]);
-                            }
+            return (jsxRuntime.jsx("div", { className: classNames$1('r-rowcell-div cursor-pointer', { 'r-active-cell': isSelected }), style: { display: 'flex', justifyContent: col.textAlign === 'center' ? 'center' : col.textAlign === 'right' ? 'flex-end' : 'flex-start', alignItems: 'center' }, onClick: (e) => {
+                    const index = selectedRows?.findIndex((x) => x[fieldKey] === row[fieldKey]);
+                    if (index > -1) {
+                        if (isMulti) {
+                            selectedRows?.splice(index, 1);
+                            setSelectedRows([...selectedRows]);
                         }
                         else {
-                            if (isMulti) {
-                                setSelectedRows([...selectedRows, row]);
-                            }
-                            else {
-                                setSelectedRows([row]);
-                            }
+                            setSelectedRows([]);
+                        }
+                    }
+                    else {
+                        if (isMulti) {
+                            setSelectedRows([...selectedRows, row]);
+                        }
+                        else {
+                            setSelectedRows([row]);
                         }
-                        e.stopPropagation();
                     }
-                }, children: jsxRuntime.jsx(Input$1, { checked: isSelected, type: "checkbox", className: "cursor-pointer", style: { textAlign: col.textAlign ?? 'center' } }) }));
+                    e.stopPropagation();
+                }, children: jsxRuntime.jsx(Input$1, { defaultChecked: isSelected, type: "checkbox", className: "cursor-pointer", style: { textAlign: col.textAlign ?? 'center' } }) }));
         }
         else {
             let value = row[col.field];
@@ -68799,9 +68784,13 @@ const RenderContentCol = (props) => {
             const prefix = isNegative ? formatSetting?.prefixNegative ?? '-' : '';
             const suffix = isNegative ? formatSetting?.suffixNegative ?? '' : '';
             const displayText = isNegative ? `${prefix}${value}${suffix}` : value ?? '';
-            return (jsxRuntime.jsxs("div", { className: classNames$1('r-rowcell-div'), style: {
+            return (jsxRuntime.jsxs("div", { className: classNames$1('r-rowcell-div cursor-pointer', { 'r-active-cell': isSelected }), style: {
                     fontWeight: row.sortOrder < 0 || row.sortOrder > 100000 || row.haveBoldType ? 600 : 400,
                     fontStyle: row.haveItalicType ? 'italic' : 'normal'
+                }, onDoubleClick: (e) => {
+                    e.preventDefault();
+                    handleCloseContext();
+                    handleDoubleClick?.(row, col);
                 }, children: [jsxRuntime.jsx("div", { className: "r-cell-text", style: {
                             display: 'flex',
                             justifyContent: col.textAlign === 'center' ? 'center' : col.textAlign === 'right' ? 'flex-end' : 'flex-start',
@@ -68820,24 +68809,22 @@ const RenderContentCol = (props) => {
                 right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined
             }, onClick: (e) => {
                 if (e.target.nodeName === 'DIV' || e.target.nodeName === 'TD') {
-                    if (selectEnable) {
-                        const index = selectedRows?.findIndex((x) => x[fieldKey] === row[fieldKey]);
-                        if (index > -1) {
-                            if (isMulti) {
-                                selectedRows?.splice(index, 1);
-                                setSelectedRows([...selectedRows]);
-                            }
-                            else {
-                                setSelectedRows([]);
-                            }
+                    const index = selectedRows?.findIndex((x) => x[fieldKey] === row[fieldKey]);
+                    if (index > -1) {
+                        if (isMulti) {
+                            selectedRows?.splice(index, 1);
+                            setSelectedRows([...selectedRows]);
                         }
                         else {
-                            if (isMulti) {
-                                setSelectedRows([...selectedRows, row]);
-                            }
-                            else {
-                                setSelectedRows([row]);
-                            }
+                            setSelectedRows([]);
+                        }
+                    }
+                    else {
+                        if (isMulti) {
+                            setSelectedRows([...selectedRows, row]);
+                        }
+                        else {
+                            setSelectedRows([row]);
                         }
                     }
                     e.stopPropagation();
@@ -68845,7 +68832,7 @@ const RenderContentCol = (props) => {
             }, children: RenderElement() }, `col-${indexRow}-${indexCol}`)) }));
 };
 
-const TableView = ({ idTable, dataSource, height = 400, columns, isMutil = false, isLoading, selectEnable, formatSetting, querySetting, pagingSetting, searchSetting, columnsAggregate, toolbarSetting, selectedItem, setSelectedItem, handleSelect, saveSettingColumn, resetDefaultColumns, settingColumns, headerComponent, groupSetting, zeroVisiable, isMulti, handleDoubleClick, contextMenuItems, handleContextMenuClick }) => {
+const TableView = ({ idTable, dataSource, height = 400, columns, isLoading, formatSetting, querySetting, pagingSetting, searchSetting, columnsAggregate, toolbarSetting, selectedItem, setSelectedItem, handleSelect, saveSettingColumn, resetDefaultColumns, settingColumns, headerComponent, groupSetting, zeroVisiable, isMulti, handleDoubleClick, contextMenuItems, handleContextMenuClick }) => {
     const { t } = reactI18next.useTranslation();
     const gridRef = React$5.useRef(null);
     const [openPopupSetupColumn, setOpenPopupSetupColumn] = React$5.useState(false);
@@ -69056,8 +69043,10 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isMutil = false
         }
     };
     React$5.useEffect(() => {
+        console.log(selectedRows);
+        console.log(isMulti);
         if (setSelectedItem) {
-            if (isMutil) {
+            if (isMulti) {
                 if (dataSource && selectedRows && selectedRows?.length !== selectedItem?.length) {
                     setSelectedItem([...selectedRows]);
                     if (handleSelect) {
@@ -69084,7 +69073,7 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isMutil = false
         }
     }, [selectedRows]);
     React$5.useEffect(() => {
-        if (!isMutil) {
+        if (!isMulti) {
             if (dataSource && selectedItem && selectedItem[fieldKey]) {
                 if (selectedRows?.length === 0 || selectedItem[fieldKey] !== selectedRows[0][fieldKey]) {
                     setSelectedRows([selectedItem]);
@@ -69150,14 +69139,10 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isMutil = false
                 }
                 else {
                     const isSelected = selectedRows?.some((x) => x[fieldKey] === row[fieldKey]);
-                    return (jsxRuntime.jsx("tr", { id: `row-content-${indexRow}`, "aria-rowindex": indexRow + 1, role: "row", className: classNames$1('r-row', { 'r-last-row': level === 0 && indexRow === viewData.length - 1 }), onDoubleClick: (e) => {
-                            e.preventDefault();
-                            handleCloseContext();
-                            handleDoubleClick?.(row);
-                        }, onContextMenu: (e) => {
+                    return (jsxRuntime.jsx("tr", { id: `row-content-${indexRow}`, "aria-rowindex": indexRow + 1, role: "row", className: classNames$1('r-row', { 'r-last-row': level === 0 && indexRow === viewData.length - 1 }), onContextMenu: (e) => {
                             e.preventDefault();
                             handleContextMenu(e, row);
-                        }, children: contentColumns.map((column, indexCol) => (jsxRuntime.jsx(RenderContentCol, { idTable: idTable, col: column, fieldKey: fieldKey, objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, fisrtObjWidthFixRight: fisrtObjWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, isMulti: isMutil ?? false, selectEnable: selectEnable ?? false, selectedRows: selectedRows, setSelectedRows: setSelectedRows, formatSetting: formatSetting, indexCol: indexCol, indexRow: indexRow, isSelected: isSelected, row: row, zeroVisiable: zeroVisiable }, indexCol))) }, `row-content-${indexRow}`));
+                        }, children: contentColumns.map((column, indexCol) => (jsxRuntime.jsx(RenderContentCol, { idTable: idTable, col: column, fieldKey: fieldKey, objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, fisrtObjWidthFixRight: fisrtObjWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, isMulti: isMulti, selectedRows: selectedRows, setSelectedRows: setSelectedRows, formatSetting: formatSetting, indexCol: indexCol, indexRow: indexRow, isSelected: isSelected, row: row, zeroVisiable: zeroVisiable, handleCloseContext: handleCloseContext, handleDoubleClick: handleDoubleClick }, indexCol))) }, `row-content-${indexRow}`));
                 }
             }) }));
     };
@@ -69185,7 +69170,7 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isMutil = false
         }
     }, [context]);
     return (jsxRuntime.jsxs("div", { className: "r-table-edit r-virtualized-table", children: [jsxRuntime.jsxs("div", { className: "r-grid", children: [toolbarSetting?.showTopToolbar && jsxRuntime.jsx(RenderToolbarTop, { toolbarTopOption: toolbarTopOption }), headerComponent && headerComponent(), jsxRuntime.jsxs("div", { ref: gridRef, className: "r-gridtable", style: { height: `${height ? `${height}px` : 'auto'}`, position: 'relative' }, children: [jsxRuntime.jsxs("table", { role: "presentation", style: { width: '100%' }, children: [jsxRuntime.jsx(RenderColGroup, { contentColumns: contentColumns }), jsxRuntime.jsx("thead", { className: "r-gridheader", role: "rowgroup", children: headerColumns.map((rowColumn, indexParent) => {
-                                            return (jsxRuntime.jsx("tr", { className: "r-row", role: "row", children: rowColumn.map((col, index) => (jsxRuntime.jsx(HeaderTableCol, { col: col, idTable: idTable ?? '', dataSource: dataSource, indexCol: index, indexParent: indexParent, isMulti: isMulti ?? false, objHeaderWidthFixLeft: objHeaderWidthFixLeft, objHeaderWidthFixRight: objHeaderWidthFixRight, selectEnable: selectEnable ?? false, selectedRows: selectedRows, setSelectedRows: setSelectedRows, container: gridRef, filterBy: filterBy, orderBy: orderBy, optionsFilter: querySetting?.optionsFilter, allowFiltering: querySetting?.allowFiltering, allowSorting: querySetting?.allowSorting, formatSetting: formatSetting, changeFilter: (val) => {
+                                            return (jsxRuntime.jsx("tr", { className: "r-row", role: "row", children: rowColumn.map((col, index) => (jsxRuntime.jsx(HeaderTableCol, { col: col, idTable: idTable ?? '', dataSource: dataSource, indexCol: index, indexParent: indexParent, isMulti: isMulti ?? false, objHeaderWidthFixLeft: objHeaderWidthFixLeft, objHeaderWidthFixRight: objHeaderWidthFixRight, selectEnable: true, selectedRows: selectedRows, setSelectedRows: setSelectedRows, container: gridRef, filterBy: filterBy, orderBy: orderBy, optionsFilter: querySetting?.optionsFilter, allowFiltering: querySetting?.allowFiltering, allowSorting: querySetting?.allowSorting, formatSetting: formatSetting, changeFilter: (val) => {
                                                         setFilterBy([...val]);
                                                         if (querySetting?.changeFilter) {
                                                             querySetting.changeFilter(val);
@@ -69243,6 +69228,7 @@ exports.calculateTableStructure = calculateTableStructure;
 exports.checkDecimalSeparator = checkDecimalSeparator;
 exports.checkThousandSeparator = checkThousandSeparator;
 exports["default"] = TableEdit;
+exports.findItemInTree = findItemInTree;
 exports.formartNumberic = formartNumberic;
 exports.formatDateTime = formatDateTime;
 exports.generateUUID = generateUUID;