react-table-edit 1.4.25 → 1.4.27

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.mjs CHANGED
@@ -19298,6 +19298,20 @@ const calculateTableStructure = (columns) => {
19298
19298
  maxDepth = calculateDepth(columns);
19299
19299
  let leftTotal = 0;
19300
19300
  let rightTotal = 0;
19301
+ // Tính tổng width của các cột cố định phải
19302
+ const calcTotalRightWidth = (cols) => {
19303
+ cols.forEach(col => {
19304
+ if (col.columns?.length) {
19305
+ calcTotalRightWidth(col.columns);
19306
+ }
19307
+ else {
19308
+ if (col.fixedType === 'right' && col.visible !== false) {
19309
+ rightTotal += col.width ?? 40;
19310
+ }
19311
+ }
19312
+ });
19313
+ };
19314
+ calcTotalRightWidth(columns);
19301
19315
  const traverse = (cols, level = 0) => {
19302
19316
  levels[level] = levels[level] || [];
19303
19317
  return cols.reduce((colspanSum, col, indexCol) => {
@@ -19311,9 +19325,6 @@ const calculateTableStructure = (columns) => {
19311
19325
  };
19312
19326
  levels[level].push(cell);
19313
19327
  const headerKey = `${level}-${indexCol}`;
19314
- if (col.fixedType === 'right' && col.visible !== false) {
19315
- objHeaderWidthFixRight[headerKey] = rightTotal;
19316
- }
19317
19328
  if (col.fixedType === 'left' && col.visible !== false) {
19318
19329
  objHeaderWidthFixLeft[headerKey] = leftTotal;
19319
19330
  }
@@ -19327,10 +19338,13 @@ const calculateTableStructure = (columns) => {
19327
19338
  leftTotal += width;
19328
19339
  }
19329
19340
  if (col.fixedType === 'right' && col.visible !== false) {
19341
+ rightTotal -= width;
19330
19342
  objWidthFixRight[index] = rightTotal;
19331
- rightTotal += width;
19332
19343
  }
19333
19344
  }
19345
+ if (col.fixedType === 'right' && col.visible !== false) {
19346
+ objHeaderWidthFixRight[headerKey] = rightTotal;
19347
+ }
19334
19348
  return colspanSum + colspan;
19335
19349
  }, 0);
19336
19350
  };
@@ -19338,9 +19352,8 @@ const calculateTableStructure = (columns) => {
19338
19352
  const flatVisble = flat.filter((e) => e.visible !== false);
19339
19353
  const lastObjWidthFixLeft = Math.max(...Object.keys(objWidthFixLeft).map(Number), 0);
19340
19354
  const fisrtObjWidthFixRight = Math.min(...Object.keys(objWidthFixRight).map(Number), flat.length);
19341
- const editableColumns = flat.filter(item => item.editEnable && item.visible !== false && !item.disabledCondition);
19342
- const firstEdit = editableColumns[0];
19343
- const lastEdit = editableColumns[editableColumns.length - 1];
19355
+ const indexFirstEdit = flat.findIndex((item) => item.editEnable && item.visible !== false && !item.disabledCondition) + 1;
19356
+ const indexLastEdit = flat.findLastIndex((item) => item.editEnable && item.visible !== false && !item.disabledCondition) + 1;
19344
19357
  return {
19345
19358
  levels,
19346
19359
  flat,
@@ -19351,8 +19364,8 @@ const calculateTableStructure = (columns) => {
19351
19364
  fisrtObjWidthFixRight,
19352
19365
  objHeaderWidthFixRight,
19353
19366
  objHeaderWidthFixLeft,
19354
- firstEdit,
19355
- lastEdit
19367
+ indexFirstEdit,
19368
+ indexLastEdit
19356
19369
  };
19357
19370
  };
19358
19371
 
@@ -41824,7 +41837,6 @@ const HeaderTableCol$1 = (props) => {
41824
41837
  const checkOverflow = () => {
41825
41838
  return headerRef.current && headerRef.current.scrollHeight > headerRef.current.clientHeight;
41826
41839
  };
41827
- console.log(col);
41828
41840
  return (jsx(Fragment, { children: col.visible !== false && (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: 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: {
41829
41841
  top: `${indexParent * 42}px`,
41830
41842
  left: col.fixedType === 'left' ? objHeaderWidthFixLeft[`${indexParent}-${indexCol ?? 0}`] : undefined,
@@ -42326,7 +42338,7 @@ const RenderToolbarTop = ({ toolbarTopOption }) => {
42326
42338
  }) })] }) }));
