├── .changeset └── config.json ├── .gitattributes ├── .github ├── FUNDING.yml ├── ISSUE_TEMPLATE │ ├── bug_report.yml │ └── config.yml ├── renovate.json └── workflows │ ├── autofix.yml │ ├── pr.yml │ └── release.yml ├── .gitignore ├── .npmrc ├── .nvmrc ├── .prettierignore ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── docs ├── api │ ├── virtual-item.md │ └── virtualizer.md ├── config.json ├── framework │ ├── angular │ │ └── angular-virtual.md │ ├── lit │ │ └── lit-virtual.md │ ├── react │ │ └── react-virtual.md │ ├── solid │ │ └── solid-virtual.md │ ├── svelte │ │ └── svelte-virtual.md │ └── vue │ │ └── vue-virtual.md ├── installation.md └── introduction.md ├── eslint.config.js ├── examples ├── angular │ ├── dynamic │ │ ├── .devcontainer │ │ │ └── devcontainer.json │ │ ├── .gitignore │ │ ├── README.md │ │ ├── angular.json │ │ ├── package.json │ │ ├── src │ │ │ ├── app │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.config.ts │ │ │ │ ├── app.routes.ts │ │ │ │ ├── column-virtualizer-dynamic.component.ts │ │ │ │ ├── grid-virtualizer-dynamic.component.ts │ │ │ │ ├── row-virtualizer-dynamic-window.component.ts │ │ │ │ ├── row-virtualizer-dynamic.component.ts │ │ │ │ └── utils.ts │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ └── styles.css │ │ ├── tsconfig.app.json │ │ └── tsconfig.json │ ├── fixed │ │ ├── .devcontainer │ │ │ └── devcontainer.json │ │ ├── .gitignore │ │ ├── README.md │ │ ├── angular.json │ │ ├── package.json │ │ ├── src │ │ │ ├── app │ │ │ │ ├── app.component.ts │ │ │ │ ├── column-virtualizer-fixed.component.ts │ │ │ │ ├── grid-virtualizer-fixed.component.ts │ │ │ │ └── row-virtualizer-fixed.component.ts │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ └── styles.css │ │ ├── tsconfig.app.json │ │ └── tsconfig.json │ ├── infinite-scroll │ │ ├── .devcontainer │ │ │ └── devcontainer.json │ │ ├── .gitignore │ │ ├── README.md │ │ ├── angular.json │ │ ├── package.json │ │ ├── src │ │ │ ├── app │ │ │ │ └── app.component.ts │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ └── styles.css │ │ ├── tsconfig.app.json │ │ └── tsconfig.json │ ├── padding │ │ ├── .devcontainer │ │ │ └── devcontainer.json │ │ ├── .gitignore │ │ ├── README.md │ │ ├── angular.json │ │ ├── package.json │ │ ├── src │ │ │ ├── app │ │ │ │ ├── app.component.ts │ │ │ │ ├── column-virtualizer-padding.component.ts │ │ │ │ ├── grid-virtualizer-padding.component.ts │ │ │ │ └── row-virtualizer-padding.component.ts │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ └── styles.css │ │ ├── tsconfig.app.json │ │ └── tsconfig.json │ ├── smooth-scroll │ │ ├── .devcontainer │ │ │ └── devcontainer.json │ │ ├── .gitignore │ │ ├── README.md │ │ ├── angular.json │ │ ├── package.json │ │ ├── src │ │ │ ├── app │ │ │ │ └── app.component.ts │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ └── styles.css │ │ ├── tsconfig.app.json │ │ └── tsconfig.json │ ├── sticky │ │ ├── .devcontainer │ │ │ └── devcontainer.json │ │ ├── .gitignore │ │ ├── README.md │ │ ├── angular.json │ │ ├── package.json │ │ ├── src │ │ │ ├── app │ │ │ │ └── app.component.ts │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ └── styles.css │ │ ├── tsconfig.app.json │ │ └── tsconfig.json │ ├── table │ │ ├── .devcontainer │ │ │ └── devcontainer.json │ │ ├── .gitignore │ │ ├── README.md │ │ ├── angular.json │ │ ├── package.json │ │ ├── src │ │ │ ├── app │ │ │ │ ├── app.component.ts │ │ │ │ └── make-data.ts │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ └── styles.css │ │ ├── tsconfig.app.json │ │ └── tsconfig.json │ ├── variable │ │ ├── .devcontainer │ │ │ └── devcontainer.json │ │ ├── .gitignore │ │ ├── README.md │ │ ├── angular.json │ │ ├── package.json │ │ ├── src │ │ │ ├── app │ │ │ │ ├── app.component.ts │ │ │ │ ├── column-virtualizer-variable.component.ts │ │ │ │ ├── grid-virtualizer-variable.component.ts │ │ │ │ └── row-virtualizer-variable.component.ts │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ └── styles.css │ │ ├── tsconfig.app.json │ │ └── tsconfig.json │ └── window │ │ ├── .devcontainer │ │ └── devcontainer.json │ │ ├── .gitignore │ │ ├── README.md │ │ ├── angular.json │ │ ├── package.json │ │ ├── src │ │ ├── app │ │ │ └── app.component.ts │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── main.ts │ │ └── styles.css │ │ ├── tsconfig.app.json │ │ └── tsconfig.json ├── lit │ ├── dynamic │ │ ├── .gitignore │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── src │ │ │ ├── index.css │ │ │ └── main.ts │ │ ├── tsconfig.json │ │ └── vite.config.js │ └── fixed │ │ ├── .gitignore │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── src │ │ ├── index.css │ │ └── main.ts │ │ ├── tsconfig.json │ │ └── vite.config.js ├── react │ ├── dynamic │ │ ├── .gitignore │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── src │ │ │ ├── index.css │ │ │ └── main.tsx │ │ ├── tsconfig.json │ │ └── vite.config.js │ ├── fixed │ │ ├── .gitignore │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── src │ │ │ ├── index.css │ │ │ └── main.tsx │ │ ├── tsconfig.json │ │ └── vite.config.js │ ├── infinite-scroll │ │ ├── .gitignore │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── src │ │ │ ├── index.css │ │ │ └── main.tsx │ │ ├── tsconfig.json │ │ └── vite.config.js │ ├── padding │ │ ├── .gitignore │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── src │ │ │ ├── index.css │ │ │ └── main.tsx │ │ ├── tsconfig.json │ │ └── vite.config.js │ ├── scroll-padding │ │ ├── .gitignore │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── src │ │ │ ├── index.css │ │ │ └── main.tsx │ │ ├── tsconfig.json │ │ └── vite.config.js │ ├── smooth-scroll │ │ ├── .gitignore │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── src │ │ │ ├── index.css │ │ │ └── main.tsx │ │ ├── tsconfig.json │ │ └── vite.config.js │ ├── sticky │ │ ├── .gitignore │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── src │ │ │ ├── index.css │ │ │ └── main.tsx │ │ ├── tsconfig.json │ │ └── vite.config.js │ ├── table │ │ ├── .gitignore │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── src │ │ │ ├── index.css │ │ │ ├── main.tsx │ │ │ └── makeData.ts │ │ ├── tsconfig.json │ │ └── vite.config.js │ ├── variable │ │ ├── .gitignore │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── src │ │ │ ├── index.css │ │ │ └── main.tsx │ │ ├── tsconfig.json │ │ └── vite.config.js │ └── window │ │ ├── .gitignore │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── src │ │ ├── index.css │ │ └── main.tsx │ │ ├── tsconfig.json │ │ └── vite.config.js ├── svelte │ ├── dynamic │ │ ├── .gitignore │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── src │ │ │ ├── App.svelte │ │ │ ├── ColumnVirtualizerDynamic.svelte │ │ │ ├── GridVirtualizerDynamic.svelte │ │ │ ├── RowVirtualizerDynamic.svelte │ │ │ ├── RowVirtualizerDynamicWindow.svelte │ │ │ ├── app.css │ │ │ ├── main.ts │ │ │ └── vite-env.d.ts │ │ ├── svelte.config.js │ │ ├── tsconfig.json │ │ ├── tsconfig.node.json │ │ └── vite.config.ts │ ├── fixed │ │ ├── .gitignore │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── src │ │ │ ├── App.svelte │ │ │ ├── ColumnVirtualizerFixed.svelte │ │ │ ├── GridVirtualizerFixed.svelte │ │ │ ├── RowVirtualizerFixed.svelte │ │ │ ├── app.css │ │ │ ├── main.ts │ │ │ └── vite-env.d.ts │ │ ├── svelte.config.js │ │ ├── tsconfig.json │ │ ├── tsconfig.node.json │ │ └── vite.config.ts │ ├── infinite-scroll │ │ ├── .gitignore │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── src │ │ │ ├── App.svelte │ │ │ ├── InfiniteRows.svelte │ │ │ ├── app.css │ │ │ ├── main.ts │ │ │ └── vite-env.d.ts │ │ ├── svelte.config.js │ │ ├── tsconfig.json │ │ ├── tsconfig.node.json │ │ └── vite.config.ts │ ├── smooth-scroll │ │ ├── .gitignore │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── src │ │ │ ├── App.svelte │ │ │ ├── app.css │ │ │ ├── main.ts │ │ │ └── vite-env.d.ts │ │ ├── svelte.config.js │ │ ├── tsconfig.json │ │ ├── tsconfig.node.json │ │ └── vite.config.ts │ ├── sticky │ │ ├── .gitignore │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── src │ │ │ ├── App.svelte │ │ │ ├── app.css │ │ │ ├── main.ts │ │ │ └── vite-env.d.ts │ │ ├── svelte.config.js │ │ ├── tsconfig.json │ │ ├── tsconfig.node.json │ │ └── vite.config.ts │ └── table │ │ ├── .gitignore │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── src │ │ ├── App.svelte │ │ ├── app.css │ │ ├── main.ts │ │ ├── makeData.ts │ │ └── vite-env.d.ts │ │ ├── svelte.config.js │ │ ├── tsconfig.json │ │ ├── tsconfig.node.json │ │ └── vite.config.ts └── vue │ ├── dynamic │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package.json │ ├── public │ │ └── vite.svg │ ├── src │ │ ├── App.vue │ │ ├── components │ │ │ ├── ColumnVirtualizerDynamic.vue │ │ │ ├── GridVirtualizerDynamic.vue │ │ │ ├── RowVirtualizerDynamic.vue │ │ │ ├── RowVirtualizerDynamicWindow.vue │ │ │ └── utils.ts │ │ ├── main.ts │ │ ├── style.css │ │ └── vite-env.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts │ ├── fixed │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package.json │ ├── public │ │ └── vite.svg │ ├── src │ │ ├── App.vue │ │ ├── components │ │ │ ├── ColumnVirtualizerFixed.vue │ │ │ ├── GridVirtualizerFixed.vue │ │ │ └── RowVirtualizerFixed.vue │ │ ├── main.ts │ │ ├── style.css │ │ └── vite-env.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts │ ├── infinite-scroll │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package.json │ ├── public │ │ └── vite.svg │ ├── src │ │ ├── App.vue │ │ ├── main.ts │ │ ├── style.css │ │ └── vite-env.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts │ ├── padding │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package.json │ ├── public │ │ └── vite.svg │ ├── src │ │ ├── App.vue │ │ ├── components │ │ │ ├── ColumnVirtualizerPadding.vue │ │ │ ├── GridVirtualizerPadding.vue │ │ │ └── RowVirtualizerPadding.vue │ │ ├── main.ts │ │ ├── style.css │ │ └── vite-env.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts │ ├── scroll-padding │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package.json │ ├── public │ │ └── vite.svg │ ├── src │ │ ├── App.vue │ │ ├── main.ts │ │ ├── style.css │ │ └── vite-env.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts │ ├── smooth-scroll │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package.json │ ├── public │ │ └── vite.svg │ ├── src │ │ ├── App.vue │ │ ├── main.ts │ │ ├── style.css │ │ └── vite-env.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts │ ├── sticky │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package.json │ ├── public │ │ └── vite.svg │ ├── src │ │ ├── App.vue │ │ ├── main.ts │ │ ├── style.css │ │ └── vite-env.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts │ ├── table │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package.json │ ├── public │ │ └── vite.svg │ ├── src │ │ ├── App.vue │ │ ├── main.ts │ │ ├── makeData.ts │ │ ├── style.css │ │ └── vite-env.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts │ └── variable │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package.json │ ├── public │ └── vite.svg │ ├── src │ ├── App.vue │ ├── components │ │ ├── ColumnVirtualizerVariable.vue │ │ ├── GridVirtualizerVariable.vue │ │ ├── MasonryHorizontalVirtualizerVariable.vue │ │ ├── MasonryVerticalVirtualizerVariable.vue │ │ └── RowVirtualizerVariable.vue │ ├── main.ts │ ├── style.css │ └── vite-env.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts ├── knip.json ├── media ├── header.png ├── logo.png ├── logo.sketch └── repo-dark.png ├── nx.json ├── package.json ├── packages ├── angular-virtual │ ├── CHANGELOG.md │ ├── README.md │ ├── eslint.config.js │ ├── ng-package.json │ ├── package.json │ ├── src │ │ ├── index.ts │ │ ├── proxy.ts │ │ └── types.ts │ ├── tsconfig.build.json │ └── tsconfig.json ├── lit-virtual │ ├── CHANGELOG.md │ ├── README.md │ ├── eslint.config.js │ ├── package.json │ ├── src │ │ └── index.ts │ ├── tests │ │ └── index.test.ts │ ├── tsconfig.json │ └── vite.config.ts ├── react-virtual │ ├── CHANGELOG.md │ ├── eslint.config.js │ ├── package.json │ ├── src │ │ └── index.tsx │ ├── tests │ │ ├── index.test.tsx │ │ └── test-setup.ts │ ├── tsconfig.json │ └── vite.config.ts ├── solid-virtual │ ├── CHANGELOG.md │ ├── eslint.config.js │ ├── package.json │ ├── src │ │ └── index.tsx │ ├── tsconfig.json │ └── vite.config.ts ├── svelte-virtual │ ├── CHANGELOG.md │ ├── eslint.config.js │ ├── package.json │ ├── src │ │ └── index.ts │ ├── svelte.config.js │ ├── tsconfig.json │ └── vite.config.ts ├── virtual-core │ ├── CHANGELOG.md │ ├── eslint.config.js │ ├── package.json │ ├── src │ │ ├── index.ts │ │ └── utils.ts │ ├── tests │ │ └── index.test.ts │ ├── tsconfig.json │ └── vite.config.ts └── vue-virtual │ ├── CHANGELOG.md │ ├── eslint.config.js │ ├── package.json │ ├── src │ └── index.ts │ ├── tsconfig.json │ └── vite.config.ts ├── pnpm-lock.yaml ├── pnpm-workspace.yaml ├── prettier.config.js └── tsconfig.json /.changeset/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://unpkg.com/@changesets/config@3.1.1/schema.json", 3 | "changelog": [ 4 | "@svitejs/changesets-changelog-github-compact", 5 | { "repo": "TanStack/virtual" } 6 | ], 7 | "commit": false, 8 | "access": "public", 9 | "baseBranch": "main", 10 | "updateInternalDependencies": "patch", 11 | "fixed": [], 12 | "linked": [], 13 | "ignore": [] 14 | } 15 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto eol=lf 3 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | github: tannerlinsley 2 | custom: https://youtube.com/tannerlinsley 3 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | blank_issues_enabled: false 2 | contact_links: 3 | - name: Feature Requests & Questions 4 | url: https://github.com/tanstack/virtual/discussions 5 | about: Please ask and answer questions here. 6 | - name: Community Chat 7 | url: https://discord.gg/mQd7egN 8 | about: A dedicated discord server hosted by TanStack 9 | -------------------------------------------------------------------------------- /.github/renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://docs.renovatebot.com/renovate-schema.json", 3 | "configMigration": true, 4 | "extends": [ 5 | "config:recommended", 6 | "group:allNonMajor", 7 | "schedule:weekly", 8 | ":approveMajorUpdates", 9 | ":automergeMinor", 10 | ":disablePeerDependencies", 11 | ":maintainLockFilesMonthly", 12 | ":semanticCommits", 13 | ":semanticCommitTypeAll(chore)" 14 | ], 15 | "ignorePresets": [":ignoreModulesAndTests"], 16 | "labels": ["dependencies"], 17 | "rangeStrategy": "bump", 18 | "postUpdateOptions": ["pnpmDedupe"], 19 | "ignoreDeps": ["@types/node", "node", "typescript"] 20 | } 21 | -------------------------------------------------------------------------------- /.github/workflows/autofix.yml: -------------------------------------------------------------------------------- 1 | name: autofix.ci # needed to securely identify the workflow 2 | 3 | on: 4 | pull_request: 5 | push: 6 | branches: [main, alpha, beta] 7 | 8 | concurrency: 9 | group: ${{ github.workflow }}-${{ github.event.number || github.ref }} 10 | cancel-in-progress: true 11 | 12 | permissions: 13 | contents: read 14 | 15 | jobs: 16 | autofix: 17 | name: autofix 18 | runs-on: ubuntu-latest 19 | steps: 20 | - name: Checkout 21 | uses: actions/checkout@v4.2.2 22 | - name: Setup Tools 23 | uses: tanstack/config/.github/setup@main 24 | - name: Fix formatting 25 | run: pnpm prettier:write 26 | - name: Apply fixes 27 | uses: autofix-ci/action@551dded8c6cc8a1054039c8bc0b8b48c51dfc6ef 28 | with: 29 | commit-message: 'ci: apply automated fixes' 30 | -------------------------------------------------------------------------------- /.github/workflows/release.yml: -------------------------------------------------------------------------------- 1 | name: Release 2 | 3 | on: 4 | push: 5 | branches: [main, alpha, beta] 6 | 7 | concurrency: 8 | group: ${{ github.workflow }}-${{ github.event.number || github.ref }} 9 | cancel-in-progress: true 10 | 11 | env: 12 | NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }} 13 | 14 | permissions: 15 | contents: write 16 | id-token: write 17 | pull-requests: write 18 | 19 | jobs: 20 | release: 21 | name: Release 22 | if: github.repository_owner == 'TanStack' 23 | runs-on: ubuntu-latest 24 | steps: 25 | - name: Checkout 26 | uses: actions/checkout@v4.2.2 27 | with: 28 | fetch-depth: 0 29 | - name: Setup Tools 30 | uses: tanstack/config/.github/setup@main 31 | - name: Run Tests 32 | run: pnpm run test:ci 33 | - name: Run Changesets (version or publish) 34 | uses: changesets/action@v1.5.3 35 | with: 36 | version: pnpm run changeset:version 37 | publish: pnpm run changeset:publish 38 | commit: 'ci: Version Packages' 39 | title: 'ci: Version Packages' 40 | env: 41 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 42 | NPM_TOKEN: ${{ secrets.NPM_TOKEN }} 43 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | # See https://help.github.com/ignore-files/ for more about ignoring files. 3 | 4 | # dependencies 5 | node_modules 6 | package-lock.json 7 | yarn.lock 8 | 9 | # builds 10 | build 11 | coverage 12 | dist 13 | 14 | # misc 15 | .DS_Store 16 | .env 17 | .env.local 18 | .env.development.local 19 | .env.test.local 20 | .env.production.local 21 | .next 22 | 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | .history 27 | size-plugin.json 28 | stats-hydration.json 29 | stats.json 30 | stats.html 31 | .vscode/settings.json 32 | 33 | *.log 34 | .cache 35 | .idea 36 | .nx/cache 37 | .nx/workspace-data 38 | .pnpm-store 39 | .tsup 40 | .svelte-kit 41 | 42 | vite.config.js.timestamp-* 43 | vite.config.ts.timestamp-* 44 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | link-workspace-packages=true 2 | prefer-workspace-packages=true 3 | provenance=true 4 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | 22.13.1 2 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | **/.next 2 | **/.nx/cache 3 | **/.svelte-kit 4 | **/build 5 | **/coverage 6 | **/dist 7 | **/docs 8 | **/codemods/**/__testfixtures__ 9 | pnpm-lock.yaml 10 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021-present Tanner Linsley 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /docs/framework/angular/angular-virtual.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Angular Virtual 3 | --- 4 | 5 | The `@tanstack/angular-virtual` adapter is a wrapper around the core virtual logic. 6 | 7 | ## `injectVirtualizer` 8 | 9 | ```ts 10 | function injectVirtualizer( 11 | options: PartialKeys< 12 | Omit, 'getScrollElement'>, 13 | 'observeElementRect' | 'observeElementOffset' | 'scrollToFn' 14 | > & { scrollElement: ElementRef | TScrollElement | undefined }, 15 | ): AngularVirtualizer 16 | ``` 17 | 18 | This function returns an `AngularVirtualizer` instance configured to work with an HTML element as the scrollElement. 19 | 20 | ## `injectWindowVirtualizer` 21 | 22 | ```ts 23 | function injectWindowVirtualizer( 24 | options: PartialKeys< 25 | VirtualizerOptions, 26 | | 'getScrollElement' 27 | | 'observeElementRect' 28 | | 'observeElementOffset' 29 | | 'scrollToFn' 30 | >, 31 | ): AngularVirtualizer 32 | ``` 33 | 34 | This function returns a window-based `AngularVirtualizer` instance configured to work with the window as the scrollElement. 35 | -------------------------------------------------------------------------------- /docs/framework/lit/lit-virtual.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Lit Virtual 3 | --- 4 | 5 | The `@tanstack/lit-virtual` adapter is a wrapper around the core virtual logic. 6 | 7 | ## `createVirtualizer` 8 | 9 | ```tsx 10 | 11 | private virtualizerController = new VirtualizerController( 12 | options: PartialKeys< VirtualizerOptions, 13 | 'observeElementRect' | 'observeElementOffset' | 'scrollToFn' 14 | ) 15 | ``` 16 | 17 | This class stands for a standard `Virtualizer` instance configured to work with an HTML element as the scrollElement. 18 | This will create a Lit Controller which can be accessed in the element render method. 19 | 20 | ```tsx 21 | render() { 22 | const virtualizer = this.virtualizerController.getVirtualizer(); 23 | const virtualItems = virtualizer.getVirtualItems(); 24 | } 25 | ) 26 | ``` 27 | 28 | ## `createWindowVirtualizer` 29 | 30 | ```tsx 31 | private windowVirtualizerController = new WindowVirtualizerController( 32 | options: PartialKeys< VirtualizerOptions, 33 | 'getScrollElement' | 'observeElementRect' | 'observeElementOffset' | 'scrollToFn' 34 | ``` 35 | 36 | This class stands of window-based `Virtualizer` instance configured to work with an HTML element as the scrollElement. 37 | -------------------------------------------------------------------------------- /docs/framework/react/react-virtual.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: React Virtual 3 | --- 4 | 5 | The `@tanstack/react-virtual` adapter is a wrapper around the core virtual logic. 6 | 7 | ## `useVirtualizer` 8 | 9 | ```tsx 10 | function useVirtualizer( 11 | options: PartialKeys< 12 | VirtualizerOptions, 13 | 'observeElementRect' | 'observeElementOffset' | 'scrollToFn' 14 | >, 15 | ): Virtualizer 16 | ``` 17 | 18 | This function returns a standard `Virtualizer` instance configured to work with an HTML element as the scrollElement. 19 | 20 | ## `useWindowVirtualizer` 21 | 22 | ```tsx 23 | function useWindowVirtualizer( 24 | options: PartialKeys< 25 | VirtualizerOptions, 26 | | 'getScrollElement' 27 | | 'observeElementRect' 28 | | 'observeElementOffset' 29 | | 'scrollToFn' 30 | >, 31 | ): Virtualizer 32 | ``` 33 | 34 | This function returns a window-based `Virtualizer` instance configured to work with the window as the scrollElement. 35 | -------------------------------------------------------------------------------- /docs/framework/solid/solid-virtual.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Solid Virtual 3 | --- 4 | 5 | The `@tanstack/solid-virtual` adapter is a wrapper around the core virtual logic. 6 | 7 | ## `createVirtualizer` 8 | 9 | ```tsx 10 | function createVirtualizer( 11 | options: PartialKeys< 12 | VirtualizerOptions, 13 | 'observeElementRect' | 'observeElementOffset' | 'scrollToFn' 14 | >, 15 | ): Virtualizer 16 | ``` 17 | 18 | This function returns a standard `Virtualizer` instance configured to work with an HTML element as the scrollElement. 19 | 20 | ## `createWindowVirtualizer` 21 | 22 | ```tsx 23 | function createWindowVirtualizer( 24 | options: PartialKeys< 25 | VirtualizerOptions, 26 | | 'getScrollElement' 27 | | 'observeElementRect' 28 | | 'observeElementOffset' 29 | | 'scrollToFn' 30 | >, 31 | ): Virtualizer 32 | ``` 33 | 34 | This function returns a window-based `Virtualizer` instance configured to work with the window as the scrollElement. 35 | -------------------------------------------------------------------------------- /docs/framework/svelte/svelte-virtual.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Svelte Virtual 3 | --- 4 | 5 | The `@tanstack/svelte-virtual` adapter is a wrapper around the core virtual logic. 6 | 7 | ## `createVirtualizer` 8 | 9 | ```tsx 10 | function createVirtualizer( 11 | options: PartialKeys< 12 | VirtualizerOptions, 13 | 'observeElementRect' | 'observeElementOffset' | 'scrollToFn' 14 | >, 15 | ): Virtualizer 16 | ``` 17 | 18 | This function returns a standard `Virtualizer` instance configured to work with an HTML element as the scrollElement. 19 | 20 | ## `createWindowVirtualizer` 21 | 22 | ```tsx 23 | function createWindowVirtualizer( 24 | options: PartialKeys< 25 | VirtualizerOptions, 26 | | 'getScrollElement' 27 | | 'observeElementRect' 28 | | 'observeElementOffset' 29 | | 'scrollToFn' 30 | >, 31 | ): Virtualizer 32 | ``` 33 | 34 | This function returns a window-based `Virtualizer` instance configured to work with the window as the scrollElement. 35 | -------------------------------------------------------------------------------- /docs/framework/vue/vue-virtual.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Vue Virtual 3 | --- 4 | 5 | The `@tanstack/vue-virtual` adapter is a wrapper around the core virtual logic. 6 | 7 | ## `useVirtualizer` 8 | 9 | ```tsx 10 | function useVirtualizer( 11 | options: PartialKeys< 12 | VirtualizerOptions, 13 | 'observeElementRect' | 'observeElementOffset' | 'scrollToFn' 14 | >, 15 | ): Virtualizer 16 | ``` 17 | 18 | This function returns a standard `Virtualizer` instance configured to work with an HTML element as the scrollElement. 19 | 20 | ## `useWindowVirtualizer` 21 | 22 | ```tsx 23 | function useWindowVirtualizer( 24 | options: PartialKeys< 25 | VirtualizerOptions, 26 | | 'getScrollElement' 27 | | 'observeElementRect' 28 | | 'observeElementOffset' 29 | | 'scrollToFn' 30 | >, 31 | ): Virtualizer 32 | ``` 33 | 34 | This function returns a window-based `Virtualizer` instance configured to work with the window as the scrollElement. 35 | -------------------------------------------------------------------------------- /docs/installation.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Installation 3 | --- 4 | 5 | Before we dig in to the API, let's get you set up! 6 | 7 | Install your TanStack Virtual adapter as a dependency using your favorite npm package manager 8 | 9 | ## React Virtual 10 | 11 | ```bash 12 | npm install @tanstack/react-virtual 13 | ``` 14 | 15 | ## Solid Virtual 16 | 17 | ```bash 18 | npm install @tanstack/solid-virtual 19 | ``` 20 | 21 | ## Svelte Virtual 22 | 23 | ```bash 24 | npm install @tanstack/svelte-virtual 25 | ``` 26 | 27 | ## Vue Virtual 28 | 29 | ```bash 30 | npm install @tanstack/vue-virtual 31 | ``` 32 | 33 | ## Lit Virtual 34 | 35 | ```bash 36 | $ npm install @tanstack/lit-virtual 37 | ``` 38 | 39 | ## Angular Virtual 40 | 41 | ```bash 42 | $ npm install @tanstack/angular-virtual 43 | ``` 44 | 45 | ## Virtual Core (no framework) 46 | 47 | ```bash 48 | npm install @tanstack/virtual-core 49 | ``` 50 | -------------------------------------------------------------------------------- /eslint.config.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | 3 | import { tanstackConfig } from '@tanstack/config/eslint' 4 | 5 | export default [ 6 | ...tanstackConfig, 7 | { 8 | name: 'tanstack/temp', 9 | rules: { 10 | '@typescript-eslint/naming-convention': 'off', 11 | '@typescript-eslint/no-unnecessary-condition': 'off', 12 | '@typescript-eslint/no-unsafe-function-type': 'off', 13 | 'no-self-assign': 'off', 14 | }, 15 | }, 16 | ] 17 | -------------------------------------------------------------------------------- /examples/angular/dynamic/.devcontainer/devcontainer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Node.js", 3 | "image": "mcr.microsoft.com/devcontainers/javascript-node:18" 4 | } 5 | -------------------------------------------------------------------------------- /examples/angular/dynamic/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files. 2 | 3 | # Compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | /bazel-out 8 | 9 | # Node 10 | /node_modules 11 | npm-debug.log 12 | yarn-error.log 13 | 14 | # IDEs and editors 15 | .idea/ 16 | .project 17 | .classpath 18 | .c9/ 19 | *.launch 20 | .settings/ 21 | *.sublime-workspace 22 | 23 | # Visual Studio Code 24 | .vscode/* 25 | !.vscode/settings.json 26 | !.vscode/tasks.json 27 | !.vscode/launch.json 28 | !.vscode/extensions.json 29 | .history/* 30 | 31 | # Miscellaneous 32 | /.angular/cache 33 | .sass-cache/ 34 | /connect.lock 35 | /coverage 36 | /libpeerconnection.log 37 | testem.log 38 | /typings 39 | 40 | # System files 41 | .DS_Store 42 | Thumbs.db 43 | -------------------------------------------------------------------------------- /examples/angular/dynamic/README.md: -------------------------------------------------------------------------------- 1 | # @tanstack/virtualExampleAngularDynamic 2 | 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.3.0. 4 | 5 | ## Development server 6 | 7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files. 8 | 9 | ## Code scaffolding 10 | 11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. 12 | 13 | ## Build 14 | 15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. 16 | 17 | ## Running unit tests 18 | 19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). 20 | 21 | ## Running end-to-end tests 22 | 23 | Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. 24 | 25 | ## Further help 26 | 27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. 28 | -------------------------------------------------------------------------------- /examples/angular/dynamic/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@tanstack/virtual-example-angular-dynamic", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "ng": "ng", 7 | "start": "ng serve", 8 | "build": "ng build", 9 | "watch": "ng build --watch --configuration development" 10 | }, 11 | "dependencies": { 12 | "@angular/animations": "^17.3.12", 13 | "@angular/common": "^17.3.12", 14 | "@angular/compiler": "^17.3.12", 15 | "@angular/core": "^17.3.12", 16 | "@angular/forms": "^17.3.12", 17 | "@angular/platform-browser": "^17.3.12", 18 | "@angular/platform-browser-dynamic": "^17.3.12", 19 | "@angular/router": "^17.3.12", 20 | "@faker-js/faker": "^8.4.1", 21 | "@tanstack/angular-virtual": "^3.13.9", 22 | "rxjs": "^7.8.2", 23 | "tslib": "^2.8.1", 24 | "zone.js": "0.15.1" 25 | }, 26 | "devDependencies": { 27 | "@angular-devkit/build-angular": "^17.3.17", 28 | "@angular/cli": "^17.3.17", 29 | "@angular/compiler-cli": "^17.3.12", 30 | "typescript": "5.2.2" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /examples/angular/dynamic/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core' 2 | import { RouterLink, RouterOutlet } from '@angular/router' 3 | 4 | @Component({ 5 | selector: 'app-root', 6 | standalone: true, 7 | imports: [RouterLink, RouterOutlet], 8 | template: ` 9 |

