react-table-edit 1.4.23 → 1.4.24

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

@@ -1,13 +1,16 @@
 import { Dispatch, SetStateAction } from 'react';
-import { IHeaderColumnTable } from "../type";
+import { IFFilterTable, IFOrderTable, IFTableEditFormat, IHeaderColumnTable } from "../type";
 import 'react-resizable/css/styles.css';
 type IFDataProps = {
+    idTable: string;
     selectEnable: boolean;
     dataSource: any[];
     setSelectedRows: Dispatch<SetStateAction<any[]>>;
     col: IHeaderColumnTable;
-    column: IHeaderColumnTable[];
-    setColumn: Dispatch<SetStateAction<IHeaderColumnTable[]>>;
+    columns: IHeaderColumnTable[];
+    setColumns?: (columns: IHeaderColumnTable[]) => void;
+    changeFilter: (data: IFFilterTable[]) => void;
+    changeOrder: (data: IFOrderTable[]) => void;
     indexCol: number;
     indexParent: number;
     objWidthFixLeft: any;
@@ -17,6 +20,13 @@ type IFDataProps = {
     fisrtObjWidthFixRight: number;
     selectedRows: any[];
     isMulti: boolean;
+    allowFilter?: boolean;
+    allowOrder?: boolean;
+    filterBy: IFFilterTable[];
+    orderBy: IFOrderTable[];
+    container: any;
+    optionsFilter: any;
+    formatSetting?: IFTableEditFormat;
 };
 declare const HeaderTableCol: (props: IFDataProps) => import("react/jsx-runtime").JSX.Element;
 export default HeaderTableCol;

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

@@ -23,6 +23,9 @@ export type IFTableEditProps = {
     searchSetting?: IFTableEditSearchSetting;
     selectedItem?: any;
     setDataSource?: any;
+    allowFilter?: boolean;
+    allowOrder?: boolean;
+    optionsFilter?: any;
     setSelectedItem?: Dispatch<SetStateAction<any>>;
     commandClick?: (data: any) => void;
     handleSelect?: (data: any) => void;

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

@@ -159,6 +159,10 @@ export type IColumnTable = {
     columns?: IColumnTable[];
     /** Không cho phép dán giá trị */
     disablePaste?: boolean;
+    /** Kiểu lọc cột */
+    filterType?: IFilterType;
+    /** Cho phép lọc cột */
+    allowFilter?: boolean;
     /**Giá trị trường callback khi copy xuống các dòng dưới */
     callbackValue?: (row: any) => any;
     /** Validate giá trị */
@@ -284,8 +288,16 @@ export type IHeaderColumnTable = {
     columns?: IColumnTable[];
     /** Căn lề */
     textAlign?: ITextAlign;
+    /** Kiểu lọc cột */
+    filterType?: IFilterType;
+    /** Cho phép lọc cột */
+    allowFilter?: boolean;
     /** Cố định trái/phải */
     fixedType?: 'left' | 'right' | undefined;
+    /** Cấu hình cho kiểu numeric */
+    numericSettings?: ISettingNumericElement;
+    /** Kiểu chỉnh sửa */
+    editType?: IEditType;
     /** Thứ tự cột */
     index?: number;
 };

package/dist/component/utils.d.ts

@@ -45,4 +45,6 @@ export declare const calculateTableStructure: (columns: any[]) => {
     objWidthFixRight: Record<number, number>;
     lastObjWidthFixLeft: number;
     fisrtObjWidthFixRight: number;
+    firstEdit: any;
+    lastEdit: any;
 };

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

@@ -12,11 +12,11 @@ type VirtualTableProps = {
     formatSetting?: IFTableEditFormat;
     allowFilter?: boolean;
     allowOrder?: boolean;
+    optionsFilter?: any;
     pagingSetting?: IFTableEditPaging;
     toolbarSetting?: IFTableEditToolbar;
     searchSetting?: IFTableEditSearchSetting;
     columnsAggregate?: IColumnsVirtualizedAgg[];
-    optionsFilter?: any;
     setColumns?: (columns: IColumnVirtualizedTable[]) => void;
     commandClick?: (data: any) => void;
     changeFilter?: (data: IFFilterTable[]) => void;

package/dist/index.d.ts

@@ -163,6 +163,10 @@ type IColumnTable = {
     columns?: IColumnTable[];
     /** Không cho phép dán giá trị */
     disablePaste?: boolean;
+    /** Kiểu lọc cột */
+    filterType?: IFilterType;
+    /** Cho phép lọc cột */
+    allowFilter?: boolean;
     /**Giá trị trường callback khi copy xuống các dòng dưới */
     callbackValue?: (row: any) => any;
     /** Validate giá trị */
@@ -288,8 +292,16 @@ type IHeaderColumnTable = {
     columns?: IColumnTable[];
     /** Căn lề */
     textAlign?: ITextAlign;
+    /** Kiểu lọc cột */
+    filterType?: IFilterType;
+    /** Cho phép lọc cột */
+    allowFilter?: boolean;
     /** Cố định trái/phải */
     fixedType?: 'left' | 'right' | undefined;
+    /** Cấu hình cho kiểu numeric */
+    numericSettings?: ISettingNumericElement;
+    /** Kiểu chỉnh sửa */
+    editType?: IEditType;
     /** Thứ tự cột */
     index?: number;
 };
@@ -433,6 +445,9 @@ type IFTableEditProps = {
     searchSetting?: IFTableEditSearchSetting;
     selectedItem?: any;
     setDataSource?: any;
+    allowFilter?: boolean;
+    allowOrder?: boolean;
+    optionsFilter?: any;
     setSelectedItem?: Dispatch<SetStateAction<any>>;
     commandClick?: (data: any) => void;
     handleSelect?: (data: any) => void;
@@ -501,6 +516,8 @@ declare const calculateTableStructure: (columns: any[]) => {
     objWidthFixRight: Record<number, number>;
     lastObjWidthFixLeft: number;
     fisrtObjWidthFixRight: number;
+    firstEdit: any;
+    lastEdit: any;
 };
 
 type IFDataProps$1 = {
@@ -722,11 +739,11 @@ type VirtualTableProps = {
     formatSetting?: IFTableEditFormat;
     allowFilter?: boolean;
     allowOrder?: boolean;
+    optionsFilter?: any;
     pagingSetting?: IFTableEditPaging;
     toolbarSetting?: IFTableEditToolbar;
     searchSetting?: IFTableEditSearchSetting;
     columnsAggregate?: IColumnsVirtualizedAgg[];
-    optionsFilter?: any;
     setColumns?: (columns: IColumnVirtualizedTable[]) => void;
     commandClick?: (data: any) => void;
     changeFilter?: (data: IFFilterTable[]) => void;

package/dist/index.js

@@ -19358,6 +19358,9 @@ const calculateTableStructure = (columns) => {
     const flatVisble = flat.filter((e) => e.visible !== false);
     const lastObjWidthFixLeft = Math.max(...Object.keys(objWidthFixLeft).map(Number), 0);
     const fisrtObjWidthFixRight = Math.min(...Object.keys(objWidthFixRight).map(Number), flat.length);
+    const editableColumns = flat.filter(item => item.editEnable && item.visible !== false && !item.disabledCondition);
+    const firstEdit = editableColumns[0];
+    const lastEdit = editableColumns[editableColumns.length - 1];
     return {
         levels,
         flat,
@@ -19365,7 +19368,9 @@ const calculateTableStructure = (columns) => {
         objWidthFixLeft,
         objWidthFixRight,
         lastObjWidthFixLeft,
-        fisrtObjWidthFixRight
+        fisrtObjWidthFixRight,
+        firstEdit,
+        lastEdit
     };
 };
 
@@ -41811,31 +41816,51 @@ var css_248z$1 = ".react-resizable {\n  position: relative;\n}\n.react-resizable
 styleInject(css_248z$1);
 
 const HeaderTableCol$1 = (props) => {
-    const { selectEnable, dataSource, setSelectedRows, col, indexCol, indexParent, objWidthFixLeft, objWidthFixRight, totalCount, selectedRows, column, setColumn, fisrtObjWidthFixRight, lastObjWidthFixLeft, isMulti } = 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 = [...column];
+            const newColumns = [...columns];
             newColumns[indexCol].width = size.width;
-            if ((column[indexCol]?.maxWidth ?? 0) < size.width) {
+            if ((columns[indexCol]?.maxWidth ?? 0) < size.width) {
                 newColumns[indexCol].maxWidth = size.width;
             }
-            if ((column[indexCol]?.minWidth ?? 0) > size.width) {
+            if ((columns[indexCol]?.minWidth ?? 0) > size.width) {
                 newColumns[indexCol].minWidth = size.width;
             }
-            setColumn(newColumns);
+            if (setColumns) {
+                setColumns(newColumns);
+            }
         }
     };
-    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 : undefined, 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: {
+    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[col.index ?? 0] : undefined,
-                    right: col.fixedType === 'right' ? objWidthFixRight[col.index ?? 0] : undefined,
-                    width: col.width ? typeof col.width === 'number' ? col.width : col.width?.includes('px') || col.width?.includes('%') ? col.width : `${col.width}px` : 'auto',
-                    minWidth: col.fixedType ? col.width : col.minWidth ? typeof col.minWidth === 'number' ? col.minWidth : col.minWidth?.includes('px') || col.minWidth?.includes('%') ? col.minWidth : `${col.minWidth}px` : 'auto',
-                    maxWidth: col.fixedType ? col.width : col.maxWidth ? typeof col.maxWidth === 'number' ? col.maxWidth : col.maxWidth?.includes('px') || col.maxWidth?.includes('%') ? col.maxWidth : `${col.maxWidth}px` : 'auto'
-                }, children: jsxRuntime.jsxs("div", { style: { justifyContent: col.textAlign ?? 'left' }, className: classNames$1('r-headercell-div'), children: [col.field === '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) => {
+                    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.field === '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; }));
@@ -41844,7 +41869,89 @@ const HeaderTableCol$1 = (props) => {
                                         setSelectedRows([]);
                                     }
                                 }
-                            } })), col.field !== 'checkbox' && jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("span", { className: 'header-content', children: t(col.headerText ?? '') }) })] }) }) })) }, `header-${indexCol}`));
+                            } })), col.field !== '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.field !== '#' && col.field !== '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('cursor-pointer 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$1, { setOpenFilter: setOpenFilter, filter: filter, filterBy: filterBy, optionsFilter: optionsFilter, formatSetting: formatSetting, changeFilter: changeFilter, column: col }) }) })] })] })] })] }) }) })) }, `header-${indexCol}`));
+};
+const RenderFilterElement$1 = ({ filter, optionsFilter, formatSetting, filterBy, setOpenFilter, changeFilter, column }) => {
+    const { t } = reactI18next.useTranslation();
+    const [operator, setOperator] = React$5.useState(filter?.ope ?? ((!column.filterType && column.editType === 'numeric') || column.filterType === 'select' ? 'equal' : 'contains'));
+    const [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 (filter) {
+            filter.ope = operator;
+            filter.value = valueFilter ?? '';
+        }
+        else {
+            filterBy.push({ key: column.field, ope: operator, value: valueFilter ?? '' });
+        }
+        changeFilter([...filterBy]);
+        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.editType === 'numeric') || column.filterType === 'numeric') ? jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [RenderNumberFilter(), " "] }) : (column.filterType === 'select' ? jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [RenderSelectFilter(), " "] }) : RenderStringFilter()), jsxRuntime.jsxs("div", { className: 'd-flex justify-content-end', children: [jsxRuntime.jsx(Button$1, { color: 'primary', style: { borderRadius: 3 }, className: 'me-50 py-25 px-50 fw-bold', onClick: handleSave, children: t('Filter') }), jsxRuntime.jsx(Button$1, { className: 'py-25 px-50  fw-bold', outline: true, style: { borderRadius: 3 }, onClick: () => {
+                            if (filterBy) {
+                                changeFilter(filterBy.filter((x) => x.key !== column.field));
+                            }
+                            setOpenFilter(false);
+                        }, children: t('Clear') })] })] }));
 };
 
 const defaultMaxHeight = 250;
