react-table-edit 1.4.24 → 1.4.25

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

@@ -13,8 +13,8 @@ type IFDataProps = {
     changeOrder: (data: IFOrderTable[]) => void;
     indexCol: number;
     indexParent: number;
-    objWidthFixLeft: any;
-    objWidthFixRight: any;
+    objHeaderWidthFixLeft: any;
+    objHeaderWidthFixRight: any;
     totalCount: number;
     lastObjWidthFixLeft: number;
     fisrtObjWidthFixRight: number;

package/dist/component/utils.d.ts

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

package/dist/index.d.ts

@@ -516,6 +516,8 @@ declare const calculateTableStructure: (columns: any[]) => {
     objWidthFixRight: Record<number, number>;
     lastObjWidthFixLeft: number;
     fisrtObjWidthFixRight: number;
+    objHeaderWidthFixRight: Record<string, number>;
+    objHeaderWidthFixLeft: Record<string, number>;
     firstEdit: any;
     lastEdit: any;
 };

package/dist/index.js

@@ -19318,6 +19318,8 @@ const calculateTableStructure = (columns) => {
     const flat = [];
     const objWidthFixLeft = {};
     const objWidthFixRight = {};
+    const objHeaderWidthFixRight = {};
+    const objHeaderWidthFixLeft = {};
     let maxDepth = 0;
     // Tính depth tối đa
     const calculateDepth = (cols, depth = 1) => (Math.max(...cols.map(col => (col.columns?.length ? calculateDepth(col.columns, depth + 1) : depth))));
@@ -19326,7 +19328,7 @@ const calculateTableStructure = (columns) => {
     let rightTotal = 0;
     const traverse = (cols, level = 0) => {
         levels[level] = levels[level] || [];
-        return cols.reduce((colspanSum, col) => {
+        return cols.reduce((colspanSum, col, indexCol) => {
             const hasChildren = (col.columns?.length ?? 0) > 0;
             const colspan = hasChildren ? traverse(col.columns, level + 1) : 1;
             const cell = {
@@ -19336,17 +19338,23 @@ const calculateTableStructure = (columns) => {
                 rowspan: hasChildren ? 1 : maxDepth - level
             };
             levels[level].push(cell);
+            const headerKey = `${level}-${indexCol}`;
+            if (col.fixedType === 'right' && col.visible !== false) {
+                objHeaderWidthFixRight[headerKey] = rightTotal;
+            }
+            if (col.fixedType === 'left' && col.visible !== false) {
+                objHeaderWidthFixLeft[headerKey] = leftTotal;
+            }
             if (!hasChildren) {
-                const visible = col.visible !== false;
                 const index = flat.length;
                 const width = col.width ?? 40;
                 cell.index = index;
                 flat.push(cell);
-                if (col.fixedType === 'left' && visible) {
+                if (col.fixedType === 'left' && col.visible !== false) {
                     objWidthFixLeft[index] = leftTotal;
                     leftTotal += width;
                 }
-                if (col.fixedType === 'right' && visible) {
+                if (col.fixedType === 'right' && col.visible !== false) {
                     objWidthFixRight[index] = rightTotal;
                     rightTotal += width;
                 }
@@ -19369,6 +19377,8 @@ const calculateTableStructure = (columns) => {
         objWidthFixRight,
         lastObjWidthFixLeft,
         fisrtObjWidthFixRight,
+        objHeaderWidthFixRight,
+        objHeaderWidthFixLeft,
         firstEdit,
         lastEdit
     };
@@ -41816,7 +41826,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, 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, objHeaderWidthFixLeft, objHeaderWidthFixRight, 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);
@@ -41842,10 +41852,11 @@ const HeaderTableCol$1 = (props) => {
     const checkOverflow = () => {
         return headerRef.current && headerRef.current.scrollHeight > headerRef.current.clientHeight;
     };
+    console.log(col);
     return (jsxRuntime.jsx(React$5.Fragment, { children: col.visible !== false && (jsxRuntime.jsx(Resizable, { className: "r-resize", width: typeof col.width === 'number' ? col.width : Number((col.width ?? "").replaceAll(new RegExp(`[^0-9]`, "g"), '')), height: 0, onResize: handleResize, draggableOpts: { enableUserSelectHack: false }, children: jsxRuntime.jsx("th", { rowSpan: col.rowspan !== 1 ? col.rowspan : 1, colSpan: col.columns?.filter(x => x.visible !== false)?.length ?? 1, className: classNames$1(`r-headercell fix-${col.fixedType}`, { 'fixed-last': (col.fixedType === 'left' && indexCol === lastObjWidthFixLeft) || (col.fixedType === 'right' && indexCol === fisrtObjWidthFixRight) }, { 'cell-fixed': col.fixedType }), style: {
                     top: `${indexParent * 42}px`,
-                    left: col.fixedType === 'left' ? objWidthFixLeft[indexCol ?? 0] : undefined,
-                    right: col.fixedType === 'right' ? objWidthFixRight[indexCol ?? 0] : undefined
+                    left: col.fixedType === 'left' ? objHeaderWidthFixLeft[`${indexParent}-${indexCol ?? 0}`] : undefined,
+                    right: col.fixedType === 'right' ? objHeaderWidthFixRight[`${indexParent}-${indexCol ?? 0}`] : undefined
                 }, children: jsxRuntime.jsxs("div", { style: { justifyContent: 'space-between' }, onClick: () => {
                         if (order) {
                             if (order.direction === 'asc') {
@@ -41869,7 +41880,7 @@ const HeaderTableCol$1 = (props) => {
                                         setSelectedRows([]);
                                     }
                                 }
-                            } })), 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) => {
+                            } })), 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 && (col.columns?.length ?? 0) === 0 && col.allowFilter !== false && jsxRuntime.jsxs(Dropdown$1, { isOpen: openFilter, toggle: (e) => {
                                                 setOpenFilter(!openFilter);
                                                 e.stopPropagation();
                                             }, onClick: (e) => {
@@ -41946,7 +41957,7 @@ const RenderFilterElement$1 = ({ filter, optionsFilter, formatSetting, filterBy,
                 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: () => {
+        }, 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', color: 'white', style: { borderRadius: 3, borderWidth: 0 }, onClick: () => {
                             if (filterBy) {
                                 changeFilter(filterBy.filter((x) => x.key !== column.field));
                             }
@@ -42757,7 +42768,7 @@ const TableEdit = React$5.forwardRef((props, ref) => {
             pagingSetting.setCurrentPage(1);
         }
     }, [dataSource]);
-    const { levels: headerColumns, flatVisble, objWidthFixLeft, objWidthFixRight, lastObjWidthFixLeft, fisrtObjWidthFixRight, firstEdit: columnFirstEdit, lastEdit: columnLastEdit } = React$5.useMemo(() => {
+    const { levels: headerColumns, flatVisble, objWidthFixLeft, objWidthFixRight, lastObjWidthFixLeft, fisrtObjWidthFixRight, objHeaderWidthFixLeft, objHeaderWidthFixRight, firstEdit: columnFirstEdit, lastEdit: columnLastEdit } = React$5.useMemo(() => {
         const obj = calculateTableStructure(columns);
         setContentColumns(obj.flat);
         return obj;
@@ -43586,7 +43597,7 @@ const TableEdit = React$5.forwardRef((props, ref) => {
     }, [searchTerm, searchSetting?.searchTerm]);
     return (jsxRuntime.jsxs(React$5.Fragment, { children: [jsxRuntime.jsxs("div", { className: "react-table-edit", children: [jsxRuntime.jsxs("div", { className: 'r-grid', ref: gridRef, children: [toolbarSetting?.showTopToolbar && jsxRuntime.jsx(RenderToolbarTop, { toolbarTopOption: toolbarTopOption }), jsxRuntime.jsx("div", { ref: tableElement, className: "r-gridtable", style: { height: `${height ? `${height}px` : 'auto'}`, minHeight: `${minHeight ? `${minHeight}px` : ''}`, maxHeight: `${maxHeight ? `${maxHeight}px` : '400px'}` }, children: jsxRuntime.jsxs("table", { style: { width: '100%' }, children: [jsxRuntime.jsx(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, 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) => {
+                                                        return (jsxRuntime.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: tableElement, filterBy: filterBy, orderBy: orderBy, optionsFilter: optionsFilter, allowFilter: allowFilter, allowOrder: allowOrder, formatSetting: formatSetting, changeFilter: (val) => {
                                                                 setFilterBy([...val]);
                                                             }, changeOrder: (val) => {
                                                                 setOrderBy([...val]);