react-table-edit 1.4.26 → 1.4.28

package/dist/index.js

@@ -19306,7 +19306,7 @@ const FindNodeByPath = (tree, path) => {
  * @param columns Mảng cấu trúc cây đại diện cho các cột của bảng
  * @returns {
  *   levels: IHeaderColumnTable[][]       // Các hàng header theo cấp
- *   flat: IColumnVirtualizedTable[]      // Danh sách cột phẳng
+ *   flat: IColumnTable[]      // Danh sách cột phẳng
  *   objWidthFixLeft: Record<number, number>      // Offset trái cho cột fixed left
  *   objWidthFixRight: Record<number, number>     // Offset phải cho cột fixed right
  *   lastObjWidthFixLeft: number          // Chỉ số cột cuối cùng fixed left
@@ -23568,7 +23568,7 @@ const SidebarSetColumn = (props) => {
                                         }) }) }), jsxRuntime.jsx("tbody", { className: 'r-gridcontent', children: dataSource?.map((row, indexRow) => {
                                         return (jsxRuntime.jsx("tr", { className: classNames$1('r-row', { 'last-row': indexRow === dataSource.length - 1 }, { 'fisrt-row': indexRow === 0 }), children: columns.map((col, indexCol) => {
                                                 let value = row[col.field];
-                                                if (col.editType === 'numeric' || (col.editTypeCondition && col.editTypeCondition(row) === 'numeric')) {
+                                                if (col.type === 'numeric' || (col.typeCondition && col.typeCondition(row) === 'numeric')) {
                                                     value = formartNumberic(row[col.field], ',', '.', col.numericSettings?.fraction, true) ?? 0;
                                                 }
                                                 return (jsxRuntime.jsx(React$5.Fragment, { children: col.visible !== false && jsxRuntime.jsx("td", { className: classNames$1(`r-rowcell fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'r-active': indexFocus === indexRow }), style: {
@@ -41904,7 +41904,7 @@ const HeaderTableCol$1 = (props) => {
 };
 const RenderFilterElement$1 = ({ filter, optionsFilter, formatSetting, filterBy, setOpenFilter, changeFilter, column }) => {
     const { t } = reactI18next.useTranslation();
-    const [operator, setOperator] = React$5.useState(filter?.ope ?? ((!column.filterType && column.editType === 'numeric') || column.filterType === 'select' ? 'equal' : 'contains'));
+    const [operator, setOperator] = React$5.useState(filter?.ope ?? ((!column.filterType && column.type === 'numeric') || column.filterType === 'select' ? 'equal' : 'contains'));
     const [valueFilter, setValueFilter] = React$5.useState(filter?.value ?? '');
     const RenderStringFilter = () => {
         const options = [
@@ -41969,7 +41969,7 @@ const RenderFilterElement$1 = ({ filter, optionsFilter, formatSetting, filterBy,
                 handleSave();
                 e.stopPropagation();
             }
-        }, children: [((!column.filterType && column.editType === 'numeric') || column.filterType === 'numeric') ? jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [RenderNumberFilter(), " "] }) : (column.filterType === 'select' ? jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [RenderSelectFilter(), " "] }) : RenderStringFilter()), jsxRuntime.jsxs("div", { className: 'd-flex justify-content-end', children: [jsxRuntime.jsx(Button$1, { color: 'primary', style: { borderRadius: 3 }, className: 'me-50 py-25 px-50 fw-bold', onClick: handleSave, children: t('Filter') }), jsxRuntime.jsx(Button$1, { className: 'py-25 px-50 fw-bold', color: 'white', style: { borderRadius: 3, borderWidth: 0 }, onClick: () => {
+        }, children: [((!column.filterType && column.type === 'numeric') || column.filterType === 'numeric') ? jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [RenderNumberFilter(), " "] }) : (column.filterType === 'select' ? jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [RenderSelectFilter(), " "] }) : RenderStringFilter()), jsxRuntime.jsxs("div", { className: 'd-flex justify-content-end', children: [jsxRuntime.jsx(Button$1, { color: 'primary', style: { borderRadius: 3 }, className: 'me-50 py-25 px-50 fw-bold', onClick: handleSave, children: t('Filter') }), jsxRuntime.jsx(Button$1, { className: 'py-25 px-50 fw-bold', color: 'white', style: { borderRadius: 3, borderWidth: 0 }, onClick: () => {
                             if (filterBy) {
                                 changeFilter(filterBy.filter((x) => x.key !== column.field));
                             }
@@ -42828,7 +42828,7 @@ const TableEdit = React$5.forwardRef((props, ref) => {
     }
     const RenderEditCell = (row, col, indexCol, indexRow) => {
         /*eslint-disable */
-        switch (col?.editTypeCondition ? col?.editTypeCondition(row) : col.editType) {
+        switch (col?.typeCondition ? col?.typeCondition(row) : col.type) {
             case 'date':
                 return (jsxRuntime.jsx(DateInput, { id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`, className: classNames$1('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;
@@ -43096,10 +43096,10 @@ const TableEdit = React$5.forwardRef((props, ref) => {
                     }
                 }
                 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 ((tableElement.current?.scrollTop ?? 0) > ((row - 1) % (pagingSetting?.pageSize ?? 10000)) * 34) {
+                        tableElement.current?.scrollTo({ behavior: 'smooth', top: ((row - 1) % (pagingSetting?.pageSize ?? 10000)) * 34 });
                     }
-                    else if (((tableElement.current?.clientHeight ?? 0) - (haveSum ? 30 : 0) - (headerColumns.length * 42)) < (((row % (pagingSetting?.pageSize ?? 1)) * 34) - (tableElement.current?.scrollTop ?? 0))) {
+                    else if (((tableElement.current?.clientHeight ?? 0) - (haveSum ? 30 : 0) - (headerColumns.length * 42)) < (((row % (pagingSetting?.pageSize ?? 10000)) * 34) - (tableElement.current?.scrollTop ?? 0))) {
                         tableElement.current?.scrollTo({ behavior: 'smooth', top: (tableElement.current?.scrollTop ?? 0) + 34 });
                     }
                 }
@@ -43241,7 +43241,7 @@ const TableEdit = React$5.forwardRef((props, ref) => {
                                 }
                             }
                             else {
-                                if (column.editType === 'date') {
+                                if (column.type === 'date') {
                                     const [day, month, year] = stringData.split('/');
                                     const date = new Date(`${year}-${month}-${day}`);
                                     if (!isNaN(date.getTime())) {
@@ -43259,7 +43259,7 @@ const TableEdit = React$5.forwardRef((props, ref) => {
                                         notificationError(t('PasteExcelIncorrectFormat', { index: (currenRowIndex + indexRow + 1), field: t(column.headerText ?? ''), value: stringData }));
                                     }
                                 }
-                                else if (column.editType === 'datetime') {
+                                else if (column.type === 'datetime') {
                                     const [datePart, timePart] = stringData.split(' ');
                                     const [day, month, year] = datePart.split('/');
                                     const [hour, minute] = timePart.split(':');
@@ -43279,7 +43279,7 @@ const TableEdit = React$5.forwardRef((props, ref) => {
                                         notificationError(t('PasteExcelIncorrectFormat', { index: (currenRowIndex + indexRow + 1), field: t(column.headerText ?? ''), value: stringData }));
                                     }
                                 }
-                                else if (column.editType === 'numeric') {
+                                else if (column.type === 'numeric') {
                                     const number = Number(stringData);
                                     if (!isNaN(number)) {
                                         if (column.onPaste) {
@@ -43296,7 +43296,7 @@ const TableEdit = React$5.forwardRef((props, ref) => {
                                         notificationError(t('PasteExcelIncorrectFormat', { index: (currenRowIndex + indexRow + 1), field: t(column.headerText ?? ''), value: stringData }));
                                     }
                                 }
-                                else if (column.editType === 'select') {
+                                else if (column.type === 'select') {
                                     if (column.selectSettings?.allowCreate) {
                                         if (column.onPaste) {
                                             dataRow[column.field] = column.onPaste(dataRow, stringData);
@@ -43483,16 +43483,16 @@ const TableEdit = React$5.forwardRef((props, ref) => {
         }
         else {
             let value = row[col.field];
-            if (col.editType === 'numeric' || (col.editTypeCondition && col.editTypeCondition(row) === 'numeric')) {
+            if (col.type === 'numeric' || (col.typeCondition && col.typeCondition(row) === 'numeric')) {
                 value = formartNumberic(row[col.field], formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false) ?? 0;
             }
-            else if (col.editType === 'date') {
+            else if (col.type === 'date') {
                 value = value ? formatDateTime(value, formatSetting?.dateFormat) : '';
             }
-            else if (col.editType === 'datetime') {
+            else if (col.type === '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 && (indexFocus === indexRow || col.type === '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 (jsxRuntime.jsx(React$5.Fragment, { children: col.visible !== false && jsxRuntime.jsx("td", { role: "gridcell", "aria-colindex": indexCol, className: classNames$1(`r-rowcell fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'fixed-last': (col.fixedType === 'left' && indexCol === lastObjWidthFixLeft) || (col.fixedType === 'right' && indexCol === fisrtObjWidthFixRight) }, { 'r-active': (isSelected && editDisable) || indexFocus === indexRow }), style: {
                         left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
@@ -43534,21 +43534,21 @@ const TableEdit = React$5.forwardRef((props, ref) => {
         if (typeDis === 2) {
             const value = col.template?.(row, indexRow) ?? '';
             if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
-                return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { id: `content-${idTable}-row${indexRow}col-${indexCol}`, className: "r-cell-text", children: value }), (!refreshRow && typeDis !== 2) && jsxRuntime.jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `content-${idTable}-row${indexRow}col-${indexCol}`, children: (col.editType === 'numeric' && Number(row[col.field]) < 0 ? jsxRuntime.jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${value}${formatSetting?.suffixNegative ?? ''}`] }) : value) })] }));
+                return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { id: `content-${idTable}-row${indexRow}col-${indexCol}`, className: "r-cell-text", children: value }), (!refreshRow && typeDis !== 2) && jsxRuntime.jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `content-${idTable}-row${indexRow}col-${indexCol}`, children: (col.type === 'numeric' && Number(row[col.field]) < 0 ? jsxRuntime.jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${value}${formatSetting?.suffixNegative ?? ''}`] }) : value) })] }));
             }
             else {
                 return value;
             }
         }
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { id: `content-${idTable}-row${indexRow}col-${indexCol}`, className: "r-cell-text", children: (col.editType === 'numeric' && Number(row[col.field]) < 0 ? jsxRuntime.jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${value}${formatSetting?.suffixNegative ?? ''}`] }) : value) }), (!(typeDis === 1 && !refreshRow) && typeDis !== 2) && jsxRuntime.jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `content-${idTable}-row${indexRow}col-${indexCol}`, children: (col.editType === 'numeric' && Number(row[col.field]) < 0 ? jsxRuntime.jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${value}${formatSetting?.suffixNegative ?? ''}`] }) : value) })] }));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { id: `content-${idTable}-row${indexRow}col-${indexCol}`, className: "r-cell-text", children: (col.type === 'numeric' && Number(row[col.field]) < 0 ? jsxRuntime.jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${value}${formatSetting?.suffixNegative ?? ''}`] }) : value) }), (!(typeDis === 1 && !refreshRow) && typeDis !== 2) && jsxRuntime.jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `content-${idTable}-row${indexRow}col-${indexCol}`, children: (col.type === 'numeric' && Number(row[col.field]) < 0 ? jsxRuntime.jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${value}${formatSetting?.suffixNegative ?? ''}`] }) : value) })] }));
     };
     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;
+        const sumValue = (col.haveSum === true && col.type === "numeric") ? dataSource.reduce(function (accumulator, currentValue) { return (Number(accumulator ?? 0) + Number(currentValue[col.field] ?? 0)); }, 0) : 0;
         return (jsxRuntime.jsx(React$5.Fragment, { children: (col.visible !== false) && jsxRuntime.jsx("td", { className: classNames$1(`p-0 px-50 r-footer fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }), style: {
                     left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
                     right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined,
                     textAlign: col.textAlign ? col.textAlign : 'left'
-                }, children: jsxRuntime.jsxs("div", { className: "r-footer-div", children: [col.haveSum === true && col.editType === "numeric" && (Number(sumValue) >= 0) && jsxRuntime.jsx(jsxRuntime.Fragment, { children: formartNumberic(sumValue, formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false) }), col.haveSum === true && col.editType === "numeric" && (Number(sumValue) < 0) && jsxRuntime.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}`));
+                }, children: jsxRuntime.jsxs("div", { className: "r-footer-div", children: [col.haveSum === true && col.type === "numeric" && (Number(sumValue) >= 0) && jsxRuntime.jsx(jsxRuntime.Fragment, { children: formartNumberic(sumValue, formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false) }), col.haveSum === true && col.type === "numeric" && (Number(sumValue) < 0) && jsxRuntime.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}`));
     };
     /**
      * Kiểm tra row có thỏa mãn tất cả filter và chứa từ khóa tìm kiếm hay không
@@ -46288,7 +46288,7 @@ const ExportExcelComponent = ({ openModal, typeModal, handleModal, windowSize, d
                                                     isPrimarykey: true
                                                 },
                                                 {
-                                                    editType: 'text',
+                                                    type: 'text',
                                                     field: "headerText",
                                                     headerText: 'Column name',
                                                     template: (value) => { return t(value.headerText); },
@@ -65377,7 +65377,7 @@ const TabMergeImportExcel = (props) => {
                     {
                         headerText: 'Required Information',
                         field: 'isRequired',
-                        editType: 'checkbox',
+                        type: 'checkbox',
                         editEnable: true,
                         textAlign: 'center',
                         template: (data) => {
@@ -65400,7 +65400,7 @@ const TabMergeImportExcel = (props) => {
                     {
                         headerText: 'Columns on data files',
                         field: 'column',
-                        editType: 'select',
+                        type: 'select',
                         editEnable: true,
                         selectSettings: {
                             options: optionField
@@ -65651,13 +65651,13 @@ const RenderFilterElement = ({ filter, optionsFilter, formatSetting, filterBy, s
 const RenderContentCol = (props) => {
     const { col, indexCol, indexRow, isSelected, row, formatSetting, idTable, fisrtObjWidthFixRight, lastObjWidthFixLeft, objWidthFixLeft, objWidthFixRight, selectedRows, selectEnable, setSelectedRows, handleCommandClick, fieldKey, isMulti } = props;
     const RenderElement = () => {
-        if (col.type === 'command') {
+        if (col.type === 'command' && !col.field) {
             return jsxRuntime.jsx("div", { className: "r-rowcell-div command", children: jsxRuntime.jsx(CommandElement, { commandItems: col.commandItems ?? [], handleCommandClick: handleCommandClick, indexRow: indexRow, rowData: row }) });
         }
-        else if (col.type === '#') {
+        else if (col.type === '#' && !col.field) {
             jsxRuntime.jsx("div", { className: "r-rowcell-div", children: indexRow + 1 });
         }
-        else if (col.type === 'checkbox') {
+        else if (col.type === 'checkbox' && !col.field) {
             return (jsxRuntime.jsx("div", { className: "r-rowcell-div cursor-pointer", style: { alignItems: 'center' }, onClick: (e) => {
                     if (selectEnable) {
                         const index = selectedRows?.findIndex((x) => x[fieldKey] === row[fieldKey]);
@@ -65731,7 +65731,7 @@ const RenderContentCol = (props) => {
         }, children: RenderElement() }, `col-${indexRow}-${indexCol}`));
 };
 
-const VirtualTable = ({ idTable, dataSource, rowHeight = 33, height = 400, columns, isMutil, isLoading, selectEnable, formatSetting, commandClick, allowFilter, allowOrder, setColumns, pagingSetting, changeFilter, changeOrder, searchSetting, columnsAggregate, toolbarSetting, optionsFilter }) => {
+const TableView = ({ idTable, dataSource, rowHeight = 33, height = 400, columns, isMutil = false, isLoading, selectEnable, formatSetting, commandClick, allowFilter, allowOrder, setColumns, pagingSetting, changeFilter, changeOrder, searchSetting, columnsAggregate, toolbarSetting, optionsFilter, selectedItem, setSelectedItem, handleSelect }) => {
     const gridRef = React$5.useRef(null);
     const [startIndex, setStartIndex] = React$5.useState(0);
     const [selectedRows, setSelectedRows] = React$5.useState([]);
@@ -65744,7 +65744,78 @@ const VirtualTable = ({ idTable, dataSource, rowHeight = 33, height = 400, colum
     const buffer = 10; // số dòng dự phòng phía trên và dưới
     const adjustedStartIndex = Math.max(startIndex - buffer, 0);
     const adjustedEndIndex = Math.min(startIndex + visibleRowCount + buffer, dataSource.length);
-    const visibleData = dataSource.slice(adjustedStartIndex, adjustedEndIndex);
+    const visibleData = React$5.useMemo(() => {
+        if (!dataSource || dataSource.length === 0) {
+            return [];
+        }
+        let datas = dataSource;
+        if (searchTerm) {
+            datas = datas.filter((row) => {
+                return searchSetting?.keyField?.some((key) => {
+                    return row[key]?.toString().toLowerCase().includes(searchTerm.trim().toLowerCase());
+                });
+            });
+        }
+        if (filterBy && filterBy.length > 0) {
+            datas = datas.filter((row) => {
+                return filterBy.every((filter) => {
+                    const { key, value, ope } = filter;
+                    const rowValue = row[key];
+                    if (rowValue === undefined || rowValue === null || value === undefined || value === null) {
+                        return false;
+                    }
+                    const valStr = String(rowValue).toLowerCase();
+                    const filterStr = String(value).toLowerCase();
+                    /*eslint-disable*/
+                    switch (ope) {
+                        case 'startswith':
+                            return valStr.startsWith(filterStr);
+                        case 'endswith':
+                            return valStr.endsWith(filterStr);
+                        case 'contains':
+                            return valStr.includes(filterStr);
+                        case 'equal':
+                            return rowValue == value;
+                        case 'notequal':
+                            return rowValue != value;
+                        case 'greaterthan':
+                            return rowValue > value;
+                        case 'greaterthanorequal':
+                            return rowValue >= value;
+                        case 'lessthan':
+                            return rowValue < value;
+                        case 'lessthanorequal':
+                            return rowValue <= value;
+                        default:
+                            return false;
+                    }
+                    /*eslint-enable*/
+                });
+            });
+        }
+        if (orderBy && orderBy.length > 0) {
+            datas = datas.sort((a, b) => {
+                for (const order of orderBy) {
+                    const { key, direction } = order;
+                    const aValue = a[key];
+                    const bValue = b[key];
+                    if (aValue < bValue) {
+                        return direction === 'asc' ? -1 : 1;
+                    }
+                    if (aValue > bValue) {
+                        return direction === 'asc' ? 1 : -1;
+                    }
+                }
+                return 0;
+            });
+        }
+        if (pagingSetting?.allowPaging && pagingSetting?.currentPage && pagingSetting?.pageSize && pagingSetting.pagingClient) {
+            const start = (pagingSetting.currentPage - 1) * pagingSetting.pageSize;
+            const end = start + pagingSetting.pageSize;
+            datas = datas.slice(start, end);
+        }
+        return datas.slice(adjustedStartIndex, adjustedEndIndex);
+    }, [searchTerm, filterBy]);
     const { t } = reactI18next.useTranslation();
     const { levels: headerColumns, flat: contentColumns, flatVisble, objWidthFixLeft, objWidthFixRight, lastObjWidthFixLeft, fisrtObjWidthFixRight } = React$5.useMemo(() => calculateTableStructure(columns), [columns]);
     const scrollTimeoutRef = React$5.useRef(null);
@@ -65817,6 +65888,51 @@ const VirtualTable = ({ idTable, dataSource, rowHeight = 33, height = 400, colum
             }
         }
     };
+    React$5.useEffect(() => {
+        if (setSelectedItem) {
+            if (isMutil) {
+                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]);
+    React$5.useEffect(() => {
+        if (!isMutil) {
+            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]);
     return (jsxRuntime.jsxs("div", { className: "react-table-edit r-virtualized-table", children: [jsxRuntime.jsxs("div", { className: 'r-grid', children: [toolbarSetting?.showTopToolbar && jsxRuntime.jsx(RenderToolbarTop, { toolbarTopOption: toolbarTopOption }), jsxRuntime.jsxs("div", { ref: gridRef, className: "r-gridtable", onScroll: handleScroll, style: { height: `${height ? `${height}px` : 'auto'}` }, children: [jsxRuntime.jsxs("table", { role: "presentation", style: { width: '100%' }, children: [jsxRuntime.jsx(RenderColGroup, { contentColumns: flatVisble }), jsxRuntime.jsx("thead", { className: 'r-gridheader', role: "rowgroup", children: headerColumns.map((rowColumn, indexParent) => (jsxRuntime.jsx("tr", { className: "r-row", role: "row", children: rowColumn.map((column, indexColumn) => (jsxRuntime.jsx(HeaderTableCol, { idTable: idTable, col: column, dataSource: dataSource, indexCol: indexColumn, indexParent: indexParent, isMulti: isMutil ?? false, selectEnable: selectEnable ?? false, selectedRows: selectedRows, setSelectedRows: setSelectedRows, columns: contentColumns, setColumns: setColumns, objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, fisrtObjWidthFixRight: fisrtObjWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, orderBy: orderBy, allowFilter: allowFilter, allowOrder: allowOrder, filterBy: filterBy, optionsFilter: optionsFilter, changeFilter: (val) => {
                                                     setFilterBy([...val]);
                                                     if (changeFilter) {
@@ -65851,8 +65967,8 @@ exports.ImportExcelComponent = ImportExcelComponent;
 exports.InputStyleComponent = InputStyleComponent;
 exports.SelectTable = SelectTable;
 exports.SelectTableTree = SelectTableTree;
+exports.TableView = TableView;
 exports.TabsMenuComponent = TabsMenuComponent;
-exports.VirtualTable = VirtualTable;
 exports.Wizard = Wizard;
 exports.calculateTableStructure = calculateTableStructure;
 exports.checkDecimalSeparator = checkDecimalSeparator;