react-table-edit 1.4.27 → 1.4.28

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
@@ -65623,13 +65623,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,7 +65703,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 = useRef(null);
     const [startIndex, setStartIndex] = useState(0);
     const [selectedRows, setSelectedRows] = useState([]);
@@ -65716,7 +65716,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 = 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 } = useTranslation();
     const { levels: headerColumns, flat: contentColumns, flatVisble, objWidthFixLeft, objWidthFixRight, lastObjWidthFixLeft, fisrtObjWidthFixRight } = useMemo(() => calculateTableStructure(columns), [columns]);
     const scrollTimeoutRef = useRef(null);
@@ -65789,6 +65860,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) {
@@ -65817,5 +65933,5 @@ const VirtualTable = ({ idTable, dataSource, rowHeight = 33, height = 400, colum
                                             }) }) : 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, {})] }));
 };
 
-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