10 | These components are using dynamic sizes. This means that 11 | each element's exact dimensions are unknown when rendered. An estimated 12 | dimension is used to get an a initial measurement, then this measurement 13 | is readjusted on the fly as each element is rendered. 14 |

15 | 16 | 22 | 23 | 24 | `, 25 | styles: [], 26 | }) 27 | export class AppComponent {} 28 | -------------------------------------------------------------------------------- /examples/angular/dynamic/src/app/app.config.ts: -------------------------------------------------------------------------------- 1 | import { ApplicationConfig } from '@angular/core' 2 | import { provideRouter } from '@angular/router' 3 | 4 | import { routes } from './app.routes' 5 | 6 | export const appConfig: ApplicationConfig = { 7 | providers: [provideRouter(routes)], 8 | } 9 | -------------------------------------------------------------------------------- /examples/angular/dynamic/src/app/app.routes.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router' 2 | import { RowVirtualizerDynamic } from './row-virtualizer-dynamic.component' 3 | import { GridVirtualizerDynamic } from './grid-virtualizer-dynamic.component' 4 | import { ColumnVirtualizerDynamic } from './column-virtualizer-dynamic.component' 5 | import { RowVirtualizerDynamicWindow } from './row-virtualizer-dynamic-window.component' 6 | 7 | export const routes: Routes = [ 8 | { 9 | path: '', 10 | component: RowVirtualizerDynamic, 11 | }, 12 | { 13 | path: 'window-list', 14 | component: RowVirtualizerDynamicWindow, 15 | }, 16 | { 17 | path: 'columns', 18 | component: ColumnVirtualizerDynamic, 19 | }, 20 | { 21 | path: 'grid', 22 | component: GridVirtualizerDynamic, 23 | }, 24 | ] 25 | -------------------------------------------------------------------------------- /examples/angular/dynamic/src/app/utils.ts: -------------------------------------------------------------------------------- 1 | import { faker } from '@faker-js/faker' 2 | 3 | export const generateRandomNumber = (min: number, max: number) => 4 | faker.number.int({ min, max }) 5 | 6 | // 1000 because 10000 takes many seconds 7 | export const sentences = new Array(1000) 8 | .fill(true) 9 | .map(() => faker.lorem.sentence(generateRandomNumber(20, 70))) 10 | 11 | interface Column { 12 | key: string 13 | name: string 14 | width: number 15 | } 16 | 17 | export const generateColumns = (count: number) => { 18 | return new Array(count).fill(0).map((_, i) => { 19 | const key: string = i.toString() 20 | return { 21 | key, 22 | name: `Column ${i}`, 23 | width: generateRandomNumber(75, 300), 24 | } 25 | }) 26 | } 27 | 28 | export const generateData = (columns: Column[], count = 300) => { 29 | return new Array(count).fill(0).map((_, rowIndex) => 30 | columns.reduce((acc, _curr, colIndex) => { 31 | // simulate dynamic size cells 32 | const val = faker.lorem.lines(((rowIndex + colIndex) % 10) + 1) 33 | acc.push(val) 34 | return acc 35 | }, []), 36 | ) 37 | } 38 | -------------------------------------------------------------------------------- /examples/angular/dynamic/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TanStack/virtual/d3ee61826acd19bcd41f082f61c9427d93b2832d/examples/angular/dynamic/src/favicon.ico -------------------------------------------------------------------------------- /examples/angular/dynamic/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | @tanstack/virtualExampleAngularDynamic 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/angular/dynamic/src/main.ts: -------------------------------------------------------------------------------- 1 | import { bootstrapApplication } from '@angular/platform-browser' 2 | import { appConfig } from './app/app.config' 3 | import { AppComponent } from './app/app.component' 4 | 5 | bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err)) 6 | -------------------------------------------------------------------------------- /examples/angular/dynamic/src/styles.css: -------------------------------------------------------------------------------- 1 | *, 2 | *:before, 3 | *:after { 4 | box-sizing: border-box; 5 | } 6 | 7 | html { 8 | font-family: sans-serif; 9 | font-size: 14px; 10 | } 11 | 12 | body { 13 | padding: 1rem; 14 | } 15 | 16 | .list { 17 | border: 1px solid #e6e4dc; 18 | max-width: 100%; 19 | } 20 | 21 | .list-item-even { 22 | background-color: #e6e4dc; 23 | } 24 | 25 | .list-item-odd { 26 | background-color: #fff; 27 | } 28 | 29 | button { 30 | border: 1px solid gray; 31 | } 32 | -------------------------------------------------------------------------------- /examples/angular/dynamic/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/app", 6 | "types": [] 7 | }, 8 | "files": ["src/main.ts"], 9 | "include": ["src/**/*.d.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /examples/angular/dynamic/tsconfig.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "compileOnSave": false, 4 | "compilerOptions": { 5 | "outDir": "./dist/out-tsc", 6 | "strict": true, 7 | "noImplicitOverride": true, 8 | "noPropertyAccessFromIndexSignature": true, 9 | "noImplicitReturns": true, 10 | "noFallthroughCasesInSwitch": true, 11 | "skipLibCheck": true, 12 | "esModuleInterop": true, 13 | "sourceMap": true, 14 | "declaration": false, 15 | "experimentalDecorators": true, 16 | "moduleResolution": "node", 17 | "importHelpers": true, 18 | "target": "ES2022", 19 | "module": "ES2022", 20 | "useDefineForClassFields": false, 21 | "lib": ["ES2022", "dom"], 22 | "paths": { 23 | "@angular/*": ["./node_modules/@angular/*"] 24 | } 25 | }, 26 | "angularCompilerOptions": { 27 | "enableI18nLegacyMessageIdFormat": false, 28 | "strictInjectionParameters": true, 29 | "strictInputAccessModifiers": true, 30 | "strictTemplates": true 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /examples/angular/fixed/.devcontainer/devcontainer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Node.js", 3 | "image": "mcr.microsoft.com/devcontainers/javascript-node:18" 4 | } 5 | -------------------------------------------------------------------------------- /examples/angular/fixed/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files. 2 | 3 | # Compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | /bazel-out 8 | 9 | # Node 10 | /node_modules 11 | npm-debug.log 12 | yarn-error.log 13 | 14 | # IDEs and editors 15 | .idea/ 16 | .project 17 | .classpath 18 | .c9/ 19 | *.launch 20 | .settings/ 21 | *.sublime-workspace 22 | 23 | # Visual Studio Code 24 | .vscode/* 25 | !.vscode/settings.json 26 | !.vscode/tasks.json 27 | !.vscode/launch.json 28 | !.vscode/extensions.json 29 | .history/* 30 | 31 | # Miscellaneous 32 | /.angular/cache 33 | .sass-cache/ 34 | /connect.lock 35 | /coverage 36 | /libpeerconnection.log 37 | testem.log 38 | /typings 39 | 40 | # System files 41 | .DS_Store 42 | Thumbs.db 43 | -------------------------------------------------------------------------------- /examples/angular/fixed/README.md: -------------------------------------------------------------------------------- 1 | # @tanstack/virtualExampleAngularFixed 2 | 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.3.0. 4 | 5 | ## Development server 6 | 7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files. 8 | 9 | ## Code scaffolding 10 | 11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. 12 | 13 | ## Build 14 | 15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. 16 | 17 | ## Running unit tests 18 | 19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). 20 | 21 | ## Running end-to-end tests 22 | 23 | Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. 24 | 25 | ## Further help 26 | 27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. 28 | -------------------------------------------------------------------------------- /examples/angular/fixed/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@tanstack/virtual-example-angular-fixed", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "ng": "ng", 7 | "start": "ng serve", 8 | "build": "ng build", 9 | "watch": "ng build --watch --configuration development" 10 | }, 11 | "dependencies": { 12 | "@angular/animations": "^17.3.12", 13 | "@angular/common": "^17.3.12", 14 | "@angular/compiler": "^17.3.12", 15 | "@angular/core": "^17.3.12", 16 | "@angular/forms": "^17.3.12", 17 | "@angular/platform-browser": "^17.3.12", 18 | "@angular/platform-browser-dynamic": "^17.3.12", 19 | "@angular/router": "^17.3.12", 20 | "@tanstack/angular-virtual": "^3.13.9", 21 | "rxjs": "^7.8.2", 22 | "tslib": "^2.8.1", 23 | "zone.js": "0.15.1" 24 | }, 25 | "devDependencies": { 26 | "@angular-devkit/build-angular": "^17.3.17", 27 | "@angular/cli": "^17.3.17", 28 | "@angular/compiler-cli": "^17.3.12", 29 | "typescript": "5.2.2" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /examples/angular/fixed/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core' 2 | 3 | import { ColumnVirtualizerFixed } from './column-virtualizer-fixed.component' 4 | import { GridVirtualizerFixed } from './grid-virtualizer-fixed.component' 5 | import { RowVirtualizerFixed } from './row-virtualizer-fixed.component' 6 | 7 | @Component({ 8 | selector: 'app-root', 9 | standalone: true, 10 | changeDetection: ChangeDetectionStrategy.OnPush, 11 | imports: [ColumnVirtualizerFixed, GridVirtualizerFixed, RowVirtualizerFixed], 12 | template: ` 13 |

14 | These components are using fixed sizes. This means that 15 | every element's dimensions are hard-coded to the same value and never 16 | change. 17 |

