- {rowGroup.map((row, index) => (
-
- {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */}
+ {visibleRowGroup.map((groupRow) => {
+ const virtualRow = { ...groupRow } as VirtualItem
+ let row: Row
+ if (virtualRow.start != null) {
+ row = rowGroup[virtualRow.index]
+ } else {
+ row = groupRow as Row
+ }
+
+ return (
handleRowIndexClick(row)}
- className={classNames(
- componentStyles.tableCell,
- componentStyles.tableIndexCell,
- {
- [componentStyles.selectedRow]: row.id === selectedRow?.id
- },
- linesStyle,
- {
- [componentStyles.hideBorder]: hideBorder
- },
- slotProps?.cell?.className
- )}
+ role="row"
+ data-index={row.index}
+ ref={(node) => rowVirtualizer.measureElement(node)} //measure dynamic row height
+ className={classNames(componentStyles.tableRow, {
+ [componentStyles.preventGap]: isTableOverflowingY
+ })}
+ style={{
+ display: 'flex',
+ position: virtualize ? 'absolute' : undefined,
+ transform: virtualize ? `translateY(${virtualRow.start}px)` : undefined, //this should always be a `style` as it changes on scroll
+ width: isResizable ? 'fit-content' : '100%'
+ }}
+ key={row.id}
>
-
{index + 1 + pageIndex * (isStatic ? clientPagination.pageSize : pageSize)}
-
handleRowCellClick(cell)}
- style={{
- ...slotProps?.cell?.style,
- width: isResizable ? cell.column.getSize() : cell.column.getSize()
- }}
+ onClick={() => handleRowIndexClick(row)}
className={classNames(
componentStyles.tableCell,
+ componentStyles.tableIndexCell,
{
- [componentStyles.selectedRow]:
- cell.id === selectedRow?.cells[index].id || cell.id === selectedCell?.id
+ [componentStyles.selectedRow]: row.id === selectedRow?.id
},
linesStyle,
- slotProps?.cell?.className,
{
- [componentStyles.hideBorder]: hideBorder,
- [componentStyles.numeric]: !isNaN(Number(cell.getValue()))
- }
+ [componentStyles.hideBorder]: hideBorder
+ },
+ slotProps?.cell?.className
)}
- key={cell.id}
+ style={slotProps?.cell?.style}
>
-
{flexRender(cell.column.columnDef.cell, cell.getContext())}
+
{row.index + 1 + pageIndex * (isStatic ? clientPagination.pageSize : pageSize)}
- ))}
+ {row.getVisibleCells().map((cell, index) => (
+ // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events
+
handleRowCellClick(cell)}
+ style={{
+ ...slotProps?.cell?.style,
+ width: isResizable ? cell.column.getSize() : cell.column.getSize()
+ }}
+ className={classNames(
+ componentStyles.tableCell,
+ {
+ [componentStyles.selectedRow]:
+ cell.id === selectedRow?.cells[index].id || cell.id === selectedCell?.id
+ },
+ linesStyle,
+ slotProps?.cell?.className,
+ {
+ [componentStyles.hideBorder]: hideBorder,
+ [componentStyles.numeric]: !isNaN(Number(cell.getValue()))
+ }
+ )}
+ key={cell.id}
+ >
+ {flexRender(cell.column.columnDef.cell, cell.getContext())}
+
+ ))}
+