react-table-edit 1.4.25 → 1.4.27

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/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

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

package/dist/index.d.ts

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

package/dist/index.js

@@ -19326,6 +19326,20 @@ const calculateTableStructure = (columns) => {
     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, indexCol) => {
@@ -19339,9 +19353,6 @@ const calculateTableStructure = (columns) => {
             };
             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;
             }
@@ -19355,10 +19366,13 @@ const calculateTableStructure = (columns) => {
                     leftTotal += width;
                 }
                 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);
     };
@@ -19366,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,
@@ -19379,8 +19392,8 @@ const calculateTableStructure = (columns) => {
         fisrtObjWidthFixRight,
         objHeaderWidthFixRight,
         objHeaderWidthFixLeft,
-        firstEdit,
-        lastEdit
+        indexFirstEdit,
+        indexLastEdit
     };
 };
 
@@ -41852,7 +41865,6 @@ 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' ? objHeaderWidthFixLeft[`${indexParent}-${indexCol ?? 0}`] : undefined,
@@ -42354,7 +42366,7 @@ const RenderToolbarTop = ({ toolbarTopOption }) => {
                     }) })] }) }));
 };
 
-const handleAdd = (dataSource, tableElement, columnFistEdit, 
+const handleAdd = (dataSource, tableElement, indexFirstEdit, 
 /*eslint-disable*/
 changeDataSource, pagingSetting, setIndexFocus, focusNewElement, 
 /*eslint-enable*/
@@ -42366,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, 
@@ -42564,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();
         }
@@ -42768,7 +42780,7 @@ const TableEdit = React$5.forwardRef((props, ref) => {
             pagingSetting.setCurrentPage(1);
         }
     }, [dataSource]);
-    const { levels: headerColumns, flatVisble, objWidthFixLeft, objWidthFixRight, lastObjWidthFixLeft, fisrtObjWidthFixRight, objHeaderWidthFixLeft, objHeaderWidthFixRight, 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;
@@ -43084,10 +43096,10 @@ const TableEdit = React$5.forwardRef((props, ref) => {
                     }
                 }
                 if ((tableElement.current?.scrollHeight ?? 0) > 0) {
-                    if ((tableElement.current?.scrollTop ?? 0) > ((row - 1) % (pagingSetting?.pageSize ?? 1)) * 34) {
-                        tableElement.current?.scrollTo({ behavior: 'smooth', top: ((row - 1) % (pagingSetting?.pageSize ?? 1)) * 34 });
+                    if ((tableElement.current?.scrollTop ?? 0) > ((row - 1) % (pagingSetting?.pageSize ?? 10000)) * 34) {
+                        tableElement.current?.scrollTo({ behavior: 'smooth', top: ((row - 1) % (pagingSetting?.pageSize ?? 10000)) * 34 });
                     }
-                    else if (((tableElement.current?.clientHeight ?? 0) - (haveSum ? 30 : 0) - (headerColumns.length * 42)) < (((row % (pagingSetting?.pageSize ?? 1)) * 34) - (tableElement.current?.scrollTop ?? 0))) {
+                    else if (((tableElement.current?.clientHeight ?? 0) - (haveSum ? 30 : 0) - (headerColumns.length * 42)) < (((row % (pagingSetting?.pageSize ?? 10000)) * 34) - (tableElement.current?.scrollTop ?? 0))) {
                         tableElement.current?.scrollTo({ behavior: 'smooth', top: (tableElement.current?.scrollTop ?? 0) + 34 });
                     }
                 }
@@ -43102,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,
@@ -43397,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',
@@ -43442,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) => {
@@ -43482,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) => {
@@ -43580,22 +43592,12 @@ 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, 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]);
@@ -43603,10 +43605,17 @@ const TableEdit = React$5.forwardRef((props, ref) => {
                                                                 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: () => {
@@ -65808,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);
@@ -65818,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;