18 | 19 | 20 | 21 | 22 | `, 23 | }) 24 | export class AppComponent {} 25 | -------------------------------------------------------------------------------- /examples/angular/fixed/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TanStack/virtual/d3ee61826acd19bcd41f082f61c9427d93b2832d/examples/angular/fixed/src/favicon.ico -------------------------------------------------------------------------------- /examples/angular/fixed/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | @tanstack/virtualExampleAngularFixed 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/angular/fixed/src/main.ts: -------------------------------------------------------------------------------- 1 | import { bootstrapApplication } from '@angular/platform-browser' 2 | import { AppComponent } from './app/app.component' 3 | 4 | bootstrapApplication(AppComponent).catch((err) => console.error(err)) 5 | -------------------------------------------------------------------------------- /examples/angular/fixed/src/styles.css: -------------------------------------------------------------------------------- 1 | *, 2 | *:before, 3 | *:after { 4 | box-sizing: border-box; 5 | } 6 | 7 | html { 8 | font-family: sans-serif; 9 | font-size: 14px; 10 | } 11 | 12 | body { 13 | padding: 1rem; 14 | } 15 | 16 | .list { 17 | border: 1px solid #e6e4dc; 18 | max-width: 100%; 19 | } 20 | 21 | .list-item-even, 22 | .list-item-odd { 23 | display: flex; 24 | align-items: center; 25 | justify-content: center; 26 | } 27 | 28 | .list-item-even { 29 | background-color: #e6e4dc; 30 | } 31 | 32 | .list-item-odd { 33 | background-color: #fff; 34 | } 35 | -------------------------------------------------------------------------------- /examples/angular/fixed/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/app", 6 | "types": [] 7 | }, 8 | "files": ["src/main.ts"], 9 | "include": ["src/**/*.d.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /examples/angular/fixed/tsconfig.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "compileOnSave": false, 4 | "compilerOptions": { 5 | "outDir": "./dist/out-tsc", 6 | "strict": true, 7 | "noImplicitOverride": true, 8 | "noPropertyAccessFromIndexSignature": true, 9 | "noImplicitReturns": true, 10 | "noFallthroughCasesInSwitch": true, 11 | "skipLibCheck": true, 12 | "esModuleInterop": true, 13 | "sourceMap": true, 14 | "declaration": false, 15 | "experimentalDecorators": true, 16 | "moduleResolution": "node", 17 | "importHelpers": true, 18 | "target": "ES2022", 19 | "module": "ES2022", 20 | "useDefineForClassFields": false, 21 | "lib": ["ES2022", "dom"] 22 | }, 23 | "angularCompilerOptions": { 24 | "enableI18nLegacyMessageIdFormat": false, 25 | "strictInjectionParameters": true, 26 | "strictInputAccessModifiers": true, 27 | "strictTemplates": true 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /examples/angular/infinite-scroll/.devcontainer/devcontainer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Node.js", 3 | "image": "mcr.microsoft.com/devcontainers/javascript-node:18" 4 | } 5 | -------------------------------------------------------------------------------- /examples/angular/infinite-scroll/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files. 2 | 3 | # Compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | /bazel-out 8 | 9 | # Node 10 | /node_modules 11 | npm-debug.log 12 | yarn-error.log 13 | 14 | # IDEs and editors 15 | .idea/ 16 | .project 17 | .classpath 18 | .c9/ 19 | *.launch 20 | .settings/ 21 | *.sublime-workspace 22 | 23 | # Visual Studio Code 24 | .vscode/* 25 | !.vscode/settings.json 26 | !.vscode/tasks.json 27 | !.vscode/launch.json 28 | !.vscode/extensions.json 29 | .history/* 30 | 31 | # Miscellaneous 32 | /.angular/cache 33 | .sass-cache/ 34 | /connect.lock 35 | /coverage 36 | /libpeerconnection.log 37 | testem.log 38 | /typings 39 | 40 | # System files 41 | .DS_Store 42 | Thumbs.db 43 | -------------------------------------------------------------------------------- /examples/angular/infinite-scroll/README.md: -------------------------------------------------------------------------------- 1 | # @tanstack/virtualExampleAngularInfiniteScroll 2 | 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.3.0. 4 | 5 | ## Development server 6 | 7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files. 8 | 9 | ## Code scaffolding 10 | 11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. 12 | 13 | ## Build 14 | 15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. 16 | 17 | ## Running unit tests 18 | 19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). 20 | 21 | ## Running end-to-end tests 22 | 23 | Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. 24 | 25 | ## Further help 26 | 27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. 28 | -------------------------------------------------------------------------------- /examples/angular/infinite-scroll/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@tanstack/virtual-example-angular-infinite-scroll", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "ng": "ng", 7 | "start": "ng serve", 8 | "build": "ng build", 9 | "watch": "ng build --watch --configuration development" 10 | }, 11 | "dependencies": { 12 | "@angular/animations": "^17.3.12", 13 | "@angular/common": "^17.3.12", 14 | "@angular/compiler": "^17.3.12", 15 | "@angular/core": "^17.3.12", 16 | "@angular/forms": "^17.3.12", 17 | "@angular/platform-browser": "^17.3.12", 18 | "@angular/platform-browser-dynamic": "^17.3.12", 19 | "@angular/router": "^17.3.12", 20 | "@tanstack/angular-query-experimental": "5.79.0", 21 | "@tanstack/angular-virtual": "^3.13.9", 22 | "rxjs": "^7.8.2", 23 | "tslib": "^2.8.1", 24 | "zone.js": "0.15.1" 25 | }, 26 | "devDependencies": { 27 | "@angular-devkit/build-angular": "^17.3.17", 28 | "@angular/cli": "^17.3.17", 29 | "@angular/compiler-cli": "^17.3.12", 30 | "typescript": "5.2.2" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /examples/angular/infinite-scroll/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TanStack/virtual/d3ee61826acd19bcd41f082f61c9427d93b2832d/examples/angular/infinite-scroll/src/favicon.ico -------------------------------------------------------------------------------- /examples/angular/infinite-scroll/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | @tanstack/virtualExampleAngularInfiniteScroll 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/angular/infinite-scroll/src/main.ts: -------------------------------------------------------------------------------- 1 | import { bootstrapApplication } from '@angular/platform-browser' 2 | import { AppComponent } from './app/app.component' 3 | 4 | bootstrapApplication(AppComponent).catch((err) => console.error(err)) 5 | -------------------------------------------------------------------------------- /examples/angular/infinite-scroll/src/styles.css: -------------------------------------------------------------------------------- 1 | *, 2 | *:before, 3 | *:after { 4 | box-sizing: border-box; 5 | } 6 | 7 | html { 8 | font-family: sans-serif; 9 | font-size: 14px; 10 | } 11 | 12 | body { 13 | padding: 1rem; 14 | } 15 | 16 | .list { 17 | border: 1px solid #e6e4dc; 18 | max-width: 100%; 19 | } 20 | 21 | .list-item-even, 22 | .list-item-odd { 23 | display: flex; 24 | align-items: center; 25 | justify-content: center; 26 | } 27 | 28 | .list-item-even { 29 | background-color: #e6e4dc; 30 | } 31 | 32 | .list-item-odd { 33 | background-color: #fff; 34 | } 35 | 36 | button { 37 | border: 1px solid gray; 38 | } 39 | -------------------------------------------------------------------------------- /examples/angular/infinite-scroll/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/app", 6 | "types": [] 7 | }, 8 | "files": ["src/main.ts"], 9 | "include": ["src/**/*.d.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /examples/angular/infinite-scroll/tsconfig.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "compileOnSave": false, 4 | "compilerOptions": { 5 | "outDir": "./dist/out-tsc", 6 | "strict": true, 7 | "noImplicitOverride": true, 8 | "noPropertyAccessFromIndexSignature": true, 9 | "noImplicitReturns": true, 10 | "noFallthroughCasesInSwitch": true, 11 | "skipLibCheck": true, 12 | "esModuleInterop": true, 13 | "sourceMap": true, 14 | "declaration": false, 15 | "experimentalDecorators": true, 16 | "moduleResolution": "node", 17 | "importHelpers": true, 18 | "target": "ES2022", 19 | "module": "ES2022", 20 | "useDefineForClassFields": false, 21 | "lib": ["ES2022", "dom"] 22 | }, 23 | "angularCompilerOptions": { 24 | "enableI18nLegacyMessageIdFormat": false, 25 | "strictInjectionParameters": true, 26 | "strictInputAccessModifiers": true, 27 | "strictTemplates": true 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /examples/angular/padding/.devcontainer/devcontainer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Node.js", 3 | "image": "mcr.microsoft.com/devcontainers/javascript-node:18" 4 | } 5 | -------------------------------------------------------------------------------- /examples/angular/padding/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files. 2 | 3 | # Compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | /bazel-out 8 | 9 | # Node 10 | /node_modules 11 | npm-debug.log 12 | yarn-error.log 13 | 14 | # IDEs and editors 15 | .idea/ 16 | .project 17 | .classpath 18 | .c9/ 19 | *.launch 20 | .settings/ 21 | *.sublime-workspace 22 | 23 | # Visual Studio Code 24 | .vscode/* 25 | !.vscode/settings.json 26 | !.vscode/tasks.json 27 | !.vscode/launch.json 28 | !.vscode/extensions.json 29 | .history/* 30 | 31 | # Miscellaneous 32 | /.angular/cache 33 | .sass-cache/ 34 | /connect.lock 35 | /coverage 36 | /libpeerconnection.log 37 | testem.log 38 | /typings 39 | 40 | # System files 41 | .DS_Store 42 | Thumbs.db 43 | -------------------------------------------------------------------------------- /examples/angular/padding/README.md: -------------------------------------------------------------------------------- 1 | # @tanstack/virtualExampleAngularPadding 2 | 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.3.0. 4 | 5 | ## Development server 6 | 7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files. 8 | 9 | ## Code scaffolding 10 | 11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. 12 | 13 | ## Build 14 | 15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. 16 | 17 | ## Running unit tests 18 | 19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). 20 | 21 | ## Running end-to-end tests 22 | 23 | Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. 24 | 25 | ## Further help 26 | 27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. 28 | -------------------------------------------------------------------------------- /examples/angular/padding/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@tanstack/virtual-example-angular-padding", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "ng": "ng", 7 | "start": "ng serve", 8 | "build": "ng build", 9 | "watch": "ng build --watch --configuration development" 10 | }, 11 | "dependencies": { 12 | "@angular/animations": "^17.3.12", 13 | "@angular/common": "^17.3.12", 14 | "@angular/compiler": "^17.3.12", 15 | "@angular/core": "^17.3.12", 16 | "@angular/forms": "^17.3.12", 17 | "@angular/platform-browser": "^17.3.12", 18 | "@angular/platform-browser-dynamic": "^17.3.12", 19 | "@angular/router": "^17.3.12", 20 | "@tanstack/angular-virtual": "^3.13.9", 21 | "rxjs": "^7.8.2", 22 | "tslib": "^2.8.1", 23 | "zone.js": "0.15.1" 24 | }, 25 | "devDependencies": { 26 | "@angular-devkit/build-angular": "^17.3.17", 27 | "@angular/cli": "^17.3.17", 28 | "@angular/compiler-cli": "^17.3.12", 29 | "typescript": "5.2.2" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /examples/angular/padding/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TanStack/virtual/d3ee61826acd19bcd41f082f61c9427d93b2832d/examples/angular/padding/src/favicon.ico -------------------------------------------------------------------------------- /examples/angular/padding/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | @tanstack/virtualExampleAngularPadding 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/angular/padding/src/main.ts: -------------------------------------------------------------------------------- 1 | import { bootstrapApplication } from '@angular/platform-browser' 2 | import { AppComponent } from './app/app.component' 3 | 4 | bootstrapApplication(AppComponent).catch((err) => console.error(err)) 5 | -------------------------------------------------------------------------------- /examples/angular/padding/src/styles.css: -------------------------------------------------------------------------------- 1 | *, 2 | *:before, 3 | *:after { 4 | box-sizing: border-box; 5 | } 6 | 7 | html { 8 | font-family: sans-serif; 9 | font-size: 14px; 10 | } 11 | 12 | body { 13 | padding: 1rem; 14 | } 15 | 16 | .list { 17 | border: 1px solid #e6e4dc; 18 | max-width: 100%; 19 | } 20 | 21 | .list-item-even, 22 | .list-item-odd { 23 | display: flex; 24 | align-items: center; 25 | justify-content: center; 26 | } 27 | 28 | .list-item-even { 29 | background-color: #e6e4dc; 30 | } 31 | 32 | .list-item-odd { 33 | background-color: #fff; 34 | } 35 | 36 | button { 37 | border: 1px solid gray; 38 | } 39 | -------------------------------------------------------------------------------- /examples/angular/padding/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/app", 6 | "types": [] 7 | }, 8 | "files": ["src/main.ts"], 9 | "include": ["src/**/*.d.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /examples/angular/padding/tsconfig.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "compileOnSave": false, 4 | "compilerOptions": { 5 | "outDir": "./dist/out-tsc", 6 | "strict": true, 7 | "noImplicitOverride": true, 8 | "noPropertyAccessFromIndexSignature": true, 9 | "noImplicitReturns": true, 10 | "noFallthroughCasesInSwitch": true, 11 | "skipLibCheck": true, 12 | "esModuleInterop": true, 13 | "sourceMap": true, 14 | "declaration": false, 15 | "experimentalDecorators": true, 16 | "moduleResolution": "node", 17 | "importHelpers": true, 18 | "target": "ES2022", 19 | "module": "ES2022", 20 | "useDefineForClassFields": false, 21 | "lib": ["ES2022", "dom"] 22 | }, 23 | "angularCompilerOptions": { 24 | "enableI18nLegacyMessageIdFormat": false, 25 | "strictInjectionParameters": true, 26 | "strictInputAccessModifiers": true, 27 | "strictTemplates": true 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /examples/angular/smooth-scroll/.devcontainer/devcontainer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Node.js", 3 | "image": "mcr.microsoft.com/devcontainers/javascript-node:18" 4 | } 5 | -------------------------------------------------------------------------------- /examples/angular/smooth-scroll/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files. 2 | 3 | # Compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | /bazel-out 8 | 9 | # Node 10 | /node_modules 11 | npm-debug.log 12 | yarn-error.log 13 | 14 | # IDEs and editors 15 | .idea/ 16 | .project 17 | .classpath 18 | .c9/ 19 | *.launch 20 | .settings/ 21 | *.sublime-workspace 22 | 23 | # Visual Studio Code 24 | .vscode/* 25 | !.vscode/settings.json 26 | !.vscode/tasks.json 27 | !.vscode/launch.json 28 | !.vscode/extensions.json 29 | .history/* 30 | 31 | # Miscellaneous 32 | /.angular/cache 33 | .sass-cache/ 34 | /connect.lock 35 | /coverage 36 | /libpeerconnection.log 37 | testem.log 38 | /typings 39 | 40 | # System files 41 | .DS_Store 42 | Thumbs.db 43 | -------------------------------------------------------------------------------- /examples/angular/smooth-scroll/README.md: -------------------------------------------------------------------------------- 1 | # @tanstack/virtualExampleAngularSmoothScroll 2 | 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.3.0. 4 | 5 | ## Development server 6 | 7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files. 8 | 9 | ## Code scaffolding 10 | 11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. 12 | 13 | ## Build 14 | 15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. 16 | 17 | ## Running unit tests 18 | 19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). 20 | 21 | ## Running end-to-end tests 22 | 23 | Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. 24 | 25 | ## Further help 26 | 27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. 28 | -------------------------------------------------------------------------------- /examples/angular/smooth-scroll/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@tanstack/virtual-example-angular-smooth-scroll", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "ng": "ng", 7 | "start": "ng serve", 8 | "build": "ng build", 9 | "watch": "ng build --watch --configuration development" 10 | }, 11 | "dependencies": { 12 | "@angular/animations": "^17.3.12", 13 | "@angular/common": "^17.3.12", 14 | "@angular/compiler": "^17.3.12", 15 | "@angular/core": "^17.3.12", 16 | "@angular/forms": "^17.3.12", 17 | "@angular/platform-browser": "^17.3.12", 18 | "@angular/platform-browser-dynamic": "^17.3.12", 19 | "@angular/router": "^17.3.12", 20 | "@tanstack/angular-virtual": "^3.13.9", 21 | "rxjs": "^7.8.2", 22 | "tslib": "^2.8.1", 23 | "zone.js": "0.15.1" 24 | }, 25 | "devDependencies": { 26 | "@angular-devkit/build-angular": "^17.3.17", 27 | "@angular/cli": "^17.3.17", 28 | "@angular/compiler-cli": "^17.3.12", 29 | "typescript": "5.2.2" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /examples/angular/smooth-scroll/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TanStack/virtual/d3ee61826acd19bcd41f082f61c9427d93b2832d/examples/angular/smooth-scroll/src/favicon.ico -------------------------------------------------------------------------------- /examples/angular/smooth-scroll/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | @tanstack/virtualExampleAngularSmoothScroll 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/angular/smooth-scroll/src/main.ts: -------------------------------------------------------------------------------- 1 | import { bootstrapApplication } from '@angular/platform-browser' 2 | import { AppComponent } from './app/app.component' 3 | 4 | bootstrapApplication(AppComponent).catch((err) => console.error(err)) 5 | -------------------------------------------------------------------------------- /examples/angular/smooth-scroll/src/styles.css: -------------------------------------------------------------------------------- 1 | *, 2 | *:before, 3 | *:after { 4 | box-sizing: border-box; 5 | } 6 | 7 | html { 8 | font-family: sans-serif; 9 | font-size: 14px; 10 | } 11 | 12 | body { 13 | padding: 1rem; 14 | } 15 | 16 | .list { 17 | border: 1px solid #e6e4dc; 18 | max-width: 100%; 19 | } 20 | 21 | .list-item-even, 22 | .list-item-odd { 23 | display: flex; 24 | align-items: center; 25 | justify-content: center; 26 | } 27 | 28 | .list-item-even { 29 | background-color: #e6e4dc; 30 | } 31 | 32 | .list-item-odd { 33 | background-color: #fff; 34 | } 35 | 36 | button { 37 | border: 1px solid gray; 38 | } 39 | -------------------------------------------------------------------------------- /examples/angular/smooth-scroll/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/app", 6 | "types": [] 7 | }, 8 | "files": ["src/main.ts"], 9 | "include": ["src/**/*.d.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /examples/angular/smooth-scroll/tsconfig.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "compileOnSave": false, 4 | "compilerOptions": { 5 | "outDir": "./dist/out-tsc", 6 | "strict": true, 7 | "noImplicitOverride": true, 8 | "noPropertyAccessFromIndexSignature": true, 9 | "noImplicitReturns": true, 10 | "noFallthroughCasesInSwitch": true, 11 | "skipLibCheck": true, 12 | "esModuleInterop": true, 13 | "sourceMap": true, 14 | "declaration": false, 15 | "experimentalDecorators": true, 16 | "moduleResolution": "node", 17 | "importHelpers": true, 18 | "target": "ES2022", 19 | "module": "ES2022", 20 | "useDefineForClassFields": false, 21 | "lib": ["ES2022", "dom"] 22 | }, 23 | "angularCompilerOptions": { 24 | "enableI18nLegacyMessageIdFormat": false, 25 | "strictInjectionParameters": true, 26 | "strictInputAccessModifiers": true, 27 | "strictTemplates": true 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /examples/angular/sticky/.devcontainer/devcontainer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Node.js", 3 | "image": "mcr.microsoft.com/devcontainers/javascript-node:18" 4 | } 5 | -------------------------------------------------------------------------------- /examples/angular/sticky/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files. 2 | 3 | # Compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | /bazel-out 8 | 9 | # Node 10 | /node_modules 11 | npm-debug.log 12 | yarn-error.log 13 | 14 | # IDEs and editors 15 | .idea/ 16 | .project 17 | .classpath 18 | .c9/ 19 | *.launch 20 | .settings/ 21 | *.sublime-workspace 22 | 23 | # Visual Studio Code 24 | .vscode/* 25 | !.vscode/settings.json 26 | !.vscode/tasks.json 27 | !.vscode/launch.json 28 | !.vscode/extensions.json 29 | .history/* 30 | 31 | # Miscellaneous 32 | /.angular/cache 33 | .sass-cache/ 34 | /connect.lock 35 | /coverage 36 | /libpeerconnection.log 37 | testem.log 38 | /typings 39 | 40 | # System files 41 | .DS_Store 42 | Thumbs.db 43 | -------------------------------------------------------------------------------- /examples/angular/sticky/README.md: -------------------------------------------------------------------------------- 1 | # @tanstack/virtualExampleAngularSticky 2 | 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.3.0. 4 | 5 | ## Development server 6 | 7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files. 8 | 9 | ## Code scaffolding 10 | 11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. 12 | 13 | ## Build 14 | 15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. 16 | 17 | ## Running unit tests 18 | 19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). 20 | 21 | ## Running end-to-end tests 22 | 23 | Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. 24 | 25 | ## Further help 26 | 27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. 28 | -------------------------------------------------------------------------------- /examples/angular/sticky/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@tanstack/virtual-example-angular-sticky", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "ng": "ng", 7 | "start": "ng serve", 8 | "build": "ng build", 9 | "watch": "ng build --watch --configuration development" 10 | }, 11 | "dependencies": { 12 | "@angular/animations": "^17.3.12", 13 | "@angular/common": "^17.3.12", 14 | "@angular/compiler": "^17.3.12", 15 | "@angular/core": "^17.3.12", 16 | "@angular/forms": "^17.3.12", 17 | "@angular/platform-browser": "^17.3.12", 18 | "@angular/platform-browser-dynamic": "^17.3.12", 19 | "@angular/router": "^17.3.12", 20 | "@faker-js/faker": "^8.4.1", 21 | "@tanstack/angular-virtual": "^3.13.9", 22 | "rxjs": "^7.8.2", 23 | "tslib": "^2.8.1", 24 | "zone.js": "0.15.1" 25 | }, 26 | "devDependencies": { 27 | "@angular-devkit/build-angular": "^17.3.17", 28 | "@angular/cli": "^17.3.17", 29 | "@angular/compiler-cli": "^17.3.12", 30 | "typescript": "5.2.2" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /examples/angular/sticky/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TanStack/virtual/d3ee61826acd19bcd41f082f61c9427d93b2832d/examples/angular/sticky/src/favicon.ico -------------------------------------------------------------------------------- /examples/angular/sticky/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | @tanstack/virtualExampleAngularSticky 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/angular/sticky/src/main.ts: -------------------------------------------------------------------------------- 1 | import { bootstrapApplication } from '@angular/platform-browser' 2 | import { AppComponent } from './app/app.component' 3 | 4 | bootstrapApplication(AppComponent).catch((err) => console.error(err)) 5 | -------------------------------------------------------------------------------- /examples/angular/sticky/src/styles.css: -------------------------------------------------------------------------------- 1 | *, 2 | *:before, 3 | *:after { 4 | box-sizing: border-box; 5 | } 6 | 7 | html { 8 | font-family: sans-serif; 9 | font-size: 14px; 10 | } 11 | 12 | body { 13 | padding: 1rem; 14 | } 15 | 16 | .list { 17 | border: 1px solid #e6e4dc; 18 | max-width: 100%; 19 | } 20 | 21 | .list-item-even, 22 | .list-item-odd { 23 | display: flex; 24 | align-items: center; 25 | justify-content: center; 26 | } 27 | 28 | .list-item-even { 29 | background-color: #e6e4dc; 30 | } 31 | 32 | .list-item-odd { 33 | background-color: #fff; 34 | } 35 | 36 | button { 37 | border: 1px solid gray; 38 | } 39 | -------------------------------------------------------------------------------- /examples/angular/sticky/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/app", 6 | "types": [] 7 | }, 8 | "files": ["src/main.ts"], 9 | "include": ["src/**/*.d.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /examples/angular/sticky/tsconfig.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "compileOnSave": false, 4 | "compilerOptions": { 5 | "outDir": "./dist/out-tsc", 6 | "strict": true, 7 | "noImplicitOverride": true, 8 | "noPropertyAccessFromIndexSignature": true, 9 | "noImplicitReturns": true, 10 | "noFallthroughCasesInSwitch": true, 11 | "skipLibCheck": true, 12 | "esModuleInterop": true, 13 | "sourceMap": true, 14 | "declaration": false, 15 | "experimentalDecorators": true, 16 | "moduleResolution": "node", 17 | "importHelpers": true, 18 | "target": "ES2022", 19 | "module": "ES2022", 20 | "useDefineForClassFields": false, 21 | "lib": ["ES2022", "dom"] 22 | }, 23 | "angularCompilerOptions": { 24 | "enableI18nLegacyMessageIdFormat": false, 25 | "strictInjectionParameters": true, 26 | "strictInputAccessModifiers": true, 27 | "strictTemplates": true 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /examples/angular/table/.devcontainer/devcontainer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Node.js", 3 | "image": "mcr.microsoft.com/devcontainers/javascript-node:18" 4 | } 5 | -------------------------------------------------------------------------------- /examples/angular/table/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files. 2 | 3 | # Compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | /bazel-out 8 | 9 | # Node 10 | /node_modules 11 | npm-debug.log 12 | yarn-error.log 13 | 14 | # IDEs and editors 15 | .idea/ 16 | .project 17 | .classpath 18 | .c9/ 19 | *.launch 20 | .settings/ 21 | *.sublime-workspace 22 | 23 | # Visual Studio Code 24 | .vscode/* 25 | !.vscode/settings.json 26 | !.vscode/tasks.json 27 | !.vscode/launch.json 28 | !.vscode/extensions.json 29 | .history/* 30 | 31 | # Miscellaneous 32 | /.angular/cache 33 | .sass-cache/ 34 | /connect.lock 35 | /coverage 36 | /libpeerconnection.log 37 | testem.log 38 | /typings 39 | 40 | # System files 41 | .DS_Store 42 | Thumbs.db 43 | -------------------------------------------------------------------------------- /examples/angular/table/README.md: -------------------------------------------------------------------------------- 1 | # @tanstack/virtualExampleAngularTable 2 | 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.3.0. 4 | 5 | ## Development server 6 | 7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files. 8 | 9 | ## Code scaffolding 10 | 11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. 12 | 13 | ## Build 14 | 15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. 16 | 17 | ## Running unit tests 18 | 19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). 20 | 21 | ## Running end-to-end tests 22 | 23 | Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. 24 | 25 | ## Further help 26 | 27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. 28 | -------------------------------------------------------------------------------- /examples/angular/table/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@tanstack/virtual-example-angular-table", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "ng": "ng", 7 | "start": "ng serve", 8 | "build": "ng build", 9 | "watch": "ng build --watch --configuration development" 10 | }, 11 | "dependencies": { 12 | "@angular/animations": "^17.3.12", 13 | "@angular/common": "^17.3.12", 14 | "@angular/compiler": "^17.3.12", 15 | "@angular/core": "^17.3.12", 16 | "@angular/forms": "^17.3.12", 17 | "@angular/platform-browser": "^17.3.12", 18 | "@angular/platform-browser-dynamic": "^17.3.12", 19 | "@angular/router": "^17.3.12", 20 | "@faker-js/faker": "^8.4.1", 21 | "@tanstack/angular-table": "8.21.3", 22 | "@tanstack/angular-virtual": "^3.13.9", 23 | "rxjs": "^7.8.2", 24 | "tslib": "^2.8.1", 25 | "zone.js": "0.15.1" 26 | }, 27 | "devDependencies": { 28 | "@angular-devkit/build-angular": "^17.3.17", 29 | "@angular/cli": "^17.3.17", 30 | "@angular/compiler-cli": "^17.3.12", 31 | "typescript": "5.2.2" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /examples/angular/table/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TanStack/virtual/d3ee61826acd19bcd41f082f61c9427d93b2832d/examples/angular/table/src/favicon.ico -------------------------------------------------------------------------------- /examples/angular/table/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | @tanstack/virtualExampleAngularTable 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/angular/table/src/main.ts: -------------------------------------------------------------------------------- 1 | import { bootstrapApplication } from '@angular/platform-browser' 2 | import { AppComponent } from './app/app.component' 3 | 4 | bootstrapApplication(AppComponent).catch((err) => console.error(err)) 5 | -------------------------------------------------------------------------------- /examples/angular/table/src/styles.css: -------------------------------------------------------------------------------- 1 | *, 2 | *:before, 3 | *:after { 4 | box-sizing: border-box; 5 | } 6 | 7 | html { 8 | font-family: sans-serif; 9 | font-size: 14px; 10 | } 11 | 12 | body { 13 | padding: 1rem; 14 | } 15 | 16 | .list { 17 | border: 1px solid #e6e4dc; 18 | max-width: 100%; 19 | } 20 | 21 | .list-item-even, 22 | .list-item-odd { 23 | display: flex; 24 | align-items: center; 25 | justify-content: center; 26 | } 27 | 28 | .list-item-even { 29 | background-color: #e6e4dc; 30 | } 31 | 32 | .list-item-odd { 33 | background-color: #fff; 34 | } 35 | 36 | button { 37 | border: 1px solid gray; 38 | } 39 | -------------------------------------------------------------------------------- /examples/angular/table/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/app", 6 | "types": [] 7 | }, 8 | "files": ["src/main.ts"], 9 | "include": ["src/**/*.d.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /examples/angular/table/tsconfig.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "compileOnSave": false, 4 | "compilerOptions": { 5 | "outDir": "./dist/out-tsc", 6 | "strict": true, 7 | "noImplicitOverride": true, 8 | "noPropertyAccessFromIndexSignature": true, 9 | "noImplicitReturns": true, 10 | "noFallthroughCasesInSwitch": true, 11 | "skipLibCheck": true, 12 | "esModuleInterop": true, 13 | "sourceMap": true, 14 | "declaration": false, 15 | "experimentalDecorators": true, 16 | "moduleResolution": "node", 17 | "importHelpers": true, 18 | "target": "ES2022", 19 | "module": "ES2022", 20 | "useDefineForClassFields": false, 21 | "lib": ["ES2022", "dom"] 22 | }, 23 | "angularCompilerOptions": { 24 | "enableI18nLegacyMessageIdFormat": false, 25 | "strictInjectionParameters": true, 26 | "strictInputAccessModifiers": true, 27 | "strictTemplates": true 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /examples/angular/variable/.devcontainer/devcontainer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Node.js", 3 | "image": "mcr.microsoft.com/devcontainers/javascript-node:18" 4 | } 5 | -------------------------------------------------------------------------------- /examples/angular/variable/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files. 2 | 3 | # Compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | /bazel-out 8 | 9 | # Node 10 | /node_modules 11 | npm-debug.log 12 | yarn-error.log 13 | 14 | # IDEs and editors 15 | .idea/ 16 | .project 17 | .classpath 18 | .c9/ 19 | *.launch 20 | .settings/ 21 | *.sublime-workspace 22 | 23 | # Visual Studio Code 24 | .vscode/* 25 | !.vscode/settings.json 26 | !.vscode/tasks.json 27 | !.vscode/launch.json 28 | !.vscode/extensions.json 29 | .history/* 30 | 31 | # Miscellaneous 32 | /.angular/cache 33 | .sass-cache/ 34 | /connect.lock 35 | /coverage 36 | /libpeerconnection.log 37 | testem.log 38 | /typings 39 | 40 | # System files 41 | .DS_Store 42 | Thumbs.db 43 | -------------------------------------------------------------------------------- /examples/angular/variable/README.md: -------------------------------------------------------------------------------- 1 | # @tanstack/virtualExampleAngularVariable 2 | 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.3.0. 4 | 5 | ## Development server 6 | 7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files. 8 | 9 | ## Code scaffolding 10 | 11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. 12 | 13 | ## Build 14 | 15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. 16 | 17 | ## Running unit tests 18 | 19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). 20 | 21 | ## Running end-to-end tests 22 | 23 | Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. 24 | 25 | ## Further help 26 | 27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. 28 | -------------------------------------------------------------------------------- /examples/angular/variable/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@tanstack/virtual-example-angular-variable", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "ng": "ng", 7 | "start": "ng serve", 8 | "build": "ng build", 9 | "watch": "ng build --watch --configuration development" 10 | }, 11 | "dependencies": { 12 | "@angular/animations": "^17.3.12", 13 | "@angular/common": "^17.3.12", 14 | "@angular/compiler": "^17.3.12", 15 | "@angular/core": "^17.3.12", 16 | "@angular/forms": "^17.3.12", 17 | "@angular/platform-browser": "^17.3.12", 18 | "@angular/platform-browser-dynamic": "^17.3.12", 19 | "@angular/router": "^17.3.12", 20 | "@tanstack/angular-virtual": "^3.13.9", 21 | "rxjs": "^7.8.2", 22 | "tslib": "^2.8.1", 23 | "zone.js": "0.15.1" 24 | }, 25 | "devDependencies": { 26 | "@angular-devkit/build-angular": "^17.3.17", 27 | "@angular/cli": "^17.3.17", 28 | "@angular/compiler-cli": "^17.3.12", 29 | "typescript": "5.2.2" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /examples/angular/variable/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TanStack/virtual/d3ee61826acd19bcd41f082f61c9427d93b2832d/examples/angular/variable/src/favicon.ico -------------------------------------------------------------------------------- /examples/angular/variable/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | @tanstack/virtualExampleAngularVariable 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/angular/variable/src/main.ts: -------------------------------------------------------------------------------- 1 | import { bootstrapApplication } from '@angular/platform-browser' 2 | import { AppComponent } from './app/app.component' 3 | 4 | bootstrapApplication(AppComponent).catch((err) => console.error(err)) 5 | -------------------------------------------------------------------------------- /examples/angular/variable/src/styles.css: -------------------------------------------------------------------------------- 1 | *, 2 | *:before, 3 | *:after { 4 | box-sizing: border-box; 5 | } 6 | 7 | html { 8 | font-family: sans-serif; 9 | font-size: 14px; 10 | } 11 | 12 | body { 13 | padding: 1rem; 14 | } 15 | 16 | .list { 17 | border: 1px solid #e6e4dc; 18 | max-width: 100%; 19 | } 20 | 21 | .list-item-even, 22 | .list-item-odd { 23 | display: flex; 24 | align-items: center; 25 | justify-content: center; 26 | } 27 | 28 | .list-item-even { 29 | background-color: #e6e4dc; 30 | } 31 | 32 | .list-item-odd { 33 | background-color: #fff; 34 | } 35 | 36 | button { 37 | border: 1px solid gray; 38 | } 39 | -------------------------------------------------------------------------------- /examples/angular/variable/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/app", 6 | "types": [] 7 | }, 8 | "files": ["src/main.ts"], 9 | "include": ["src/**/*.d.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /examples/angular/variable/tsconfig.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "compileOnSave": false, 4 | "compilerOptions": { 5 | "outDir": "./dist/out-tsc", 6 | "strict": true, 7 | "noImplicitOverride": true, 8 | "noPropertyAccessFromIndexSignature": true, 9 | "noImplicitReturns": true, 10 | "noFallthroughCasesInSwitch": true, 11 | "skipLibCheck": true, 12 | "esModuleInterop": true, 13 | "sourceMap": true, 14 | "declaration": false, 15 | "experimentalDecorators": true, 16 | "moduleResolution": "node", 17 | "importHelpers": true, 18 | "target": "ES2022", 19 | "module": "ES2022", 20 | "useDefineForClassFields": false, 21 | "lib": ["ES2022", "dom"] 22 | }, 23 | "angularCompilerOptions": { 24 | "enableI18nLegacyMessageIdFormat": false, 25 | "strictInjectionParameters": true, 26 | "strictInputAccessModifiers": true, 27 | "strictTemplates": true 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /examples/angular/window/.devcontainer/devcontainer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Node.js", 3 | "image": "mcr.microsoft.com/devcontainers/javascript-node:18" 4 | } 5 | -------------------------------------------------------------------------------- /examples/angular/window/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files. 2 | 3 | # Compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | /bazel-out 8 | 9 | # Node 10 | /node_modules 11 | npm-debug.log 12 | yarn-error.log 13 | 14 | # IDEs and editors 15 | .idea/ 16 | .project 17 | .classpath 18 | .c9/ 19 | *.launch 20 | .settings/ 21 | *.sublime-workspace 22 | 23 | # Visual Studio Code 24 | .vscode/* 25 | !.vscode/settings.json 26 | !.vscode/tasks.json 27 | !.vscode/launch.json 28 | !.vscode/extensions.json 29 | .history/* 30 | 31 | # Miscellaneous 32 | /.angular/cache 33 | .sass-cache/ 34 | /connect.lock 35 | /coverage 36 | /libpeerconnection.log 37 | testem.log 38 | /typings 39 | 40 | # System files 41 | .DS_Store 42 | Thumbs.db 43 | -------------------------------------------------------------------------------- /examples/angular/window/README.md: -------------------------------------------------------------------------------- 1 | # @tanstack/virtualExampleAngularWindow 2 | 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.3.0. 4 | 5 | ## Development server 6 | 7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files. 8 | 9 | ## Code scaffolding 10 | 11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. 12 | 13 | ## Build 14 | 15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. 16 | 17 | ## Running unit tests 18 | 19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). 20 | 21 | ## Running end-to-end tests 22 | 23 | Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. 24 | 25 | ## Further help 26 | 27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. 28 | -------------------------------------------------------------------------------- /examples/angular/window/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@tanstack/virtual-example-angular-window", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "ng": "ng", 7 | "start": "ng serve", 8 | "build": "ng build", 9 | "watch": "ng build --watch --configuration development" 10 | }, 11 | "dependencies": { 12 | "@angular/animations": "^17.3.12", 13 | "@angular/common": "^17.3.12", 14 | "@angular/compiler": "^17.3.12", 15 | "@angular/core": "^17.3.12", 16 | "@angular/forms": "^17.3.12", 17 | "@angular/platform-browser": "^17.3.12", 18 | "@angular/platform-browser-dynamic": "^17.3.12", 19 | "@angular/router": "^17.3.12", 20 | "@tanstack/angular-virtual": "^3.13.9", 21 | "rxjs": "^7.8.2", 22 | "tslib": "^2.8.1", 23 | "zone.js": "0.15.1" 24 | }, 25 | "devDependencies": { 26 | "@angular-devkit/build-angular": "^17.3.17", 27 | "@angular/cli": "^17.3.17", 28 | "@angular/compiler-cli": "^17.3.12", 29 | "typescript": "5.2.2" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /examples/angular/window/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TanStack/virtual/d3ee61826acd19bcd41f082f61c9427d93b2832d/examples/angular/window/src/favicon.ico -------------------------------------------------------------------------------- /examples/angular/window/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | @tanstack/virtualExampleAngularWindow 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/angular/window/src/main.ts: -------------------------------------------------------------------------------- 1 | import { bootstrapApplication } from '@angular/platform-browser' 2 | import { AppComponent } from './app/app.component' 3 | 4 | bootstrapApplication(AppComponent).catch((err) => console.error(err)) 5 | -------------------------------------------------------------------------------- /examples/angular/window/src/styles.css: -------------------------------------------------------------------------------- 1 | *, 2 | *:before, 3 | *:after { 4 | box-sizing: border-box; 5 | } 6 | 7 | html { 8 | font-family: sans-serif; 9 | font-size: 14px; 10 | } 11 | 12 | body { 13 | padding: 1rem; 14 | } 15 | 16 | .list { 17 | border: 1px solid #e6e4dc; 18 | max-width: 100%; 19 | } 20 | 21 | .list-item-even, 22 | .list-item-odd { 23 | display: flex; 24 | align-items: center; 25 | justify-content: center; 26 | } 27 | 28 | .list-item-even { 29 | background-color: #e6e4dc; 30 | } 31 | 32 | .list-item-odd { 33 | background-color: #fff; 34 | } 35 | 36 | button { 37 | border: 1px solid gray; 38 | } 39 | -------------------------------------------------------------------------------- /examples/angular/window/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/app", 6 | "types": [] 7 | }, 8 | "files": ["src/main.ts"], 9 | "include": ["src/**/*.d.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /examples/angular/window/tsconfig.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "compileOnSave": false, 4 | "compilerOptions": { 5 | "outDir": "./dist/out-tsc", 6 | "strict": true, 7 | "noImplicitOverride": true, 8 | "noPropertyAccessFromIndexSignature": true, 9 | "noImplicitReturns": true, 10 | "noFallthroughCasesInSwitch": true, 11 | "skipLibCheck": true, 12 | "esModuleInterop": true, 13 | "sourceMap": true, 14 | "declaration": false, 15 | "experimentalDecorators": true, 16 | "moduleResolution": "node", 17 | "importHelpers": true, 18 | "target": "ES2022", 19 | "module": "ES2022", 20 | "useDefineForClassFields": false, 21 | "lib": ["ES2022", "dom"] 22 | }, 23 | "angularCompilerOptions": { 24 | "enableI18nLegacyMessageIdFormat": false, 25 | "strictInjectionParameters": true, 26 | "strictInputAccessModifiers": true, 27 | "strictTemplates": true 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /examples/lit/dynamic/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local 6 | -------------------------------------------------------------------------------- /examples/lit/dynamic/README.md: -------------------------------------------------------------------------------- 1 | # Example 2 | 3 | To run this example: 4 | 5 | - `npm install` or `npm` 6 | - `npm run start` or `npm run start` 7 | -------------------------------------------------------------------------------- /examples/lit/dynamic/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /examples/lit/dynamic/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tanstack-lit-virtual-example-dynamic", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "tsc && vite build", 8 | "serve": "vite preview" 9 | }, 10 | "dependencies": { 11 | "@faker-js/faker": "^8.4.1", 12 | "@tanstack/lit-virtual": "^3.13.9", 13 | "@tanstack/virtual-core": "^3.13.9", 14 | "lit": "^3.3.0" 15 | }, 16 | "devDependencies": { 17 | "@types/node": "^22.13.6", 18 | "typescript": "5.2.2", 19 | "vite": "^5.4.19" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /examples/lit/dynamic/src/index.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-family: sans-serif; 3 | font-size: 14px; 4 | } 5 | 6 | body { 7 | padding: 1rem; 8 | } 9 | -------------------------------------------------------------------------------- /examples/lit/dynamic/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "composite": true, 3 | "compilerOptions": { 4 | "outDir": "./build/types", 5 | "target": "ESNext", 6 | "module": "ESNext", 7 | "moduleResolution": "node", 8 | "experimentalDecorators": true, 9 | "useDefineForClassFields": false 10 | }, 11 | "files": ["src/main.ts"], 12 | "include": ["src"] 13 | } 14 | -------------------------------------------------------------------------------- /examples/lit/dynamic/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | 3 | // https://vitejs.dev/config/ 4 | export default defineConfig({ 5 | plugins: [], 6 | }) 7 | -------------------------------------------------------------------------------- /examples/lit/fixed/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local 6 | -------------------------------------------------------------------------------- /examples/lit/fixed/README.md: -------------------------------------------------------------------------------- 1 | # Example 2 | 3 | To run this example: 4 | 5 | - `npm install` or `npm` 6 | - `npm run start` or `npm run start` 7 | -------------------------------------------------------------------------------- /examples/lit/fixed/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /examples/lit/fixed/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tanstack-lit-virtual-example-fixed", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "tsc && vite build", 8 | "serve": "vite preview" 9 | }, 10 | "dependencies": { 11 | "@faker-js/faker": "^8.4.1", 12 | "@tanstack/lit-virtual": "^3.13.9", 13 | "@tanstack/virtual-core": "^3.13.9", 14 | "lit": "^3.3.0" 15 | }, 16 | "devDependencies": { 17 | "@types/node": "^22.13.6", 18 | "typescript": "5.2.2", 19 | "vite": "^5.4.19" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /examples/lit/fixed/src/index.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-family: sans-serif; 3 | font-size: 14px; 4 | } 5 | 6 | body { 7 | padding: 1rem; 8 | } 9 | -------------------------------------------------------------------------------- /examples/lit/fixed/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "composite": true, 3 | "compilerOptions": { 4 | "outDir": "./build/types", 5 | "target": "ESNext", 6 | "module": "ESNext", 7 | "moduleResolution": "node", 8 | "experimentalDecorators": true, 9 | "useDefineForClassFields": false 10 | }, 11 | "files": ["src/main.ts"], 12 | "include": ["src"] 13 | } 14 | -------------------------------------------------------------------------------- /examples/lit/fixed/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | 3 | // https://vitejs.dev/config/ 4 | export default defineConfig({ 5 | plugins: [], 6 | }) 7 | -------------------------------------------------------------------------------- /examples/react/dynamic/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local 6 | -------------------------------------------------------------------------------- /examples/react/dynamic/README.md: -------------------------------------------------------------------------------- 1 | # Example 2 | 3 | To run this example: 4 | 5 | - `npm install` or `npm` 6 | - `npm run start` or `npm run start` 7 | -------------------------------------------------------------------------------- /examples/react/dynamic/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /examples/react/dynamic/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tanstack-react-virtual-example-dynamic", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "tsc && vite build", 8 | "serve": "vite preview" 9 | }, 10 | "dependencies": { 11 | "@faker-js/faker": "^8.4.1", 12 | "@tanstack/react-virtual": "^3.13.9", 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1" 15 | }, 16 | "devDependencies": { 17 | "@types/node": "^22.13.6", 18 | "@types/react": "^18.3.23", 19 | "@types/react-dom": "^18.3.7", 20 | "@vitejs/plugin-react": "^4.5.0", 21 | "typescript": "5.2.2", 22 | "vite": "^5.4.19" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /examples/react/dynamic/src/index.css: -------------------------------------------------------------------------------- 1 | *, 2 | *:before, 3 | *:after { 4 | box-sizing: border-box; 5 | } 6 | 7 | html { 8 | font-family: sans-serif; 9 | font-size: 14px; 10 | } 11 | 12 | body { 13 | padding: 1rem; 14 | } 15 | 16 | .List { 17 | border: 1px solid #e6e4dc; 18 | max-width: 100%; 19 | } 20 | 21 | .ListItemEven { 22 | background-color: #e6e4dc; 23 | } 24 | -------------------------------------------------------------------------------- /examples/react/dynamic/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "composite": true, 3 | "compilerOptions": { 4 | "target": "ES2020", 5 | "useDefineForClassFields": true, 6 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 7 | "module": "ESNext", 8 | "skipLibCheck": true, 9 | 10 | /* Bundler mode */ 11 | "moduleResolution": "Bundler", 12 | "allowImportingTsExtensions": true, 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "noEmit": true, 16 | "jsx": "react-jsx", 17 | 18 | /* Linting */ 19 | "strict": true, 20 | "noUnusedLocals": true, 21 | "noUnusedParameters": true, 22 | "noFallthroughCasesInSwitch": true 23 | }, 24 | "include": ["src"] 25 | } 26 | -------------------------------------------------------------------------------- /examples/react/dynamic/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /examples/react/fixed/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local 6 | -------------------------------------------------------------------------------- /examples/react/fixed/README.md: -------------------------------------------------------------------------------- 1 | # Example 2 | 3 | To run this example: 4 | 5 | - `npm install` or `yarn` 6 | - `npm run start` or `yarn start` 7 | -------------------------------------------------------------------------------- /examples/react/fixed/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /examples/react/fixed/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tanstack-react-virtual-example-fixed", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "tsc && vite build", 8 | "serve": "vite preview" 9 | }, 10 | "dependencies": { 11 | "@tanstack/react-virtual": "^3.13.9", 12 | "react": "^18.3.1", 13 | "react-dom": "^18.3.1" 14 | }, 15 | "devDependencies": { 16 | "@types/node": "^22.13.6", 17 | "@types/react": "^18.3.23", 18 | "@types/react-dom": "^18.3.7", 19 | "@vitejs/plugin-react": "^4.5.0", 20 | "typescript": "5.2.2", 21 | "vite": "^5.4.19" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /examples/react/fixed/src/index.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-family: sans-serif; 3 | font-size: 14px; 4 | } 5 | 6 | body { 7 | padding: 1rem; 8 | } 9 | 10 | .List { 11 | border: 1px solid #e6e4dc; 12 | max-width: 100%; 13 | } 14 | 15 | .ListItemEven, 16 | .ListItemOdd { 17 | display: flex; 18 | align-items: center; 19 | justify-content: center; 20 | } 21 | 22 | .ListItemEven { 23 | background-color: #e6e4dc; 24 | } 25 | 26 | button { 27 | border: 1px solid gray; 28 | } 29 | -------------------------------------------------------------------------------- /examples/react/fixed/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "composite": true, 3 | "compilerOptions": { 4 | "target": "ES2020", 5 | "useDefineForClassFields": true, 6 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 7 | "module": "ESNext", 8 | "skipLibCheck": true, 9 | 10 | /* Bundler mode */ 11 | "moduleResolution": "Bundler", 12 | "allowImportingTsExtensions": true, 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "noEmit": true, 16 | "jsx": "react-jsx", 17 | 18 | /* Linting */ 19 | "strict": true, 20 | "noUnusedLocals": true, 21 | "noUnusedParameters": true, 22 | "noFallthroughCasesInSwitch": true 23 | }, 24 | "include": ["src"] 25 | } 26 | -------------------------------------------------------------------------------- /examples/react/fixed/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /examples/react/infinite-scroll/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local 6 | -------------------------------------------------------------------------------- /examples/react/infinite-scroll/README.md: -------------------------------------------------------------------------------- 1 | # Example 2 | 3 | To run this example: 4 | 5 | - `npm install` or `yarn` 6 | - `npm run start` or `yarn start` 7 | -------------------------------------------------------------------------------- /examples/react/infinite-scroll/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Vite App 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/react/infinite-scroll/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tanstack-react-virtual-example-infinite-scroll", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "vite build", 8 | "serve": "vite preview --port 3001", 9 | "start": "vite" 10 | }, 11 | "dependencies": { 12 | "@tanstack/react-query": "^5.79.0", 13 | "@tanstack/react-virtual": "^3.13.9", 14 | "react": "^18.3.1", 15 | "react-dom": "^18.3.1" 16 | }, 17 | "devDependencies": { 18 | "@types/react": "^18.3.23", 19 | "@types/react-dom": "^18.3.7", 20 | "@vitejs/plugin-react": "^4.5.0", 21 | "vite": "^5.4.19" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /examples/react/infinite-scroll/src/index.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-family: sans-serif; 3 | font-size: 14px; 4 | } 5 | 6 | body { 7 | padding: 1rem; 8 | } 9 | 10 | .List { 11 | border: 1px solid #e6e4dc; 12 | max-width: 100%; 13 | } 14 | 15 | .ListItemEven, 16 | .ListItemOdd { 17 | display: flex; 18 | align-items: center; 19 | justify-content: center; 20 | } 21 | 22 | .ListItemEven { 23 | background-color: #e6e4dc; 24 | } 25 | 26 | button { 27 | border: 1px solid gray; 28 | } 29 | -------------------------------------------------------------------------------- /examples/react/infinite-scroll/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "composite": true, 3 | "compilerOptions": { 4 | "target": "ES2020", 5 | "useDefineForClassFields": true, 6 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 7 | "module": "ESNext", 8 | "skipLibCheck": true, 9 | 10 | /* Bundler mode */ 11 | "moduleResolution": "Bundler", 12 | "allowImportingTsExtensions": true, 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "noEmit": true, 16 | "jsx": "react-jsx", 17 | 18 | /* Linting */ 19 | "strict": true, 20 | "noUnusedLocals": true, 21 | "noUnusedParameters": true, 22 | "noFallthroughCasesInSwitch": true 23 | }, 24 | "include": ["src"] 25 | } 26 | -------------------------------------------------------------------------------- /examples/react/infinite-scroll/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | export default defineConfig({ 5 | plugins: [react()], 6 | }) 7 | -------------------------------------------------------------------------------- /examples/react/padding/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local 6 | -------------------------------------------------------------------------------- /examples/react/padding/README.md: -------------------------------------------------------------------------------- 1 | # Example 2 | 3 | To run this example: 4 | 5 | - `npm install` or `yarn` 6 | - `npm run start` or `yarn start` 7 | -------------------------------------------------------------------------------- /examples/react/padding/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Vite App 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/react/padding/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tanstack-react-virtual-example-padding", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "vite build", 8 | "serve": "vite preview --port 3001", 9 | "start": "vite" 10 | }, 11 | "dependencies": { 12 | "@tanstack/react-virtual": "^3.13.9", 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1" 15 | }, 16 | "devDependencies": { 17 | "@types/react": "^18.3.23", 18 | "@types/react-dom": "^18.3.7", 19 | "@vitejs/plugin-react": "^4.5.0", 20 | "vite": "^5.4.19" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /examples/react/padding/src/index.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-family: sans-serif; 3 | font-size: 14px; 4 | } 5 | 6 | body { 7 | padding: 1rem; 8 | } 9 | 10 | .List { 11 | border: 1px solid #e6e4dc; 12 | max-width: 100%; 13 | } 14 | 15 | .ListItemEven, 16 | .ListItemOdd { 17 | display: flex; 18 | align-items: center; 19 | justify-content: center; 20 | } 21 | 22 | .ListItemEven { 23 | background-color: #e6e4dc; 24 | } 25 | 26 | button { 27 | border: 1px solid gray; 28 | } 29 | -------------------------------------------------------------------------------- /examples/react/padding/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "composite": true, 3 | "compilerOptions": { 4 | "target": "ES2020", 5 | "useDefineForClassFields": true, 6 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 7 | "module": "ESNext", 8 | "skipLibCheck": true, 9 | 10 | /* Bundler mode */ 11 | "moduleResolution": "Bundler", 12 | "allowImportingTsExtensions": true, 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "noEmit": true, 16 | "jsx": "react-jsx", 17 | 18 | /* Linting */ 19 | "strict": true, 20 | "noUnusedLocals": true, 21 | "noUnusedParameters": true, 22 | "noFallthroughCasesInSwitch": true 23 | }, 24 | "include": ["src"] 25 | } 26 | -------------------------------------------------------------------------------- /examples/react/padding/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | export default defineConfig({ 5 | plugins: [react()], 6 | }) 7 | -------------------------------------------------------------------------------- /examples/react/scroll-padding/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local 6 | -------------------------------------------------------------------------------- /examples/react/scroll-padding/README.md: -------------------------------------------------------------------------------- 1 | # Example 2 | 3 | To run this example: 4 | 5 | - `npm install` or `yarn` 6 | - `npm run start` or `yarn start` 7 | -------------------------------------------------------------------------------- /examples/react/scroll-padding/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Vite App 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/react/scroll-padding/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tanstack-react-virtual-example-scroll-padding", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "vite build", 8 | "serve": "vite preview --port 3001", 9 | "start": "vite" 10 | }, 11 | "dependencies": { 12 | "@react-hookz/web": "^25.1.1", 13 | "@tanstack/react-virtual": "^3.13.9", 14 | "react": "^18.3.1", 15 | "react-dom": "^18.3.1" 16 | }, 17 | "devDependencies": { 18 | "@types/react": "^18.3.23", 19 | "@types/react-dom": "^18.3.7", 20 | "@vitejs/plugin-react": "^4.5.0", 21 | "vite": "^5.4.19" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /examples/react/scroll-padding/src/index.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-family: sans-serif; 3 | font-size: 14px; 4 | } 5 | 6 | .List table { 7 | background-color: #fff; 8 | border: 1px solid #e6e4dc; 9 | max-width: 100%; 10 | border-collapse: collapse; 11 | 12 | display: flex; 13 | flex-direction: column; 14 | align-items: stretch; 15 | position: relative; 16 | } 17 | 18 | .List thead { 19 | display: flex; 20 | flex-direction: column; 21 | background-color: #fff; 22 | 23 | position: sticky; 24 | top: 0; 25 | z-index: 1; 26 | } 27 | 28 | .List thead tr { 29 | height: 70px; 30 | } 31 | 32 | .List tr { 33 | display: flex; 34 | flex-direction: row; 35 | } 36 | 37 | .List td, 38 | .List th { 39 | display: flex; 40 | flex-direction: row; 41 | align-items: center; 42 | justify-content: center; 43 | width: 180px; 44 | } 45 | 46 | .ListItemEven { 47 | background-color: #e6e4dc; 48 | } 49 | -------------------------------------------------------------------------------- /examples/react/scroll-padding/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "composite": true, 3 | "compilerOptions": { 4 | "target": "ES2020", 5 | "useDefineForClassFields": true, 6 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 7 | "module": "ESNext", 8 | "skipLibCheck": true, 9 | 10 | /* Bundler mode */ 11 | "moduleResolution": "Bundler", 12 | "allowImportingTsExtensions": true, 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "noEmit": true, 16 | "jsx": "react-jsx", 17 | 18 | /* Linting */ 19 | "strict": true, 20 | "noUnusedLocals": true, 21 | "noUnusedParameters": true, 22 | "noFallthroughCasesInSwitch": true 23 | }, 24 | "include": ["src"] 25 | } 26 | -------------------------------------------------------------------------------- /examples/react/scroll-padding/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | export default defineConfig({ 5 | plugins: [react()], 6 | }) 7 | -------------------------------------------------------------------------------- /examples/react/smooth-scroll/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local 6 | -------------------------------------------------------------------------------- /examples/react/smooth-scroll/README.md: -------------------------------------------------------------------------------- 1 | # Example 2 | 3 | To run this example: 4 | 5 | - `npm install` or `yarn` 6 | - `npm run start` or `yarn start` 7 | -------------------------------------------------------------------------------- /examples/react/smooth-scroll/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Vite App 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/react/smooth-scroll/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tanstack-react-virtual-example-smooth-scroll", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "vite build", 8 | "serve": "vite preview --port 3001", 9 | "start": "vite" 10 | }, 11 | "dependencies": { 12 | "@tanstack/react-virtual": "^3.13.9", 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1" 15 | }, 16 | "devDependencies": { 17 | "@types/react": "^18.3.23", 18 | "@types/react-dom": "^18.3.7", 19 | "@vitejs/plugin-react": "^4.5.0", 20 | "vite": "^5.4.19" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /examples/react/smooth-scroll/src/index.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-family: sans-serif; 3 | font-size: 14px; 4 | } 5 | 6 | body { 7 | padding: 1rem; 8 | } 9 | 10 | .List { 11 | border: 1px solid #e6e4dc; 12 | max-width: 100%; 13 | } 14 | 15 | .ListItemEven, 16 | .ListItemOdd { 17 | display: flex; 18 | align-items: center; 19 | justify-content: center; 20 | } 21 | 22 | .ListItemEven { 23 | background-color: #e6e4dc; 24 | } 25 | 26 | button { 27 | border: 1px solid gray; 28 | } 29 | -------------------------------------------------------------------------------- /examples/react/smooth-scroll/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "composite": true, 3 | "compilerOptions": { 4 | "target": "ES2020", 5 | "useDefineForClassFields": true, 6 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 7 | "module": "ESNext", 8 | "skipLibCheck": true, 9 | 10 | /* Bundler mode */ 11 | "moduleResolution": "Bundler", 12 | "allowImportingTsExtensions": true, 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "noEmit": true, 16 | "jsx": "react-jsx", 17 | 18 | /* Linting */ 19 | "strict": true, 20 | "noUnusedLocals": true, 21 | "noUnusedParameters": true, 22 | "noFallthroughCasesInSwitch": true 23 | }, 24 | "include": ["src"] 25 | } 26 | -------------------------------------------------------------------------------- /examples/react/smooth-scroll/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | export default defineConfig({ 5 | plugins: [react()], 6 | }) 7 | -------------------------------------------------------------------------------- /examples/react/sticky/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local 6 | -------------------------------------------------------------------------------- /examples/react/sticky/README.md: -------------------------------------------------------------------------------- 1 | # Example 2 | 3 | To run this example: 4 | 5 | - `npm install` or `yarn` 6 | - `npm run start` or `yarn start` 7 | -------------------------------------------------------------------------------- /examples/react/sticky/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Vite App 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/react/sticky/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tanstack-react-virtual-example-sticky", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "vite build", 8 | "serve": "vite preview --port 3001", 9 | "start": "vite" 10 | }, 11 | "dependencies": { 12 | "@faker-js/faker": "^8.4.1", 13 | "@tanstack/react-virtual": "^3.13.9", 14 | "lodash": "^4.17.21", 15 | "react": "^18.3.1", 16 | "react-dom": "^18.3.1" 17 | }, 18 | "devDependencies": { 19 | "@types/lodash": "^4.17.17", 20 | "@types/react": "^18.3.23", 21 | "@types/react-dom": "^18.3.7", 22 | "@vitejs/plugin-react": "^4.5.0", 23 | "vite": "^5.4.19" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /examples/react/sticky/src/index.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-family: sans-serif; 3 | font-size: 14px; 4 | } 5 | 6 | body { 7 | padding: 1rem; 8 | } 9 | 10 | .List { 11 | border: 1px solid #e6e4dc; 12 | max-width: 100%; 13 | } 14 | 15 | .ListItemEven, 16 | .ListItemOdd { 17 | display: flex; 18 | align-items: center; 19 | justify-content: center; 20 | } 21 | 22 | .ListItemEven { 23 | background-color: #e6e4dc; 24 | } 25 | 26 | button { 27 | border: 1px solid gray; 28 | } 29 | -------------------------------------------------------------------------------- /examples/react/sticky/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "composite": true, 3 | "compilerOptions": { 4 | "target": "ES2020", 5 | "useDefineForClassFields": true, 6 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 7 | "module": "ESNext", 8 | "skipLibCheck": true, 9 | 10 | /* Bundler mode */ 11 | "moduleResolution": "Bundler", 12 | "allowImportingTsExtensions": true, 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "noEmit": true, 16 | "jsx": "react-jsx", 17 | 18 | /* Linting */ 19 | "strict": true, 20 | "noUnusedLocals": true, 21 | "noUnusedParameters": true, 22 | "noFallthroughCasesInSwitch": true 23 | }, 24 | "include": ["src"] 25 | } 26 | -------------------------------------------------------------------------------- /examples/react/sticky/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | export default defineConfig({ 5 | plugins: [react()], 6 | }) 7 | -------------------------------------------------------------------------------- /examples/react/table/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local 6 | -------------------------------------------------------------------------------- /examples/react/table/README.md: -------------------------------------------------------------------------------- 1 | # Example 2 | 3 | To run this example: 4 | 5 | - `npm install` or `npm` 6 | - `npm run start` or `npm run start` 7 | -------------------------------------------------------------------------------- /examples/react/table/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Vite App 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /examples/react/table/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tanstack-react-virtual-example-table", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "vite build", 8 | "serve": "vite preview --port 3001", 9 | "start": "vite" 10 | }, 11 | "dependencies": { 12 | "@faker-js/faker": "^8.4.1", 13 | "@tanstack/react-table": "^8.21.3", 14 | "@tanstack/react-virtual": "^3.13.9", 15 | "react": "^18.3.1", 16 | "react-dom": "^18.3.1" 17 | }, 18 | "devDependencies": { 19 | "@types/react": "^18.3.23", 20 | "@types/react-dom": "^18.3.7", 21 | "@vitejs/plugin-react": "^4.5.0", 22 | "vite": "^5.4.19" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /examples/react/table/src/index.css: -------------------------------------------------------------------------------- 1 | *, 2 | *:before, 3 | *:after { 4 | box-sizing: border-box; 5 | } 6 | 7 | html { 8 | font-family: sans-serif; 9 | font-size: 14px; 10 | } 11 | 12 | body { 13 | padding: 1rem; 14 | } 15 | 16 | .container { 17 | height: 600px; 18 | overflow: auto; 19 | } 20 | -------------------------------------------------------------------------------- /examples/react/table/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "composite": true, 3 | "compilerOptions": { 4 | "target": "ES2020", 5 | "useDefineForClassFields": true, 6 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 7 | "module": "ESNext", 8 | "skipLibCheck": true, 9 | 10 | /* Bundler mode */ 11 | "moduleResolution": "Bundler", 12 | "allowImportingTsExtensions": true, 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "noEmit": true, 16 | "jsx": "react-jsx", 17 | 18 | /* Linting */ 19 | "strict": true, 20 | "noUnusedLocals": true, 21 | "noUnusedParameters": true, 22 | "noFallthroughCasesInSwitch": true 23 | }, 24 | "include": ["src"] 25 | } 26 | -------------------------------------------------------------------------------- /examples/react/table/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /examples/react/variable/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local 6 | -------------------------------------------------------------------------------- /examples/react/variable/README.md: -------------------------------------------------------------------------------- 1 | # Example 2 | 3 | To run this example: 4 | 5 | - `npm install` or `yarn` 6 | - `npm run start` or `yarn start` 7 | -------------------------------------------------------------------------------- /examples/react/variable/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Vite App 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/react/variable/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tanstack-react-virtual-example-variable", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "vite build", 8 | "serve": "vite preview --port 3001", 9 | "start": "vite" 10 | }, 11 | "dependencies": { 12 | "@tanstack/react-virtual": "^3.13.9", 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1" 15 | }, 16 | "devDependencies": { 17 | "@types/react": "^18.3.23", 18 | "@types/react-dom": "^18.3.7", 19 | "@vitejs/plugin-react": "^4.5.0", 20 | "vite": "^5.4.19" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /examples/react/variable/src/index.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-family: sans-serif; 3 | font-size: 14px; 4 | } 5 | 6 | body { 7 | padding: 1rem; 8 | } 9 | 10 | .List { 11 | border: 1px solid #e6e4dc; 12 | max-width: 100%; 13 | } 14 | 15 | .ListItemEven, 16 | .ListItemOdd { 17 | display: flex; 18 | align-items: center; 19 | justify-content: center; 20 | } 21 | 22 | .ListItemEven { 23 | background-color: #e6e4dc; 24 | } 25 | 26 | button { 27 | border: 1px solid gray; 28 | } 29 | -------------------------------------------------------------------------------- /examples/react/variable/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "composite": true, 3 | "compilerOptions": { 4 | "target": "ES2020", 5 | "useDefineForClassFields": true, 6 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 7 | "module": "ESNext", 8 | "skipLibCheck": true, 9 | 10 | /* Bundler mode */ 11 | "moduleResolution": "Bundler", 12 | "allowImportingTsExtensions": true, 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "noEmit": true, 16 | "jsx": "react-jsx", 17 | 18 | /* Linting */ 19 | "strict": true, 20 | "noUnusedLocals": true, 21 | "noUnusedParameters": true, 22 | "noFallthroughCasesInSwitch": true 23 | }, 24 | "include": ["src"] 25 | } 26 | -------------------------------------------------------------------------------- /examples/react/variable/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | export default defineConfig({ 5 | plugins: [react()], 6 | }) 7 | -------------------------------------------------------------------------------- /examples/react/window/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local 6 | -------------------------------------------------------------------------------- /examples/react/window/README.md: -------------------------------------------------------------------------------- 1 | # Example 2 | 3 | To run this example: 4 | 5 | - `npm install` or `yarn` 6 | - `npm run start` or `yarn start` 7 | -------------------------------------------------------------------------------- /examples/react/window/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /examples/react/window/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tanstack-react-virtual-example-window", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "tsc && vite build", 8 | "serve": "vite preview" 9 | }, 10 | "dependencies": { 11 | "@tanstack/react-virtual": "^3.13.9", 12 | "react": "^18.3.1", 13 | "react-dom": "^18.3.1" 14 | }, 15 | "devDependencies": { 16 | "@types/node": "^22.13.6", 17 | "@types/react": "^18.3.23", 18 | "@types/react-dom": "^18.3.7", 19 | "@vitejs/plugin-react": "^4.5.0", 20 | "typescript": "5.2.2", 21 | "vite": "^5.4.19" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /examples/react/window/src/index.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-family: sans-serif; 3 | font-size: 14px; 4 | } 5 | 6 | body { 7 | padding: 1rem; 8 | } 9 | 10 | .List { 11 | border: 1px solid #e6e4dc; 12 | max-width: 100%; 13 | } 14 | 15 | .ListItemEven, 16 | .ListItemOdd { 17 | display: flex; 18 | align-items: center; 19 | justify-content: center; 20 | } 21 | 22 | .ListItemEven { 23 | background-color: #e6e4dc; 24 | } 25 | 26 | button { 27 | border: 1px solid gray; 28 | } 29 | -------------------------------------------------------------------------------- /examples/react/window/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "composite": true, 3 | "compilerOptions": { 4 | "target": "ES2020", 5 | "useDefineForClassFields": true, 6 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 7 | "module": "ESNext", 8 | "skipLibCheck": true, 9 | 10 | /* Bundler mode */ 11 | "moduleResolution": "Bundler", 12 | "allowImportingTsExtensions": true, 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "noEmit": true, 16 | "jsx": "react-jsx", 17 | 18 | /* Linting */ 19 | "strict": true, 20 | "noUnusedLocals": true, 21 | "noUnusedParameters": true, 22 | "noFallthroughCasesInSwitch": true 23 | }, 24 | "include": ["src"] 25 | } 26 | -------------------------------------------------------------------------------- /examples/react/window/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /examples/svelte/dynamic/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /examples/svelte/dynamic/README.md: -------------------------------------------------------------------------------- 1 | # Example 2 | 3 | To run this example: 4 | 5 | - `npm install` or `yarn` 6 | - `npm run dev` or `yarn dev` 7 | -------------------------------------------------------------------------------- /examples/svelte/dynamic/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /examples/svelte/dynamic/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tanstack-svelte-virtual-example-dynamic", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "vite build", 8 | "preview": "vite preview", 9 | "check": "svelte-check --tsconfig ./tsconfig.json" 10 | }, 11 | "dependencies": { 12 | "@faker-js/faker": "^8.4.1", 13 | "@tanstack/svelte-virtual": "^3.13.9" 14 | }, 15 | "devDependencies": { 16 | "@sveltejs/vite-plugin-svelte": "^3.1.2", 17 | "@tsconfig/svelte": "^5.0.4", 18 | "svelte": "^4.2.20", 19 | "svelte-check": "^4.2.1", 20 | "tslib": "^2.8.1", 21 | "typescript": "5.2.2", 22 | "vite": "^5.4.19" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /examples/svelte/dynamic/src/app.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-family: sans-serif; 3 | font-size: 14px; 4 | } 5 | 6 | body { 7 | padding: 1rem; 8 | } 9 | 10 | .list { 11 | border: 1px solid #e6e4dc; 12 | max-width: 100%; 13 | } 14 | 15 | .list-item-even, 16 | .list-item-odd { 17 | display: flex; 18 | align-items: center; 19 | justify-content: center; 20 | } 21 | 22 | .list-item-even { 23 | background-color: #e6e4dc; 24 | } 25 | 26 | button { 27 | border: 1px solid gray; 28 | } 29 | -------------------------------------------------------------------------------- /examples/svelte/dynamic/src/main.ts: -------------------------------------------------------------------------------- 1 | import './app.css' 2 | import App from './App.svelte' 3 | 4 | const app = new App({ 5 | target: document.getElementById('app')!, 6 | }) 7 | 8 | export default app 9 | -------------------------------------------------------------------------------- /examples/svelte/dynamic/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | -------------------------------------------------------------------------------- /examples/svelte/dynamic/svelte.config.js: -------------------------------------------------------------------------------- 1 | import { vitePreprocess } from '@sveltejs/vite-plugin-svelte' 2 | 3 | export default { 4 | // Consult https://svelte.dev/docs#compile-time-svelte-preprocess 5 | // for more information about preprocessors 6 | preprocess: vitePreprocess(), 7 | } 8 | -------------------------------------------------------------------------------- /examples/svelte/dynamic/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@tsconfig/svelte/tsconfig.json", 3 | "compilerOptions": { 4 | "target": "ESNext", 5 | "useDefineForClassFields": true, 6 | "module": "ESNext", 7 | "resolveJsonModule": true, 8 | /** 9 | * Typecheck JS in `.svelte` and `.js` files by default. 10 | * Disable checkJs if you'd like to use dynamic types in JS. 11 | * Note that setting allowJs false does not prevent the use 12 | * of JS in `.svelte` files. 13 | */ 14 | "allowJs": true, 15 | "checkJs": true, 16 | "isolatedModules": true 17 | }, 18 | "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"], 19 | "references": [{ "path": "./tsconfig.node.json" }] 20 | } 21 | -------------------------------------------------------------------------------- /examples/svelte/dynamic/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler" 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /examples/svelte/dynamic/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import { svelte } from '@sveltejs/vite-plugin-svelte' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [svelte()], 7 | }) 8 | -------------------------------------------------------------------------------- /examples/svelte/fixed/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /examples/svelte/fixed/README.md: -------------------------------------------------------------------------------- 1 | # Example 2 | 3 | To run this example: 4 | 5 | - `npm install` or `yarn` 6 | - `npm run dev` or `yarn dev` 7 | -------------------------------------------------------------------------------- /examples/svelte/fixed/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /examples/svelte/fixed/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tanstack-svelte-virtual-example-fixed", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "vite build", 8 | "preview": "vite preview", 9 | "check": "svelte-check --tsconfig ./tsconfig.json" 10 | }, 11 | "dependencies": { 12 | "@tanstack/svelte-virtual": "^3.13.9" 13 | }, 14 | "devDependencies": { 15 | "@sveltejs/vite-plugin-svelte": "^3.1.2", 16 | "@tsconfig/svelte": "^5.0.4", 17 | "svelte": "^4.2.20", 18 | "svelte-check": "^4.2.1", 19 | "tslib": "^2.8.1", 20 | "typescript": "5.2.2", 21 | "vite": "^5.4.19" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /examples/svelte/fixed/src/App.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 |
8 |

9 | These components are using fixed sizes. This means that every 10 | element's dimensions are hard-coded to the same value and never change. 11 |

12 |
13 |
14 | 15 |

Rows

16 | 17 |
18 |
19 |

Columns

20 | 21 |
22 |
23 |

Grid

24 | 25 |
26 | -------------------------------------------------------------------------------- /examples/svelte/fixed/src/ColumnVirtualizerFixed.svelte: -------------------------------------------------------------------------------- 1 | 14 | 15 |
16 |
19 | {#each $virtualizer.getVirtualItems() as col (col.index)} 20 |
25 | Column {col.index} 26 |
27 | {/each} 28 |
29 |
30 | 31 | 38 | -------------------------------------------------------------------------------- /examples/svelte/fixed/src/RowVirtualizerFixed.svelte: -------------------------------------------------------------------------------- 1 | 13 | 14 |
15 |
18 | {#each $virtualizer.getVirtualItems() as row (row.index)} 19 |
24 | Row {row.index} 25 |
26 | {/each} 27 |
28 |
29 | 30 | 37 | -------------------------------------------------------------------------------- /examples/svelte/fixed/src/app.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-family: sans-serif; 3 | font-size: 14px; 4 | } 5 | 6 | body { 7 | padding: 1rem; 8 | } 9 | 10 | .list { 11 | border: 1px solid #e6e4dc; 12 | max-width: 100%; 13 | } 14 | 15 | .list-item-even, 16 | .list-item-odd { 17 | display: flex; 18 | align-items: center; 19 | justify-content: center; 20 | } 21 | 22 | .list-item-even { 23 | background-color: #e6e4dc; 24 | } 25 | 26 | button { 27 | border: 1px solid gray; 28 | } 29 | -------------------------------------------------------------------------------- /examples/svelte/fixed/src/main.ts: -------------------------------------------------------------------------------- 1 | import './app.css' 2 | import App from './App.svelte' 3 | 4 | const app = new App({ 5 | target: document.getElementById('app')!, 6 | }) 7 | 8 | export default app 9 | -------------------------------------------------------------------------------- /examples/svelte/fixed/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | -------------------------------------------------------------------------------- /examples/svelte/fixed/svelte.config.js: -------------------------------------------------------------------------------- 1 | import { vitePreprocess } from '@sveltejs/vite-plugin-svelte' 2 | 3 | export default { 4 | // Consult https://svelte.dev/docs#compile-time-svelte-preprocess 5 | // for more information about preprocessors 6 | preprocess: vitePreprocess(), 7 | } 8 | -------------------------------------------------------------------------------- /examples/svelte/fixed/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@tsconfig/svelte/tsconfig.json", 3 | "compilerOptions": { 4 | "target": "ESNext", 5 | "useDefineForClassFields": true, 6 | "module": "ESNext", 7 | "resolveJsonModule": true, 8 | /** 9 | * Typecheck JS in `.svelte` and `.js` files by default. 10 | * Disable checkJs if you'd like to use dynamic types in JS. 11 | * Note that setting allowJs false does not prevent the use 12 | * of JS in `.svelte` files. 13 | */ 14 | "allowJs": true, 15 | "checkJs": true, 16 | "isolatedModules": true 17 | }, 18 | "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"], 19 | "references": [{ "path": "./tsconfig.node.json" }] 20 | } 21 | -------------------------------------------------------------------------------- /examples/svelte/fixed/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler" 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /examples/svelte/fixed/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import { svelte } from '@sveltejs/vite-plugin-svelte' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [svelte()], 7 | }) 8 | -------------------------------------------------------------------------------- /examples/svelte/infinite-scroll/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /examples/svelte/infinite-scroll/README.md: -------------------------------------------------------------------------------- 1 | # Example 2 | 3 | To run this example: 4 | 5 | - `npm install` or `yarn` 6 | - `npm run dev` or `yarn dev` 7 | -------------------------------------------------------------------------------- /examples/svelte/infinite-scroll/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /examples/svelte/infinite-scroll/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tanstack-svelte-virtual-example-infinite-scroll", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "vite build", 8 | "preview": "vite preview", 9 | "check": "svelte-check --tsconfig ./tsconfig.json" 10 | }, 11 | "dependencies": { 12 | "@tanstack/svelte-query": "^5.79.0", 13 | "@tanstack/svelte-virtual": "^3.13.9" 14 | }, 15 | "devDependencies": { 16 | "@sveltejs/vite-plugin-svelte": "^3.1.2", 17 | "@tsconfig/svelte": "^5.0.4", 18 | "svelte": "^4.2.20", 19 | "svelte-check": "^4.2.1", 20 | "tslib": "^2.8.1", 21 | "typescript": "5.2.2", 22 | "vite": "^5.4.19" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /examples/svelte/infinite-scroll/src/App.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /examples/svelte/infinite-scroll/src/app.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-family: sans-serif; 3 | font-size: 14px; 4 | } 5 | 6 | body { 7 | padding: 1rem; 8 | } 9 | 10 | .list { 11 | border: 1px solid #e6e4dc; 12 | max-width: 100%; 13 | } 14 | 15 | .list-item-even, 16 | .list-item-odd { 17 | display: flex; 18 | align-items: center; 19 | justify-content: center; 20 | } 21 | 22 | .list-item-even { 23 | background-color: #e6e4dc; 24 | } 25 | 26 | button { 27 | border: 1px solid gray; 28 | } 29 | -------------------------------------------------------------------------------- /examples/svelte/infinite-scroll/src/main.ts: -------------------------------------------------------------------------------- 1 | import './app.css' 2 | import App from './App.svelte' 3 | 4 | const app = new App({ 5 | target: document.getElementById('app')!, 6 | }) 7 | 8 | export default app 9 | -------------------------------------------------------------------------------- /examples/svelte/infinite-scroll/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | -------------------------------------------------------------------------------- /examples/svelte/infinite-scroll/svelte.config.js: -------------------------------------------------------------------------------- 1 | import { vitePreprocess } from '@sveltejs/vite-plugin-svelte' 2 | 3 | export default { 4 | // Consult https://svelte.dev/docs#compile-time-svelte-preprocess 5 | // for more information about preprocessors 6 | preprocess: vitePreprocess(), 7 | } 8 | -------------------------------------------------------------------------------- /examples/svelte/infinite-scroll/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@tsconfig/svelte/tsconfig.json", 3 | "compilerOptions": { 4 | "target": "ESNext", 5 | "useDefineForClassFields": true, 6 | "module": "ESNext", 7 | "resolveJsonModule": true, 8 | /** 9 | * Typecheck JS in `.svelte` and `.js` files by default. 10 | * Disable checkJs if you'd like to use dynamic types in JS. 11 | * Note that setting allowJs false does not prevent the use 12 | * of JS in `.svelte` files. 13 | */ 14 | "allowJs": true, 15 | "checkJs": true, 16 | "isolatedModules": true 17 | }, 18 | "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"], 19 | "references": [{ "path": "./tsconfig.node.json" }] 20 | } 21 | -------------------------------------------------------------------------------- /examples/svelte/infinite-scroll/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler" 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /examples/svelte/infinite-scroll/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import { svelte } from '@sveltejs/vite-plugin-svelte' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [svelte()], 7 | }) 8 | -------------------------------------------------------------------------------- /examples/svelte/smooth-scroll/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /examples/svelte/smooth-scroll/README.md: -------------------------------------------------------------------------------- 1 | # Example 2 | 3 | To run this example: 4 | 5 | - `npm install` or `yarn` 6 | - `npm run dev` or `yarn dev` 7 | -------------------------------------------------------------------------------- /examples/svelte/smooth-scroll/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /examples/svelte/smooth-scroll/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tanstack-svelte-virtual-example-smooth-scroll", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "vite build", 8 | "preview": "vite preview", 9 | "check": "svelte-check --tsconfig ./tsconfig.json" 10 | }, 11 | "dependencies": { 12 | "@faker-js/faker": "^8.4.1", 13 | "@tanstack/svelte-virtual": "^3.13.9" 14 | }, 15 | "devDependencies": { 16 | "@sveltejs/vite-plugin-svelte": "^3.1.2", 17 | "@tsconfig/svelte": "^5.0.4", 18 | "svelte": "^4.2.20", 19 | "svelte-check": "^4.2.1", 20 | "tslib": "^2.8.1", 21 | "typescript": "5.2.2", 22 | "vite": "^5.4.19" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /examples/svelte/smooth-scroll/src/app.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-family: sans-serif; 3 | font-size: 14px; 4 | } 5 | 6 | body { 7 | padding: 1rem; 8 | } 9 | 10 | .list { 11 | border: 1px solid #e6e4dc; 12 | max-width: 100%; 13 | } 14 | 15 | .list-item-even, 16 | .list-item-odd { 17 | display: flex; 18 | align-items: center; 19 | justify-content: center; 20 | } 21 | 22 | .list-item-even { 23 | background-color: #e6e4dc; 24 | } 25 | 26 | button { 27 | border: 1px solid gray; 28 | } 29 | -------------------------------------------------------------------------------- /examples/svelte/smooth-scroll/src/main.ts: -------------------------------------------------------------------------------- 1 | import './app.css' 2 | import App from './App.svelte' 3 | 4 | const app = new App({ 5 | target: document.getElementById('app')!, 6 | }) 7 | 8 | export default app 9 | -------------------------------------------------------------------------------- /examples/svelte/smooth-scroll/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | -------------------------------------------------------------------------------- /examples/svelte/smooth-scroll/svelte.config.js: -------------------------------------------------------------------------------- 1 | import { vitePreprocess } from '@sveltejs/vite-plugin-svelte' 2 | 3 | export default { 4 | // Consult https://svelte.dev/docs#compile-time-svelte-preprocess 5 | // for more information about preprocessors 6 | preprocess: vitePreprocess(), 7 | } 8 | -------------------------------------------------------------------------------- /examples/svelte/smooth-scroll/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@tsconfig/svelte/tsconfig.json", 3 | "compilerOptions": { 4 | "target": "ESNext", 5 | "useDefineForClassFields": true, 6 | "module": "ESNext", 7 | "resolveJsonModule": true, 8 | /** 9 | * Typecheck JS in `.svelte` and `.js` files by default. 10 | * Disable checkJs if you'd like to use dynamic types in JS. 11 | * Note that setting allowJs false does not prevent the use 12 | * of JS in `.svelte` files. 13 | */ 14 | "allowJs": true, 15 | "checkJs": true, 16 | "isolatedModules": true 17 | }, 18 | "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"], 19 | "references": [{ "path": "./tsconfig.node.json" }] 20 | } 21 | -------------------------------------------------------------------------------- /examples/svelte/smooth-scroll/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler" 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /examples/svelte/smooth-scroll/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import { svelte } from '@sveltejs/vite-plugin-svelte' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [svelte()], 7 | }) 8 | -------------------------------------------------------------------------------- /examples/svelte/sticky/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /examples/svelte/sticky/README.md: -------------------------------------------------------------------------------- 1 | # Example 2 | 3 | To run this example: 4 | 5 | - `npm install` or `yarn` 6 | - `npm run dev` or `yarn dev` 7 | -------------------------------------------------------------------------------- /examples/svelte/sticky/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /examples/svelte/sticky/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tanstack-svelte-virtual-example-sticky", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "vite build", 8 | "preview": "vite preview", 9 | "check": "svelte-check --tsconfig ./tsconfig.json" 10 | }, 11 | "dependencies": { 12 | "@faker-js/faker": "^8.4.1", 13 | "@tanstack/svelte-virtual": "^3.13.9", 14 | "lodash": "^4.17.21" 15 | }, 16 | "devDependencies": { 17 | "@sveltejs/vite-plugin-svelte": "^3.1.2", 18 | "@tsconfig/svelte": "^5.0.4", 19 | "svelte": "^4.2.20", 20 | "svelte-check": "^4.2.1", 21 | "tslib": "^2.8.1", 22 | "typescript": "5.2.2", 23 | "vite": "^5.4.19" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /examples/svelte/sticky/src/app.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-family: sans-serif; 3 | font-size: 14px; 4 | } 5 | 6 | body { 7 | padding: 1rem; 8 | } 9 | 10 | .list { 11 | border: 1px solid #e6e4dc; 12 | max-width: 100%; 13 | } 14 | 15 | .list-item-even, 16 | .list-item-odd { 17 | display: flex; 18 | align-items: center; 19 | justify-content: center; 20 | } 21 | 22 | .list-item-even { 23 | background-color: #e6e4dc; 24 | } 25 | 26 | button { 27 | border: 1px solid gray; 28 | } 29 | -------------------------------------------------------------------------------- /examples/svelte/sticky/src/main.ts: -------------------------------------------------------------------------------- 1 | import './app.css' 2 | import App from './App.svelte' 3 | 4 | const app = new App({ 5 | target: document.getElementById('app')!, 6 | }) 7 | 8 | export default app 9 | -------------------------------------------------------------------------------- /examples/svelte/sticky/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | -------------------------------------------------------------------------------- /examples/svelte/sticky/svelte.config.js: -------------------------------------------------------------------------------- 1 | import { vitePreprocess } from '@sveltejs/vite-plugin-svelte' 2 | 3 | export default { 4 | // Consult https://svelte.dev/docs#compile-time-svelte-preprocess 5 | // for more information about preprocessors 6 | preprocess: vitePreprocess(), 7 | } 8 | -------------------------------------------------------------------------------- /examples/svelte/sticky/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@tsconfig/svelte/tsconfig.json", 3 | "compilerOptions": { 4 | "target": "ESNext", 5 | "useDefineForClassFields": true, 6 | "module": "ESNext", 7 | "resolveJsonModule": true, 8 | /** 9 | * Typecheck JS in `.svelte` and `.js` files by default. 10 | * Disable checkJs if you'd like to use dynamic types in JS. 11 | * Note that setting allowJs false does not prevent the use 12 | * of JS in `.svelte` files. 13 | */ 14 | "allowJs": true, 15 | "checkJs": true, 16 | "isolatedModules": true 17 | }, 18 | "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"], 19 | "references": [{ "path": "./tsconfig.node.json" }] 20 | } 21 | -------------------------------------------------------------------------------- /examples/svelte/sticky/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler" 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /examples/svelte/sticky/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import { svelte } from '@sveltejs/vite-plugin-svelte' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [svelte()], 7 | }) 8 | -------------------------------------------------------------------------------- /examples/svelte/table/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /examples/svelte/table/README.md: -------------------------------------------------------------------------------- 1 | # Example 2 | 3 | To run this example: 4 | 5 | - `npm install` or `yarn` 6 | - `npm run dev` or `yarn dev` 7 | -------------------------------------------------------------------------------- /examples/svelte/table/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /examples/svelte/table/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tanstack-svelte-virtual-example-table", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "vite build", 8 | "preview": "vite preview", 9 | "check": "svelte-check --tsconfig ./tsconfig.json" 10 | }, 11 | "dependencies": { 12 | "@faker-js/faker": "^8.4.1", 13 | "@tanstack/svelte-table": "^8.21.3", 14 | "@tanstack/svelte-virtual": "^3.13.9" 15 | }, 16 | "devDependencies": { 17 | "@sveltejs/vite-plugin-svelte": "^3.1.2", 18 | "@tsconfig/svelte": "^5.0.4", 19 | "svelte": "^4.2.20", 20 | "svelte-check": "^4.2.1", 21 | "tslib": "^2.8.1", 22 | "typescript": "5.2.2", 23 | "vite": "^5.4.19" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /examples/svelte/table/src/app.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-family: sans-serif; 3 | font-size: 14px; 4 | } 5 | 6 | body { 7 | padding: 1rem; 8 | } 9 | 10 | .list { 11 | border: 1px solid #e6e4dc; 12 | max-width: 100%; 13 | } 14 | 15 | .list-item-even, 16 | .list-item-odd { 17 | display: flex; 18 | align-items: center; 19 | justify-content: center; 20 | } 21 | 22 | .list-item-even { 23 | background-color: #e6e4dc; 24 | } 25 | 26 | button { 27 | border: 1px solid gray; 28 | } 29 | -------------------------------------------------------------------------------- /examples/svelte/table/src/main.ts: -------------------------------------------------------------------------------- 1 | import './app.css' 2 | import App from './App.svelte' 3 | 4 | const app = new App({ 5 | target: document.getElementById('app')!, 6 | }) 7 | 8 | export default app 9 | -------------------------------------------------------------------------------- /examples/svelte/table/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | -------------------------------------------------------------------------------- /examples/svelte/table/svelte.config.js: -------------------------------------------------------------------------------- 1 | import { vitePreprocess } from '@sveltejs/vite-plugin-svelte' 2 | 3 | export default { 4 | // Consult https://svelte.dev/docs#compile-time-svelte-preprocess 5 | // for more information about preprocessors 6 | preprocess: vitePreprocess(), 7 | } 8 | -------------------------------------------------------------------------------- /examples/svelte/table/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@tsconfig/svelte/tsconfig.json", 3 | "compilerOptions": { 4 | "target": "ESNext", 5 | "useDefineForClassFields": true, 6 | "module": "ESNext", 7 | "resolveJsonModule": true, 8 | /** 9 | * Typecheck JS in `.svelte` and `.js` files by default. 10 | * Disable checkJs if you'd like to use dynamic types in JS. 11 | * Note that setting allowJs false does not prevent the use 12 | * of JS in `.svelte` files. 13 | */ 14 | "allowJs": true, 15 | "checkJs": true, 16 | "isolatedModules": true 17 | }, 18 | "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"], 19 | "references": [{ "path": "./tsconfig.node.json" }] 20 | } 21 | -------------------------------------------------------------------------------- /examples/svelte/table/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler" 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /examples/svelte/table/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import { svelte } from '@sveltejs/vite-plugin-svelte' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [svelte()], 7 | }) 8 | -------------------------------------------------------------------------------- /examples/vue/dynamic/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /examples/vue/dynamic/README.md: -------------------------------------------------------------------------------- 1 | # Example 2 | 3 | To run this example: 4 | 5 | - `npm install` or `yarn` 6 | - `npm run dev` or `yarn dev` 7 | -------------------------------------------------------------------------------- /examples/vue/dynamic/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + Vue + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/vue/dynamic/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tanstack-vue-virtual-example-dynamic", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "vite build", 8 | "preview": "vite preview" 9 | }, 10 | "dependencies": { 11 | "@faker-js/faker": "^8.4.1", 12 | "@tanstack/vue-virtual": "^3.13.9", 13 | "vue": "^3.5.16" 14 | }, 15 | "devDependencies": { 16 | "@codesandbox/vue-preview": "^0.1.1-alpha.16", 17 | "@vitejs/plugin-vue": "^5.2.4", 18 | "typescript": "5.2.2", 19 | "vite": "^5.4.19", 20 | "vue-tsc": "^2.2.10" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /examples/vue/dynamic/src/components/utils.ts: -------------------------------------------------------------------------------- 1 | import { faker } from '@faker-js/faker' 2 | 3 | interface Column { 4 | key: string 5 | name: string 6 | width: number 7 | } 8 | 9 | export const generateRandomNumber = (min: number, max: number) => 10 | faker.number.int({ min, max }) 11 | 12 | export const generateSentences = () => 13 | new Array(10000) 14 | .fill(true) 15 | .map(() => faker.lorem.sentence(generateRandomNumber(20, 70))) 16 | 17 | export const generateColumns = (count: number) => { 18 | return new Array(count).fill(0).map((_, i) => { 19 | const key: string = i.toString() 20 | return { 21 | key, 22 | name: `Column ${i}`, 23 | width: generateRandomNumber(75, 300), 24 | } 25 | }) 26 | } 27 | 28 | export const generateData = (columns: Column[], count = 300) => { 29 | return new Array(count).fill(0).map((_, rowIndex) => 30 | columns.reduce((acc, _curr, colIndex) => { 31 | // simulate dynamic size cells 32 | const val = faker.lorem.lines(((rowIndex + colIndex) % 10) + 1) 33 | 34 | acc.push(val) 35 | 36 | return acc 37 | }, []), 38 | ) 39 | } 40 | -------------------------------------------------------------------------------- /examples/vue/dynamic/src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import './style.css' 3 | import App from './App.vue' 4 | 5 | createApp(App).mount('#app') 6 | -------------------------------------------------------------------------------- /examples/vue/dynamic/src/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | *:before, 3 | *:after { 4 | box-sizing: border-box; 5 | } 6 | 7 | html { 8 | font-family: sans-serif; 9 | font-size: 14px; 10 | } 11 | 12 | body { 13 | padding: 1rem; 14 | } 15 | 16 | .List { 17 | border: 1px solid #e6e4dc; 18 | max-width: 100%; 19 | } 20 | 21 | .ListItemEven { 22 | background-color: #e6e4dc; 23 | } 24 | -------------------------------------------------------------------------------- /examples/vue/dynamic/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/vue/dynamic/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "module": "ESNext", 6 | "moduleResolution": "Node", 7 | "strict": true, 8 | "jsx": "preserve", 9 | "resolveJsonModule": true, 10 | "isolatedModules": true, 11 | "esModuleInterop": true, 12 | "lib": ["ESNext", "DOM"], 13 | "skipLibCheck": true, 14 | "noEmit": true, 15 | "noImplicitAny": false // Remove 16 | }, 17 | "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], 18 | "references": [{ "path": "./tsconfig.node.json" }] 19 | } 20 | -------------------------------------------------------------------------------- /examples/vue/dynamic/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "allowSyntheticDefaultImports": true 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /examples/vue/dynamic/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import vue from '@vitejs/plugin-vue' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [vue()], 7 | }) 8 | -------------------------------------------------------------------------------- /examples/vue/fixed/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /examples/vue/fixed/README.md: -------------------------------------------------------------------------------- 1 | # Example 2 | 3 | To run this example: 4 | 5 | - `npm install` or `yarn` 6 | - `npm run dev` or `yarn dev` 7 | -------------------------------------------------------------------------------- /examples/vue/fixed/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + Vue + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/vue/fixed/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tanstack-vue-virtual-example-fixed", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "vite build", 8 | "preview": "vite preview" 9 | }, 10 | "dependencies": { 11 | "@tanstack/vue-virtual": "^3.13.9", 12 | "vue": "^3.5.16" 13 | }, 14 | "devDependencies": { 15 | "@codesandbox/vue-preview": "^0.1.1-alpha.16", 16 | "@vitejs/plugin-vue": "^5.2.4", 17 | "typescript": "5.2.2", 18 | "vite": "^5.4.19", 19 | "vue-tsc": "^2.2.10" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /examples/vue/fixed/src/App.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 29 | -------------------------------------------------------------------------------- /examples/vue/fixed/src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import './style.css' 3 | import App from './App.vue' 4 | 5 | createApp(App).mount('#app') 6 | -------------------------------------------------------------------------------- /examples/vue/fixed/src/style.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-family: sans-serif; 3 | font-size: 14px; 4 | } 5 | 6 | body { 7 | padding: 1rem; 8 | } 9 | 10 | .List { 11 | border: 1px solid #e6e4dc; 12 | max-width: 100%; 13 | } 14 | 15 | .ListItemEven, 16 | .ListItemOdd { 17 | display: flex; 18 | align-items: center; 19 | justify-content: center; 20 | } 21 | 22 | .ListItemEven { 23 | background-color: #e6e4dc; 24 | } 25 | 26 | button { 27 | border: 1px solid gray; 28 | } 29 | -------------------------------------------------------------------------------- /examples/vue/fixed/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/vue/fixed/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "module": "ESNext", 6 | "moduleResolution": "Node", 7 | "strict": true, 8 | "jsx": "preserve", 9 | "resolveJsonModule": true, 10 | "isolatedModules": true, 11 | "esModuleInterop": true, 12 | "lib": ["ESNext", "DOM"], 13 | "skipLibCheck": true, 14 | "noEmit": true 15 | }, 16 | "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], 17 | "references": [{ "path": "./tsconfig.node.json" }] 18 | } 19 | -------------------------------------------------------------------------------- /examples/vue/fixed/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "allowSyntheticDefaultImports": true 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /examples/vue/fixed/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import vue from '@vitejs/plugin-vue' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [vue()], 7 | }) 8 | -------------------------------------------------------------------------------- /examples/vue/infinite-scroll/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /examples/vue/infinite-scroll/README.md: -------------------------------------------------------------------------------- 1 | # Example 2 | 3 | To run this example: 4 | 5 | - `npm install` or `yarn` 6 | - `npm run dev` or `yarn dev` 7 | -------------------------------------------------------------------------------- /examples/vue/infinite-scroll/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + Vue + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/vue/infinite-scroll/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tanstack-vue-virtual-example-infinite-scroll", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "vite build", 8 | "preview": "vite preview" 9 | }, 10 | "dependencies": { 11 | "@tanstack/vue-query": "^5.79.0", 12 | "@tanstack/vue-virtual": "^3.13.9", 13 | "vue": "^3.5.16" 14 | }, 15 | "devDependencies": { 16 | "@codesandbox/vue-preview": "^0.1.1-alpha.16", 17 | "@vitejs/plugin-vue": "^5.2.4", 18 | "typescript": "5.2.2", 19 | "vite": "^5.4.19", 20 | "vue-tsc": "^2.2.10" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /examples/vue/infinite-scroll/src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import { VueQueryPlugin } from '@tanstack/vue-query' 3 | import './style.css' 4 | import App from './App.vue' 5 | 6 | const app = createApp(App) 7 | app.use(VueQueryPlugin) 8 | app.mount('#app') 9 | -------------------------------------------------------------------------------- /examples/vue/infinite-scroll/src/style.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-family: sans-serif; 3 | font-size: 14px; 4 | } 5 | 6 | body { 7 | padding: 1rem; 8 | } 9 | 10 | .List { 11 | border: 1px solid #e6e4dc; 12 | max-width: 100%; 13 | } 14 | 15 | .ListItemEven, 16 | .ListItemOdd { 17 | display: flex; 18 | align-items: center; 19 | justify-content: center; 20 | } 21 | 22 | .ListItemEven { 23 | background-color: #e6e4dc; 24 | } 25 | 26 | button { 27 | border: 1px solid gray; 28 | } 29 | -------------------------------------------------------------------------------- /examples/vue/infinite-scroll/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/vue/infinite-scroll/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "module": "ESNext", 6 | "moduleResolution": "Node", 7 | "strict": true, 8 | "jsx": "preserve", 9 | "resolveJsonModule": true, 10 | "isolatedModules": true, 11 | "esModuleInterop": true, 12 | "lib": ["ESNext", "DOM"], 13 | "skipLibCheck": true, 14 | "noEmit": true 15 | }, 16 | "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], 17 | "references": [{ "path": "./tsconfig.node.json" }] 18 | } 19 | -------------------------------------------------------------------------------- /examples/vue/infinite-scroll/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "allowSyntheticDefaultImports": true 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /examples/vue/infinite-scroll/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import vue from '@vitejs/plugin-vue' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [vue()], 7 | }) 8 | -------------------------------------------------------------------------------- /examples/vue/padding/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /examples/vue/padding/README.md: -------------------------------------------------------------------------------- 1 | # Example 2 | 3 | To run this example: 4 | 5 | - `npm install` or `yarn` 6 | - `npm run dev` or `yarn dev` 7 | -------------------------------------------------------------------------------- /examples/vue/padding/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + Vue + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/vue/padding/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tanstack-vue-virtual-example-padding", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "vite build", 8 | "preview": "vite preview" 9 | }, 10 | "dependencies": { 11 | "@tanstack/vue-virtual": "^3.13.9", 12 | "vue": "^3.5.16" 13 | }, 14 | "devDependencies": { 15 | "@codesandbox/vue-preview": "^0.1.1-alpha.16", 16 | "@vitejs/plugin-vue": "^5.2.4", 17 | "typescript": "5.2.2", 18 | "vite": "^5.4.19", 19 | "vue-tsc": "^2.2.10" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /examples/vue/padding/src/App.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 36 | -------------------------------------------------------------------------------- /examples/vue/padding/src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import './style.css' 3 | import App from './App.vue' 4 | 5 | createApp(App).mount('#app') 6 | -------------------------------------------------------------------------------- /examples/vue/padding/src/style.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-family: sans-serif; 3 | font-size: 14px; 4 | } 5 | 6 | body { 7 | padding: 1rem; 8 | } 9 | 10 | .List { 11 | border: 1px solid #e6e4dc; 12 | max-width: 100%; 13 | } 14 | 15 | .ListItemEven, 16 | .ListItemOdd { 17 | display: flex; 18 | align-items: center; 19 | justify-content: center; 20 | } 21 | 22 | .ListItemEven { 23 | background-color: #e6e4dc; 24 | } 25 | 26 | button { 27 | border: 1px solid gray; 28 | } 29 | -------------------------------------------------------------------------------- /examples/vue/padding/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/vue/padding/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "module": "ESNext", 6 | "moduleResolution": "Node", 7 | "strict": true, 8 | "jsx": "preserve", 9 | "resolveJsonModule": true, 10 | "isolatedModules": true, 11 | "esModuleInterop": true, 12 | "lib": ["ESNext", "DOM"], 13 | "skipLibCheck": true, 14 | "noEmit": true 15 | }, 16 | "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], 17 | "references": [{ "path": "./tsconfig.node.json" }] 18 | } 19 | -------------------------------------------------------------------------------- /examples/vue/padding/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "allowSyntheticDefaultImports": true 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /examples/vue/padding/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import vue from '@vitejs/plugin-vue' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [vue()], 7 | }) 8 | -------------------------------------------------------------------------------- /examples/vue/scroll-padding/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /examples/vue/scroll-padding/README.md: -------------------------------------------------------------------------------- 1 | # Example 2 | 3 | To run this example: 4 | 5 | - `npm install` or `yarn` 6 | - `npm run dev` or `yarn dev` 7 | -------------------------------------------------------------------------------- /examples/vue/scroll-padding/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + Vue + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/vue/scroll-padding/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tanstack-vue-virtual-example-scroll-padding", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "vite build", 8 | "preview": "vite preview" 9 | }, 10 | "dependencies": { 11 | "@tanstack/vue-virtual": "^3.13.9", 12 | "@vueuse/core": "^12.8.2", 13 | "vue": "^3.5.16" 14 | }, 15 | "devDependencies": { 16 | "@codesandbox/vue-preview": "^0.1.1-alpha.16", 17 | "@vitejs/plugin-vue": "^5.2.4", 18 | "typescript": "5.2.2", 19 | "vite": "^5.4.19", 20 | "vue-tsc": "^2.2.10" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /examples/vue/scroll-padding/src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import './style.css' 3 | import App from './App.vue' 4 | 5 | createApp(App).mount('#app') 6 | -------------------------------------------------------------------------------- /examples/vue/scroll-padding/src/style.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-family: sans-serif; 3 | font-size: 14px; 4 | } 5 | 6 | .List table { 7 | background-color: #fff; 8 | border: 1px solid #e6e4dc; 9 | max-width: 100%; 10 | border-collapse: collapse; 11 | 12 | display: flex; 13 | flex-direction: column; 14 | align-items: stretch; 15 | position: relative; 16 | } 17 | 18 | .List thead { 19 | display: flex; 20 | flex-direction: column; 21 | background-color: #fff; 22 | 23 | position: sticky; 24 | top: 0; 25 | z-index: 1; 26 | } 27 | 28 | .List thead tr { 29 | height: 70px; 30 | } 31 | 32 | .List tr { 33 | display: flex; 34 | flex-direction: row; 35 | } 36 | 37 | .List td, 38 | .List th { 39 | display: flex; 40 | flex-direction: row; 41 | align-items: center; 42 | justify-content: center; 43 | width: 180px; 44 | } 45 | 46 | .ListItemEven { 47 | background-color: #e6e4dc; 48 | } 49 | -------------------------------------------------------------------------------- /examples/vue/scroll-padding/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/vue/scroll-padding/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "module": "ESNext", 6 | "moduleResolution": "Node", 7 | "strict": true, 8 | "jsx": "preserve", 9 | "resolveJsonModule": true, 10 | "isolatedModules": true, 11 | "esModuleInterop": true, 12 | "lib": ["ESNext", "DOM"], 13 | "skipLibCheck": true, 14 | "noEmit": true 15 | }, 16 | "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], 17 | "references": [{ "path": "./tsconfig.node.json" }] 18 | } 19 | -------------------------------------------------------------------------------- /examples/vue/scroll-padding/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "allowSyntheticDefaultImports": true 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /examples/vue/scroll-padding/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import vue from '@vitejs/plugin-vue' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [vue()], 7 | }) 8 | -------------------------------------------------------------------------------- /examples/vue/smooth-scroll/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /examples/vue/smooth-scroll/README.md: -------------------------------------------------------------------------------- 1 | # Example 2 | 3 | To run this example: 4 | 5 | - `npm install` or `yarn` 6 | - `npm run dev` or `yarn dev` 7 | -------------------------------------------------------------------------------- /examples/vue/smooth-scroll/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + Vue + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/vue/smooth-scroll/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tanstack-vue-virtual-example-smooth-scroll", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "vite build", 8 | "preview": "vite preview" 9 | }, 10 | "dependencies": { 11 | "@tanstack/vue-virtual": "^3.13.9", 12 | "vue": "^3.5.16" 13 | }, 14 | "devDependencies": { 15 | "@codesandbox/vue-preview": "^0.1.1-alpha.16", 16 | "@vitejs/plugin-vue": "^5.2.4", 17 | "typescript": "5.2.2", 18 | "vite": "^5.4.19", 19 | "vue-tsc": "^2.2.10" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /examples/vue/smooth-scroll/src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import './style.css' 3 | import App from './App.vue' 4 | 5 | createApp(App).mount('#app') 6 | -------------------------------------------------------------------------------- /examples/vue/smooth-scroll/src/style.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-family: sans-serif; 3 | font-size: 14px; 4 | } 5 | 6 | body { 7 | padding: 1rem; 8 | } 9 | 10 | .List { 11 | border: 1px solid #e6e4dc; 12 | max-width: 100%; 13 | } 14 | 15 | .ListItemEven, 16 | .ListItemOdd { 17 | display: flex; 18 | align-items: center; 19 | justify-content: center; 20 | } 21 | 22 | .ListItemEven { 23 | background-color: #e6e4dc; 24 | } 25 | 26 | button { 27 | border: 1px solid gray; 28 | } 29 | -------------------------------------------------------------------------------- /examples/vue/smooth-scroll/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/vue/smooth-scroll/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "module": "ESNext", 6 | "moduleResolution": "Node", 7 | "strict": true, 8 | "jsx": "preserve", 9 | "resolveJsonModule": true, 10 | "isolatedModules": true, 11 | "esModuleInterop": true, 12 | "lib": ["ESNext", "DOM"], 13 | "skipLibCheck": true, 14 | "noEmit": true 15 | }, 16 | "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], 17 | "references": [{ "path": "./tsconfig.node.json" }] 18 | } 19 | -------------------------------------------------------------------------------- /examples/vue/smooth-scroll/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "allowSyntheticDefaultImports": true 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /examples/vue/smooth-scroll/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import vue from '@vitejs/plugin-vue' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [vue()], 7 | }) 8 | -------------------------------------------------------------------------------- /examples/vue/sticky/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /examples/vue/sticky/README.md: -------------------------------------------------------------------------------- 1 | # Example 2 | 3 | To run this example: 4 | 5 | - `npm install` or `yarn` 6 | - `npm run dev` or `yarn dev` 7 | -------------------------------------------------------------------------------- /examples/vue/sticky/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + Vue + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/vue/sticky/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tanstack-vue-virtual-example-sticky", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "vite build", 8 | "preview": "vite preview" 9 | }, 10 | "dependencies": { 11 | "@faker-js/faker": "^8.4.1", 12 | "@tanstack/vue-virtual": "^3.13.9", 13 | "lodash": "^4.17.21", 14 | "vue": "^3.5.16" 15 | }, 16 | "devDependencies": { 17 | "@codesandbox/vue-preview": "^0.1.1-alpha.16", 18 | "@types/lodash": "^4.17.17", 19 | "@vitejs/plugin-vue": "^5.2.4", 20 | "typescript": "5.2.2", 21 | "vite": "^5.4.19", 22 | "vue-tsc": "^2.2.10" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /examples/vue/sticky/src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import './style.css' 3 | import App from './App.vue' 4 | 5 | createApp(App).mount('#app') 6 | -------------------------------------------------------------------------------- /examples/vue/sticky/src/style.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-family: sans-serif; 3 | font-size: 14px; 4 | } 5 | 6 | body { 7 | padding: 1rem; 8 | } 9 | 10 | .List { 11 | border: 1px solid #e6e4dc; 12 | max-width: 100%; 13 | } 14 | 15 | .ListItemEven, 16 | .ListItemOdd { 17 | display: flex; 18 | align-items: center; 19 | justify-content: center; 20 | } 21 | 22 | .ListItemEven { 23 | background-color: #e6e4dc; 24 | } 25 | 26 | button { 27 | border: 1px solid gray; 28 | } 29 | -------------------------------------------------------------------------------- /examples/vue/sticky/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/vue/sticky/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "module": "ESNext", 6 | "moduleResolution": "Node", 7 | "strict": true, 8 | "jsx": "preserve", 9 | "resolveJsonModule": true, 10 | "isolatedModules": true, 11 | "esModuleInterop": true, 12 | "lib": ["ESNext", "DOM"], 13 | "skipLibCheck": true, 14 | "noEmit": true 15 | }, 16 | "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], 17 | "references": [{ "path": "./tsconfig.node.json" }] 18 | } 19 | -------------------------------------------------------------------------------- /examples/vue/sticky/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "allowSyntheticDefaultImports": true 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /examples/vue/sticky/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import vue from '@vitejs/plugin-vue' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [vue()], 7 | }) 8 | -------------------------------------------------------------------------------- /examples/vue/table/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /examples/vue/table/README.md: -------------------------------------------------------------------------------- 1 | # Example 2 | 3 | To run this example: 4 | 5 | - `npm install` or `yarn` 6 | - `npm run dev` or `yarn dev` 7 | -------------------------------------------------------------------------------- /examples/vue/table/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + Vue + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/vue/table/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tanstack-vue-virtual-example-table", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "vite build", 8 | "preview": "vite preview" 9 | }, 10 | "dependencies": { 11 | "@faker-js/faker": "^8.4.1", 12 | "@tanstack/vue-table": "^8.21.3", 13 | "@tanstack/vue-virtual": "^3.13.9", 14 | "vue": "^3.5.16" 15 | }, 16 | "devDependencies": { 17 | "@codesandbox/vue-preview": "^0.1.1-alpha.16", 18 | "@vitejs/plugin-vue": "^5.2.4", 19 | "typescript": "5.2.2", 20 | "vite": "^5.4.19", 21 | "vue-tsc": "^2.2.10" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /examples/vue/table/src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import './style.css' 3 | import App from './App.vue' 4 | 5 | createApp(App).mount('#app') 6 | -------------------------------------------------------------------------------- /examples/vue/table/src/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | *:before, 3 | *:after { 4 | box-sizing: border-box; 5 | } 6 | 7 | html { 8 | font-family: sans-serif; 9 | font-size: 14px; 10 | } 11 | 12 | body { 13 | padding: 1rem; 14 | } 15 | 16 | .container { 17 | height: 600px; 18 | overflow: auto; 19 | } 20 | 21 | .cursor-pointer { 22 | cursor: pointer; 23 | } 24 | 25 | .select-none { 26 | user-select: none; 27 | } 28 | 29 | .text-left { 30 | text-align: left; 31 | } 32 | -------------------------------------------------------------------------------- /examples/vue/table/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/vue/table/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "module": "ESNext", 6 | "moduleResolution": "Node", 7 | "strict": true, 8 | "jsx": "preserve", 9 | "resolveJsonModule": true, 10 | "isolatedModules": true, 11 | "esModuleInterop": true, 12 | "lib": ["ESNext", "DOM"], 13 | "skipLibCheck": true, 14 | "noEmit": true 15 | }, 16 | "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], 17 | "references": [{ "path": "./tsconfig.node.json" }] 18 | } 19 | -------------------------------------------------------------------------------- /examples/vue/table/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "allowSyntheticDefaultImports": true 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /examples/vue/table/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import vue from '@vitejs/plugin-vue' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [vue()], 7 | }) 8 | -------------------------------------------------------------------------------- /examples/vue/variable/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /examples/vue/variable/README.md: -------------------------------------------------------------------------------- 1 | # Example 2 | 3 | To run this example: 4 | 5 | - `npm install` or `yarn` 6 | - `npm run dev` or `yarn dev` 7 | -------------------------------------------------------------------------------- /examples/vue/variable/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + Vue + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/vue/variable/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tanstack-vue-virtual-example-variable", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "vite build", 8 | "preview": "vite preview" 9 | }, 10 | "dependencies": { 11 | "@tanstack/vue-virtual": "^3.13.9", 12 | "vue": "^3.5.16" 13 | }, 14 | "devDependencies": { 15 | "@codesandbox/vue-preview": "^0.1.1-alpha.16", 16 | "@vitejs/plugin-vue": "^5.2.4", 17 | "typescript": "5.2.2", 18 | "vite": "^5.4.19", 19 | "vue-tsc": "^2.2.10" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /examples/vue/variable/src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import './style.css' 3 | import App from './App.vue' 4 | 5 | createApp(App).mount('#app') 6 | -------------------------------------------------------------------------------- /examples/vue/variable/src/style.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-family: sans-serif; 3 | font-size: 14px; 4 | } 5 | 6 | body { 7 | padding: 1rem; 8 | } 9 | 10 | .List { 11 | border: 1px solid #e6e4dc; 12 | max-width: 100%; 13 | } 14 | 15 | .ListItemEven, 16 | .ListItemOdd { 17 | display: flex; 18 | align-items: center; 19 | justify-content: center; 20 | } 21 | 22 | .ListItemEven { 23 | background-color: #e6e4dc; 24 | } 25 | 26 | button { 27 | border: 1px solid gray; 28 | } 29 | -------------------------------------------------------------------------------- /examples/vue/variable/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | // 2 | -------------------------------------------------------------------------------- /examples/vue/variable/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "module": "ESNext", 6 | "moduleResolution": "Node", 7 | "strict": true, 8 | "jsx": "preserve", 9 | "resolveJsonModule": true, 10 | "isolatedModules": true, 11 | "esModuleInterop": true, 12 | "lib": ["ESNext", "DOM"], 13 | "skipLibCheck": true, 14 | "noEmit": true 15 | }, 16 | "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], 17 | "references": [{ "path": "./tsconfig.node.json" }] 18 | } 19 | -------------------------------------------------------------------------------- /examples/vue/variable/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "allowSyntheticDefaultImports": true 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /examples/vue/variable/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import vue from '@vitejs/plugin-vue' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [vue()], 7 | }) 8 | -------------------------------------------------------------------------------- /knip.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://unpkg.com/knip@5/schema.json", 3 | "ignoreWorkspaces": ["examples/**"] 4 | } 5 | -------------------------------------------------------------------------------- /media/header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TanStack/virtual/d3ee61826acd19bcd41f082f61c9427d93b2832d/media/header.png -------------------------------------------------------------------------------- /media/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TanStack/virtual/d3ee61826acd19bcd41f082f61c9427d93b2832d/media/logo.png -------------------------------------------------------------------------------- /media/logo.sketch: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TanStack/virtual/d3ee61826acd19bcd41f082f61c9427d93b2832d/media/logo.sketch -------------------------------------------------------------------------------- /media/repo-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TanStack/virtual/d3ee61826acd19bcd41f082f61c9427d93b2832d/media/repo-dark.png -------------------------------------------------------------------------------- /packages/angular-virtual/eslint.config.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | 3 | import rootConfig from '../../eslint.config.js' 4 | 5 | export default [...rootConfig] 6 | -------------------------------------------------------------------------------- /packages/angular-virtual/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/ng-packagr/ng-package.schema.json", 3 | "lib": { 4 | "entryFile": "src/index.ts" 5 | }, 6 | "allowedNonPeerDependencies": ["@tanstack/virtual-core"], 7 | "dest": "build", 8 | "deleteDestPath": false 9 | } 10 | -------------------------------------------------------------------------------- /packages/angular-virtual/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./node_modules/ng-packagr/lib/ts/conf/tsconfig.ngc.json", 3 | "compilerOptions": { 4 | "moduleResolution": "bundler", 5 | "allowJs": true, 6 | "moduleDetection": "force", 7 | "module": "ESNext" 8 | }, 9 | "angularCompilerOptions": { 10 | "enableI18nLegacyMessageIdFormat": false, 11 | "strictInjectionParameters": true, 12 | "strictInputAccessModifiers": true 13 | }, 14 | "include": ["src/**/*.ts"] 15 | } 16 | -------------------------------------------------------------------------------- /packages/angular-virtual/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./build/lib" 5 | }, 6 | "angularCompilerOptions": { 7 | "compilationMode": "partial" 8 | }, 9 | "include": ["src", "eslint.config.js"], 10 | "exclude": ["**/*.spec.ts"] 11 | } 12 | -------------------------------------------------------------------------------- /packages/lit-virtual/eslint.config.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | 3 | import rootConfig from '../../eslint.config.js' 4 | 5 | export default [...rootConfig] 6 | -------------------------------------------------------------------------------- /packages/lit-virtual/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "experimentalDecorators": true 5 | }, 6 | "include": ["src", "eslint.config.js", "vite.config.ts"] 7 | } 8 | -------------------------------------------------------------------------------- /packages/lit-virtual/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig, mergeConfig } from 'vitest/config' 2 | import { tanstackViteConfig } from '@tanstack/config/vite' 3 | import packageJson from './package.json' 4 | 5 | const config = defineConfig({ 6 | test: { 7 | name: packageJson.name, 8 | dir: './tests', 9 | watch: false, 10 | environment: 'jsdom', 11 | }, 12 | }) 13 | 14 | export default mergeConfig( 15 | config, 16 | tanstackViteConfig({ 17 | entry: './src/index.ts', 18 | srcDir: './src', 19 | }), 20 | ) 21 | -------------------------------------------------------------------------------- /packages/react-virtual/eslint.config.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | 3 | import rootConfig from '../../eslint.config.js' 4 | 5 | export default [...rootConfig] 6 | -------------------------------------------------------------------------------- /packages/react-virtual/tests/test-setup.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/vitest' 2 | import { cleanup } from '@testing-library/react' 3 | import { afterEach } from 'vitest' 4 | import ResizeObserver from 'resize-observer-polyfill' 5 | 6 | // https://testing-library.com/docs/react-testing-library/api#cleanup 7 | afterEach(() => cleanup()) 8 | 9 | global.ResizeObserver = ResizeObserver 10 | -------------------------------------------------------------------------------- /packages/react-virtual/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "jsx": "react" 5 | }, 6 | "include": ["src", "eslint.config.js", "vite.config.ts"] 7 | } 8 | -------------------------------------------------------------------------------- /packages/react-virtual/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig, mergeConfig } from 'vitest/config' 2 | import { tanstackViteConfig } from '@tanstack/config/vite' 3 | import react from '@vitejs/plugin-react' 4 | import packageJson from './package.json' 5 | 6 | const config = defineConfig({ 7 | plugins: [react()], 8 | test: { 9 | name: packageJson.name, 10 | dir: './tests', 11 | watch: false, 12 | environment: 'jsdom', 13 | setupFiles: ['./tests/test-setup.ts'], 14 | }, 15 | }) 16 | 17 | export default mergeConfig( 18 | config, 19 | tanstackViteConfig({ 20 | entry: './src/index.tsx', 21 | srcDir: './src', 22 | }), 23 | ) 24 | -------------------------------------------------------------------------------- /packages/solid-virtual/eslint.config.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | 3 | import rootConfig from '../../eslint.config.js' 4 | 5 | export default [...rootConfig] 6 | -------------------------------------------------------------------------------- /packages/solid-virtual/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "jsx": "preserve", 5 | "jsxImportSource": "solid-js" 6 | }, 7 | "include": ["src", "eslint.config.js", "vite.config.ts"] 8 | } 9 | -------------------------------------------------------------------------------- /packages/solid-virtual/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig, mergeConfig } from 'vitest/config' 2 | import { tanstackViteConfig } from '@tanstack/config/vite' 3 | import solid from 'vite-plugin-solid' 4 | 5 | const config = defineConfig({ 6 | plugins: [solid()], 7 | }) 8 | 9 | export default mergeConfig( 10 | config, 11 | tanstackViteConfig({ 12 | entry: './src/index.tsx', 13 | srcDir: './src', 14 | }), 15 | ) 16 | -------------------------------------------------------------------------------- /packages/svelte-virtual/eslint.config.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | 3 | import rootConfig from '../../eslint.config.js' 4 | 5 | export default [...rootConfig] 6 | -------------------------------------------------------------------------------- /packages/svelte-virtual/svelte.config.js: -------------------------------------------------------------------------------- 1 | import { vitePreprocess } from '@sveltejs/vite-plugin-svelte' 2 | 3 | const config = { 4 | preprocess: vitePreprocess(), 5 | } 6 | 7 | export default config 8 | -------------------------------------------------------------------------------- /packages/svelte-virtual/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "include": [ 4 | "src/**/*.js", 5 | "src/**/*.ts", 6 | "src/**/*.svelte", 7 | "eslint.config.js", 8 | "svelte.config.js", 9 | "vite.config.ts" 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /packages/svelte-virtual/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { svelte } from '@sveltejs/vite-plugin-svelte' 2 | import { defineConfig } from 'vitest/config' 3 | 4 | export default defineConfig({ 5 | plugins: [svelte()], 6 | }) 7 | -------------------------------------------------------------------------------- /packages/virtual-core/eslint.config.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | 3 | import rootConfig from '../../eslint.config.js' 4 | 5 | export default [...rootConfig] 6 | -------------------------------------------------------------------------------- /packages/virtual-core/tests/index.test.ts: -------------------------------------------------------------------------------- 1 | import { expect, test, vi } from 'vitest' 2 | import { Virtualizer } from '../src/index' 3 | 4 | test('should export the Virtualizer class', () => { 5 | expect(Virtualizer).toBeDefined() 6 | }) 7 | 8 | test('should return empty items for empty scroll element', () => { 9 | const virtualizer = new Virtualizer({ 10 | count: 100, 11 | getScrollElement: () => null, 12 | estimateSize: () => 50, 13 | scrollToFn: vi.fn(), 14 | observeElementRect: vi.fn(), 15 | observeElementOffset: vi.fn(), 16 | }) 17 | expect(virtualizer.getVirtualItems()).toEqual([]) 18 | }) 19 | 20 | test('should return correct total size with one item and multiple lanes', () => { 21 | const virtualizer = new Virtualizer({ 22 | count: 1, 23 | lanes: 2, 24 | estimateSize: () => 50, 25 | getScrollElement: () => null, 26 | scrollToFn: vi.fn(), 27 | observeElementRect: vi.fn(), 28 | observeElementOffset: vi.fn(), 29 | }) 30 | expect(virtualizer.getTotalSize()).toBe(50) 31 | }) 32 | -------------------------------------------------------------------------------- /packages/virtual-core/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "include": ["src", "eslint.config.js", "vite.config.ts"] 4 | } 5 | -------------------------------------------------------------------------------- /packages/virtual-core/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig, mergeConfig } from 'vitest/config' 2 | import { tanstackViteConfig } from '@tanstack/config/vite' 3 | import packageJson from './package.json' 4 | 5 | const config = defineConfig({ 6 | test: { 7 | name: packageJson.name, 8 | dir: './tests', 9 | watch: false, 10 | environment: 'jsdom', 11 | }, 12 | }) 13 | 14 | export default mergeConfig( 15 | config, 16 | tanstackViteConfig({ 17 | entry: './src/index.ts', 18 | srcDir: './src', 19 | }), 20 | ) 21 | -------------------------------------------------------------------------------- /packages/vue-virtual/eslint.config.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | 3 | import rootConfig from '../../eslint.config.js' 4 | 5 | export default [...rootConfig] 6 | -------------------------------------------------------------------------------- /packages/vue-virtual/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "include": ["src", "eslint.config.js", "vite.config.ts"] 4 | } 5 | -------------------------------------------------------------------------------- /packages/vue-virtual/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig, mergeConfig } from 'vitest/config' 2 | import { tanstackViteConfig } from '@tanstack/config/vite' 3 | import vue from '@vitejs/plugin-vue' 4 | 5 | const config = defineConfig({ 6 | plugins: [vue()], 7 | }) 8 | 9 | export default mergeConfig( 10 | config, 11 | tanstackViteConfig({ 12 | entry: './src/index.ts', 13 | srcDir: './src', 14 | }), 15 | ) 16 | -------------------------------------------------------------------------------- /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | packages: 2 | - 'packages/*' 3 | - 'examples/angular/*' 4 | - 'examples/react/*' 5 | - 'examples/svelte/*' 6 | - 'examples/vue/*' 7 | - 'examples/lit/*' 8 | -------------------------------------------------------------------------------- /prettier.config.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | 3 | /** @type {import('prettier').Config} */ 4 | const config = { 5 | semi: false, 6 | singleQuote: true, 7 | trailingComma: 'all', 8 | plugins: ['prettier-plugin-svelte'], 9 | overrides: [{ files: '*.svelte', options: { parser: 'svelte' } }], 10 | } 11 | 12 | export default config 13 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://json.schemastore.org/tsconfig", 3 | "compilerOptions": { 4 | "allowJs": true, 5 | "allowSyntheticDefaultImports": true, 6 | "allowUnreachableCode": false, 7 | "allowUnusedLabels": false, 8 | "checkJs": true, 9 | "declaration": true, 10 | "esModuleInterop": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "isolatedModules": true, 13 | "lib": ["DOM", "DOM.Iterable", "ES2022"], 14 | "module": "ES2022", 15 | "moduleResolution": "Bundler", 16 | "noEmit": true, 17 | "noImplicitReturns": true, 18 | "noUncheckedIndexedAccess": true, 19 | "noUnusedLocals": false, 20 | "noUnusedParameters": false, 21 | "resolveJsonModule": true, 22 | "skipLibCheck": true, 23 | "strict": true, 24 | "target": "ES2020" 25 | }, 26 | "include": ["eslint.config.js", "prettier.config.js", "scripts"] 27 | } 28 | --------------------------------------------------------------------------------