-
- 
-
- 
-
- 
-
- 
-
+
+
+
+ 
+ |
+
+
+ 
+ |
+
++We're looking for TanStack Virtual Partners to join our mission! Partner with us to push the boundaries of TanStack Virtual and build amazing things together. +
+LET'S CHAT ++ These components are using dynamic sizes. This means that + each element's exact dimensions are unknown when rendered. An estimated + dimension is used to get an a initial measurement, then this measurement + is readjusted on the fly as each element is rendered. +
+ ++ These components are using fixed sizes. This means that + every element's dimensions are hard-coded to the same value and never + change. +
+ ++ This infinite scroll example uses Angular Query's injectInfiniteScroll + function to fetch infinite data from a posts endpoint and then a + rowVirtualizer is used along with a loader-row placed at the bottom of the + list to trigger the next page to load. +
+ @if (query.isLoading()) { +Loading...
+ } @else if (query.isError()) { + Error: {{ query.error()!.message }} + } @else { ++ These components are using dynamic sizes. This means that + each element's exact dimensions are unknown when rendered. An estimated + dimension is used to get an a initial measurement, then this measurement + is readjusted on the fly as each element is rendered. Each component has + padding at the beginning and end of its scroll container. +
+ +
+ This smooth scroll example uses the scrollToFn to implement a
+ custom scrolling function for the methods like
+ scrollToIndex and scrollToOffset
+
+ For tables, the basis for the offset of the translate css function is from + the row's initial position itself. Because of this, we need to calculate + the translateY pixel count different and base it off the the index. +
+|
+ @if (!header.isPlaceholder) {
+
+
+ }
+ |
+ }
+
|---|
|
+ |
+ }
+
+ These components are using variable sizes. This means + that each element has a unique, but knowable dimension at render time. +
+ ++ In many cases, when implementing a virtualizer with a window as the + scrolling element, developers often find the need to specify a + "scrollMargin." The scroll margin is a crucial setting that defines the + space or gap between the start of the page and the edges of the list. +
++ These components are using dynamic sizes. This means + that each element's exact dimensions are unknown when rendered. An + estimated dimension is used as the initial measurement, then this + measurement is readjusted on the fly as each element is rendered. +
+ + + ${(() => { + switch (pathname) { + case '/': + return html`+ These components are using fixed sizes. This means + that every element's dimensions are hard-coded to the same value and + never change. +
+These components are using dynamic sizes. This means that each element's exact dimensions are unknown when rendered. An - estimated dimension is used to get an a initial measurement, then this + estimated dimension is used as the initial measurement, then this measurement is readjusted on the fly as each element is rendered.
{(() => { @@ -316,6 +436,8 @@ function App() { const data = generateData(columns) returnNotice: You are currently running React in development mode. Rendering performance will be slightly degraded - until this application is build for production. + until this application is built for production.
) : null}Notice: You are currently running React in development mode. Rendering performance will be slightly degraded - until this application is build for production. + until this application is built for production.
) : null}Loading...
) : status === 'error' ? ( - Error: {(error as Error).message} + Error: {error.message} ) : (Notice: You are currently running React in development mode. Rendering performance will be slightly degraded - until this application is build for production. + until this application is built for production.
) : null}These components are using dynamic sizes. This means that each element's exact dimensions are unknown when rendered. An - estimated dimension is used to get an a initial measurement, then this + estimated dimension is used as the initial measurement, then this measurement is readjusted on the fly as each element is rendered.
Notice: You are currently running React in development mode. Rendering performance will be slightly degraded - until this application is build for production. + until this application is built for production.
) : null} diff --git a/examples/react/padding/tsconfig.dev.json b/examples/react/padding/tsconfig.dev.json deleted file mode 100644 index c09bc865f..000000000 --- a/examples/react/padding/tsconfig.dev.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "composite": true, - "extends": "../../../tsconfig.base.json", - "compilerOptions": { - "outDir": "./build/types" - }, - "files": ["src/main.tsx"], - "include": [ - "src" - // "__tests__/**/*.test.*" - ] -} diff --git a/examples/react/padding/tsconfig.json b/examples/react/padding/tsconfig.json new file mode 100644 index 000000000..87318025a --- /dev/null +++ b/examples/react/padding/tsconfig.json @@ -0,0 +1,25 @@ +{ + "composite": true, + "compilerOptions": { + "target": "ES2020", + "useDefineForClassFields": true, + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "module": "ESNext", + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "Bundler", + "allowImportingTsExtensions": true, + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx", + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true + }, + "include": ["src"] +} diff --git a/examples/react/padding/vite.config.js b/examples/react/padding/vite.config.js index d2fa7925b..9ffcc6757 100644 --- a/examples/react/padding/vite.config.js +++ b/examples/react/padding/vite.config.js @@ -1,9 +1,6 @@ -import * as path from 'path' import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' -import rollupReplace from '@rollup/plugin-replace' -// https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], }) diff --git a/examples/react/scroll-padding/package.json b/examples/react/scroll-padding/package.json index bd9c78d1e..4e216c208 100644 --- a/examples/react/scroll-padding/package.json +++ b/examples/react/scroll-padding/package.json @@ -1,7 +1,7 @@ { "name": "tanstack-react-virtual-example-scroll-padding", - "version": "0.0.0", "private": true, + "type": "module", "scripts": { "dev": "vite", "build": "vite build", @@ -9,14 +9,15 @@ "start": "vite" }, "dependencies": { - "@react-hookz/web": "^14.2.2", - "@tanstack/react-virtual": "^3.2.1", - "react": "^18.2.0", - "react-dom": "^18.2.0" + "@react-hookz/web": "^25.1.1", + "@tanstack/react-virtual": "^3.13.23", + "react": "^18.3.1", + "react-dom": "^18.3.1" }, "devDependencies": { - "@rollup/plugin-replace": "^5.0.2", - "@vitejs/plugin-react": "^4.2.1", - "vite": "^5.1.3" + "@types/react": "^18.3.23", + "@types/react-dom": "^18.3.7", + "@vitejs/plugin-react": "^4.5.2", + "vite": "^5.4.19" } } diff --git a/examples/react/scroll-padding/src/main.tsx b/examples/react/scroll-padding/src/main.tsx index ea98b9115..b430aeae8 100644 --- a/examples/react/scroll-padding/src/main.tsx +++ b/examples/react/scroll-padding/src/main.tsx @@ -3,11 +3,11 @@ import ReactDOM from 'react-dom' import './index.css' -import { useMeasure } from '@react-hookz/web/esm' +import { useMeasure } from '@react-hookz/web' import { useVirtualizer } from '@tanstack/react-virtual' function App() { - const parentRef = React.useRefNotice: You are currently running React in development mode. Rendering performance will be slightly degraded - until this application is build for production. + until this application is built for production.
) : null} diff --git a/examples/react/scroll-padding/tsconfig.dev.json b/examples/react/scroll-padding/tsconfig.dev.json deleted file mode 100644 index c09bc865f..000000000 --- a/examples/react/scroll-padding/tsconfig.dev.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "composite": true, - "extends": "../../../tsconfig.base.json", - "compilerOptions": { - "outDir": "./build/types" - }, - "files": ["src/main.tsx"], - "include": [ - "src" - // "__tests__/**/*.test.*" - ] -} diff --git a/examples/react/scroll-padding/tsconfig.json b/examples/react/scroll-padding/tsconfig.json new file mode 100644 index 000000000..87318025a --- /dev/null +++ b/examples/react/scroll-padding/tsconfig.json @@ -0,0 +1,25 @@ +{ + "composite": true, + "compilerOptions": { + "target": "ES2020", + "useDefineForClassFields": true, + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "module": "ESNext", + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "Bundler", + "allowImportingTsExtensions": true, + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx", + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true + }, + "include": ["src"] +} diff --git a/examples/react/scroll-padding/vite.config.js b/examples/react/scroll-padding/vite.config.js index d2fa7925b..9ffcc6757 100644 --- a/examples/react/scroll-padding/vite.config.js +++ b/examples/react/scroll-padding/vite.config.js @@ -1,9 +1,6 @@ -import * as path from 'path' import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' -import rollupReplace from '@rollup/plugin-replace' -// https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], }) diff --git a/examples/react/smooth-scroll/package.json b/examples/react/smooth-scroll/package.json index 2840c8bc0..326ce52f6 100644 --- a/examples/react/smooth-scroll/package.json +++ b/examples/react/smooth-scroll/package.json @@ -1,7 +1,7 @@ { "name": "tanstack-react-virtual-example-smooth-scroll", - "version": "0.0.0", "private": true, + "type": "module", "scripts": { "dev": "vite", "build": "vite build", @@ -9,13 +9,14 @@ "start": "vite" }, "dependencies": { - "react": "^18.2.0", - "react-dom": "^18.2.0", - "@tanstack/react-virtual": "^3.2.1" + "@tanstack/react-virtual": "^3.13.23", + "react": "^18.3.1", + "react-dom": "^18.3.1" }, "devDependencies": { - "@rollup/plugin-replace": "^5.0.2", - "@vitejs/plugin-react": "^4.2.1", - "vite": "^5.1.3" + "@types/react": "^18.3.23", + "@types/react-dom": "^18.3.7", + "@vitejs/plugin-react": "^4.5.2", + "vite": "^5.4.19" } } diff --git a/examples/react/smooth-scroll/src/main.tsx b/examples/react/smooth-scroll/src/main.tsx index d040cf92c..e87f019c3 100644 --- a/examples/react/smooth-scroll/src/main.tsx +++ b/examples/react/smooth-scroll/src/main.tsx @@ -3,24 +3,21 @@ import ReactDOM from 'react-dom' import './index.css' -import { - elementScroll, - useVirtualizer, - VirtualizerOptions, -} from '@tanstack/react-virtual' +import { elementScroll, useVirtualizer } from '@tanstack/react-virtual' +import type { VirtualizerOptions } from '@tanstack/react-virtual' -function easeInOutQuint(t) { +function easeInOutQuint(t: number) { return t < 0.5 ? 16 * t * t * t * t * t : 1 + 16 * --t * t * t * t * t } function App() { - const parentRef = React.useRefNotice: You are currently running React in development mode. Rendering performance will be slightly degraded - until this application is build for production. + until this application is built for production.
) : null}Notice: You are currently running React in development mode. Rendering performance will be slightly degraded - until this application is build for production. + until this application is built for production.
) : null}For tables, the basis for the offset of the translate css function is from the row's initial position itself. Because of this, we need to - calculate the translateY pixel count different and base it off the the + calculate the translateY pixel count differently and base it off the index.
Notice: You are currently running React in development mode. Rendering performance will be slightly degraded - until this application is build for production. + until this application is built for production.
) : null} diff --git a/examples/react/table/src/makeData.ts b/examples/react/table/src/makeData.ts index 1d6635238..9bf52ab8f 100644 --- a/examples/react/table/src/makeData.ts +++ b/examples/react/table/src/makeData.ts @@ -22,11 +22,11 @@ const range = (len: number) => { const newPerson = (index: number): Person => { return { id: index + 1, - firstName: faker.name.firstName(), - lastName: faker.name.lastName(), - age: faker.datatype.number(40), - visits: faker.datatype.number(1000), - progress: faker.datatype.number(100), + firstName: faker.person.firstName(), + lastName: faker.person.lastName(), + age: faker.number.int(40), + visits: faker.number.int(1000), + progress: faker.number.int(100), createdAt: faker.datatype.datetime({ max: new Date().getTime() }), status: faker.helpers.shuffleNotice: You are currently running React in development mode. Rendering performance will be slightly degraded - until this application is build for production. + until this application is built for production.
) : null} ) } -function RowVirtualizerVariable({ rows }) { - const parentRef = React.useRef() +function RowVirtualizerVariable({ rows }: { rows: ArrayNotice: You are currently running React in development mode. Rendering performance will be slightly degraded - until this application is build for production. + until this application is built for production.
) : null} diff --git a/examples/react/window/tsconfig.dev.json b/examples/react/window/tsconfig.dev.json deleted file mode 100644 index c09bc865f..000000000 --- a/examples/react/window/tsconfig.dev.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "composite": true, - "extends": "../../../tsconfig.base.json", - "compilerOptions": { - "outDir": "./build/types" - }, - "files": ["src/main.tsx"], - "include": [ - "src" - // "__tests__/**/*.test.*" - ] -} diff --git a/examples/react/window/tsconfig.json b/examples/react/window/tsconfig.json new file mode 100644 index 000000000..87318025a --- /dev/null +++ b/examples/react/window/tsconfig.json @@ -0,0 +1,25 @@ +{ + "composite": true, + "compilerOptions": { + "target": "ES2020", + "useDefineForClassFields": true, + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "module": "ESNext", + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "Bundler", + "allowImportingTsExtensions": true, + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx", + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true + }, + "include": ["src"] +} diff --git a/examples/svelte/dynamic/package.json b/examples/svelte/dynamic/package.json index 8ec24df76..2840879b6 100644 --- a/examples/svelte/dynamic/package.json +++ b/examples/svelte/dynamic/package.json @@ -1,7 +1,6 @@ { "name": "tanstack-svelte-virtual-example-dynamic", "private": true, - "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", @@ -10,16 +9,16 @@ "check": "svelte-check --tsconfig ./tsconfig.json" }, "dependencies": { - "@faker-js/faker": "^7.6.0", - "@tanstack/svelte-virtual": "^3.2.1" + "@faker-js/faker": "^8.4.1", + "@tanstack/svelte-virtual": "^3.13.23" }, "devDependencies": { - "@sveltejs/vite-plugin-svelte": "^3.0.2", - "@tsconfig/svelte": "^5.0.0", - "svelte": "^4.2.2", - "svelte-check": "^3.4.6", - "tslib": "^2.6.0", - "typescript": "5.2.2", - "vite": "^5.1.3" + "@sveltejs/vite-plugin-svelte": "^3.1.2", + "@tsconfig/svelte": "^5.0.4", + "svelte": "^4.2.20", + "svelte-check": "^4.2.1", + "tslib": "^2.8.1", + "typescript": "5.4.5", + "vite": "^5.4.19" } } diff --git a/examples/svelte/dynamic/src/App.svelte b/examples/svelte/dynamic/src/App.svelte index e46dafc91..b73b876f1 100644 --- a/examples/svelte/dynamic/src/App.svelte +++ b/examples/svelte/dynamic/src/App.svelte @@ -10,9 +10,9 @@These components are using dynamic sizes. This means that each - element's exact dimensions are unknown when rendered. An estimated dimension - is used to get an a initial measurement, then this measurement is readjusted - on the fly as each element is rendered. + element's exact dimensions are unknown when rendered. An estimated dimension is + used as the initial measurement, then this measurement is readjusted on the fly + as each element is rendered.
+