hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Use new virtual layout

Browse Source 
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
1 changed files with 46 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/renderer/components/table/virtual-table.tsx
View File

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