42327
42339
  };
42328
42340
 
42329
- const handleAdd = (dataSource, tableElement, columnFistEdit,
42341
+ const handleAdd = (dataSource, tableElement, indexFirstEdit,
42330
42342
  /*eslint-disable*/
42331
42343
  changeDataSource, pagingSetting, setIndexFocus, focusNewElement,
42332
42344
  /*eslint-enable*/
@@ -42338,7 +42350,7 @@ numberOfRows) => {
42338
42350
  }
42339
42351
  if (tableElement) {
42340
42352
  setIndexFocus(lengthData);
42341
- focusNewElement(columnFistEdit, lengthData + 1, true);
42353
+ focusNewElement(indexFirstEdit, lengthData + 1, true);
42342
42354
  }
42343
42355
  };
42344
42356
  const handleDuplicate = async (dataSource, indexFocus, fieldKey, defaultValue, fieldUniKey,
@@ -42536,8 +42548,8 @@ const handleArrowDown = (e, params) => {
42536
42548
  }
42537
42549
  };
42538
42550
  const handleTab = (e, params) => {
42539
- const { indexCol, columnLastEdit, indexRow, totalCount, moveIndexRowToNewPage, pagingClient, pagingSetting, setIndexFocus, focusNewElement } = params;
42540
- if (indexCol === columnLastEdit) {
42551
+ const { indexCol, indexLastEdit, indexRow, totalCount, moveIndexRowToNewPage, pagingClient, pagingSetting, setIndexFocus, focusNewElement } = params;
42552
+ if (indexCol === indexLastEdit) {
42541
42553
  if (indexRow === totalCount) {
42542
42554
  moveIndexRowToNewPage();
42543
42555
  }
@@ -42740,7 +42752,7 @@ const TableEdit = forwardRef((props, ref) => {
42740
42752
  pagingSetting.setCurrentPage(1);
42741
42753
  }
42742
42754
  }, [dataSource]);
42743
- const { levels: headerColumns, flatVisble, objWidthFixLeft, objWidthFixRight, lastObjWidthFixLeft, fisrtObjWidthFixRight, objHeaderWidthFixLeft, objHeaderWidthFixRight, firstEdit: columnFirstEdit, lastEdit: columnLastEdit } = useMemo(() => {
42755
+ const { levels: headerColumns, flatVisble, objWidthFixLeft, objWidthFixRight, lastObjWidthFixLeft, fisrtObjWidthFixRight, objHeaderWidthFixLeft, objHeaderWidthFixRight, indexFirstEdit: indexFirstEdit, indexLastEdit: indexLastEdit } = useMemo(() => {
42744
42756
  const obj = calculateTableStructure(columns);
42745
42757
  setContentColumns(obj.flat);
42746
42758
  return obj;
@@ -43056,10 +43068,10 @@ const TableEdit = forwardRef((props, ref) => {
43056
43068
  }
43057
43069
  }
43058
43070
  if ((tableElement.current?.scrollHeight ?? 0) > 0) {
43059
- if ((tableElement.current?.scrollTop ?? 0) > ((row - 1) % (pagingSetting?.pageSize ?? 1)) * 34) {
43060
- tableElement.current?.scrollTo({ behavior: 'smooth', top: ((row - 1) % (pagingSetting?.pageSize ?? 1)) * 34 });
43071
+ if ((tableElement.current?.scrollTop ?? 0) > ((row - 1) % (pagingSetting?.pageSize ?? 10000)) * 34) {
43072
+ tableElement.current?.scrollTo({ behavior: 'smooth', top: ((row - 1) % (pagingSetting?.pageSize ?? 10000)) * 34 });
43061
43073
  }
43062
- else if (((tableElement.current?.clientHeight ?? 0) - (haveSum ? 30 : 0) - (headerColumns.length * 42)) < (((row % (pagingSetting?.pageSize ?? 1)) * 34) - (tableElement.current?.scrollTop ?? 0))) {
43074
+ else if (((tableElement.current?.clientHeight ?? 0) - (haveSum ? 30 : 0) - (headerColumns.length * 42)) < (((row % (pagingSetting?.pageSize ?? 10000)) * 34) - (tableElement.current?.scrollTop ?? 0))) {
43063
43075
  tableElement.current?.scrollTo({ behavior: 'smooth', top: (tableElement.current?.scrollTop ?? 0) + 34 });
43064
43076
  }
43065
43077
  }
@@ -43074,13 +43086,13 @@ const TableEdit = forwardRef((props, ref) => {
43074
43086
  }
43075
43087
  if (tableElement) {
43076
43088
  setIndexFocus(totalCount);
43077
- focusNewElement(columnFirstEdit, totalCount + 1, true);
43089
+ focusNewElement(indexFirstEdit, totalCount + 1, true);
43078
43090
  }
43079
43091
  };
43080
43092
  const checkKeyDown = (e, row, col, indexRow, indexCol) => {
43081
43093
  const idElement = `${idTable}-col${indexCol}-row${indexRow}`;
43082
43094
  const params = {
43083
- columnLastEdit,
43095
+ indexLastEdit,
43084
43096
  contentColumns,
43085
43097
  dataSource,
43086
43098
  addDisable,
@@ -43369,14 +43381,14 @@ const TableEdit = forwardRef((props, ref) => {
43369
43381
  }, [selectedItem]);
43370
43382
  const renderContentCol = (col, row, indexRow, indexCol, isSelected) => {
43371
43383
  if (col.field === 'command') {
43372
- return (col.visible !== false && 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: {
43384
+ return (col.visible !== false && 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: {
43373
43385
  left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
43374
43386
  right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined,
43375
43387
  textAlign: col.textAlign ? col.textAlign : 'left',
43376
43388
  }, children: jsx("div", { className: "r-rowcell-div command", children: jsx(CommandElement, { commandItems: col.commandItems ?? [], handleCommandClick: handleCommandClick, indexRow: indexRow, rowData: row, setIndexFocus: setIndexFocus, indexFocus: indexFocus }) }) }, `col-${indexRow}-${indexCol}`));
43377
43389
  }
43378
43390
  else if (col.field === '#') {
43379
- return (col.visible !== false && 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: {
43391
+ return (col.visible !== false && 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: {
43380
43392
  left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
43381
43393
  right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined,
43382
43394
  textAlign: 'center',
@@ -43414,7 +43426,7 @@ const TableEdit = forwardRef((props, ref) => {
43414
43426
  }, children: jsx("div", { className: "r-rowcell-div", children: indexRow + 1 }) }, `col-${indexRow}-${indexCol}`));
43415
43427
  }
43416
43428
  else if (col.field === 'checkbox') {
43417
- return (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: {
43429
+ return (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: {
43418
43430
  left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
43419
43431
  right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined,
43420
43432
  }, children: jsx("div", { className: "r-rowcell-div cursor-pointer", style: { alignItems: 'center' }, onClick: (e) => {
@@ -43454,7 +43466,7 @@ const TableEdit = forwardRef((props, ref) => {
43454
43466
  }
43455
43467
  const typeDis = !editDisable && (indexFocus === indexRow || col.editType === 'checkbox') && (!col.disabledCondition || !col.disabledCondition(row)) ? (col.editEnable ? 1 : (col.template ? 2 : 3)) : (col.template ? 2 : 3);
43456
43468
  const errorMessage = typeDis === 1 || col.field === '' || !col.validate ? '' : col.validate(row[col.field], row);
43457
- return (jsx(Fragment, { children: col.visible !== false && 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: {
43469
+ return (jsx(Fragment, { children: col.visible !== false && 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: {
43458
43470
  left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
43459
43471
  right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined,
43460
43472
  }, onClick: (e) => {
@@ -43552,22 +43564,12 @@ const TableEdit = forwardRef((props, ref) => {
43552
43564
  });
43553
43565
  return isFilterMatch && isSearchMatch;
43554
43566
  }
43555
- const renderData = () => {
43556
- return (dataSource.map((row, indexRow) => {
43557
- const isSelected = selectedRows?.some((x) => x[fieldKey] === row[fieldKey]);
43558
- const flagSearch = checkRowMatch(row, filterBy, searchSetting?.searchTerm !== undefined ? searchSetting?.searchTerm : searchTerm, searchSetting?.keyField ?? []);
43559
- if (flagSearch) {
43560
- const flagDisplay = !pagingClient || ((indexRow + 1) > ((pagingSetting.pageSize ?? 0) * ((pagingSetting.currentPage ?? 0) - 1)) && (indexRow + 1) <= ((pagingSetting.pageSize ?? 0) * ((pagingSetting.currentPage ?? 0))));
43561
- return (flagDisplay && jsx(Fragment$1, { children: jsx("tr", { className: classNames$1('r-row'), children: contentColumns.map((col, indexCol) => renderContentCol(col, row, indexRow, indexCol, isSelected)) }, `row-${indexRow}`) }));
43562
- }
43563
- }));
43564
- };
43565
43567
  useEffect(() => {
43566
43568
  if (pagingClient && pagingSetting?.setCurrentPage && (searchSetting?.searchTerm !== undefined ? searchSetting?.searchTerm : searchTerm)) {
43567
43569
  pagingSetting?.setCurrentPage(1);
43568
43570
  }
43569
43571
  }, [searchTerm, searchSetting?.searchTerm]);
43570
- return (jsxs(Fragment, { children: [jsxs("div", { className: "react-table-edit", children: [jsxs("div", { className: 'r-grid', ref: gridRef, children: [toolbarSetting?.showTopToolbar && jsx(RenderToolbarTop, { toolbarTopOption: toolbarTopOption }), jsx("div", { ref: tableElement, className: "r-gridtable", style: { height: `${height ? `${height}px` : 'auto'}`, minHeight: `${minHeight ? `${minHeight}px` : ''}`, maxHeight: `${maxHeight ? `${maxHeight}px` : '400px'}` }, children: jsxs("table", { style: { width: '100%' }, children: [jsx(RenderColGroup, { contentColumns: flatVisble }), jsx("thead", { className: 'r-gridheader', children: headerColumns.map((element, indexParent) => {
43572
+ return (jsxs(Fragment, { children: [jsxs("div", { className: "react-table-edit", children: [jsxs("div", { className: 'r-grid', ref: gridRef, children: [toolbarSetting?.showTopToolbar && jsx(RenderToolbarTop, { toolbarTopOption: toolbarTopOption }), jsx("div", { ref: tableElement, className: "r-gridtable", style: { height: `${height ? `${height}px` : 'auto'}`, minHeight: `${minHeight ? `${minHeight}px` : ''}`, maxHeight: `${maxHeight ? `${maxHeight}px` : '400px'}` }, children: jsxs("table", { style: { width: '100%' }, role: "presentation", children: [jsx(RenderColGroup, { contentColumns: flatVisble }), jsx("thead", { className: 'r-gridheader', role: "rowgroup", children: headerColumns.map((element, indexParent) => {
43571
43573
  return (jsx("tr", { className: "r-row", role: "row", children: element?.map((col, index) => {
43572
43574
  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: tableElement, filterBy: filterBy, orderBy: orderBy, optionsFilter: optionsFilter, allowFilter: allowFilter, allowOrder: allowOrder, formatSetting: formatSetting, changeFilter: (val) => {
43573
43575
  setFilterBy([...val]);
@@ -43575,10 +43577,17 @@ const TableEdit = forwardRef((props, ref) => {
43575
43577
  setOrderBy([...val]);
43576
43578
  }, columns: contentColumns, setColumns: setContentColumns, fisrtObjWidthFixRight: fisrtObjWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, totalCount: totalCount }, `header-${indexParent}-${index}`));
43577
43579
  }) }, `header-${-indexParent}`));
43578
- }) }), jsx("tbody", { className: 'r-gridcontent', children: renderData() }), jsx("tfoot", { className: "r-gridfoot", children: haveSum == true ? jsx("tr", { className: 'r-row', children: contentColumns.map((col, index) => {
43580
+ }) }), jsx("tbody", { className: 'r-gridcontent', role: "rowgroup", children: dataSource.map((row, indexRow) => {
43581
+ const isSelected = selectedRows?.some((x) => x[fieldKey] === row[fieldKey]);
43582
+ const flagSearch = checkRowMatch(row, filterBy, searchSetting?.searchTerm !== undefined ? searchSetting?.searchTerm : searchTerm, searchSetting?.keyField ?? []);
43583
+ if (flagSearch) {
43584
+ const flagDisplay = !pagingClient || ((indexRow + 1) > ((pagingSetting.pageSize ?? 0) * ((pagingSetting.currentPage ?? 0) - 1)) && (indexRow + 1) <= ((pagingSetting.pageSize ?? 0) * ((pagingSetting.currentPage ?? 0))));
43585
+ return (flagDisplay && jsx(Fragment$1, { children: 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}`) }));
43586
+ }
43587
+ }) }), jsx("tfoot", { className: "r-gridfoot", children: haveSum == true ? jsx("tr", { className: 'r-row', children: contentColumns.map((col, index) => {
43579
43588
  return (renderFooterCol(col, index));
43580
43589
  }) }) : jsx(Fragment$1, {}) })] }) }), toolbarSetting?.showBottomToolbar && jsx(ToolbarBottom, { handleAdd: (numberOfRows) => {
43581
- handleAdd(dataSource, tableElement.current, columnFirstEdit, changeDataSource, pagingSetting, setIndexFocus, focusNewElement, numberOfRows);
43590
+ handleAdd(dataSource, tableElement.current, indexFirstEdit, changeDataSource, pagingSetting, setIndexFocus, focusNewElement, numberOfRows);
43582
43591
  }, handleDuplicate: () => {
43583
43592
  handleDuplicate(dataSource, indexFocus, fieldKey, defaultValue, fieldUniKey, changeDataSource, tableElement, totalCount, toolbarSetting, buttonSetting, editDisable, addDisable, onDuplicate);
43584
43593
  }, handleInsertAfter: () => {
@@ -65780,7 +65789,7 @@ const VirtualTable = ({ idTable, dataSource, rowHeight = 33, height = 400, colum
65780
65789
  }
65781
65790
  }
65782
65791
  };
65783
- return (jsxs("div", { className: "react-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", { style: { width: '100%' }, children: [jsx(RenderColGroup, { contentColumns: flatVisble }), jsx("thead", { className: 'r-gridheader', 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) => {
65792
+ return (jsxs("div", { className: "react-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) => {
65784
65793
  setFilterBy([...val]);
65785
65794
  if (changeFilter) {
65786
65795
  changeFilter(val);
@@ -65790,10 +65799,10 @@ const VirtualTable = ({ idTable, dataSource, rowHeight = 33, height = 400, colum
65790
65799
  if (changeOrder) {
65791
65800
  changeOrder(val);
65792
65801
  }
65793
- }, container: gridRef, totalCount: dataSource.length }, `header-${indexParent}-${indexColumn}`))) }, indexParent))) }), jsxs("tbody", { className: 'r-gridcontent', children: [adjustedStartIndex > 0 && (jsx("tr", { style: { height: adjustedStartIndex * rowHeight }, children: jsx("td", { style: { padding: 0 }, colSpan: flatVisble.length }) })), visibleData.map((row, index) => {
65802
+ }, 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) => {
65794
65803
  const indexRow = index + startIndex;
65795
65804
  const isSelected = selectedRows?.some((x) => x[fieldKey] === row[fieldKey]);
65796
- return (jsx("tr", { className: classNames$1('r-row'), children: contentColumns.map((column, indexCol) => (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}`));
65805
+ return (jsx("tr", { "aria-rowindex": indexRow + 1, role: "row", className: 'r-row', children: contentColumns.map((column, indexCol) => (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}`));
65797
65806
  }), dataSource.length > adjustedEndIndex && (jsx("tr", { style: { height: (dataSource.length - adjustedEndIndex) * rowHeight }, children: jsx("td", { style: { padding: 0 }, colSpan: flatVisble.length }) }))] }), dataSource.length > 0 && jsx("tfoot", { className: "r-gridfoot", children: (columnsAggregate?.length ?? 0) > 0 ? jsx("tr", { className: 'r-row', children: contentColumns.map((col, indexCol) => {
65798
65807
  const item = columnsAggregate?.find((x) => x.field === col.field);
65799
65808
  let sumValue = item?.value;