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

Update react-virtual to 3rd version

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2022-08-22 08:10:28 +03:00
parent 5cce219387
commit 4b887e6c7c
4 changed files with 42 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -225,6 +225,7 @@
"@sentry/integrations": "^6.19.3",
"@side/jest-runtime": "^1.0.1",
"@tanstack/react-table": "^8.5.11",
"@tanstack/react-virtual": "3.0.0-beta.18",
"@types/circular-dependency-plugin": "5.0.5",
"auto-bind": "^4.0.0",
"await-lock": "^2.2.2",
@ -270,7 +271,6 @@
"react-dom": "^17.0.2",
"react-material-ui-carousel": "^2.3.11",
"react-router": "^5.2.0",
"react-virtual": "^2.10.4",
"react-virtualized-auto-sizer": "^1.0.6",
"readable-stream": "^3.6.0",
"request": "^2.88.2",

4
src/renderer/components/list/table-theme.module.scss
View File

@ -1,5 +1,5 @@
.tableTheme {
height: calc(100% - 59px);
height: 708px;
overflow: auto;
table {
@ -20,7 +20,7 @@
}
tr {
margin: calc(var(--margin) * 1.6) var(--margin);
// margin: calc(var(--margin) * 1.6) var(--margin);
}
th {

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

@ -4,10 +4,10 @@
*/
import React from "react";
import { flexRender, Row } from '@tanstack/react-table'
import { flexRender, Row } from "@tanstack/react-table"
import type { Table } from "@tanstack/react-table";
import { TableHeader } from "./table-header";
import { useVirtual } from 'react-virtual'
import { useVirtualizer } from "@tanstack/react-virtual";
interface TableProps<T> {
table: Table<T>;
@ -18,22 +18,27 @@
const tableContainerRef = React.useRef<HTMLDivElement>(null)
const { rows } = table.getRowModel()
const rowVirtualizer = useVirtual({
parentRef: tableContainerRef,
size: rows.length,
overscan: 10,
const rowVirtualizer = useVirtualizer({
getScrollElement: () => tableContainerRef.current,
estimateSize: () => 55,
overscan: 5,
count: rows.length
})
const { virtualItems: virtualRows } = rowVirtualizer;
console.log(`${rowVirtualizer.getTotalSize()}px`)
return (
<div className={className} ref={tableContainerRef}>
<table>
<table style={{ height: 1590 }}>
<TableHeader table={table}/>
<tbody>
{virtualRows.map(virtualRow => {
{rowVirtualizer.getVirtualItems().map(virtualRow => {
const row = rows[virtualRow.index] as Row<Data>
return (
<tr key={row.id}>
<tr
key={row.id}
// style={{ height: 30 }}
>
{row.getVisibleCells().map(cell => {
return (
<td key={cell.id} style={{ width: cell.column.getSize() }}>

36
yarn.lock
View File

@ -1569,6 +1569,30 @@
dependencies:
defer-to-connect "^2.0.0"
"@tanstack/react-table@^8.5.11":
version "8.5.11"
resolved "https://registry.yarnpkg.com/@tanstack/react-table/-/react-table-8.5.11.tgz#544f551f15412087edfc2df01bed9697aab4651f"
integrity sha512-bIegBJ3VPUX3Z7rMnFEnTRCRgPccTsciilQA1ib/pA6M7Qq1boTNPjNjSbEHmBKytaxPrPfcUfzkZLogYtvu3g==
dependencies:
"@tanstack/table-core" "8.5.11"
"@tanstack/react-virtual@3.0.0-beta.18":
version "3.0.0-beta.18"
resolved "https://registry.yarnpkg.com/@tanstack/react-virtual/-/react-virtual-3.0.0-beta.18.tgz#b97b2019f7d6a5770fb88ee1f7591da55b9059b4"
integrity sha512-mnyCZT6htcRNw1jVb+WyfMUMbd1UmXX/JWPuMf6Bmj92DB/V7Ogk5n5rby5Y5aste7c7mlsBeMF8HtpwERRvEQ==
dependencies:
"@tanstack/virtual-core" "3.0.0-beta.18"
"@tanstack/table-core@8.5.11":
version "8.5.11"
resolved "https://registry.yarnpkg.com/@tanstack/table-core/-/table-core-8.5.11.tgz#a23178a097df4b0b64bdfa6f79e6d8933e97c7f7"
integrity sha512-ZN61ockLaIAiiPbZfMKT2S03nbWx28OHg/nAiDnNfmN4QmAMcdwVajPn2QQwnNVGAr4jS4nbhbYzCcjq8livXQ==
"@tanstack/virtual-core@3.0.0-beta.18":
version "3.0.0-beta.18"
resolved "https://registry.yarnpkg.com/@tanstack/virtual-core/-/virtual-core-3.0.0-beta.18.tgz#d4b0738c1d0aada922063c899675ff4df9f696b2"
integrity sha512-tcXutY05NpN9lp3+AXI9Sn85RxSPV0EJC0XMim9oeQj/E7bjXoL0qZ4Er4wwnvIbv/hZjC91EmbIQGjgdr6nZg==
"@testing-library/dom@>=7", "@testing-library/dom@^8.0.0":
version "8.13.0"
resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.13.0.tgz#bc00bdd64c7d8b40841e27a70211399ad3af46f5"
@ -2231,13 +2255,6 @@
"@types/history" "^4.7.11"
"@types/react" "*"
"@types/react-table@^7.7.12":
version "7.7.12"
resolved "https://registry.yarnpkg.com/@types/react-table/-/react-table-7.7.12.tgz#628011d3cb695b07c678704a61f2f1d5b8e567fd"
integrity sha512-bRUent+NR/WwtDGwI/BqhZ8XnHghwHw0HUKeohzB5xN3K2qKWYE5w19e7GCuOkL1CXD9Gi1HFy7TIm2AvgWUHg==
dependencies:
"@types/react" "*"
"@types/react-transition-group@^4.2.0", "@types/react-transition-group@^4.4.0":
version "4.4.4"
resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.4.tgz#acd4cceaa2be6b757db61ed7b432e103242d163e"
@ -11391,11 +11408,6 @@ react-swipeable@^6.1.0:
resolved "https://registry.yarnpkg.com/react-swipeable/-/react-swipeable-6.2.2.tgz#52ba570f3a7a90db7093094ec476f3d151f727d1"
integrity sha512-Oz7nSFrssvq2yvy05aNL3F+yBUqSvLsK6x1mu+rQFOpMdQVnt4izKt1vyjvvTb70q6GQOaSpaB6qniROW2MAzQ==
react-table@^7.8.0:
version "7.8.0"
resolved "https://registry.yarnpkg.com/react-table/-/react-table-7.8.0.tgz#07858c01c1718c09f7f1aed7034fcfd7bda907d2"
integrity sha512-hNaz4ygkZO4bESeFfnfOft73iBUj8K5oKi1EcSHPAibEydfsX2MyU6Z8KCr3mv3C9Kqqh71U+DhZkFvibbnPbA==
react-transition-group@^4.3.0, react-transition-group@^4.4.0:
version "4.4.2"
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470"