@@ -42616,9 +42723,15 @@ const EditFormInline = React$5.forwardRef((props, ref) => {
                 }) })] }));
 });
 
+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 TableEdit = React$5.forwardRef((props, ref) => {
     const { t } = reactI18next.useTranslation();
-    const { idTable, dataSource, columns, commandClick, dataSourceChange, rowChange, pagingSetting, setDataSource, height, maxHeight, minHeight, defaultValue, toolbarSetting, searchSetting, setSelectedItem, selectedItem, selectEnable, editDisable, addDisable, buttonSetting, formatSetting, handleSelect, haveSum, isMulti, disableAutoKey, onDuplicate } = props;
+    const { idTable, dataSource, columns, commandClick, dataSourceChange, rowChange, pagingSetting, setDataSource, height, maxHeight, minHeight, defaultValue, toolbarSetting, searchSetting, setSelectedItem, selectedItem, selectEnable, editDisable, addDisable, buttonSetting, formatSetting, handleSelect, haveSum, isMulti, disableAutoKey, onDuplicate, allowFilter = true, allowOrder, optionsFilter } = props;
     React$5.useImperativeHandle(ref, () => {
         return {
             refeshFocusRow: handleRefeshRow
@@ -42627,17 +42740,11 @@ const TableEdit = React$5.forwardRef((props, ref) => {
     const [refreshRow, setRefreshRow] = React$5.useState(false);
     const [indexFocus, setIndexFocus] = React$5.useState(-1);
     const [selectedRows, setSelectedRows] = React$5.useState([]);
-    const [headerColumns, setHeaderColumns] = React$5.useState([[]]);
     const [contentColumns, setContentColumns] = React$5.useState([]);
-    const [levelCol, setLevelCol] = React$5.useState(0);
-    const [columnFistEdit, setColumnFistEdit] = React$5.useState(0);
-    const [columnLastEdit, setColumnlastEdit] = React$5.useState(0);
-    const [objWidthFixRight, setObjWidthFixRight] = React$5.useState({});
-    const [objWidthFixLeft, setObjWidthFixLeft] = React$5.useState({});
-    const [lastObjWidthFixLeft, setLastObjWidthFixLeft] = React$5.useState(0);
-    const [fisrtObjWidthFixRight, setFisrtObjWidthFixRight] = React$5.useState(0);
     const [openPopupSetupColumn, setOpenPopupSetupColumn] = React$5.useState(false);
     const [searchTerm, setSearchTerm] = React$5.useState('');
+    const [orderBy, setOrderBy] = React$5.useState([]);
+    const [filterBy, setFilterBy] = React$5.useState([]);
     const tableElement = React$5.useRef(null);
     const gridRef = React$5.useRef(null);
     const totalCount = dataSource.length;
@@ -42650,95 +42757,11 @@ const TableEdit = React$5.forwardRef((props, ref) => {
             pagingSetting.setCurrentPage(1);
         }
     }, [dataSource]);
-    React$5.useEffect(() => {
-        let indexFirst = -1;
-        let indexlast = -1;
-        let letfWidthFix = 0;
-        let rightWidthFix = 0;
-        contentColumns.forEach((item, index) => {
-            if (levelCol === 1) {
-                headerColumns[0][index].width = item.width;
-                headerColumns[0][index].visible = item.visible;
-                headerColumns[0][index].fixedType = item.fixedType;
-            }
-            if (item.fixedType === 'left' && item.visible !== false) {
-                setLastObjWidthFixLeft(index);
-                objWidthFixLeft[index] = letfWidthFix;
-                letfWidthFix += Number(item.width ?? 40);
-            }
-            const lasColumn = contentColumns[contentColumns.length - 1 - index];
-            if (lasColumn.fixedType === 'right' && lasColumn.visible !== false) {
-                setFisrtObjWidthFixRight(contentColumns.length - 1 - index);
-                objWidthFixRight[contentColumns.length - 1 - index] = rightWidthFix;
-                rightWidthFix += Number(lasColumn.width ?? 40);
-            }
-            if (item.editEnable && (item.visible !== false) && (!item.disabledCondition)) {
-                if (indexFirst === -1) {
-                    indexFirst = index;
-                }
-                indexlast = index;
-            }
-        });
-        if (levelCol === 1) {
-            setHeaderColumns([...headerColumns]);
-        }
-        setObjWidthFixLeft(objWidthFixLeft);
-        setObjWidthFixRight(objWidthFixRight);
-        setColumnFistEdit(indexFirst + 1);
-        setColumnlastEdit(indexlast + 1);
-    }, [contentColumns]);
-    React$5.useEffect(() => {
-        const arrHeaderColumns = [];
-        const arrContentColumns = [];
-        let headerLevelRow = 0;
-        if (levelCol) {
-            headerLevelRow = levelCol;
-        }
-        else {
-            headerLevelRow = stretchColumn(columns, 0);
-            setLevelCol(headerLevelRow);
-        }
-        for (let i = 0; i < headerLevelRow; i++) {
-            arrHeaderColumns.push([]);
-        }
-        getNestedChildren(columns, arrHeaderColumns, arrContentColumns, 0, headerLevelRow);
-        setHeaderColumns(arrHeaderColumns);
-        setContentColumns(arrContentColumns);
+    const { levels: headerColumns, flatVisble, objWidthFixLeft, objWidthFixRight, lastObjWidthFixLeft, fisrtObjWidthFixRight, firstEdit: columnFirstEdit, lastEdit: columnLastEdit } = React$5.useMemo(() => {
+        const obj = calculateTableStructure(columns);
+        setContentColumns(obj.flat);
+        return obj;
     }, [columns]);
-    const getNestedChildren = (array, arrHeaderColumns, arrContentColumns, level, maxLevelRow) => {
-        array.forEach((item) => {
-            const ele = { ...item, visible: item.visible, rowspan: 1, index: 0 };
-            if (item.columns && item.columns?.length > 0) {
-                const countLevel = getNestedChildren(item.columns, arrHeaderColumns, arrContentColumns, level + 1, maxLevelRow);
-                arrHeaderColumns[(maxLevelRow - 1) - countLevel].push(ele);
-            }
-            else {
-                ele.rowspan = maxLevelRow - level;
-                ele.index = arrContentColumns.length;
-                if (maxLevelRow === 1) {
-                    ele.visible = (item.invisibleDisable ? item.visible : (contentColumns[arrContentColumns.length]?.visible ?? item.visible));
-                    ele.width = (contentColumns[arrContentColumns.length]?.width ?? item.width);
-                    ele.maxWidth = (contentColumns[arrContentColumns.length]?.maxWidth ?? item.maxWidth);
-                    ele.minWidth = (contentColumns[arrContentColumns.length]?.minWidth ?? item.minWidth);
-                }
-                arrHeaderColumns[level].push(ele);
-                arrContentColumns.push(ele);
-            }
-        });
-        return level;
-    };
-    const stretchColumn = (subColumns, headerLevelRow) => {
-        let count = headerLevelRow + 1;
-        subColumns.map((item) => {
-            if (item.columns && item.columns.length > 0) {
-                const newCount = stretchColumn(item.columns, headerLevelRow + 1);
-                if (newCount > count) {
-                    count = newCount;
-                }
-            }
-        });
-        return count;
-    };
     const handleRefeshRow = () => {
         setRefreshRow(true);
         setTimeout(() => {
@@ -43068,7 +43091,7 @@ const TableEdit = React$5.forwardRef((props, ref) => {
         }
         if (tableElement) {
             setIndexFocus(totalCount);
-            focusNewElement(columnFistEdit, totalCount + 1, true);
+            focusNewElement(columnFirstEdit, totalCount + 1, true);
         }
     };
     const checkKeyDown = (e, row, col, indexRow, indexCol) => {
@@ -43304,14 +43327,6 @@ const TableEdit = React$5.forwardRef((props, ref) => {
     };
     const changeDataSource = (data, numberOfRows) => {
         if (!editDisable && setDataSource) {
-            if ((searchSetting?.searchTerm !== undefined ? searchSetting?.searchTerm : searchTerm)) {
-                if (searchSetting?.setSearchTerm) {
-                    searchSetting?.setSearchTerm('');
-                }
-                else {
-                    setSearchTerm('');
-                }
-            }
             if (numberOfRows && !addDisable) {
                 for (let index = 0; index < numberOfRows; index++) {
                     data.push(defaultValue ? { ...defaultValue, [fieldKey]: disableAutoKey ? undefined : generateUUID() } : {});
@@ -43512,22 +43527,52 @@ const TableEdit = React$5.forwardRef((props, ref) => {
                     textAlign: col.textAlign ? col.textAlign : 'left'
                 }, children: jsxRuntime.jsxs("div", { className: "r-footer-div", children: [col.haveSum === true && col.editType === "numeric" && (Number(sumValue) >= 0) && jsxRuntime.jsx(jsxRuntime.Fragment, { children: formartNumberic(sumValue, formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false) }), col.haveSum === true && col.editType === "numeric" && (Number(sumValue) < 0) && jsxRuntime.jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${formartNumberic(sumValue, formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false)}${formatSetting?.suffixNegative ?? ''}`] })] }) }) }, `summarycell-${indexCol}`));
     };
-    const checkSearch = (keyword, data, fieldKey) => {
-        if (!keyword || fieldKey.length === 0) {
-            return true;
-        }
-        for (let index = 0; index < fieldKey.length; index++) {
-            const key = fieldKey[index].trim();
-            if (data[key] && data[key].toString().trim().toLowerCase().includes(keyword.trim().toLowerCase())) {
-                return true;
+    /**
+     * 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
+     */
+    function checkRowMatch(row, filters, keyword, searchKeys) {
+        if ((!filters || filters.length === 0) && (!keyword || !searchClient))
+            return true; // Không có filter thì mặc định là match
+        const isFilterMatch = filters.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();
+            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;
             }
-        }
-        return false;
-    };
+        });
+        const isSearchMatch = !keyword || searchKeys.some(key => {
+            const val = row[key];
+            return val?.toString().toLowerCase().includes(keyword.trim().toLowerCase());
+        });
+        return isFilterMatch && isSearchMatch;
+    }
     const renderData = () => {
         return (dataSource.map((row, indexRow) => {
             const isSelected = selectedRows?.some((x) => x[fieldKey] === row[fieldKey]);
-            const flagSearch = !searchClient || checkSearch(searchSetting?.searchTerm !== undefined ? searchSetting?.searchTerm : searchTerm, row, searchSetting?.keyField ?? []);
+            const flagSearch = checkRowMatch(row, filterBy, searchSetting?.searchTerm !== undefined ? searchSetting?.searchTerm : searchTerm, searchSetting?.keyField ?? []);
             if (flagSearch) {
                 const flagDisplay = !pagingClient || ((indexRow + 1) > ((pagingSetting.pageSize ?? 0) * ((pagingSetting.currentPage ?? 0) - 1)) && (indexRow + 1) <= ((pagingSetting.pageSize ?? 0) * ((pagingSetting.currentPage ?? 0))));
                 return (flagDisplay && jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("tr", { className: classNames$1('r-row'), children: contentColumns.map((col, indexCol) => renderContentCol(col, row, indexRow, indexCol, isSelected)) }, `row-${indexRow}`) }));
@@ -43539,14 +43584,18 @@ const TableEdit = React$5.forwardRef((props, ref) => {
             pagingSetting?.setCurrentPage(1);
         }
     }, [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.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(RenderColGroup, { contentColumns: flatVisble }), 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$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}`));
+                                                        return (jsxRuntime.jsx(HeaderTableCol$1, { col: col, idTable: idTable ?? '', dataSource: dataSource, indexCol: index, indexParent: indexParent, isMulti: isMulti ?? false, objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, selectEnable: selectEnable ?? false, selectedRows: selectedRows, setSelectedRows: setSelectedRows, container: tableElement, filterBy: filterBy, orderBy: orderBy, optionsFilter: optionsFilter, allowFilter: allowFilter, allowOrder: allowOrder, formatSetting: formatSetting, changeFilter: (val) => {
+                                                                setFilterBy([...val]);
+                                                            }, changeOrder: (val) => {
+                                                                setOrderBy([...val]);
+                                                            }, columns: contentColumns, setColumns: 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));
                                                 }) }) : jsxRuntime.jsx(jsxRuntime.Fragment, {}) })] }) }), toolbarSetting?.showBottomToolbar && jsxRuntime.jsx(ToolbarBottom, { handleAdd: (numberOfRows) => {
-                                    handleAdd(dataSource, tableElement.current, columnFistEdit, changeDataSource, pagingSetting, setIndexFocus, focusNewElement, numberOfRows);
+                                    handleAdd(dataSource, tableElement.current, columnFirstEdit, changeDataSource, pagingSetting, setIndexFocus, focusNewElement, numberOfRows);
                                 }, handleDuplicate: () => {
                                     handleDuplicate(dataSource, indexFocus, fieldKey, defaultValue, fieldUniKey, changeDataSource, tableElement, totalCount, toolbarSetting, buttonSetting, editDisable, addDisable, onDuplicate);
                                 }, handleInsertAfter: () => {
@@ -65662,12 +65711,6 @@ const RenderContentCol = (props) => {
         }, 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);