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