react-table-edit 1.4.24 → 1.4.26

package/dist/component/table/button-handle.d.ts

@@ -1,5 +1,5 @@
 import { IFTableEditButton, IFTableEditPaging, IFTableEditToolbar } from "../type";
-export declare const handleAdd: (dataSource: any[], tableElement: any, columnFistEdit: any, changeDataSource: (data: any[], numberOfRows?: number) => void, pagingSetting: {
+export declare const handleAdd: (dataSource: any[], tableElement: any, indexFirstEdit: any, changeDataSource: (data: any[], numberOfRows?: number) => void, pagingSetting: {
     setCurrentPage?: (page: number) => void;
     pageSize?: number;
 } | undefined, setIndexFocus: (item: number) => void, focusNewElement: (col: number, row: number, onLoad?: boolean) => void, numberOfRows?: number) => void;

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/table/key-handlers.d.ts

@@ -9,7 +9,7 @@ export interface KeyHandlerParams {
     idElement: string;
     pagingClient?: boolean;
     totalCount: number;
-    columnLastEdit: number;
+    indexLastEdit: number;
     editDisable?: boolean;
     addDisable?: boolean;
     pagingSetting?: IFTableEditPaging;

package/dist/component/utils.d.ts

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

package/dist/index.d.ts

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

package/dist/index.js

@@ -19318,15 +19318,31 @@ 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))));
     maxDepth = calculateDepth(columns);
     let leftTotal = 0;
     let rightTotal = 0;
+    // Tính tổng width của các cột cố định phải
+    const calcTotalRightWidth = (cols) => {
+        cols.forEach(col => {
+            if (col.columns?.length) {
+                calcTotalRightWidth(col.columns);
+            }
+            else {
+                if (col.fixedType === 'right' && col.visible !== false) {
+                    rightTotal += col.width ?? 40;
+                }
+            }
+        });
+    };
+    calcTotalRightWidth(columns);
     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,21 +19352,27 @@ const calculateTableStructure = (columns) => {
                 rowspan: hasChildren ? 1 : maxDepth - level
             };
             levels[level].push(cell);
+            const headerKey = `${level}-${indexCol}`;
+            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) {
+                    rightTotal -= width;
                     objWidthFixRight[index] = rightTotal;
-                    rightTotal += width;
                 }
             }
+            if (col.fixedType === 'right' && col.visible !== false) {
+                objHeaderWidthFixRight[headerKey] = rightTotal;
+            }
             return colspanSum + colspan;
         }, 0);
     };
@@ -19358,9 +19380,8 @@ 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];
+    const indexFirstEdit = flat.findIndex((item) => item.editEnable && item.visible !== false && !item.disabledCondition) + 1;
+    const indexLastEdit = flat.findLastIndex((item) => item.editEnable && item.visible !== false && !item.disabledCondition) + 1;
     return {
         levels,
         flat,
@@ -19369,8 +19390,10 @@ const calculateTableStructure = (columns) => {
         objWidthFixRight,
         lastObjWidthFixLeft,
         fisrtObjWidthFixRight,
-        firstEdit,
-        lastEdit
+        objHeaderWidthFixRight,
+        objHeaderWidthFixLeft,
+        indexFirstEdit,
+        indexLastEdit
     };
 };
 
@@ -41816,7 +41839,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);
@@ -41844,8 +41867,8 @@ const HeaderTableCol$1 = (props) => {
     };
     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 +41892,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 +41969,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));
                             }
@@ -42343,7 +42366,7 @@ const RenderToolbarTop = ({ toolbarTopOption }) => {
                     }) })] }) }));
 };
 
