react-table-edit 1.5.6 → 1.5.8

package/dist/index.mjs

@@ -20487,13 +20487,25 @@ const ReactInput = (props) => {
 
 const RenderToolbarTop = ({ toolbarTopOption }) => {
     return (jsx("div", { id: "table_custom_top_toolbar", className: "r-toolbar r-toolbar-top", "aria-orientation": "horizontal", children: jsxs("div", { className: "r-toolbar-items", children: [jsx("div", { className: "r-toolbar-left", children: toolbarTopOption?.map((item, index) => {
-                        return ((item.align === 'left') ? jsx(Fragment$1, { children: jsx("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-left-${index}`) }) : '');
+                        return ((item.align === 'left') ? jsx(ToolBarElement, { item: item, index: index }) : '');
                     }) }), jsx("div", { className: "r-toolbar-center", children: toolbarTopOption?.map((item, index) => {
-                        return ((item.align === 'center') ? jsx(Fragment$1, { children: jsx("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-center-${index}`) }) : '');
+                        return ((item.align === 'center') ? jsx(ToolBarElement, { item: item, index: index }) : '');
                     }) }), jsx("div", { className: "r-toolbar-right", children: toolbarTopOption?.map((item, index) => {
-                        return ((item.align === 'right') ? jsx(Fragment$1, { children: jsx("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-right-${index}`) }) : '');
+                        return ((item.align === 'right') ? jsx(ToolBarElement, { item: item, index: index }) : '');
                     }) })] }) }));
 };
+const ToolBarElement = ({ item, index }) => {
+    if (item.id === 'GROUP') {
+        return (jsx("div", { className: "r-toolbar-item cursor-pointer", "aria-disabled": "false", children: jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "stroke-width": "1.5", id: "toolbar-columns-group", "font-size": "20", color: "#7F7F7F", className: "cursor-pointer", children: [jsxs("g", { "clip-path": "url(#group_svg__a)", fill: "#7F7F7F", children: [jsx("path", { d: "M22.167 0h-7.334c-.486 0-.952.181-1.295.503A1.662 1.662 0 0 0 13 1.714v20.572c0 .454.194.89.538 1.211.343.322.81.503 1.295.503h7.334c.486 0 .952-.181 1.295-.503.344-.321.537-.757.538-1.211V1.714c0-.454-.194-.89-.538-1.211A1.902 1.902 0 0 0 22.167 0Zm0 1.714v6h-7.334v-6h7.334Zm0 7.715v5.142h-7.334V9.43h7.334Zm-7.334 12.857v-6h7.334v6h-7.334ZM7.502 11.25h-1.5v-1.5h-1.5v1.5h-1.5v1.5h1.5v1.5h1.5v-1.5h1.5v-1.5Z" }), jsx("path", { d: "M10.502 4.5V3h-4.5a1.502 1.502 0 0 0-1.5 1.5v2.31a5.242 5.242 0 0 0 0 10.38v2.31a1.502 1.502 0 0 0 1.5 1.5h4.5v-1.5h-4.5v-2.31a5.243 5.243 0 0 0 0-10.38V4.5h4.5Zm-1.5 7.5a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" })] }), jsx("defs", { children: jsx("clipPath", { id: "group_svg__a", children: jsx("path", { fill: "#fff", d: "M0 0h24v24H0z" }) }) })] }) }, `toolbar-top-${index}`));
+    }
+    if (item.id === 'EXPAND') {
+        return (jsx("div", { className: "r-toolbar-item cursor-pointer", "aria-disabled": "false" }, `toolbar-top-${index}`));
+    }
+    if (item.id === 'COLUMN_CHOOSE') {
+        return (jsx("div", { className: "r-toolbar-item cursor-pointer", "aria-disabled": "false", children: jsx(SvgSettings, { className: "me-1", fontSize: 20, color: "#7F7F7F" }) }, `toolbar-top-${index}`));
+    }
+    return (jsx("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template?.() }, `toolbar-top-${index}`));
+};
 
 const handleAdd = (dataSource, containerRef, indexFirstEdit, 
 /*eslint-disable*/
@@ -23953,7 +23965,9 @@ const EditForm = forwardRef((props, ref) => {
     const [itemsField, setItemsField] = useState([]);
     const { t } = useTranslation();
     useOnClickOutside(editFormRef, () => {
-        closeMenu();
+        if (dropdownOpen !== false) {
+            closeMenu();
+        }
     });
     const closeMenu = () => {
         setTimeout(() => {
@@ -24117,43 +24131,43 @@ const EditForm = forwardRef((props, ref) => {
             });
         }
     }, [inputRef]);
-    return (jsx("div", { className: "form-edit", ref: ref, id: id, children: jsx("div", { ref: editFormRef, children: jsxs(Dropdown$1, { isOpen: dropdownOpen, toggle: () => { }, children: [jsx(DropdownToggle$1, { tag: 'div', children: jsxs("div", { className: classNames$1('display-value', { 'r-is-focus': isFocus || dropdownOpen }, { 'is-invalid': invalid }), onClick: handleOnClick, children: [template?.(rowData, indexRow) ?? displayValue, jsx(Input$1, { style: {
-                                        outline: 'none',
-                                        border: 'none',
-                                        width: template ? 0 : '100%',
-                                        height: template ? 0 : 28,
-                                        lineHeight: template ? 0 : 19,
-                                        padding: template ? 0 : 'auto',
-                                        backgroundColor: '$white',
-                                        textAlign: textAlign ?? 'left'
-                                    }, placeholder: placeholder, innerRef: inputRef, onKeyDown: (e) => handleOnKeyDown(e), onPaste: (e) => onPaste && onPaste(e), readOnly: true })] }) }), jsx(DropdownMenu$1, { className: 'formula-dropdown icon-dropdown p-0', container: component, style: {
-                            position: 'fixed',
-                            minWidth: minWidth ? minWidth : defaultWidth,
-                            width: menuWidth ? menuWidth : 'min-content',
-                            maxWidth: innerWidth > 1280 ? 1280 : innerWidth,
-                            borderRadius: 8,
-                            zIndex: 9999
-                        }, children: jsxs(DropdownItem$1, { className: 'p-0', style: { borderRadius: '6px' }, tag: 'div', header: true, children: [jsx("div", { onKeyDown: (e) => formKeyDown(e, handleSubmit(handleOnSubmit)), className: 'p-1', style: {
-                                        maxHeight: menuHeight ? menuHeight : 300,
-                                        overflow: "auto"
-                                    }, children: itemsField ? renderForm(itemsField) : '' }), jsxs("div", { className: "d-flex justify-content-between p-50", style: { boxShadow: "0 4px 24px 0 rgb(34 41 47 / 10%)" }, children: [jsx("div", { className: "text-primary py-25", style: { fontSize: 12 }, children: footerTemplate ? footerTemplate(rowData) : '' }), !onChangeField ? jsxs("div", { className: "d-flex justify-content-end", children: [isClearable && jsx(Button$1, { className: 'btn me-50 py-25 px-50', outline: true, onClick: () => {
-                                                        itemsField.forEach((e) => {
-                                                            if (e.type === 'numeric') {
-                                                                setValue(e.name, 0);
-                                                            }
-                                                            else {
-                                                                setValue(e.name, '');
-                                                            }
-                                                        });
-                                                    }, onKeyDown: (e) => {
-                                                        if (e.code === 'Tab') {
-                                                            closeMenu();
+    return (jsx("div", { className: "form-edit", ref: ref, id: id, children: jsxs(Dropdown$1, { isOpen: dropdownOpen, toggle: () => { }, children: [jsx(DropdownToggle$1, { tag: 'div', children: jsxs("div", { className: classNames$1('display-value', { 'r-is-focus': isFocus || dropdownOpen }, { 'is-invalid': invalid }), onClick: handleOnClick, children: [template?.(rowData, indexRow) ?? displayValue, jsx(Input$1, { style: {
+                                    outline: 'none',
+                                    border: 'none',
+                                    width: template ? 0 : '100%',
+                                    height: template ? 0 : 28,
+                                    lineHeight: template ? 0 : 19,
+                                    padding: template ? 0 : 'auto',
+                                    backgroundColor: '$white',
+                                    textAlign: textAlign ?? 'left'
+                                }, placeholder: placeholder, innerRef: inputRef, onKeyDown: (e) => handleOnKeyDown(e), onPaste: (e) => onPaste && onPaste(e), readOnly: true })] }) }), jsx(DropdownMenu$1, { className: 'formula-dropdown icon-dropdown p-0', container: component, style: {
+                        position: 'fixed',
+                        minWidth: minWidth ? minWidth : defaultWidth,
+                        width: menuWidth ? menuWidth : 'min-content',
+                        maxWidth: innerWidth > 1280 ? 1280 : innerWidth,
+                        borderRadius: 8,
+                        zIndex: 9999
+                    }, children: jsxs(DropdownItem$1, { className: 'p-0', style: { borderRadius: '6px' }, tag: 'div', header: true, children: [jsx("div", { onKeyDown: (e) => formKeyDown(e, handleSubmit(handleOnSubmit)), className: 'p-1', ref: editFormRef, style: {
+                                    maxHeight: menuHeight ? menuHeight : 300,
+                                    overflow: "auto"
+                                }, children: itemsField ? renderForm(itemsField) : '' }), jsxs("div", { className: "d-flex justify-content-between p-50", style: { boxShadow: "0 4px 24px 0 rgb(34 41 47 / 10%)" }, children: [jsx("div", { className: "text-primary py-25", style: { fontSize: 12 }, children: footerTemplate ? footerTemplate(rowData) : '' }), !onChangeField ? jsxs("div", { className: "d-flex justify-content-end", children: [isClearable && jsx(Button$1, { className: 'btn me-50 py-25 px-50', outline: true, onClick: () => {
+                                                    itemsField.forEach((e) => {
+                                                        if (e.type === 'numeric') {
+                                                            setValue(e.name, 0);
                                                         }
-                                                    }, children: t('Clear') }), jsx(Button$1, { color: 'primary', className: 'btn btn-primary py-25 px-50', onClick: handleSubmit(handleOnSubmit), onKeyDown: (e) => {
-                                                        if (e.code === 'Tab') {
-                                                            closeMenu();
+                                                        else {
+                                                            setValue(e.name, '');
                                                         }
-                                                    }, children: t('Save') })] }) : jsx(Fragment$1, {})] })] }) })] }) }) }));
+                                                    });
+                                                }, onKeyDown: (e) => {
+                                                    if (e.code === 'Tab') {
+                                                        closeMenu();
+                                                    }
+                                                }, children: t('Clear') }), jsx(Button$1, { color: 'primary', className: 'btn btn-primary py-25 px-50', onClick: handleSubmit(handleOnSubmit), onKeyDown: (e) => {
+                                                    if (e.code === 'Tab') {
+                                                        closeMenu();
+                                                    }
+                                                }, children: t('Save') })] }) : jsx(Fragment$1, {})] })] }) })] }) }));
 });
 
 const SelectTableBox = (props) => {
@@ -43621,7 +43635,7 @@ 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, objHeaderWidthFixLeft, objHeaderWidthFixRight, totalCount, selectedRows, columns, orderBy, changeFilter, filterBy, changeOrder, allowFilter, allowOrder, container, fisrtObjWidthFixRight, lastObjWidthFixLeft, setContentColumns, formatSetting, optionsFilter, idTable, isMulti } = props;
+    const { selectEnable, dataSource, setSelectedRows, col, indexCol, indexParent, objHeaderWidthFixLeft, objHeaderWidthFixRight, totalCount, selectedRows, columns, orderBy, changeFilter, filterBy, changeOrder, allowFiltering, allowSorting, container, fisrtObjWidthFixRight, lastObjWidthFixLeft, setContentColumns, formatSetting, optionsFilter, idTable, isMulti } = props;
     const { t } = useTranslation();
     const headerRef = useRef(null);
     const order = orderBy.find((item) => item.key === col.field);
@@ -43658,7 +43672,7 @@ const HeaderTableCol$1 = (props) => {
                             orderBy.push({ direction: 'asc', key: col.field });
                             changeOrder(orderBy);
                         }
-                    }, className: classNames$1('r-headercell-div', { 'cursor-pointer': allowOrder }), children: [col.field === 'checkbox' && (jsx(Input$1, { checked: !!(totalCount > 0 && selectedRows?.length >= totalCount), type: "checkbox", className: classNames$1('cursor-pointer', { 'd-none': !isMulti }), style: { textAlign: col.textAlign ?? 'left', marginTop: 6 }, onChange: (e) => {
+                    }, className: classNames$1('r-headercell-div', { 'cursor-pointer': allowSorting }), children: [col.field === 'checkbox' && (jsx(Input$1, { checked: !!(totalCount > 0 && selectedRows?.length >= totalCount), type: "checkbox", className: classNames$1('cursor-pointer', { 'd-none': !isMulti }), style: { textAlign: col.textAlign ?? 'left', marginTop: 6 }, onChange: (e) => {
                                 if (selectEnable) {
                                     if (e.target.checked) {
                                         setSelectedRows(dataSource.map((item) => { return item; }));
@@ -43667,7 +43681,7 @@ const HeaderTableCol$1 = (props) => {
                                         setSelectedRows([]);
                                     }
                                 }
-                            } })), col.field !== 'checkbox' && jsxs(Fragment$1, { children: [jsxs("div", { className: 'header-content', style: { justifyContent: col.textAlign ?? 'left' }, children: [jsx("span", { id: `header-${idTable}-${indexParent}-${indexCol}`, ref: headerRef, className: 'text-content', children: t(herderContent) }), checkOverflow() && jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `header-${idTable}-${indexParent}-${indexCol}`, children: t(herderContent) })] }), col.field !== '#' && col.field !== 'command' && jsxs("div", { className: 'd-flex', children: [allowOrder && order?.direction === 'asc' && jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: 'ms-25', width: "10", height: "10", viewBox: "0 0 16 18", fill: "none", children: [jsx("g", { "clip-path": "url(#clip0_520_6)", children: 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" }) }), jsx("defs", { children: jsx("clipPath", { id: "clip0_520_6", children: jsx("rect", { width: "16", height: "18", fill: "white" }) }) })] }), allowOrder && order?.direction === 'desc' && jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: 'ms-25', width: "10", height: "10", viewBox: "0 0 16 18", fill: "none", children: [jsx("g", { "clip-path": "url(#clip0_520_2)", children: 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" }) }), jsx("defs", { children: jsx("clipPath", { id: "clip0_520_2", children: jsx("rect", { width: "16", height: "18", fill: "white" }) }) })] }), allowFilter && (col.columns?.length ?? 0) === 0 && col.allowFilter !== false && jsxs(Dropdown$1, { isOpen: openFilter, toggle: (e) => {
+                            } })), col.field !== 'checkbox' && jsxs(Fragment$1, { children: [jsxs("div", { className: 'header-content', style: { justifyContent: col.textAlign ?? 'left' }, children: [jsx("span", { id: `header-${idTable}-${indexParent}-${indexCol}`, ref: headerRef, className: 'text-content', children: t(herderContent) }), checkOverflow() && jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `header-${idTable}-${indexParent}-${indexCol}`, children: t(herderContent) })] }), col.field !== '#' && col.field !== 'command' && jsxs("div", { className: 'd-flex', children: [allowSorting && order?.direction === 'asc' && jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: 'ms-25', width: "10", height: "10", viewBox: "0 0 16 18", fill: "none", children: [jsx("g", { "clip-path": "url(#clip0_520_6)", children: 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" }) }), jsx("defs", { children: jsx("clipPath", { id: "clip0_520_6", children: jsx("rect", { width: "16", height: "18", fill: "white" }) }) })] }), allowSorting && order?.direction === 'desc' && jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: 'ms-25', width: "10", height: "10", viewBox: "0 0 16 18", fill: "none", children: [jsx("g", { "clip-path": "url(#clip0_520_2)", children: 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" }) }), jsx("defs", { children: jsx("clipPath", { id: "clip0_520_2", children: jsx("rect", { width: "16", height: "18", fill: "white" }) }) })] }), allowFiltering && (col.columns?.length ?? 0) === 0 && col.allowFilter !== false && jsxs(Dropdown$1, { isOpen: openFilter, toggle: (e) => {
                                                 setOpenFilter(!openFilter);
                                                 e.stopPropagation();
                                             }, onClick: (e) => {
@@ -43753,7 +43767,7 @@ const RenderFilterElement$1 = ({ filter, optionsFilter, formatSetting, filterBy,
                         }, children: t('Clear') })] })] }));
 };
 
-const TableComponent = ({ idTable, dataSource, contentColumns, headerColumns, visibleColumns, selectedRows, setSelectedRows, selectedCell, startCell, editCell, gridRef, objHeaderWidthFixLeft, objHeaderWidthFixRight, objWidthFixLeft, objWidthFixRight, lastObjWidthFixLeft, fisrtObjWidthFixRight, totalCount, isMulti, selectEnable, editDisable, addDisable, defaultValue, fieldKey, fieldUniKey, formatSetting, toolbarSetting, buttonSetting, containerRef, handleDataChange, changeDataSource, handleCommandClick, handleDuplicate, handleKeyDown, onDuplicate, setSelectedCell, setStartCell, focusEditElementCell, setContentColumns, handeCopyCell, isCopying, typeDragging, rowChange, visibleContentColumns, filterBy, setFilterBy, orderBy, setOrderBy, optionsFilter, allowFilter, allowOrder, searchSetting, searchTerm, searchClient, height, rowHeight, haveSum }) => {
+const TableComponent = ({ idTable, dataSource, contentColumns, headerColumns, visibleColumns, selectedRows, setSelectedRows, selectedCell, startCell, editCell, gridRef, objHeaderWidthFixLeft, objHeaderWidthFixRight, objWidthFixLeft, objWidthFixRight, lastObjWidthFixLeft, fisrtObjWidthFixRight, totalCount, isMulti, selectEnable, editDisable, addDisable, defaultValue, fieldKey, fieldUniKey, formatSetting, toolbarSetting, buttonSetting, containerRef, handleDataChange, changeDataSource, handleCommandClick, handleDuplicate, handleKeyDown, onDuplicate, setSelectedCell, setStartCell, focusEditElementCell, setContentColumns, handeCopyCell, isCopying, typeDragging, rowChange, visibleContentColumns, filterBy, setFilterBy, orderBy, setOrderBy, optionsFilter, allowFiltering, allowSorting, searchSetting, searchTerm, searchClient, height, rowHeight, haveSum }) => {
     let filteredData = dataSource.map((row, index) => ({ data: row, indexRow: index }));
     if (((filterBy && filterBy.length > 0) || (searchSetting?.searchTerm !== undefined ? searchSetting?.searchTerm : searchTerm)) && !searchClient) {
         filteredData = filteredData.filter(({ data }) => CheckRowMatch(data, filterBy, searchSetting?.searchTerm !== undefined ? searchSetting?.searchTerm : searchTerm, searchSetting?.keyField ?? []));
@@ -43788,7 +43802,7 @@ const TableComponent = ({ idTable, dataSource, contentColumns, headerColumns, vi
     }, []);
     return (jsx("div", { ref: containerRef, className: "r-gridtable", style: { maxHeight: `${height ? `${height}px` : "auto"}` }, children: jsxs("table", { style: { width: "100%" }, role: "presentation", children: [jsx(RenderColGroup, { contentColumns: visibleColumns }), jsx("thead", { className: "r-gridheader", role: "rowgroup", children: headerColumns.map((element, indexParent) => {
                         return (jsx("tr", { className: "r-row", role: "row", children: element?.map((col, index) => {
-                                return (jsx(HeaderTableCol$1, { col: col, idTable: idTable ?? "", dataSource: dataSource, indexCol: index, indexParent: indexParent, isMulti: isMulti ?? false, objHeaderWidthFixLeft: objHeaderWidthFixLeft, objHeaderWidthFixRight: objHeaderWidthFixRight, selectEnable: selectEnable ?? false, selectedRows: selectedRows, setSelectedRows: setSelectedRows, container: containerRef, filterBy: filterBy, orderBy: orderBy, optionsFilter: optionsFilter, allowFilter: allowFilter, allowOrder: allowOrder, formatSetting: formatSetting, changeFilter: (val) => {
+                                return (jsx(HeaderTableCol$1, { col: col, idTable: idTable ?? "", dataSource: dataSource, indexCol: index, indexParent: indexParent, isMulti: isMulti ?? false, objHeaderWidthFixLeft: objHeaderWidthFixLeft, objHeaderWidthFixRight: objHeaderWidthFixRight, selectEnable: selectEnable ?? false, selectedRows: selectedRows, setSelectedRows: setSelectedRows, container: containerRef, filterBy: filterBy, orderBy: orderBy, optionsFilter: optionsFilter, allowFiltering: allowFiltering, allowSorting: allowSorting, formatSetting: formatSetting, changeFilter: (val) => {
                                         setFilterBy([...val]);
                                     }, changeOrder: (val) => {
                                         setOrderBy([...val]);
@@ -44515,7 +44529,7 @@ const ToolbarBottom = ({ handleAdd, handleDuplicate, handleInsertBefore, handleI
 
 const TableEdit = forwardRef((props, ref) => {
     const { t } = useTranslation();
-    const { idTable, dataSource, columns, setDataSource, height = 400, rowHeight = 31.3, defaultValue, toolbarSetting, searchSetting, selectedItem, selectEnable, editDisable, addDisable, buttonSetting, formatSetting, haveSum, isMulti, disableAutoKey, commandClick, dataSourceChange, rowChange, setSelectedItem, handleSelect, onDuplicate, saveSettingColumn, allowFilter = true, allowOrder, settingColumns, optionsFilter, pagingSetting, resetDefaultColumns } = props;
+    const { idTable, dataSource, columns, setDataSource, height = 400, rowHeight = 31.3, defaultValue, toolbarSetting, searchSetting, selectedItem, selectEnable, editDisable, addDisable, buttonSetting, formatSetting, haveSum, isMulti, disableAutoKey, commandClick, dataSourceChange, rowChange, setSelectedItem, handleSelect, onDuplicate, saveSettingColumn, allowFiltering = true, allowSorting, settingColumns, optionsFilter, pagingSetting, resetDefaultColumns } = props;
     useImperativeHandle(ref, () => {
         return {
             refeshFocusRow: handleRefeshRow
@@ -44920,7 +44934,7 @@ const TableEdit = forwardRef((props, ref) => {
             }
         }
     };
-    return (jsx(Fragment, { children: jsxs("div", { className: "r-table-edit", children: [jsxs("div", { className: "r-grid", ref: gridRef, children: [toolbarSetting?.showTopToolbar && jsx(RenderToolbarTop, { toolbarTopOption: toolbarTopOption }), jsx(TableComponent, { idTable: idTable, height: height, dataSource: dataSource, contentColumns: contentColumns, headerColumns: headerColumns, visibleColumns: visibleColumns, selectedRows: selectedRows, setSelectedRows: setSelectedRows, selectedCell: selectedCell, startCell: startCell, editCell: editCell, gridRef: gridRef, objHeaderWidthFixLeft: objHeaderWidthFixLeft, objHeaderWidthFixRight: objHeaderWidthFixRight, objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, fisrtObjWidthFixRight: fisrtObjWidthFixRight, totalCount: totalCount, isMulti: isMulti, selectEnable: selectEnable, editDisable: editDisable, addDisable: addDisable, defaultValue: defaultValue, fieldKey: fieldKey, fieldUniKey: fieldUniKey, formatSetting: formatSetting, toolbarSetting: toolbarSetting, buttonSetting: buttonSetting, containerRef: containerRef, optionsFilter: optionsFilter, allowFilter: allowFilter, allowOrder: allowOrder, searchSetting: searchSetting, searchTerm: searchTerm, haveSum: haveSum, isCopying: isCopying, typeDragging: typeDragging, visibleContentColumns: visibleContentColumns, rowHeight: rowHeight, changeDataSource: changeDataSource, handleCommandClick: handleCommandClick, handleKeyDown: handleKeyDown, handeCopyCell: handeCopyCell, onDuplicate: onDuplicate, setSelectedCell: setSelectedCell, setStartCell: setStartCell, focusEditElementCell: focusEditElementCell, rowChange: rowChange, filterBy: filterBy, setFilterBy: setFilterBy, orderBy: orderBy, setOrderBy: setOrderBy, searchClient: searchClient, handleDataChange: handleDataChange, handleDuplicate: () => {
+    return (jsx(Fragment, { children: jsxs("div", { className: "r-table-edit", children: [jsxs("div", { className: "r-grid", ref: gridRef, children: [toolbarSetting?.showTopToolbar && jsx(RenderToolbarTop, { toolbarTopOption: toolbarTopOption }), jsx(TableComponent, { idTable: idTable, height: height, dataSource: dataSource, contentColumns: contentColumns, headerColumns: headerColumns, visibleColumns: visibleColumns, selectedRows: selectedRows, setSelectedRows: setSelectedRows, selectedCell: selectedCell, startCell: startCell, editCell: editCell, gridRef: gridRef, objHeaderWidthFixLeft: objHeaderWidthFixLeft, objHeaderWidthFixRight: objHeaderWidthFixRight, objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, fisrtObjWidthFixRight: fisrtObjWidthFixRight, totalCount: totalCount, isMulti: isMulti, selectEnable: selectEnable, editDisable: editDisable, addDisable: addDisable, defaultValue: defaultValue, fieldKey: fieldKey, fieldUniKey: fieldUniKey, formatSetting: formatSetting, toolbarSetting: toolbarSetting, buttonSetting: buttonSetting, containerRef: containerRef, optionsFilter: optionsFilter, allowFiltering: allowFiltering, allowSorting: allowSorting, searchSetting: searchSetting, searchTerm: searchTerm, haveSum: haveSum, isCopying: isCopying, typeDragging: typeDragging, visibleContentColumns: visibleContentColumns, rowHeight: rowHeight, changeDataSource: changeDataSource, handleCommandClick: handleCommandClick, handleKeyDown: handleKeyDown, handeCopyCell: handeCopyCell, onDuplicate: onDuplicate, setSelectedCell: setSelectedCell, setStartCell: setStartCell, focusEditElementCell: focusEditElementCell, rowChange: rowChange, filterBy: filterBy, setFilterBy: setFilterBy, orderBy: orderBy, setOrderBy: setOrderBy, searchClient: searchClient, handleDataChange: handleDataChange, handleDuplicate: () => {
                                 handleDuplicate(dataSource, startCell.row, fieldKey, defaultValue, fieldUniKey, changeDataSource, containerRef, totalCount, toolbarSetting, buttonSetting, editDisable, addDisable, onDuplicate);
                             }, setContentColumns: (newColumns) => {
                                 setContentColumns(newColumns);
@@ -73349,15 +73363,9 @@ const TabsMenuComponent = ({ buttonWidth, tabParent, tabChild, resourceCodeParen
 };
 
 const RenderContentCol = (props) => {
-    const { col, indexCol, indexRow, isSelected, row, formatSetting, idTable, fisrtObjWidthFixRight, lastObjWidthFixLeft, objWidthFixLeft, objWidthFixRight, selectedRows, selectEnable, setSelectedRows, handleCommandClick, fieldKey, isMulti } = props;
+    const { col, indexCol, indexRow, isSelected, row, formatSetting, idTable, fisrtObjWidthFixRight, lastObjWidthFixLeft, objWidthFixLeft, objWidthFixRight, selectedRows, selectEnable, setSelectedRows, fieldKey, isMulti } = props;
     const RenderElement = () => {
-        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 === '#' && !col.field) {
-            jsx("div", { className: "r-rowcell-div", children: indexRow + 1 });
-        }
-        else if (col.type === 'checkbox' && !col.field) {
+        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]);
@@ -73432,7 +73440,7 @@ const RenderContentCol = (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 { selectEnable, dataSource, setSelectedRows, col, indexCol, indexParent, objWidthFixLeft, objWidthFixRight, totalCount, selectedRows, columns, setColumns, orderBy, changeFilter, filterBy, changeOrder, allowFiltering, allowSorting, container, fisrtObjWidthFixRight, lastObjWidthFixLeft, formatSetting, optionsFilter, idTable, isMulti } = props;
     const { t } = useTranslation();
     const headerRef = useRef(null);
     const order = orderBy.find((item) => item.key === col.field);
@@ -73463,20 +73471,22 @@ const HeaderTableCol = (props) => {
                     left: col.fixedType === 'left' ? objWidthFixLeft[indexCol ?? 0] : undefined,
                     right: col.fixedType === 'right' ? objWidthFixRight[indexCol ?? 0] : undefined
                 }, children: jsxs("div", { style: { justifyContent: 'space-between' }, onClick: () => {
-                        if (order) {
-                            if (order.direction === 'asc') {
-                                order.direction = 'desc';
-                                changeOrder(orderBy);
+                        if (!!allowSorting && (col.columns?.length ?? 0) === 0) {
+                            if (order) {
+                                if (order.direction === 'asc') {
+                                    order.direction = 'desc';
+                                    changeOrder(orderBy);
+                                }
+                                else {
+                                    changeOrder(orderBy.filter((x) => x.key !== col.field));
+                                }
                             }
                             else {
-                                changeOrder(orderBy.filter((x) => x.key !== col.field));
+                                orderBy.push({ direction: 'asc', key: col.field });
+                                changeOrder(orderBy);
                             }
                         }
-                        else {
-                            orderBy.push({ direction: 'asc', key: col.field });
-                            changeOrder(orderBy);
-                        }
-                    }, className: classNames$1('r-headercell-div', { 'cursor-pointer': allowOrder }), children: [(col.type === 'checkbox' && !col.field) && (jsx(Input$1, { checked: !!(totalCount > 0 && selectedRows?.length >= totalCount), type: "checkbox", className: classNames$1('cursor-pointer', { 'd-none': !isMulti }), style: { textAlign: col.textAlign ?? 'left', marginTop: 6 }, onChange: (e) => {
+                    }, className: classNames$1('r-headercell-div', { 'cursor-pointer': allowSorting }), children: [(col.type === 'checkbox' && !col.field) && (jsx(Input$1, { checked: !!(totalCount > 0 && selectedRows?.length >= totalCount), type: "checkbox", className: classNames$1('cursor-pointer', { 'd-none': !isMulti }), style: { textAlign: col.textAlign ?? 'left', marginTop: 6 }, onChange: (e) => {
                                 if (selectEnable) {
                                     if (e.target.checked) {
                                         setSelectedRows(dataSource.map((item) => { return item; }));
@@ -73485,7 +73495,7 @@ const HeaderTableCol = (props) => {
                                         setSelectedRows([]);
                                     }
                                 }
-                            } })), col.type !== 'checkbox' && jsxs(Fragment$1, { children: [jsxs("div", { className: 'header-content', style: { justifyContent: col.textAlign ?? 'left' }, children: [jsx("span", { id: `header-${idTable}-${indexParent}-${indexCol}`, ref: headerRef, className: 'text-content', children: t(col.headerText ?? '') }), checkOverflow() && jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `header-${idTable}-${indexParent}-${indexCol}`, children: t(col.headerText ?? '') })] }), col.type !== '#' && col.type !== 'command' && jsxs("div", { className: 'd-flex', children: [allowOrder && order?.direction === 'asc' && jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: 'ms-25', width: "10", height: "10", viewBox: "0 0 16 18", fill: "none", children: [jsx("g", { "clip-path": "url(#clip0_520_6)", children: 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" }) }), jsx("defs", { children: jsx("clipPath", { id: "clip0_520_6", children: jsx("rect", { width: "16", height: "18", fill: "white" }) }) })] }), allowOrder && order?.direction === 'desc' && jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: 'ms-25', width: "10", height: "10", viewBox: "0 0 16 18", fill: "none", children: [jsx("g", { "clip-path": "url(#clip0_520_2)", children: 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" }) }), jsx("defs", { children: jsx("clipPath", { id: "clip0_520_2", children: jsx("rect", { width: "16", height: "18", fill: "white" }) }) })] }), allowFilter && jsxs(Dropdown$1, { isOpen: openFilter, toggle: (e) => {
+                            } })), col.type !== 'checkbox' && jsxs(Fragment$1, { children: [jsxs("div", { className: 'header-content', style: { justifyContent: col.textAlign ?? 'left' }, children: [jsx("span", { id: `header-${idTable}-${indexParent}-${indexCol}`, ref: headerRef, className: 'text-content', children: t(col.headerText ?? '') }), checkOverflow() && jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `header-${idTable}-${indexParent}-${indexCol}`, children: t(col.headerText ?? '') })] }), jsxs("div", { className: 'd-flex align-items-center', children: [allowSorting && order?.direction === 'asc' && jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: 'ms-25', width: "10", height: "10", viewBox: "0 0 16 18", fill: "none", children: [jsx("g", { "clip-path": "url(#clip0_520_6)", children: 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" }) }), jsx("defs", { children: jsx("clipPath", { id: "clip0_520_6", children: jsx("rect", { width: "16", height: "18", fill: "white" }) }) })] }), allowSorting && order?.direction === 'desc' && jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: 'ms-25', width: "10", height: "10", viewBox: "0 0 16 18", fill: "none", children: [jsx("g", { "clip-path": "url(#clip0_520_2)", children: 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" }) }), jsx("defs", { children: jsx("clipPath", { id: "clip0_520_2", children: jsx("rect", { width: "16", height: "18", fill: "white" }) }) })] }), allowFiltering && (col.columns?.length ?? 0) === 0 && col.allowFilter !== false && jsxs(Dropdown$1, { isOpen: openFilter, toggle: (e) => {
                                                 setOpenFilter(!openFilter);
                                                 e.stopPropagation();
                                             }, onClick: (e) => {
@@ -73573,18 +73583,15 @@ const RenderFilterElement = ({ filter, optionsFilter, formatSetting, filterBy, s
                         }, children: t('Clear') })] })] }));
 };
 
-const TableView = ({ idTable, dataSource, rowHeight = 33, height = 400, columns, isMutil = false, isLoading, selectEnable, formatSetting, commandClick, allowFilter, allowOrder, setColumns, pagingSetting, changeFilter, changeOrder, searchSetting, columnsAggregate, toolbarSetting, optionsFilter, selectedItem, setSelectedItem, handleSelect, isVirtualList }) => {
+const TableView = ({ idTable, dataSource, height = 400, columns, isMutil = false, isLoading, selectEnable, formatSetting, querySetting, setColumns, pagingSetting, searchSetting, columnsAggregate, toolbarSetting, selectedItem, setSelectedItem, handleSelect, saveSettingColumn, resetDefaultColumns, settingColumns, headerComponent }) => {
     const { t } = useTranslation();
     const gridRef = useRef(null);
+    const [openPopupSetupColumn, setOpenPopupSetupColumn] = useState(false);
     const [selectedRows, setSelectedRows] = useState([]);
     const [orderBy, setOrderBy] = useState([]);
     const [filterBy, setFilterBy] = useState([]);
     const [searchTerm, setSearchTerm] = useState('');
     const fieldKey = (columns.find((item) => item.isPrimarykey === true)?.field) ?? 'id';
-    const [startIndex, setStartIndex] = useState(0);
-    //trường liên quan đến virtul loading
-    const buffer = 10; // số dòng dự phòng phía trên và dưới
-    const visibleRowCount = Math.ceil(height / rowHeight) + 5;
     // Tính toán dữ liệu hiển thị dựa trên các điều kiện lọc, tìm kiếm và sắp xếp
     const viewData = useMemo(() => {
         if (!dataSource || dataSource.length === 0) {
@@ -73598,7 +73605,7 @@ const TableView = ({ idTable, dataSource, rowHeight = 33, height = 400, columns,
                 });
             });
         }
-        if (filterBy && filterBy.length > 0) {
+        if (querySetting?.client === true && filterBy && filterBy.length > 0) {
             datas = datas.filter((row) => {
                 return filterBy.every((filter) => {
                     const { key, value, ope } = filter;
@@ -73635,7 +73642,7 @@ const TableView = ({ idTable, dataSource, rowHeight = 33, height = 400, columns,
                 });
             });
         }
-        if (orderBy && orderBy.length > 0) {
+        if (querySetting?.client === true && orderBy && orderBy.length > 0) {
             datas = datas.sort((a, b) => {
                 for (const order of orderBy) {
                     const { key, direction } = order;
@@ -73653,50 +73660,7 @@ const TableView = ({ idTable, dataSource, rowHeight = 33, height = 400, columns,
         }
         return datas;
     }, [searchTerm, filterBy, orderBy, dataSource]);
-    // Tính toán chỉ số bắt đầu và kết thúc của dữ liệu hiển thị
-    const { adjustedStartIndex, adjustedEndIndex } = useMemo(() => {
-        if (!viewData || viewData.length === 0 || !isVirtualList) {
-            return { adjustedStartIndex: 0, adjustedEndIndex: 0 };
-        }
-        return {
-            adjustedStartIndex: Math.max(startIndex - buffer, 0),
-            adjustedEndIndex: Math.min(startIndex + visibleRowCount + buffer, dataSource.length)
-        };
-    }, [startIndex, viewData]);
-    const visibleData = useMemo(() => {
-        if (!viewData || viewData.length === 0) {
-            return [];
-        }
-        return isVirtualList ? viewData.slice(adjustedStartIndex, adjustedEndIndex) : viewData;
-    }, [viewData]);
     const { levels: headerColumns, flat: contentColumns, flatVisble, objWidthFixLeft, objWidthFixRight, lastObjWidthFixLeft, fisrtObjWidthFixRight } = useMemo(() => calculateTableStructure(columns), [columns]);
-    const scrollTimeoutRef = useRef(null);
-    const lastScrollTop = useRef(0);
-    const handleScroll = (e) => {
-        if (!gridRef.current || !isVirtualList) {
-            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) {
@@ -73785,21 +73749,20 @@ const TableView = ({ idTable, dataSource, rowHeight = 33, height = 400, columns,
             }
         }
     }, [selectedItem]);
-    return (jsxs("div", { className: "r-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) => {
+    return (jsxs("div", { className: "r-table-edit r-virtualized-table", children: [jsxs("div", { className: 'r-grid', children: [toolbarSetting?.showTopToolbar && jsx(RenderToolbarTop, { toolbarTopOption: toolbarTopOption }), headerComponent && headerComponent(), jsxs("div", { ref: gridRef, className: "r-gridtable", 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, allowFiltering: querySetting?.allowFiltering, allowSorting: querySetting?.allowSorting, filterBy: filterBy, optionsFilter: querySetting?.optionsFilter, changeFilter: (val) => {
                                                     setFilterBy([...val]);
-                                                    if (changeFilter) {
-                                                        changeFilter(val);
+                                                    if (querySetting?.changeFilter) {
+                                                        querySetting.changeFilter(val);
                                                     }
                                                 }, changeOrder: (val) => {
                                                     setOrderBy([...val]);
-                                                    if (changeOrder) {
-                                                        changeOrder(val);
+                                                    if (querySetting?.changeOrder) {
+                                                        querySetting.changeOrder(val);
                                                     }
-                                                }, container: gridRef, totalCount: dataSource.length }, `header-${indexParent}-${indexColumn}`))) }, `header-${-indexParent}`))) }), jsxs("tbody", { className: 'r-gridcontent', role: "rowgroup", children: [adjustedStartIndex > 0 && (jsx("tr", { style: { height: adjustedStartIndex * rowHeight }, children: jsx("td", { style: { padding: 0 }, colSpan: flatVisble.length }) })), visibleData.map((row, index) => {
-                                                const indexRow = index + startIndex;
-                                                const isSelected = selectedRows?.some((x) => x[fieldKey] === row[fieldKey]);
-                                                return (jsx("tr", { "aria-rowindex": indexRow + 1, role: "row", className: 'r-row', children: contentColumns.map((column, indexCol) => (jsx(RenderContentCol, { idTable: idTable, col: column, fieldKey: fieldKey, objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, fisrtObjWidthFixRight: fisrtObjWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, isMulti: isMutil ?? false, selectEnable: selectEnable ?? false, selectedRows: selectedRows, setSelectedRows: setSelectedRows, formatSetting: formatSetting, handleCommandClick: handleCommandClick, indexCol: indexCol, indexRow: indexRow, isSelected: isSelected, row: row }, indexCol))) }, `row-content-${indexRow}`));
-                                            }), adjustedEndIndex > 0 && viewData.length > adjustedEndIndex && (jsx("tr", { style: { height: (viewData.length - adjustedEndIndex) * rowHeight }, children: jsx("td", { style: { padding: 0 }, colSpan: flatVisble.length }) }))] }), viewData.length > 0 && jsx("tfoot", { className: "r-gridfoot", children: (columnsAggregate?.length ?? 0) > 0 ? jsx("tr", { className: 'r-row', children: contentColumns.map((col, indexCol) => {
+                                                }, container: gridRef, totalCount: dataSource.length }, `header-${indexParent}-${indexColumn}`))) }, `header-${-indexParent}`))) }), jsx("tbody", { className: 'r-gridcontent', role: "rowgroup", children: viewData.map((row, indexRow) => {
+                                            const isSelected = selectedRows?.some((x) => x[fieldKey] === row[fieldKey]);
+                                            return (jsx("tr", { "aria-rowindex": indexRow + 1, role: "row", className: 'r-row', children: contentColumns.map((column, indexCol) => (jsx(RenderContentCol, { idTable: idTable, col: column, fieldKey: fieldKey, objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, fisrtObjWidthFixRight: fisrtObjWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, isMulti: isMutil ?? false, selectEnable: selectEnable ?? false, selectedRows: selectedRows, setSelectedRows: setSelectedRows, formatSetting: formatSetting, indexCol: indexCol, indexRow: indexRow, isSelected: isSelected, row: row }, indexCol))) }, `row-content-${indexRow}`));
+                                        }) }), viewData.length > 0 && jsx("tfoot", { className: "r-gridfoot", children: (columnsAggregate?.length ?? 0) > 0 ? jsx("tr", { className: 'r-row', children: contentColumns.map((col, indexCol) => {
                                                 const item = columnsAggregate?.find((x) => x.field === col.field);
                                                 let sumValue = item?.value;
                                                 if (!item && col.haveSum === true && col.type === "numeric") {
@@ -73810,7 +73773,13 @@ const TableView = ({ idTable, dataSource, rowHeight = 33, height = 400, columns,
                                                         right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined,
                                                         textAlign: col.textAlign ? col.textAlign : 'left'
                                                     }, children: jsxs("div", { className: "r-footer-div", children: [(item || (col.haveSum === true && col.type === "numeric")) && col.type === "numeric" && (Number(sumValue) >= 0) && jsx(Fragment$1, { children: formartNumberic(sumValue, formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false) }), (item || (col.haveSum === true && col.type === "numeric")) && col.type === "numeric" && (Number(sumValue) < 0) && jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${formartNumberic(sumValue, formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false)}${formatSetting?.suffixNegative ?? ''}`] })] }) }, `summarycell-${indexCol}`);
-                                            }) }) : jsx(Fragment$1, {}) })] }), (((viewData.length ?? 0) === 0) && !isLoading) && jsxs("div", { className: "r-no-data", children: [jsx("svg", { width: "64", height: "41", viewBox: "0 0 64 41", xmlns: "http://www.w3.org/2000/svg", children: jsxs("g", { transform: "translate(0 1)", fill: "none", fillRule: "evenodd", children: [jsx("ellipse", { fill: "#f5f5f5", cx: "32", cy: "33", rx: "32", ry: "7" }), jsxs("g", { fillRule: "nonzero", stroke: "#d9d9d9", children: [jsx("path", { d: "M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z" }), jsx("path", { d: "M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z", fill: "#fafafa" })] })] }) }), t('No data available.')] }), isLoading && jsx("div", { className: "r-loading-overlay", children: jsxs("div", { className: "r-loading", children: [jsx(Spinner$1, { className: "me-1" }), t('Loading...')] }) })] })] }), pagingSetting?.allowPaging ? jsx(PagingComponent, { gridRef: gridRef, onChangePage: onChangePage, pageSize: pagingSetting?.pageSize ?? 0, currentPage: pagingSetting?.currentPage ?? 0, pageOptions: pagingSetting?.pageOptions ?? [20, 30, 50, 100], totalItem: pagingSetting?.totalItem ?? 0, onChangePageSize: onChangePageSize }) : jsx(Fragment$1, {})] }));
+                                            }) }) : jsx(Fragment$1, {}) })] }), (((viewData.length ?? 0) === 0) && !isLoading) && jsxs("div", { className: "r-no-data", children: [jsx("svg", { width: "64", height: "41", viewBox: "0 0 64 41", xmlns: "http://www.w3.org/2000/svg", children: jsxs("g", { transform: "translate(0 1)", fill: "none", fillRule: "evenodd", children: [jsx("ellipse", { fill: "#f5f5f5", cx: "32", cy: "33", rx: "32", ry: "7" }), jsxs("g", { fillRule: "nonzero", stroke: "#d9d9d9", children: [jsx("path", { d: "M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z" }), jsx("path", { d: "M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z", fill: "#fafafa" })] })] }) }), t('No data available.')] }), isLoading && jsx("div", { className: "r-loading-overlay", children: jsxs("div", { className: "r-loading", children: [jsx(Spinner$1, { className: "me-1" }), t('Loading...')] }) })] })] }), pagingSetting?.allowPaging && jsx(PagingComponent, { gridRef: gridRef, onChangePage: onChangePage, pageSize: pagingSetting?.pageSize ?? 0, currentPage: pagingSetting?.currentPage ?? 0, pageOptions: pagingSetting?.pageOptions ?? [20, 30, 50, 100], totalItem: pagingSetting?.totalItem ?? 0, onChangePageSize: onChangePageSize }), jsx(SettingColumn, { gridRef: gridRef, handleSidebar: () => {
+                    setOpenPopupSetupColumn(!openPopupSetupColumn);
+                }, settingColumns: settingColumns, openSidebar: openPopupSetupColumn, column: [...contentColumns], resetDefaultColumns: resetDefaultColumns, setColumn: (newColumns) => {
+                    if (saveSettingColumn) {
+                        saveSettingColumn(newColumns.map((x, index) => ({ field: x.field, headerText: x.headerDisplay, visible: x.visible, fixedType: x.fixedType, width: x.width, sortOrder: index + 1 })));
+                    }
+                } })] }));
 };
 
 export { CheckRowMatch, ExportExcelComponent, FindNodeByPath, InputStyleComponent, ModalImportComponent, SelectTable, SelectTableTree, TableView, TabsMenuComponent, Wizard, calculateTableStructure, checkDecimalSeparator, checkThousandSeparator, TableEdit as default, formartNumberic, formatDateTime, generateUUID, isNullOrUndefined$1 as isNullOrUndefined, messageBoxConfirm, messageBoxConfirmAsync, messageBoxConfirmDelete, messageBoxError, messageHtmlBoxConfirm, messageHtmlBoxConfirmAsync, messageHtmlBoxError, notificationError, notificationSuccess, roundNumber, useOnClickOutside };