react-table-edit 1.4.27 → 1.4.29

package/dist/index.mjs

@@ -19278,7 +19278,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
@@ -23540,7 +23540,7 @@ const SidebarSetColumn = (props) => {
                                         }) }) }), jsx("tbody", { className: 'r-gridcontent', children: dataSource?.map((row, indexRow) => {
                                         return (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 (jsx(Fragment, { children: col.visible !== false && jsx("td", { className: classNames$1(`r-rowcell fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'r-active': indexFocus === indexRow }), style: {
@@ -41876,7 +41876,7 @@ const HeaderTableCol$1 = (props) => {
 };
 const RenderFilterElement$1 = ({ filter, optionsFilter, formatSetting, filterBy, setOpenFilter, changeFilter, column }) => {
     const { t } = useTranslation();
-    const [operator, setOperator] = useState(filter?.ope ?? ((!column.filterType && column.editType === 'numeric') || column.filterType === 'select' ? 'equal' : 'contains'));
+    const [operator, setOperator] = useState(filter?.ope ?? ((!column.filterType && column.type === 'numeric') || column.filterType === 'select' ? 'equal' : 'contains'));
     const [valueFilter, setValueFilter] = useState(filter?.value ?? '');
     const RenderStringFilter = () => {
         const options = [
@@ -41941,7 +41941,7 @@ const RenderFilterElement$1 = ({ filter, optionsFilter, formatSetting, filterBy,
                 handleSave();
                 e.stopPropagation();
             }
-        }, children: [((!column.filterType && column.editType === 'numeric') || column.filterType === 'numeric') ? jsxs(Fragment$1, { children: [RenderNumberFilter(), " "] }) : (column.filterType === 'select' ? jsxs(Fragment$1, { children: [RenderSelectFilter(), " "] }) : RenderStringFilter()), jsxs("div", { className: 'd-flex justify-content-end', children: [jsx(Button$1, { color: 'primary', style: { borderRadius: 3 }, className: 'me-50 py-25 px-50 fw-bold', onClick: handleSave, children: t('Filter') }), 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') ? jsxs(Fragment$1, { children: [RenderNumberFilter(), " "] }) : (column.filterType === 'select' ? jsxs(Fragment$1, { children: [RenderSelectFilter(), " "] }) : RenderStringFilter()), jsxs("div", { className: 'd-flex justify-content-end', children: [jsx(Button$1, { color: 'primary', style: { borderRadius: 3 }, className: 'me-50 py-25 px-50 fw-bold', onClick: handleSave, children: t('Filter') }), 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));
                             }
@@ -42800,7 +42800,7 @@ const TableEdit = 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 (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;
@@ -43213,7 +43213,7 @@ const TableEdit = 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())) {
@@ -43231,7 +43231,7 @@ const TableEdit = 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(':');
@@ -43251,7 +43251,7 @@ const TableEdit = 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) {
@@ -43268,7 +43268,7 @@ const TableEdit = 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);
@@ -43455,16 +43455,16 @@ const TableEdit = 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 (jsx(Fragment, { children: col.visible !== false && 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,
@@ -43506,21 +43506,21 @@ const TableEdit = forwardRef((props, ref) => {
         if (typeDis === 2) {
             const value = col.template?.(row, indexRow) ?? '';
             if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
-                return (jsxs(Fragment$1, { children: [jsx("div", { id: `content-${idTable}-row${indexRow}col-${indexCol}`, className: "r-cell-text", children: value }), (!refreshRow && typeDis !== 2) && jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `content-${idTable}-row${indexRow}col-${indexCol}`, children: (col.editType === 'numeric' && Number(row[col.field]) < 0 ? jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${value}${formatSetting?.suffixNegative ?? ''}`] }) : value) })] }));
+                return (jsxs(Fragment$1, { children: [jsx("div", { id: `content-${idTable}-row${indexRow}col-${indexCol}`, className: "r-cell-text", children: value }), (!refreshRow && typeDis !== 2) && jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `content-${idTable}-row${indexRow}col-${indexCol}`, children: (col.type === 'numeric' && Number(row[col.field]) < 0 ? jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${value}${formatSetting?.suffixNegative ?? ''}`] }) : value) })] }));
             }
             else {
                 return value;
             }
         }
-        return (jsxs(Fragment$1, { children: [jsx("div", { id: `content-${idTable}-row${indexRow}col-${indexCol}`, className: "r-cell-text", children: (col.editType === 'numeric' && Number(row[col.field]) < 0 ? jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${value}${formatSetting?.suffixNegative ?? ''}`] }) : value) }), (!(typeDis === 1 && !refreshRow) && typeDis !== 2) && jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `content-${idTable}-row${indexRow}col-${indexCol}`, children: (col.editType === 'numeric' && Number(row[col.field]) < 0 ? jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${value}${formatSetting?.suffixNegative ?? ''}`] }) : value) })] }));
+        return (jsxs(Fragment$1, { children: [jsx("div", { id: `content-${idTable}-row${indexRow}col-${indexCol}`, className: "r-cell-text", children: (col.type === 'numeric' && Number(row[col.field]) < 0 ? jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${value}${formatSetting?.suffixNegative ?? ''}`] }) : value) }), (!(typeDis === 1 && !refreshRow) && typeDis !== 2) && jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `content-${idTable}-row${indexRow}col-${indexCol}`, children: (col.type === 'numeric' && Number(row[col.field]) < 0 ? 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 (jsx(Fragment, { children: (col.visible !== false) && 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: 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}`));
+                }, children: jsxs("div", { className: "r-footer-div", children: [col.haveSum === true && col.type === "numeric" && (Number(sumValue) >= 0) && jsx(Fragment$1, { children: formartNumberic(sumValue, formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false) }), col.haveSum === true && col.type === "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}`));
     };
     /**
      * 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
@@ -46260,7 +46260,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); },
@@ -65349,7 +65349,7 @@ const TabMergeImportExcel = (props) => {
                     {
                         headerText: 'Required Information',
                         field: 'isRequired',
-                        editType: 'checkbox',
+                        type: 'checkbox',
                         editEnable: true,
                         textAlign: 'center',
                         template: (data) => {
@@ -65372,7 +65372,7 @@ const TabMergeImportExcel = (props) => {
                     {
                         headerText: 'Columns on data files',
                         field: 'column',
-                        editType: 'select',
+                        type: 'select',
                         editEnable: true,
                         selectSettings: {
                             options: optionField
@@ -65526,7 +65526,7 @@ const HeaderTableCol = (props) => {
                             orderBy.push({ direction: 'asc', key: col.field });
                             changeOrder(orderBy);
                         }
-                    }, className: classNames$1('r-headercell-div', { 'cursor-pointer': allowOrder }), children: [col.type === 'checkbox' && (jsx(Input$1, { checked: !!(totalCount > 0 && selectedRows?.length >= totalCount), type: "checkbox", className: classNames$1('cursor-pointer', { 'd-none': !isMulti }), style: { textAlign: col.textAlign ?? 'left', marginTop: 6 }, onChange: (e) => {
+                    }, className: classNames$1('r-headercell-div', { 'cursor-pointer': allowOrder }), children: [(col.type === 'checkbox' && !col.field) && (jsx(Input$1, { checked: !!(totalCount > 0 && selectedRows?.length >= totalCount), type: "checkbox", className: classNames$1('cursor-pointer', { 'd-none': !isMulti }), style: { textAlign: col.textAlign ?? 'left', marginTop: 6 }, onChange: (e) => {
                                 if (selectEnable) {
                                     if (e.target.checked) {
                                         setSelectedRows(dataSource.map((item) => { return item; }));
@@ -65609,7 +65609,9 @@ const RenderFilterElement = ({ filter, optionsFilter, formatSetting, filterBy, s
     };
     return (jsxs("div", { className: 'r-filter-popup', onKeyDown: (e) => {
             if (e.code === 'Enter' || e.code === 'NumpadEnter') {
-                handleSave();
+                setTimeout(() => {
+                    handleSave();
+                }, 100);
                 e.stopPropagation();
             }
         }, children: [((!column.filterType && column.type === 'numeric') || column.filterType === 'numeric') ? jsxs(Fragment$1, { children: [RenderNumberFilter(), " "] }) : (column.filterType === 'select' ? jsxs(Fragment$1, { children: [RenderSelectFilter(), " "] }) : RenderStringFilter()), jsxs("div", { className: 'd-flex justify-content-end', children: [jsx(Button$1, { color: 'primary', style: { borderRadius: 3 }, className: 'me-50 py-25 px-50 fw-bold', onClick: handleSave, children: t('Filter') }), jsx(Button$1, { className: 'py-25 px-50  fw-bold', outline: true, style: { borderRadius: 3 }, onClick: () => {
@@ -65623,13 +65625,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 jsx("div", { className: "r-rowcell-div command", children: jsx(CommandElement, { commandItems: col.commandItems ?? [], handleCommandClick: handleCommandClick, indexRow: indexRow, rowData: row }) });
         }
-        else if (col.type === '#') {
+        else if (col.type === '#' && !col.field) {
             jsx("div", { className: "r-rowcell-div", children: indexRow + 1 });
         }
-        else if (col.type === 'checkbox') {
+        else if (col.type === 'checkbox' && !col.field) {
             return (jsx("div", { className: "r-rowcell-div cursor-pointer", style: { alignItems: 'center' }, onClick: (e) => {
                     if (selectEnable) {
                         const index = selectedRows?.findIndex((x) => x[fieldKey] === row[fieldKey]);
@@ -65703,26 +65705,120 @@ 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, isVirtualList }) => {
+    const { t } = useTranslation();
     const gridRef = useRef(null);
-    const [startIndex, setStartIndex] = useState(0);
     const [selectedRows, setSelectedRows] = useState([]);
     const [orderBy, setOrderBy] = useState([]);
     const [filterBy, setFilterBy] = useState([]);
     const [searchTerm, setSearchTerm] = useState('');
-    const fieldKey = columns.find((item) => item.isPrimarykey === true)?.field ?? 'id';
+    const fieldKey = (columns.find((item) => item.isPrimarykey === true)?.field) ?? 'id';
+    const [startIndex, setStartIndex] = useState(0);
     //trường liên quan đến virtul loading
-    const visibleRowCount = Math.ceil(height / rowHeight) + 5;
     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 { t } = useTranslation();
+    const visibleRowCount = Math.ceil(height / rowHeight) + 5;
+    // Tính toán dữ liệu hiển thị dựa trên các điều kiện lọc, tìm kiếm và sắp xếp
+    const viewData = 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;
+            });
+        }
+        return datas;
+    }, [searchTerm, filterBy, orderBy, dataSource]);
+    // Lấy dữ liệu hiển thị với phân trang 
+    const pagingData = useMemo(() => {
+        if (!viewData || viewData.length === 0) {
+            return [];
+        }
+        let datas = viewData;
+        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;
+    }, [viewData, pagingSetting?.pageSize, pagingSetting?.currentPage]);
+    // Tính toán chỉ số bắt đầu và kết thúc của dữ liệu hiển thị
+    const { adjustedStartIndex, adjustedEndIndex } = useMemo(() => {
+        if (!pagingData || pagingData.length === 0 || !isVirtualList) {
+            return { adjustedStartIndex: 0, adjustedEndIndex: 0 };
+        }
+        return {
+            adjustedStartIndex: Math.max(startIndex - buffer, 0),
+            adjustedEndIndex: Math.min(startIndex + visibleRowCount + buffer, dataSource.length)
+        };
+    }, [startIndex, pagingData]);
+    const visibleData = useMemo(() => {
+        if (!pagingData || pagingData.length === 0) {
+            return [];
+        }
+        return isVirtualList ? pagingData.slice(adjustedStartIndex, adjustedEndIndex) : pagingData;
+    }, [pagingData]);
     const { levels: headerColumns, flat: contentColumns, flatVisble, objWidthFixLeft, objWidthFixRight, lastObjWidthFixLeft, fisrtObjWidthFixRight } = useMemo(() => calculateTableStructure(columns), [columns]);
     const scrollTimeoutRef = useRef(null);
     const lastScrollTop = useRef(0);
     const handleScroll = (e) => {
-        if (!gridRef.current) {
+        if (!gridRef.current || !isVirtualList) {
             return;
         }
         // Nếu không có sự thay đổi về scrollTop => người dùng chỉ scroll ngang => không xử lý
@@ -65789,6 +65885,51 @@ const VirtualTable = ({ idTable, dataSource, rowHeight = 33, height = 400, colum
             }
         }
     };
+    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]);
+    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 (jsxs("div", { className: "react-table-edit r-virtualized-table", children: [jsxs("div", { className: 'r-grid', children: [toolbarSetting?.showTopToolbar && jsx(RenderToolbarTop, { toolbarTopOption: toolbarTopOption }), jsxs("div", { ref: gridRef, className: "r-gridtable", onScroll: handleScroll, style: { height: `${height ? `${height}px` : 'auto'}` }, children: [jsxs("table", { role: "presentation", style: { width: '100%' }, children: [jsx(RenderColGroup, { contentColumns: flatVisble }), jsx("thead", { className: 'r-gridheader', role: "rowgroup", children: headerColumns.map((rowColumn, indexParent) => (jsx("tr", { className: "r-row", role: "row", children: rowColumn.map((column, indexColumn) => (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) {
@@ -65802,20 +65943,20 @@ const VirtualTable = ({ idTable, dataSource, rowHeight = 33, height = 400, colum
                                                 }, container: gridRef, totalCount: dataSource.length }, `header-${indexParent}-${indexColumn}`))) }, `header-${-indexParent}`))) }), jsxs("tbody", { className: 'r-gridcontent', role: "rowgroup", children: [adjustedStartIndex > 0 && (jsx("tr", { style: { height: adjustedStartIndex * rowHeight }, children: jsx("td", { style: { padding: 0 }, colSpan: flatVisble.length }) })), visibleData.map((row, index) => {
                                                 const indexRow = index + startIndex;
                                                 const isSelected = selectedRows?.some((x) => x[fieldKey] === row[fieldKey]);
-                                                return (jsx("tr", { "aria-rowindex": indexRow + 1, role: "row", className: 'r-row', children: contentColumns.map((column, indexCol) => (jsx(RenderContentCol, { idTable: idTable, col: column, fieldKey: 'field', objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, fisrtObjWidthFixRight: fisrtObjWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, isMulti: isMutil ?? false, selectEnable: selectEnable ?? false, selectedRows: selectedRows, setSelectedRows: setSelectedRows, formatSetting: formatSetting, handleCommandClick: handleCommandClick, indexCol: indexCol, indexRow: indexRow, isSelected: isSelected, row: row }, indexCol))) }, `row-content-${indexRow}`));
-                                            }), dataSource.length > adjustedEndIndex && (jsx("tr", { style: { height: (dataSource.length - adjustedEndIndex) * rowHeight }, children: jsx("td", { style: { padding: 0 }, colSpan: flatVisble.length }) }))] }), dataSource.length > 0 && jsx("tfoot", { className: "r-gridfoot", children: (columnsAggregate?.length ?? 0) > 0 ? jsx("tr", { className: 'r-row', children: contentColumns.map((col, indexCol) => {
+                                                return (jsx("tr", { "aria-rowindex": indexRow + 1, role: "row", className: 'r-row', children: contentColumns.map((column, indexCol) => (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, handleCommandClick: handleCommandClick, indexCol: indexCol, indexRow: indexRow, isSelected: isSelected, row: row }, indexCol))) }, `row-content-${indexRow}`));
+                                            }), adjustedEndIndex > 0 && pagingData.length > adjustedEndIndex && (jsx("tr", { style: { height: (pagingData.length - adjustedEndIndex) * rowHeight }, children: jsx("td", { style: { padding: 0 }, colSpan: flatVisble.length }) }))] }), viewData.length > 0 && jsx("tfoot", { className: "r-gridfoot", children: (columnsAggregate?.length ?? 0) > 0 ? jsx("tr", { className: 'r-row', children: contentColumns.map((col, indexCol) => {
                                                 const item = columnsAggregate?.find((x) => x.field === col.field);
                                                 let sumValue = item?.value;
                                                 if (!item && col.haveSum === true && col.type === "numeric") {
-                                                    sumValue = dataSource.reduce(function (accumulator, currentValue) { return (Number(accumulator ?? 0) + Number(currentValue[col.field] ?? 0)); }, 0);
+                                                    sumValue = viewData.reduce(function (accumulator, currentValue) { return (Number(accumulator ?? 0) + Number(currentValue[col.field] ?? 0)); }, 0);
                                                 }
                                                 return col.visible !== false && 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: jsxs("div", { className: "r-footer-div", children: [(item || (col.haveSum === true && col.type === "numeric")) && col.type === "numeric" && (Number(sumValue) >= 0) && jsx(Fragment$1, { children: formartNumberic(sumValue, formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false) }), (item || (col.haveSum === true && col.type === "numeric")) && col.type === "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}`);
-                                            }) }) : jsx(Fragment$1, {}) })] }), (((dataSource.length ?? 0) === 0) && !isLoading) && jsxs("div", { className: "r-no-data", children: [jsx("svg", { width: "64", height: "41", viewBox: "0 0 64 41", xmlns: "http://www.w3.org/2000/svg", children: jsxs("g", { transform: "translate(0 1)", fill: "none", fillRule: "evenodd", children: [jsx("ellipse", { fill: "#f5f5f5", cx: "32", cy: "33", rx: "32", ry: "7" }), jsxs("g", { fillRule: "nonzero", stroke: "#d9d9d9", children: [jsx("path", { d: "M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z" }), jsx("path", { d: "M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z", fill: "#fafafa" })] })] }) }), t('No data available.')] }), isLoading && jsx("div", { className: "r-loading-overlay", children: jsxs("div", { className: "r-loading", children: [jsx(Spinner$1, { className: "me-1" }), t('Loading...')] }) })] })] }), pagingSetting?.allowPaging ? jsx(PagingComponent, { onChangePage: onChangePage, pageSize: pagingSetting?.pageSize ?? 0, currentPage: pagingSetting?.currentPage ?? 0, pageOptions: pagingSetting?.pageOptions ?? [20, 30, 50, 100], totalItem: (pagingSetting?.totalItem ?? 0), onChangePageSize: onChangePageSize }) : jsx(Fragment$1, {})] }));
+                                            }) }) : jsx(Fragment$1, {}) })] }), (((viewData.length ?? 0) === 0) && !isLoading) && jsxs("div", { className: "r-no-data", children: [jsx("svg", { width: "64", height: "41", viewBox: "0 0 64 41", xmlns: "http://www.w3.org/2000/svg", children: jsxs("g", { transform: "translate(0 1)", fill: "none", fillRule: "evenodd", children: [jsx("ellipse", { fill: "#f5f5f5", cx: "32", cy: "33", rx: "32", ry: "7" }), jsxs("g", { fillRule: "nonzero", stroke: "#d9d9d9", children: [jsx("path", { d: "M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z" }), jsx("path", { d: "M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z", fill: "#fafafa" })] })] }) }), t('No data available.')] }), isLoading && jsx("div", { className: "r-loading-overlay", children: jsxs("div", { className: "r-loading", children: [jsx(Spinner$1, { className: "me-1" }), t('Loading...')] }) })] })] }), pagingSetting?.allowPaging ? jsx(PagingComponent, { onChangePage: onChangePage, pageSize: pagingSetting?.pageSize ?? 0, currentPage: pagingSetting?.currentPage ?? 0, pageOptions: pagingSetting?.pageOptions ?? [20, 30, 50, 100], totalItem: (pagingSetting?.pagingClient ? viewData.length : pagingSetting?.totalItem ?? 0), onChangePageSize: onChangePageSize }) : jsx(Fragment$1, {})] }));
 };
 
-export { ExportExcelComponent, FindNodeByPath, ImportExcelComponent, InputStyleComponent, SelectTable, SelectTableTree, TabsMenuComponent, VirtualTable, Wizard, calculateTableStructure, 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, SelectTableTree, TableView, TabsMenuComponent, Wizard, calculateTableStructure, 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