1
0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00

Use new virtual layout

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2022-08-23 14:22:33 +03:00
parent 4b887e6c7c
commit 44f1e824e3

View File

@ -28,33 +28,52 @@
console.log(`${rowVirtualizer.getTotalSize()}px`)
return (
<>
<div className={className} ref={tableContainerRef}>
<table style={{ height: 1590 }}>
<table style={{
height: rowVirtualizer.getTotalSize(),
width: '100%',
position: 'relative',
}}>
<TableHeader table={table}/>
<tbody>
{rowVirtualizer.getVirtualItems().map(virtualRow => {
const row = rows[virtualRow.index] as Row<Data>
return (
<tr
key={row.id}
// style={{ height: 30 }}
<div
key={virtualRow.index}
ref={virtualRow.measureElement}
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
transform: `translateY(${virtualRow.start}px)`,
display: 'flex',
}}
>
{row.getVisibleCells().map(cell => {
return (
<td key={cell.id} style={{ width: cell.column.getSize() }}>
<div key={cell.id} style={{
width: cell.column.getSize(),
flexGrow: 0,
flexShrink: 0,
}}>
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
</td>
</div>
)
})}
</tr>
</div>
)
})}
</tbody>
</table>
</div>
</>
)
}