-const handleAdd = (dataSource, tableElement, columnFistEdit, 
+const handleAdd = (dataSource, tableElement, indexFirstEdit, 
 /*eslint-disable*/
 changeDataSource, pagingSetting, setIndexFocus, focusNewElement, 
 /*eslint-enable*/
@@ -42355,7 +42378,7 @@ numberOfRows) => {
     }
     if (tableElement) {
         setIndexFocus(lengthData);
-        focusNewElement(columnFistEdit, lengthData + 1, true);
+        focusNewElement(indexFirstEdit, lengthData + 1, true);
     }
 };
 const handleDuplicate = async (dataSource, indexFocus, fieldKey, defaultValue, fieldUniKey, 
@@ -42553,8 +42576,8 @@ const handleArrowDown = (e, params) => {
     }
 };
 const handleTab = (e, params) => {
-    const { indexCol, columnLastEdit, indexRow, totalCount, moveIndexRowToNewPage, pagingClient, pagingSetting, setIndexFocus, focusNewElement } = params;
-    if (indexCol === columnLastEdit) {
+    const { indexCol, indexLastEdit, indexRow, totalCount, moveIndexRowToNewPage, pagingClient, pagingSetting, setIndexFocus, focusNewElement } = params;
+    if (indexCol === indexLastEdit) {
         if (indexRow === totalCount) {
             moveIndexRowToNewPage();
         }
@@ -42757,7 +42780,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, indexFirstEdit: indexFirstEdit, indexLastEdit: indexLastEdit } = React$5.useMemo(() => {
         const obj = calculateTableStructure(columns);
         setContentColumns(obj.flat);
         return obj;
@@ -43091,13 +43114,13 @@ const TableEdit = React$5.forwardRef((props, ref) => {
         }
         if (tableElement) {
             setIndexFocus(totalCount);
-            focusNewElement(columnFirstEdit, totalCount + 1, true);
+            focusNewElement(indexFirstEdit, totalCount + 1, true);
         }
     };
     const checkKeyDown = (e, row, col, indexRow, indexCol) => {
         const idElement = `${idTable}-col${indexCol}-row${indexRow}`;
         const params = {
-            columnLastEdit,
+            indexLastEdit,
             contentColumns,
             dataSource,
             addDisable,
@@ -43386,14 +43409,14 @@ const TableEdit = React$5.forwardRef((props, ref) => {
     }, [selectedItem]);
     const renderContentCol = (col, row, indexRow, indexCol, isSelected) => {
         if (col.field === 'command') {
-            return (col.visible !== false && jsxRuntime.jsx("td", { className: classNames$1(`r-rowcell p-0 fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'fixed-last': (col.fixedType === 'left' && indexCol === lastObjWidthFixLeft) || (col.fixedType === 'right' && indexCol === fisrtObjWidthFixRight) }, { 'r-active': (isSelected && editDisable) || indexFocus === indexRow }), style: {
+            return (col.visible !== false && jsxRuntime.jsx("td", { role: "gridcell", "aria-colindex": indexCol, className: classNames$1(`r-rowcell p-0 fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'fixed-last': (col.fixedType === 'left' && indexCol === lastObjWidthFixLeft) || (col.fixedType === 'right' && indexCol === fisrtObjWidthFixRight) }, { 'r-active': (isSelected && editDisable) || indexFocus === indexRow }), style: {
                     left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
                     right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined,
                     textAlign: col.textAlign ? col.textAlign : 'left',
                 }, children: jsxRuntime.jsx("div", { className: "r-rowcell-div command", children: jsxRuntime.jsx(CommandElement, { commandItems: col.commandItems ?? [], handleCommandClick: handleCommandClick, indexRow: indexRow, rowData: row, setIndexFocus: setIndexFocus, indexFocus: indexFocus }) }) }, `col-${indexRow}-${indexCol}`));
         }
         else if (col.field === '#') {
-            return (col.visible !== false && jsxRuntime.jsx("td", { className: classNames$1(`r-rowcell p-0 cursor-pointer fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'fixed-last': (col.fixedType === 'left' && indexCol === lastObjWidthFixLeft) || (col.fixedType === 'right' && indexCol === fisrtObjWidthFixRight) }, { 'r-active': (isSelected && editDisable) || indexFocus === indexRow }), tabIndex: Number(`${indexRow}${indexCol}`), style: {
+            return (col.visible !== false && jsxRuntime.jsx("td", { role: "gridcell", "aria-colindex": indexCol, className: classNames$1(`r-rowcell p-0 cursor-pointer fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'fixed-last': (col.fixedType === 'left' && indexCol === lastObjWidthFixLeft) || (col.fixedType === 'right' && indexCol === fisrtObjWidthFixRight) }, { 'r-active': (isSelected && editDisable) || indexFocus === indexRow }), tabIndex: Number(`${indexRow}${indexCol}`), style: {
                     left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
                     right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined,
                     textAlign: 'center',
@@ -43431,7 +43454,7 @@ const TableEdit = React$5.forwardRef((props, ref) => {
                 }, children: jsxRuntime.jsx("div", { className: "r-rowcell-div", children: indexRow + 1 }) }, `col-${indexRow}-${indexCol}`));
         }
         else if (col.field === 'checkbox') {
-            return (jsxRuntime.jsx("td", { className: classNames$1(`r-rowcell p-0 fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'fixed-last': (col.fixedType === 'left' && indexCol === lastObjWidthFixLeft) || (col.fixedType === 'right' && indexCol === fisrtObjWidthFixRight) }, { 'r-active': (isSelected && editDisable) || indexFocus === indexRow }), style: {
+            return (jsxRuntime.jsx("td", { role: "gridcell", "aria-colindex": indexCol, className: classNames$1(`r-rowcell p-0 fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'fixed-last': (col.fixedType === 'left' && indexCol === lastObjWidthFixLeft) || (col.fixedType === 'right' && indexCol === fisrtObjWidthFixRight) }, { 'r-active': (isSelected && editDisable) || indexFocus === indexRow }), style: {
                     left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
                     right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined,
                 }, children: jsxRuntime.jsx("div", { className: "r-rowcell-div cursor-pointer", style: { alignItems: 'center' }, onClick: (e) => {
@@ -43471,7 +43494,7 @@ const TableEdit = React$5.forwardRef((props, ref) => {
             }
             const typeDis = !editDisable && (indexFocus === indexRow || col.editType === 'checkbox') && (!col.disabledCondition || !col.disabledCondition(row)) ? (col.editEnable ? 1 : (col.template ? 2 : 3)) : (col.template ? 2 : 3);
             const errorMessage = typeDis === 1 || col.field === '' || !col.validate ? '' : col.validate(row[col.field], row);
-            return (jsxRuntime.jsx(React$5.Fragment, { children: col.visible !== false && jsxRuntime.jsx("td", { className: classNames$1(`r-rowcell fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'fixed-last': (col.fixedType === 'left' && indexCol === lastObjWidthFixLeft) || (col.fixedType === 'right' && indexCol === fisrtObjWidthFixRight) }, { 'r-active': (isSelected && editDisable) || indexFocus === indexRow }), style: {
+            return (jsxRuntime.jsx(React$5.Fragment, { children: col.visible !== false && jsxRuntime.jsx("td", { role: "gridcell", "aria-colindex": indexCol, className: classNames$1(`r-rowcell fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'fixed-last': (col.fixedType === 'left' && indexCol === lastObjWidthFixLeft) || (col.fixedType === 'right' && indexCol === fisrtObjWidthFixRight) }, { 'r-active': (isSelected && editDisable) || indexFocus === indexRow }), style: {
                         left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
                         right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined,
                     }, onClick: (e) => {
@@ -43569,33 +43592,30 @@ const TableEdit = React$5.forwardRef((props, ref) => {
         });
         return isFilterMatch && isSearchMatch;
     }
-    const renderData = () => {
-        return (dataSource.map((row, indexRow) => {
-            const isSelected = selectedRows?.some((x) => x[fieldKey] === row[fieldKey]);
-            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}`) }));
-            }
-        }));
-    };
     React$5.useEffect(() => {
         if (pagingClient && pagingSetting?.setCurrentPage && (searchSetting?.searchTerm !== undefined ? searchSetting?.searchTerm : searchTerm)) {
             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(RenderColGroup, { contentColumns: flatVisble }), 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%' }, role: "presentation", children: [jsxRuntime.jsx(RenderColGroup, { contentColumns: flatVisble }), jsxRuntime.jsx("thead", { className: 'r-gridheader', role: "rowgroup", 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]);
                                                             }, 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) => {
+                                            }) }), jsxRuntime.jsx("tbody", { className: 'r-gridcontent', role: "rowgroup", children: dataSource.map((row, indexRow) => {
+                                                const isSelected = selectedRows?.some((x) => x[fieldKey] === row[fieldKey]);
+                                                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", { "aria-rowindex": indexRow + 1, role: "row", className: classNames$1('r-row'), children: contentColumns.map((col, indexCol) => renderContentCol(col, row, indexRow, indexCol, isSelected)) }, `row-${indexRow}`) }));
+                                                }
+                                            }) }), 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, columnFirstEdit, changeDataSource, pagingSetting, setIndexFocus, focusNewElement, numberOfRows);
+                                    handleAdd(dataSource, tableElement.current, indexFirstEdit, changeDataSource, pagingSetting, setIndexFocus, focusNewElement, numberOfRows);
                                 }, handleDuplicate: () => {
                                     handleDuplicate(dataSource, indexFocus, fieldKey, defaultValue, fieldUniKey, changeDataSource, tableElement, totalCount, toolbarSetting, buttonSetting, editDisable, addDisable, onDuplicate);
                                 }, handleInsertAfter: () => {
@@ -65797,7 +65817,7 @@ const VirtualTable = ({ idTable, dataSource, rowHeight = 33, height = 400, colum
             }
         }
     };
-    return (jsxRuntime.jsxs("div", { className: "react-table-edit r-virtualized-table", children: [jsxRuntime.jsxs("div", { className: 'r-grid', children: [toolbarSetting?.showTopToolbar && jsxRuntime.jsx(RenderToolbarTop, { toolbarTopOption: toolbarTopOption }), jsxRuntime.jsxs("div", { ref: gridRef, className: "r-gridtable", onScroll: handleScroll, style: { height: `${height ? `${height}px` : 'auto'}` }, children: [jsxRuntime.jsxs("table", { style: { width: '100%' }, children: [jsxRuntime.jsx(RenderColGroup, { contentColumns: flatVisble }), jsxRuntime.jsx("thead", { className: 'r-gridheader', children: headerColumns.map((rowColumn, indexParent) => (jsxRuntime.jsx("tr", { className: "r-row", role: "row", children: rowColumn.map((column, indexColumn) => (jsxRuntime.jsx(HeaderTableCol, { idTable: idTable, col: column, dataSource: dataSource, indexCol: indexColumn, indexParent: indexParent, isMulti: isMutil ?? false, selectEnable: selectEnable ?? false, selectedRows: selectedRows, setSelectedRows: setSelectedRows, columns: contentColumns, setColumns: setColumns, objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, fisrtObjWidthFixRight: fisrtObjWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, orderBy: orderBy, allowFilter: allowFilter, allowOrder: allowOrder, filterBy: filterBy, optionsFilter: optionsFilter, changeFilter: (val) => {
+    return (jsxRuntime.jsxs("div", { className: "react-table-edit r-virtualized-table", children: [jsxRuntime.jsxs("div", { className: 'r-grid', children: [toolbarSetting?.showTopToolbar && jsxRuntime.jsx(RenderToolbarTop, { toolbarTopOption: toolbarTopOption }), jsxRuntime.jsxs("div", { ref: gridRef, className: "r-gridtable", onScroll: handleScroll, style: { height: `${height ? `${height}px` : 'auto'}` }, children: [jsxRuntime.jsxs("table", { role: "presentation", style: { width: '100%' }, children: [jsxRuntime.jsx(RenderColGroup, { contentColumns: flatVisble }), jsxRuntime.jsx("thead", { className: 'r-gridheader', role: "rowgroup", children: headerColumns.map((rowColumn, indexParent) => (jsxRuntime.jsx("tr", { className: "r-row", role: "row", children: rowColumn.map((column, indexColumn) => (jsxRuntime.jsx(HeaderTableCol, { idTable: idTable, col: column, dataSource: dataSource, indexCol: indexColumn, indexParent: indexParent, isMulti: isMutil ?? false, selectEnable: selectEnable ?? false, selectedRows: selectedRows, setSelectedRows: setSelectedRows, columns: contentColumns, setColumns: setColumns, objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, fisrtObjWidthFixRight: fisrtObjWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, orderBy: orderBy, allowFilter: allowFilter, allowOrder: allowOrder, filterBy: filterBy, optionsFilter: optionsFilter, changeFilter: (val) => {
                                                     setFilterBy([...val]);
                                                     if (changeFilter) {
                                                         changeFilter(val);
@@ -65807,10 +65827,10 @@ const VirtualTable = ({ idTable, dataSource, rowHeight = 33, height = 400, colum
                                                     if (changeOrder) {
                                                         changeOrder(val);
                                                     }
-                                                }, container: gridRef, totalCount: dataSource.length }, `header-${indexParent}-${indexColumn}`))) }, indexParent))) }), jsxRuntime.jsxs("tbody", { className: 'r-gridcontent', children: [adjustedStartIndex > 0 && (jsxRuntime.jsx("tr", { style: { height: adjustedStartIndex * rowHeight }, children: jsxRuntime.jsx("td", { style: { padding: 0 }, colSpan: flatVisble.length }) })), visibleData.map((row, index) => {
+                                                }, container: gridRef, totalCount: dataSource.length }, `header-${indexParent}-${indexColumn}`))) }, `header-${-indexParent}`))) }), jsxRuntime.jsxs("tbody", { className: 'r-gridcontent', role: "rowgroup", children: [adjustedStartIndex > 0 && (jsxRuntime.jsx("tr", { style: { height: adjustedStartIndex * rowHeight }, children: jsxRuntime.jsx("td", { style: { padding: 0 }, colSpan: flatVisble.length }) })), visibleData.map((row, index) => {
                                                 const indexRow = index + startIndex;
                                                 const isSelected = selectedRows?.some((x) => x[fieldKey] === row[fieldKey]);
-                                                return (jsxRuntime.jsx("tr", { className: classNames$1('r-row'), children: contentColumns.map((column, indexCol) => (jsxRuntime.jsx(RenderContentCol, { idTable: idTable, col: column, fieldKey: 'field', objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, fisrtObjWidthFixRight: fisrtObjWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, isMulti: isMutil ?? false, selectEnable: selectEnable ?? false, selectedRows: selectedRows, setSelectedRows: setSelectedRows, formatSetting: formatSetting, handleCommandClick: handleCommandClick, indexCol: indexCol, indexRow: indexRow, isSelected: isSelected, row: row }, indexCol))) }, `row-${indexRow}`));
+                                                return (jsxRuntime.jsx("tr", { "aria-rowindex": indexRow + 1, role: "row", className: 'r-row', children: contentColumns.map((column, indexCol) => (jsxRuntime.jsx(RenderContentCol, { idTable: idTable, col: column, fieldKey: 'field', objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, fisrtObjWidthFixRight: fisrtObjWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, isMulti: isMutil ?? false, selectEnable: selectEnable ?? false, selectedRows: selectedRows, setSelectedRows: setSelectedRows, formatSetting: formatSetting, handleCommandClick: handleCommandClick, indexCol: indexCol, indexRow: indexRow, isSelected: isSelected, row: row }, indexCol))) }, `row-content-${indexRow}`));
                                             }), dataSource.length > adjustedEndIndex && (jsxRuntime.jsx("tr", { style: { height: (dataSource.length - adjustedEndIndex) * rowHeight }, children: jsxRuntime.jsx("td", { style: { padding: 0 }, colSpan: flatVisble.length }) }))] }), dataSource.length > 0 && jsxRuntime.jsx("tfoot", { className: "r-gridfoot", children: (columnsAggregate?.length ?? 0) > 0 ? jsxRuntime.jsx("tr", { className: 'r-row', children: contentColumns.map((col, indexCol) => {
                                                 const item = columnsAggregate?.find((x) => x.field === col.field);
                                                 let sumValue = item?.value;