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:
parent
4b887e6c7c
commit
44f1e824e3
@ -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>
|
||||||
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
Loading…
Reference in New Issue
Block a user