diff --git a/package.json b/package.json index 1ee08c8017..395f1b04ec 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/renderer/components/list/table-theme.module.scss b/src/renderer/components/list/table-theme.module.scss index 29385c242c..b9ad2f5120 100644 --- a/src/renderer/components/list/table-theme.module.scss +++ b/src/renderer/components/list/table-theme.module.scss @@ -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 { diff --git a/src/renderer/components/table/virtual-table.tsx b/src/renderer/components/table/virtual-table.tsx index 6de3b73dda..70ba687728 100644 --- a/src/renderer/components/table/virtual-table.tsx +++ b/src/renderer/components/table/virtual-table.tsx @@ -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 { table: Table; @@ -18,22 +18,27 @@ const tableContainerRef = React.useRef(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 (
- +
- {virtualRows.map(virtualRow => { + {rowVirtualizer.getVirtualItems().map(virtualRow => { const row = rows[virtualRow.index] as Row return ( - + {row.getVisibleCells().map(cell => { return (
diff --git a/yarn.lock b/yarn.lock index 4ae3e67269..dfdca144c4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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"