react-table-edit 1.4.19 → 1.4.21

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

@@ -375,7 +375,10 @@ export type IColumnVirtualizedTable = {
     visible?: boolean;
     /** Kiểu xem cột */
     type?: IViewType;
-    settingFilter?: IFSettingFilterColumn;
+    /** Kiểu lọc cột */
+    filterType?: IFilterType;
+    /** Cho phép lọc cột */
+    allowFilter?: boolean;
     /** Căn lề */
     textAlign?: ITextAlign;
     /** Cố định trái/phải */
@@ -393,12 +396,6 @@ export type IColumnVirtualizedTable = {
     /** Số dòng chiếm (rowspan) */
     rowspan?: number;
 };
-export type IFSettingFilterColumn = {
-    /** Kiểu lọc cột */
-    filterType?: IFilterType;
-    allowFilter?: boolean;
-    options: any[];
-};
 export type IFOrderTable = {
     key: string;
     direction: 'asc' | 'desc';

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

@@ -2,6 +2,7 @@ import { Dispatch, SetStateAction } from 'react';
 import { IColumnVirtualizedTable, IFFilterTable, IFOrderTable, IFTableEditFormat } from "../type";
 import 'react-resizable/css/styles.css';
 type IFDataProps = {
+    idTable: string;
     selectEnable: boolean;
     dataSource: any[];
     setSelectedRows: Dispatch<SetStateAction<any[]>>;
@@ -24,6 +25,7 @@ type IFDataProps = {
     filterBy: IFFilterTable[];
     orderBy: IFOrderTable[];
     container: any;
+    optionsFilter: any;
     formatSetting?: IFTableEditFormat;
 };
 declare const HeaderTableCol: (props: IFDataProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -16,10 +16,11 @@ type VirtualTableProps = {
     toolbarSetting?: IFTableEditToolbar;
     searchSetting?: IFTableEditSearchSetting;
     columnsAggregate?: IColumnsVirtualizedAgg[];
+    optionsFilter?: any;
     setColumns?: (columns: IColumnVirtualizedTable[]) => void;
     commandClick?: (data: any) => void;
     changeFilter?: (data: IFFilterTable[]) => void;
     changeOrder?: (data: IFOrderTable[]) => void;
 };
 declare const VirtualTable: React.FC<VirtualTableProps>;
-export default VirtualTable;
+export { VirtualTable };

package/dist/index.d.ts

@@ -379,7 +379,10 @@ type IColumnVirtualizedTable = {
     visible?: boolean;
     /** Kiểu xem cột */
     type?: IViewType;
-    settingFilter?: IFSettingFilterColumn;
+    /** Kiểu lọc cột */
+    filterType?: IFilterType;
+    /** Cho phép lọc cột */
+    allowFilter?: boolean;
     /** Căn lề */
     textAlign?: ITextAlign;
     /** Cố định trái/phải */
@@ -397,12 +400,6 @@ type IColumnVirtualizedTable = {
     /** Số dòng chiếm (rowspan) */
     rowspan?: number;
 };
-type IFSettingFilterColumn = {
-    /** Kiểu lọc cột */
-    filterType?: IFilterType;
-    allowFilter?: boolean;
-    options: any[];
-};
 type IFOrderTable = {
     key: string;
     direction: 'asc' | 'desc';
@@ -713,4 +710,28 @@ type IFProps = {
 };
 declare const Wizard: React.ForwardRefExoticComponent<IFProps & React.RefAttributes<unknown>>;
 
-export { ExportExcelComponent, FindNodeByPath, type FromItemsField, type IColumnTable, type IColumnVirtualizedTable, type IColumnsVirtualizedAgg, type ICommandItem, type IFColumnSelectTable, type IFColumnSelectTableTree, type IFCurrentPage, type IFCurrentPageConfig, type IFFilterTable, type IFOrderTable, type IFPageSize, type IFPropsDetail, type IFSettingFilterColumn, type IFTableEditButton, type IFTableEditFormat, type IFTableEditPaging, type IFTableEditSearchSetting, type IFTableEditToolbar, type IFTableSelectFormat, type IFTableTreeSelectFormat, type IFToolbarOptions, type IHeaderColumnTable, type ISettingFormElement, type ISettingNumericElement, type ISettingSelectElement, ImportExcelComponent, InputStyleComponent, SelectTable, SelectTableTree, TabsMenuComponent, Wizard, calculateTableStructure, checkDecimalSeparator, checkThousandSeparator, TableEdit as default, formartNumberic, formatDateTime, generateUUID, isNullOrUndefined, messageBoxConfirm, messageBoxConfirm2, messageBoxConfirmDelete, messageBoxError, messageHtmlBoxConfirm, messageHtmlBoxError, notificationError, notificationSuccess, roundNumber, useOnClickOutside };
+type VirtualTableProps = {
+    idTable: string;
+    dataSource: any[];
+    rowHeight?: number;
+    height?: number;
+    columns: IColumnVirtualizedTable[];
+    selectEnable?: boolean;
+    isMutil?: boolean;
+    isLoading?: boolean;
+    formatSetting?: IFTableEditFormat;
+    allowFilter?: boolean;
+    allowOrder?: boolean;
+    pagingSetting?: IFTableEditPaging;
+    toolbarSetting?: IFTableEditToolbar;
+    searchSetting?: IFTableEditSearchSetting;
+    columnsAggregate?: IColumnsVirtualizedAgg[];
+    optionsFilter?: any;
+    setColumns?: (columns: IColumnVirtualizedTable[]) => void;
+    commandClick?: (data: any) => void;
+    changeFilter?: (data: IFFilterTable[]) => void;
+    changeOrder?: (data: IFOrderTable[]) => void;
+};
+declare const VirtualTable: React__default.FC<VirtualTableProps>;
+
+export { ExportExcelComponent, FindNodeByPath, type FromItemsField, type IColumnTable, type IColumnVirtualizedTable, type IColumnsVirtualizedAgg, type ICommandItem, type IFColumnSelectTable, type IFColumnSelectTableTree, type IFCurrentPage, type IFCurrentPageConfig, type IFFilterTable, type IFOrderTable, type IFPageSize, type IFPropsDetail, type IFTableEditButton, type IFTableEditFormat, type IFTableEditPaging, type IFTableEditSearchSetting, type IFTableEditToolbar, type IFTableSelectFormat, type IFTableTreeSelectFormat, type IFToolbarOptions, type IHeaderColumnTable, type ISettingFormElement, type ISettingNumericElement, type ISettingSelectElement, ImportExcelComponent, InputStyleComponent, SelectTable, SelectTableTree, TabsMenuComponent, VirtualTable, Wizard, calculateTableStructure, checkDecimalSeparator, checkThousandSeparator, TableEdit as default, formartNumberic, formatDateTime, generateUUID, isNullOrUndefined, messageBoxConfirm, messageBoxConfirm2, messageBoxConfirmDelete, messageBoxError, messageHtmlBoxConfirm, messageHtmlBoxError, notificationError, notificationSuccess, roundNumber, useOnClickOutside };

package/dist/index.js

@@ -41807,7 +41807,7 @@ function styleInject(css, ref) {
 var css_248z$1 = ".react-resizable {\n  position: relative;\n}\n.react-resizable-handle {\n  position: absolute;\n  width: 20px;\n  height: 20px;\n  background-repeat: no-repeat;\n  background-origin: content-box;\n  box-sizing: border-box;\n  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+');\n  background-position: bottom right;\n  padding: 0 3px 3px 0;\n}\n.react-resizable-handle-sw {\n  bottom: 0;\n  left: 0;\n  cursor: sw-resize;\n  transform: rotate(90deg);\n}\n.react-resizable-handle-se {\n  bottom: 0;\n  right: 0;\n  cursor: se-resize;\n}\n.react-resizable-handle-nw {\n  top: 0;\n  left: 0;\n  cursor: nw-resize;\n  transform: rotate(180deg);\n}\n.react-resizable-handle-ne {\n  top: 0;\n  right: 0;\n  cursor: ne-resize;\n  transform: rotate(270deg);\n}\n.react-resizable-handle-w,\n.react-resizable-handle-e {\n  top: 50%;\n  margin-top: -10px;\n  cursor: ew-resize;\n}\n.react-resizable-handle-w {\n  left: 0;\n  transform: rotate(135deg);\n}\n.react-resizable-handle-e {\n  right: 0;\n  transform: rotate(315deg);\n}\n.react-resizable-handle-n,\n.react-resizable-handle-s {\n  left: 50%;\n  margin-left: -10px;\n  cursor: ns-resize;\n}\n.react-resizable-handle-n {\n  top: 0;\n  transform: rotate(225deg);\n}\n.react-resizable-handle-s {\n  bottom: 0;\n  transform: rotate(45deg);\n}";
 styleInject(css_248z$1);
 
-const HeaderTableCol = (props) => {
+const HeaderTableCol$1 = (props) => {
     const { selectEnable, dataSource, setSelectedRows, col, indexCol, indexParent, objWidthFixLeft, objWidthFixRight, totalCount, selectedRows, column, setColumn, fisrtObjWidthFixRight, lastObjWidthFixLeft, isMulti } = props;
     const { t } = reactI18next.useTranslation();
     const handleResize = (e, { size }) => {
@@ -43507,7 +43507,7 @@ const TableEdit = React$5.forwardRef((props, ref) => {
     }, [searchTerm, searchSetting?.searchTerm]);
     return (jsxRuntime.jsxs(React$5.Fragment, { children: [jsxRuntime.jsxs("div", { className: "react-table-edit", children: [jsxRuntime.jsxs("div", { className: 'r-grid', ref: gridRef, children: [toolbarSetting?.showTopToolbar && jsxRuntime.jsx(RenderToolbarTop, { toolbarTopOption: toolbarTopOption }), jsxRuntime.jsx("div", { ref: tableElement, className: "r-gridtable", style: { height: `${height ? `${height}px` : 'auto'}`, minHeight: `${minHeight ? `${minHeight}px` : ''}`, maxHeight: `${maxHeight ? `${maxHeight}px` : '400px'}` }, children: jsxRuntime.jsxs("table", { style: { width: '100%' }, children: [jsxRuntime.jsx("thead", { className: 'r-gridheader', children: headerColumns.map((element, indexParent) => {
                                                 return (jsxRuntime.jsx("tr", { className: "r-row", role: "row", children: element?.map((col, index) => {
-                                                        return (jsxRuntime.jsx(HeaderTableCol, { col: col, dataSource: dataSource, indexCol: index, indexParent: indexParent, isMulti: isMulti ?? false, objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, selectEnable: selectEnable ?? false, selectedRows: selectedRows, setSelectedRows: setSelectedRows, column: contentColumns, setColumn: setContentColumns, fisrtObjWidthFixRight: fisrtObjWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, totalCount: totalCount }, `header-${indexParent}-${index}`));
+                                                        return (jsxRuntime.jsx(HeaderTableCol$1, { col: col, dataSource: dataSource, indexCol: index, indexParent: indexParent, isMulti: isMulti ?? false, objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, selectEnable: selectEnable ?? false, selectedRows: selectedRows, setSelectedRows: setSelectedRows, column: contentColumns, setColumn: setContentColumns, fisrtObjWidthFixRight: fisrtObjWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, totalCount: totalCount }, `header-${indexParent}-${index}`));
                                                     }) }, `header-${-indexParent}`));
                                             }) }), jsxRuntime.jsx("tbody", { className: 'r-gridcontent', children: renderData() }), jsxRuntime.jsx("tfoot", { className: "r-gridfoot", children: haveSum == true ? jsxRuntime.jsx("tr", { className: 'r-row', children: contentColumns.map((col, index) => {
                                                     return (renderFooterCol(col, index));
@@ -65406,6 +65406,353 @@ const ImportExcelComponent = (props) => {
             ] }) }));
 };
 
+const HeaderTableCol = (props) => {
+    const { selectEnable, dataSource, setSelectedRows, col, indexCol, indexParent, objWidthFixLeft, objWidthFixRight, totalCount, selectedRows, columns, setColumns, orderBy, changeFilter, filterBy, changeOrder, allowFilter, allowOrder, container, fisrtObjWidthFixRight, lastObjWidthFixLeft, formatSetting, optionsFilter, idTable, isMulti } = props;
+    const { t } = reactI18next.useTranslation();
+    const headerRef = React$5.useRef(null);
+    const order = orderBy.find((item) => item.key === col.field);
+    const [openFilter, setOpenFilter] = React$5.useState(false);
+    const filter = filterBy.find((item) => item.key === col.field);
+    const handleResize = (e, { size }) => {
+        // Update the column width here
+        // You might need to update the state or call a callback to update the width
+        if (size.width > 50) {
+            const newColumns = [...columns];
+            newColumns[indexCol].width = size.width;
+            if ((columns[indexCol]?.maxWidth ?? 0) < size.width) {
+                newColumns[indexCol].maxWidth = size.width;
+            }
+            if ((columns[indexCol]?.minWidth ?? 0) > size.width) {
+                newColumns[indexCol].minWidth = size.width;
+            }
+            if (setColumns) {
+                setColumns(newColumns);
+            }
+        }
+    };
+    const checkOverflow = () => {
+        return headerRef.current && headerRef.current.scrollHeight > headerRef.current.clientHeight;
+    };
+    return (jsxRuntime.jsx(React$5.Fragment, { children: col.visible !== false && (jsxRuntime.jsx(Resizable, { className: "r-resize", width: typeof col.width === 'number' ? col.width : Number((col.width ?? "").replaceAll(new RegExp(`[^0-9]`, "g"), '')), height: 0, onResize: handleResize, draggableOpts: { enableUserSelectHack: false }, children: jsxRuntime.jsx("th", { rowSpan: col.rowspan !== 1 ? col.rowspan : 1, colSpan: col.columns?.filter(x => x.visible !== false)?.length ?? 1, className: classNames$1(`r-headercell fix-${col.fixedType}`, { 'fixed-last': (col.fixedType === 'left' && indexCol === lastObjWidthFixLeft) || (col.fixedType === 'right' && indexCol === fisrtObjWidthFixRight) }, { 'cell-fixed': col.fixedType }), style: {
+                    top: `${indexParent * 42}px`,
+                    left: col.fixedType === 'left' ? objWidthFixLeft[indexCol ?? 0] : undefined,
+                    right: col.fixedType === 'right' ? objWidthFixRight[indexCol ?? 0] : undefined
+                }, children: jsxRuntime.jsxs("div", { style: { justifyContent: 'space-between' }, onClick: () => {
+                        if (order) {
+                            if (order.direction === 'asc') {
+                                order.direction = 'desc';
+                                changeOrder(orderBy);
+                            }
+                            else {
+                                changeOrder(orderBy.filter((x) => x.key !== col.field));
+                            }
+                        }
+                        else {
+                            orderBy.push({ direction: 'asc', key: col.field });
+                            changeOrder(orderBy);
+                        }
+                    }, className: classNames$1('r-headercell-div', { 'cursor-pointer': allowOrder }), children: [col.type === 'checkbox' && (jsxRuntime.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; }));
+                                    }
+                                    else {
+                                        setSelectedRows([]);
+                                    }
+                                }
+                            } })), col.type !== 'checkbox' && jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: 'header-content', style: { justifyContent: col.textAlign ?? 'left' }, children: [jsxRuntime.jsx("span", { id: `header-${idTable}-${indexParent}-${indexCol}`, ref: headerRef, className: 'text-content', children: t(col.headerText ?? '') }), checkOverflow() && jsxRuntime.jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `header-${idTable}-${indexParent}-${indexCol}`, children: t(col.headerText ?? '') })] }), col.type !== '#' && col.type !== 'command' && jsxRuntime.jsxs("div", { className: 'd-flex', children: [allowOrder && order?.direction === 'asc' && jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: 'ms-25', width: "10", height: "10", viewBox: "0 0 16 18", fill: "none", children: [jsxRuntime.jsx("g", { "clip-path": "url(#clip0_520_6)", children: jsxRuntime.jsx("path", { d: "M8.70711 0.292893C8.31658 -0.0976311 7.68342 -0.0976311 7.29289 0.292893L0.928932 6.65685C0.538408 7.04738 0.538408 7.68054 0.928932 8.07107C1.31946 8.46159 1.95262 8.46159 2.34315 8.07107L8 2.41421L13.6569 8.07107C14.0474 8.46159 14.6805 8.46159 15.0711 8.07107C15.4616 7.68054 15.4616 7.04738 15.0711 6.65685L8.70711 0.292893ZM8 18H9L9 1H8H7L7 18H8Z", fill: "black" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: "clip0_520_6", children: jsxRuntime.jsx("rect", { width: "16", height: "18", fill: "white" }) }) })] }), allowOrder && order?.direction === 'desc' && jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: 'ms-25', width: "10", height: "10", viewBox: "0 0 16 18", fill: "none", children: [jsxRuntime.jsx("g", { "clip-path": "url(#clip0_520_2)", children: jsxRuntime.jsx("path", { d: "M7.29289 17.7071C7.68342 18.0976 8.31658 18.0976 8.70711 17.7071L15.0711 11.3431C15.4616 10.9526 15.4616 10.3195 15.0711 9.92893C14.6805 9.53841 14.0474 9.53841 13.6569 9.92893L8 15.5858L2.34315 9.92893C1.95262 9.53841 1.31946 9.53841 0.928932 9.92893C0.538408 10.3195 0.538408 10.9526 0.928932 11.3431L7.29289 17.7071ZM8 0L7 0L7 17H8H9L9 0L8 0Z", fill: "black" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: "clip0_520_2", children: jsxRuntime.jsx("rect", { width: "16", height: "18", fill: "white" }) }) })] }), allowFilter && jsxRuntime.jsxs(Dropdown$1, { isOpen: openFilter, toggle: (e) => {
+                                                setOpenFilter(!openFilter);
+                                                e.stopPropagation();
+                                            }, onClick: (e) => {
+                                                e.stopPropagation();
+                                            }, children: [jsxRuntime.jsx(DropdownToggle$1, { tag: 'div', className: 'p-0 r-filter', children: jsxRuntime.jsxs("svg", { className: classNames$1('ms-25', { 'active': filter }), width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "stroke-width": "1.5", "font-size": "12", children: [jsxRuntime.jsx("path", { d: "M14.7 11.998v10.506c.052.4-.08.826-.381 1.106a1.306 1.306 0 0 1-.925.39 1.289 1.289 0 0 1-.926-.39l-2.637-2.68a1.323 1.323 0 0 1-.38-1.106v-7.826h-.04L1.85 2.16A1.348 1.348 0 0 1 2.076.293C2.325.107 2.6 0 2.888 0h18.373c.289 0 .564.107.814.293a1.348 1.348 0 0 1 .223 1.866L14.738 12H14.7Z", fill: "currentColor" }), " "] }) }), jsxRuntime.jsx(DropdownMenu$1, { container: container, className: 'formula-dropdown icon-dropdown p-0', style: {
+                                                        borderRadius: 8,
+                                                        zIndex: 1056
+                                                    }, children: jsxRuntime.jsx(DropdownItem$1, { className: 'p-1', style: { borderRadius: '6px' }, tag: 'div', header: true, children: jsxRuntime.jsx(RenderFilterElement, { setOpenFilter: setOpenFilter, filter: filter, filterBy: filterBy, optionsFilter: optionsFilter, formatSetting: formatSetting, changeFilter: changeFilter, column: col }) }) })] })] })] })] }) }) })) }, `header-${indexCol}`));
+};
+const RenderFilterElement = ({ filter, optionsFilter, formatSetting, filterBy, setOpenFilter, changeFilter, column }) => {
+    const { t } = reactI18next.useTranslation();
+    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 = [
+            { label: 'Bắt đầu bởi', value: 'startswith' },
+            { label: 'Kết thúc bởi', value: 'endswith' },
+            { label: 'Chứa', value: 'contains' },
+            { label: 'Bằng', value: 'equal' },
+            { label: 'Không bằng', value: 'notequal' }
+        ];
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(SelectTable, { value: options.find((x) => x.value === (operator)), options: options, onChange: (val) => {
+                        setOperator(val.value);
+                    }, placeholder: 'Select' }), jsxRuntime.jsx(Input$1, { className: 'my-1', value: valueFilter, onChange: (val) => {
+                        setValueFilter(val.target.value);
+                    } })] }));
+    };
+    const RenderNumberFilter = () => {
+        const options = [
+            { label: 'Lớn hơn', value: 'greaterthan' },
+            { label: 'Lớn hơn hoặc bằng', value: 'greaterthanorequal' },
+            { label: 'Bằng', value: 'equal' },
+            { label: 'Bé hơn', value: 'lessthan' },
+            { label: 'Bé hơn hoặc bằng', value: 'lessthanorequal' }
+        ];
+        const numericFormatProps = {
+            value: !isNullOrUndefined$1(valueFilter) ? valueFilter.toString() : '',
+            thousandSeparator: checkThousandSeparator(formatSetting?.thousandSeparator, formatSetting?.decimalSeparator),
+            decimalSeparator: checkDecimalSeparator(formatSetting?.thousandSeparator, formatSetting?.decimalSeparator),
+            allowNegative: column.numericSettings?.allowNegative ?? false,
+            decimalScale: column.numericSettings?.fraction ?? 0
+        };
+        let floatValue = parseFloat(valueFilter ?? '0');
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(SelectTable, { value: options.find((x) => x.value === (operator)), options: options, onChange: (val) => {
+                        setOperator(val.value);
+                    }, placeholder: t('Select') }), jsxRuntime.jsx(NumericFormat, { style: { textAlign: column.textAlign, height: 29 }, ...numericFormatProps, defaultValue: formartNumberic(valueFilter, formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', column.numericSettings?.fraction), className: classNames$1('form-control my-1 input-numeric'), onValueChange: (values) => {
+                        floatValue = values?.floatValue;
+                    }, onFocus: (e) => {
+                        e.target.setSelectionRange(0, e.target.innerText.length - 1);
+                    }, onBlur: () => {
+                        if (floatValue !== valueFilter) {
+                            setValueFilter(!isNaN(floatValue) ? floatValue : 0);
+                        }
+                    } })] }));
+    };
+    const RenderSelectFilter = () => {
+        return (jsxRuntime.jsx("div", { className: 'mb-1', children: jsxRuntime.jsx(SelectTable, { value: optionsFilter ? optionsFilter[column.field]?.find((x) => x.value === valueFilter) : undefined, options: (optionsFilter && optionsFilter[column.field]) ?? [], isClearable: true, onChange: (val) => {
+                    setValueFilter(val?.value);
+                }, placeholder: t('Select') }) }));
+    };
+    const handleSave = () => {
+        if (valueFilter || valueFilter === 0) {
+            if (filter) {
+                filter.ope = operator;
+                filter.value = valueFilter;
+            }
+            else {
+                filterBy.push({ key: column.field, ope: operator, value: valueFilter });
+            }
+            changeFilter([...filterBy]);
+        }
+        else {
+            changeFilter(filterBy.filter((x) => x.key !== column.field));
+        }
+        setOpenFilter(false);
+    };
+    return (jsxRuntime.jsxs("div", { className: 'r-filter-popup', onKeyDown: (e) => {
+            if (e.code === 'Enter' || e.code === 'NumpadEnter') {
+                handleSave();
+                e.stopPropagation();
+            }
+        }, 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, { outline: true, color: 'primary', style: { borderRadius: 3 }, className: 'me-50 py-25 px-50', onClick: handleSave, children: t('Filter') }), jsxRuntime.jsx(Button$1, { className: 'py-25 px-50', outline: true, style: { borderRadius: 3 }, onClick: () => {
+                            if (filterBy) {
+                                changeFilter(filterBy.filter((x) => x.key !== column.field));
+                            }
+                            setOpenFilter(false);
+                        }, children: t('Clear') })] })] }));
+};
+
+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') {
+            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 === '#') {
+            jsxRuntime.jsx("div", { className: "r-rowcell-div", children: indexRow + 1 });
+        }
+        else if (col.type === 'checkbox') {
+            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]);
+                        if (index > -1) {
+                            if (isMulti) {
+                                selectedRows?.splice(index, 1);
+                                setSelectedRows([...selectedRows]);
+                            }
+                            else {
+                                setSelectedRows([]);
+                            }
+                        }
+                        else {
+                            if (isMulti) {
+                                setSelectedRows([...selectedRows, row]);
+                            }
+                            else {
+                                setSelectedRows([row]);
+                            }
+                        }
+                        e.stopPropagation();
+                    }
+                }, children: jsxRuntime.jsx(Input$1, { checked: isSelected, type: "checkbox", className: "cursor-pointer", style: { textAlign: col.textAlign ?? 'center' } }) }));
+        }
+        else {
+            let value = row[col.field];
+            if (col.type === 'numeric') {
+                value = formartNumberic(row[col.field], formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false) ?? 0;
+            }
+            else if (col.type === 'date') {
+                value = value ? formatDateTime(value, formatSetting?.dateFormat) : '';
+            }
+            else if (col.type === 'datetime') {
+                value = value ? formatDateTime(value, formatSetting?.dateFormat ?? 'DD/MM/yyyy HH:mm') : '';
+            }
+            if (col.template) {
+                value = col.template(row, indexRow) ?? '';
+            }
+            return (jsxRuntime.jsx("div", { className: classNames$1('r-rowcell-div'), children: jsxRuntime.jsxs("div", { className: classNames$1('r-rowcell-content'), style: {
+                        textAlign: col.textAlign ? col.textAlign : 'left'
+                    }, 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) }), col.haveToolTip && 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) })] }) }));
+        }
+    };
+    return (col.visible !== false && jsxRuntime.jsx("td", { 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 }), style: {
+            left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
+            right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined
+        }, onClick: (e) => {
+            if (e.target.nodeName === 'DIV' || e.target.nodeName === 'TD') {
+                if (selectEnable) {
+                    const index = selectedRows?.findIndex((x) => x[fieldKey] === row[fieldKey]);
+                    if (index > -1) {
+                        if (isMulti) {
+                            selectedRows?.splice(index, 1);
+                            setSelectedRows([...selectedRows]);
+                        }
+                        else {
+                            setSelectedRows([]);
+                        }
+                    }
+                    else {
+                        if (isMulti) {
+                            setSelectedRows([...selectedRows, row]);
+                        }
+                        else {
+                            setSelectedRows([row]);
+                        }
+                    }
+                }
+                e.stopPropagation();
+            }
+        }, children: RenderElement() }, `col-${indexRow}-${indexCol}`));
+};
+
+const RenderColGroup = ({ contentColumns }) => (jsxRuntime.jsx("colgroup", { children: contentColumns.map((col, index) => (jsxRuntime.jsx("col", { style: {
+            width: typeof col.width === 'number' ? `${col.width}px` : col.width || undefined,
+            minWidth: typeof col.minWidth === 'number' ? `${col.minWidth}px` : col.minWidth || undefined,
+            maxWidth: typeof col.maxWidth === 'number' ? `${col.maxWidth}px` : col.maxWidth || undefined
+        } }, index))) }));
+
+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 gridRef = React$5.useRef(null);
+    const [startIndex, setStartIndex] = React$5.useState(0);
+    const [selectedRows, setSelectedRows] = React$5.useState([]);
+    const [orderBy, setOrderBy] = React$5.useState([]);
+    const [filterBy, setFilterBy] = React$5.useState([]);
+    const [searchTerm, setSearchTerm] = React$5.useState('');
+    const fieldKey = columns.find((item) => item.isPrimarykey === true)?.field ?? 'id';
+    //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 } = reactI18next.useTranslation();
+    const { levels: headerColumns, flat: contentColumns, flatVisble, objWidthFixLeft, objWidthFixRight, lastObjWidthFixLeft, fisrtObjWidthFixRight } = React$5.useMemo(() => calculateTableStructure(columns), [columns]);
+    const scrollTimeoutRef = React$5.useRef(null);
+    const lastScrollTop = React$5.useRef(0);
+    const handleScroll = (e) => {
+        if (!gridRef.current) {
+            return;
+        }
+        // Nếu không có sự thay đổi về scrollTop => người dùng chỉ scroll ngang => không xử lý
+        if (e.target.scrollTop === lastScrollTop.current) {
+            return;
+        }
+        lastScrollTop.current = e.target.scrollTop;
+        if (scrollTimeoutRef.current !== null) {
+            cancelAnimationFrame(scrollTimeoutRef.current);
+        }
+        scrollTimeoutRef.current = requestAnimationFrame(() => {
+            const scrollTop = gridRef.current.scrollTop;
+            const newStartIndex = Math.floor(scrollTop / rowHeight);
+            if (newStartIndex !== startIndex) {
+                setStartIndex(newStartIndex);
+            }
+        });
+    };
+    const handleCommandClick = (id, rowData, index) => {
+        if (commandClick) {
+            commandClick({ id, rowData, index });
+        }
+    };
+    const handleKeyPress = (e) => {
+        if ((e.code === 'Enter' || e.code === 'NumpadEnter')) {
+            if (searchSetting?.setSearchTerm) {
+                searchSetting?.setSearchTerm(e.target.value);
+            }
+            else {
+                setSearchTerm(e.target.value);
+            }
+            e.stopPropagation();
+            e.preventDefault();
+        }
+    };
+    const searchTemplate = () => {
+        return (jsxRuntime.jsx("div", { className: "me-50 r-search", children: jsxRuntime.jsx(ReactInput, { style: { width: '230px' }, value: searchSetting?.searchTerm !== undefined ? searchSetting?.searchTerm : searchTerm, setSearchTerm: searchSetting?.setSearchTerm ? searchSetting?.setSearchTerm : setSearchTerm, placeholder: t('Search'), onKeyPress: handleKeyPress }) }));
+    };
+    const defaultToolbarOption = searchSetting?.searchEnable ? [{ template: searchTemplate, align: 'left' }] : [];
+    let toolbarTopOption = [];
+    if (toolbarSetting?.toolbarOptions) {
+        toolbarTopOption = [...defaultToolbarOption, ...toolbarSetting?.toolbarOptions];
+    }
+    else {
+        toolbarTopOption = [...defaultToolbarOption];
+    }
+    const onChangePage = (args) => {
+        if (pagingSetting?.setCurrentPage) {
+            if (args.currentPage === args.oldPage) {
+                return;
+            }
+            pagingSetting.setCurrentPage(args.currentPage);
+        }
+    };
+    const onChangePageSize = (args) => {
+        if (pagingSetting?.allowPaging) {
+            if (pagingSetting?.pageSize !== args.pageSize) {
+                if (pagingSetting?.setPageSize) {
+                    pagingSetting.setPageSize(args.pageSize);
+                }
+                if (pagingSetting?.setCurrentPage) {
+                    pagingSetting.setCurrentPage(1);
+                }
+            }
+        }
+    };
+    return (jsxRuntime.jsxs("div", { className: "react-table-edit", 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", { style: { width: '100%' }, children: [jsxRuntime.jsx(RenderColGroup, { contentColumns: flatVisble }), jsxRuntime.jsx("thead", { className: 'r-gridheader', 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) {
+                                                        changeFilter(val);
+                                                    }
+                                                }, changeOrder: (val) => {
+                                                    setOrderBy([...val]);
+                                                    if (changeOrder) {
+                                                        changeOrder(val);
+                                                    }
+                                                }, container: gridRef, totalCount: dataSource.length }, `header-${indexParent}-${indexColumn}`))) }, indexParent))) }), jsxRuntime.jsxs("tbody", { className: 'r-gridcontent', children: [adjustedStartIndex > 0 && (jsxRuntime.jsx("tr", { style: { height: adjustedStartIndex * rowHeight }, children: jsxRuntime.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 (jsxRuntime.jsx("tr", { className: classNames$1('r-row'), children: contentColumns.map((column, indexCol) => (jsxRuntime.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-${indexRow}`));
+                                            }), dataSource.length > adjustedEndIndex && (jsxRuntime.jsx("tr", { style: { height: (dataSource.length - adjustedEndIndex) * rowHeight }, children: jsxRuntime.jsx("td", { style: { padding: 0 }, colSpan: flatVisble.length }) }))] }), dataSource.length > 0 && jsxRuntime.jsx("tfoot", { className: "r-gridfoot", children: (columnsAggregate?.length ?? 0) > 0 ? jsxRuntime.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);
+                                                }
+                                                return 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: [(item || (col.haveSum === true && col.type === "numeric")) && col.type === "numeric" && (Number(sumValue) >= 0) && jsxRuntime.jsx(jsxRuntime.Fragment, { 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) && 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}`);
+                                            }) }) : jsxRuntime.jsx(jsxRuntime.Fragment, {}) })] }), (((dataSource.length ?? 0) === 0) && !isLoading) && jsxRuntime.jsxs("div", { className: "r-no-data", children: [jsxRuntime.jsx("svg", { width: "64", height: "41", viewBox: "0 0 64 41", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsxs("g", { transform: "translate(0 1)", fill: "none", fillRule: "evenodd", children: [jsxRuntime.jsx("ellipse", { fill: "#f5f5f5", cx: "32", cy: "33", rx: "32", ry: "7" }), jsxRuntime.jsxs("g", { fillRule: "nonzero", stroke: "#d9d9d9", children: [jsxRuntime.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" }), jsxRuntime.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 && jsxRuntime.jsx("div", { className: "r-loading-overlay", children: jsxRuntime.jsxs("div", { className: "r-loading", children: [jsxRuntime.jsx(Spinner$1, { className: "me-1" }), t('Loading...')] }) })] })] }), pagingSetting?.allowPaging ? jsxRuntime.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 }) : jsxRuntime.jsx(jsxRuntime.Fragment, {})] }));
+};
+
 exports.ExportExcelComponent = ExportExcelComponent;
 exports.FindNodeByPath = FindNodeByPath;
 exports.ImportExcelComponent = ImportExcelComponent;
@@ -65413,6 +65760,7 @@ exports.InputStyleComponent = InputStyleComponent;
 exports.SelectTable = SelectTable;
 exports.SelectTableTree = SelectTableTree;
 exports.TabsMenuComponent = TabsMenuComponent;
+exports.VirtualTable = VirtualTable;
 exports.Wizard = Wizard;
 exports.calculateTableStructure = calculateTableStructure;
 exports.checkDecimalSeparator = checkDecimalSeparator;