Source: https://tanstack.com/virtual/latest/docs/framework/lit/examples/fixed

TanStack

Virtual v3v3

Search...

+ K

Auto

Log In

TanStack StartRC

Docs Examples GitHub Contributors

TanStack Router

Docs Examples GitHub Contributors

TanStack Query

Docs Examples GitHub Contributors

TanStack Table

Docs Examples Github Contributors

TanStack Formnew

Docs Examples Github Contributors

TanStack DBbeta

Docs Github Contributors

TanStack Virtual

Docs Examples Github Contributors

TanStack Paceralpha

Docs Examples Github Contributors

TanStack Storealpha

Docs Examples Github Contributors

TanStack Devtoolsalpha

Docs Github Contributors

More Libraries

Maintainers Partners Support Learn StatsBETA Discord Merch Blog GitHub Ethos Brand Guide

Documentation

Framework

Lit

Version

Latest

Search...

+ K

Menu

• Home

• Frameworks

• Contributors

• GitHub

• Discord

Getting Started

• Introduction
  
  core

• Installation
  
  core

Core APIs

• Virtualizer
  
  core

• VirtualItem
  
  core

Examples

• Fixed
  
  lit

• Dynamic
  
  lit

Framework

Lit

Version

Latest

Menu

• Home

• Frameworks

• Contributors

• GitHub

• Discord

Getting Started

• Introduction
  
  core

• Installation
  
  core

Core APIs

• Virtualizer
  
  core

• VirtualItem
  
  core

Examples

• Fixed
  
  lit

• Dynamic
  
  lit

Lit Example: Fixed

Github StackBlitz CodeSandbox

=======================================================================================================================================================================================================================================================================================================================================================================================

Code ExplorerCode

Interactive SandboxSandbox

• src

  • index.css

  • main.ts

• .gitignore

• README.md

• index.html

• package.json

• tsconfig.json

• vite.config.js

ts

import { customElement, property } from 'lit/decorators.js'
import { Ref, createRef, ref } from 'lit/directives/ref.js'
import { html, LitElement } from 'lit'
import { faker } from '@faker-js/faker'
import { repeat } from 'lit/directives/repeat.js'
import {
  VirtualizerController,
  WindowVirtualizerController,
} from '@tanstack/lit-virtual'

interface Column {
  key: string
  name: string
  width: number
}

function randomNumber(min: number, max: number) {
  return faker.number.int({ min, max })
}

const sentences = new Array(10000)
  .fill(true)
  .map(() => faker.lorem.sentence(randomNumber(20, 70)))

const generateColumns = (count: number) => {
  return new Array(count).fill(0).map((_, i) => {
    const key: string = i.toString()
    return {
      key,
      name: `Column ${i}`,
      width: randomNumber(75, 300),
    }
  })
}

const generateData = (columns: Column[], count = 300) => {
  return new Array(count).fill(0).map((_, rowIndex) =>
    columns.reduce<string[]>((acc, _curr, colIndex) => {
      // simulate dynamic size cells
      const val = faker.lorem.lines(((rowIndex + colIndex) % 10) + 1)

      acc.push(val)

      return acc
    }, []),
  )
}

@customElement('row-virtualizer-fixed')
class RowVirtualizerFixed extends LitElement {
  private scrollElementRef: Ref<HTMLDivElement> = createRef()

  private virtualizerController: VirtualizerController<HTMLDivElement, Element>

  constructor() {
    super()
    this.virtualizerController = new VirtualizerController(this, {
      getScrollElement: () => this.scrollElementRef.value,
      count: 10000,
      estimateSize: () => 35,
      overscan: 5,
    })
  }

  render() {
    const virtualizer = this.virtualizerController.getVirtualizer()
    const virtualRows = virtualizer.getVirtualItems()

    return html`
      <div>
        <div class="list scroll-container" ${ref(this.scrollElementRef)}>
          <div
            style="position: relative; height: ${virtualizer.getTotalSize()}px; width: 100%;"
          >
            ${repeat(
              virtualRows,
              (virtualRow) => virtualRow.key,
              (virtualRow) =>
                html` <div
                  class="${virtualRow.index % 2 === 0
                    ? 'list-item-even'
                    : 'list-item-odd'}"
                  style="position: absolute; left: 0; top: 0; width: 100%; height: ${virtualRow.size}px; transform: translateY(${virtualRow.start}px)"
                >
                  Row ${virtualRow.index}
                </div>`,
            )}
          </div>
        </div>
      </div>
      <style>
        .list {
          border: 1px solid #e6e4dc;
          max-width: 100%;
        }

        .list-item-even,
        .list-item-odd {
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .list-item-even {
          background-color: #e6e4dc;
        }

        .scroll-container {
          height: 200px;
          width: 400px;
          overflow: auto;
        }
      </style>
    `
  }
}

@customElement('column-virtualizer-fixed')
class ColumnVirtualizerFixed extends LitElement {
  private scrollElementRef: Ref<HTMLDivElement> = createRef()

  private virtualizerController: VirtualizerController<HTMLDivElement, Element>

  constructor() {
    super()
    this.virtualizerController = new VirtualizerController(this, {
      getScrollElement: () => this.scrollElementRef.value,
      count: sentences.length,
      estimateSize: () => 100,
      horizontal: true,
    })
  }

  render() {
    const virtualizer = this.virtualizerController.getVirtualizer()
    const virtualColumns = virtualizer.getVirtualItems()

    return html`
      <div>
        <div class="list scroll-container" ${ref(this.scrollElementRef)}>
          <div
            style="position: relative; height: 100%; width: ${virtualizer.getTotalSize()}px;"
          >
            ${repeat(
              virtualColumns,
              (virtualColumn) => virtualColumn.key,
              (virtualColumn) =>
                html` <div
                  class="${virtualColumn.index % 2 === 0
                    ? 'list-item-even'
                    : 'list-item-odd'}"
                  style="position: absolute; left: 0; top: 0; height: 100%; width: ${virtualColumn.size}px; transform: translateX(${virtualColumn.start}px)"
                >
                  Column ${virtualColumn.index}
                </div>`,
            )}
          </div>
        </div>
      </div>
      <style>
        .list {
          border: 1px solid #e6e4dc;
          max-width: 100%;
        }

        .list-item-even,
        .list-item-odd {
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .list-item-even {
          background-color: #e6e4dc;
        }

        .scroll-container {
          height: 100px;
          width: 400px;
          overflow: auto;
        }
      </style>
    `
  }
}

@customElement('grid-virtualizer-fixed')
class GridVirtualizerFixed extends LitElement {
  private scrollElementRef: Ref<HTMLDivElement> = createRef()

  private rowVirtualizerController: VirtualizerController<
    HTMLDivElement,
    Element
  >
  private columnVirtualizerController: VirtualizerController<
    HTMLDivElement,
    Element
  >

  constructor() {
    super()
    this.rowVirtualizerController = new VirtualizerController(this, {
      getScrollElement: () => this.scrollElementRef.value,
      count: sentences.length,
      estimateSize: () => 35,
      overscan: 5,
    })

    this.columnVirtualizerController = new VirtualizerController(this, {
      getScrollElement: () => this.scrollElementRef.value,
      count: sentences.length,
      estimateSize: () => 100,
      horizontal: true,
      overscan: 5,
    })
  }

  render() {
    const rowVirtualizer = this.rowVirtualizerController.getVirtualizer()
    const columnVirtualizer = this.columnVirtualizerController.getVirtualizer()

    return html`
      <div>
        <div class="list scroll-container" ${ref(this.scrollElementRef)}>
          <div
            style="position: relative; height: ${rowVirtualizer.getTotalSize()}px; width: ${columnVirtualizer.getTotalSize()}px;"
          >
            ${repeat(
              rowVirtualizer.getVirtualItems(),
              (virtualRow) => virtualRow.key,
              (virtualRow) =>
                repeat(
                  columnVirtualizer.getVirtualItems(),
                  (virtualColumn) => virtualColumn.key,
                  (virtualColumn) => html`
                    <div
                      class="${virtualColumn.index % 2
                        ? virtualRow.index % 2 === 0
                          ? 'list-item-odd'
                          : 'list-item-even'
                        : virtualRow.index % 2
                          ? 'list-item-odd'
                          : 'list-item-even'}"
                      style="position: absolute;left: 0; top: 0; width: ${virtualColumn.size}px; height: ${virtualRow.size}px; transform: translateX(${virtualColumn.start}px) translateY(${virtualRow.start}px)"
                    >
                      Cell ${virtualRow.index}, ${virtualColumn.index}
                    </div>
                  `,
                ),
            )}
          </div>
        </div>
      </div>
      <style>
        .list {
          border: 1px solid #e6e4dc;
          max-width: 100%;
        }

        .list-item-even,
        .list-item-odd {
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .list-item-even {
          background-color: #e6e4dc;
        }

        .scroll-container {
          height: 500px;
          width: 500px;
          overflow: auto;
        }
      </style>
    `
  }
}

@customElement('my-app')
export class MyApp extends LitElement {
  protected render() {
    const { pathname } = window.location

    return html`
      <div>
        <p>
          These components are using <strong>fixed</strong> sizes. This means
          that every element's dimensions are hard-coded to the same value and
          never change.
        </p>
        <br />
        <br />

        <h3>Rows</h3>
        <row-virtualizer-fixed></row-virtualizer-fixed>
        <br />
        <br />
        <h3>Columns</h3>
        <column-virtualizer-fixed></column-virtualizer-fixed>
        <br />
        <br />
        <h3>Grid</h3>
        <grid-virtualizer-fixed></grid-virtualizer-fixed>
        <br />
        <br />
      </div>
    `
  }
}


import { customElement, property } from 'lit/decorators.js'
import { Ref, createRef, ref } from 'lit/directives/ref.js'
import { html, LitElement } from 'lit'
import { faker } from '@faker-js/faker'
import { repeat } from 'lit/directives/repeat.js'
import {
  VirtualizerController,
  WindowVirtualizerController,
} from '@tanstack/lit-virtual'

interface Column {
  key: string
  name: string
  width: number
}

function randomNumber(min: number, max: number) {
  return faker.number.int({ min, max })
}

const sentences = new Array(10000)
  .fill(true)
  .map(() => faker.lorem.sentence(randomNumber(20, 70)))

const generateColumns = (count: number) => {
  return new Array(count).fill(0).map((_, i) => {
    const key: string = i.toString()
    return {
      key,
      name: `Column ${i}`,
      width: randomNumber(75, 300),
    }
  })
}

const generateData = (columns: Column[], count = 300) => {
  return new Array(count).fill(0).map((_, rowIndex) =>
    columns.reduce<string[]>((acc, _curr, colIndex) => {
      // simulate dynamic size cells
      const val = faker.lorem.lines(((rowIndex + colIndex) % 10) + 1)

      acc.push(val)

      return acc
    }, []),
  )
}

@customElement('row-virtualizer-fixed')
class RowVirtualizerFixed extends LitElement {
  private scrollElementRef: Ref<HTMLDivElement> = createRef()

  private virtualizerController: VirtualizerController<HTMLDivElement, Element>

  constructor() {
    super()
    this.virtualizerController = new VirtualizerController(this, {
      getScrollElement: () => this.scrollElementRef.value,
      count: 10000,
      estimateSize: () => 35,
      overscan: 5,
    })
  }

  render() {
    const virtualizer = this.virtualizerController.getVirtualizer()
    const virtualRows = virtualizer.getVirtualItems()

    return html`
      <div>
        <div class="list scroll-container" ${ref(this.scrollElementRef)}>
          <div
            style="position: relative; height: ${virtualizer.getTotalSize()}px; width: 100%;"
          >
            ${repeat(
              virtualRows,
              (virtualRow) => virtualRow.key,
              (virtualRow) =>
                html` <div
                  class="${virtualRow.index % 2 === 0
                    ? 'list-item-even'
                    : 'list-item-odd'}"
                  style="position: absolute; left: 0; top: 0; width: 100%; height: ${virtualRow.size}px; transform: translateY(${virtualRow.start}px)"
                >
                  Row ${virtualRow.index}
                </div>`,
            )}
          </div>
        </div>
      </div>
      <style>
        .list {
          border: 1px solid #e6e4dc;
          max-width: 100%;
        }

        .list-item-even,
        .list-item-odd {
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .list-item-even {
          background-color: #e6e4dc;
        }

        .scroll-container {
          height: 200px;
          width: 400px;
          overflow: auto;
        }
      </style>
    `
  }
}

@customElement('column-virtualizer-fixed')
class ColumnVirtualizerFixed extends LitElement {
  private scrollElementRef: Ref<HTMLDivElement> = createRef()

  private virtualizerController: VirtualizerController<HTMLDivElement, Element>

  constructor() {
    super()
    this.virtualizerController = new VirtualizerController(this, {
      getScrollElement: () => this.scrollElementRef.value,
      count: sentences.length,
      estimateSize: () => 100,
      horizontal: true,
    })
  }

  render() {
    const virtualizer = this.virtualizerController.getVirtualizer()
    const virtualColumns = virtualizer.getVirtualItems()

    return html`
      <div>
        <div class="list scroll-container" ${ref(this.scrollElementRef)}>
          <div
            style="position: relative; height: 100%; width: ${virtualizer.getTotalSize()}px;"
          >
            ${repeat(
              virtualColumns,
              (virtualColumn) => virtualColumn.key,
              (virtualColumn) =>
                html` <div
                  class="${virtualColumn.index % 2 === 0
                    ? 'list-item-even'
                    : 'list-item-odd'}"
                  style="position: absolute; left: 0; top: 0; height: 100%; width: ${virtualColumn.size}px; transform: translateX(${virtualColumn.start}px)"
                >
                  Column ${virtualColumn.index}
                </div>`,
            )}
          </div>
        </div>
      </div>
      <style>
        .list {
          border: 1px solid #e6e4dc;
          max-width: 100%;
        }

        .list-item-even,
        .list-item-odd {
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .list-item-even {
          background-color: #e6e4dc;
        }

        .scroll-container {
          height: 100px;
          width: 400px;
          overflow: auto;
        }
      </style>
    `
  }
}

@customElement('grid-virtualizer-fixed')
class GridVirtualizerFixed extends LitElement {
  private scrollElementRef: Ref<HTMLDivElement> = createRef()

  private rowVirtualizerController: VirtualizerController<
    HTMLDivElement,
    Element
  >
  private columnVirtualizerController: VirtualizerController<
    HTMLDivElement,
    Element
  >

  constructor() {
    super()
    this.rowVirtualizerController = new VirtualizerController(this, {
      getScrollElement: () => this.scrollElementRef.value,
      count: sentences.length,
      estimateSize: () => 35,
      overscan: 5,
    })

    this.columnVirtualizerController = new VirtualizerController(this, {
      getScrollElement: () => this.scrollElementRef.value,
      count: sentences.length,
      estimateSize: () => 100,
      horizontal: true,
      overscan: 5,
    })
  }

  render() {
    const rowVirtualizer = this.rowVirtualizerController.getVirtualizer()
    const columnVirtualizer = this.columnVirtualizerController.getVirtualizer()

    return html`
      <div>
        <div class="list scroll-container" ${ref(this.scrollElementRef)}>
          <div
            style="position: relative; height: ${rowVirtualizer.getTotalSize()}px; width: ${columnVirtualizer.getTotalSize()}px;"
          >
            ${repeat(
              rowVirtualizer.getVirtualItems(),
              (virtualRow) => virtualRow.key,
              (virtualRow) =>
                repeat(
                  columnVirtualizer.getVirtualItems(),
                  (virtualColumn) => virtualColumn.key,
                  (virtualColumn) => html`
                    <div
                      class="${virtualColumn.index % 2
                        ? virtualRow.index % 2 === 0
                          ? 'list-item-odd'
                          : 'list-item-even'
                        : virtualRow.index % 2
                          ? 'list-item-odd'
                          : 'list-item-even'}"
                      style="position: absolute;left: 0; top: 0; width: ${virtualColumn.size}px; height: ${virtualRow.size}px; transform: translateX(${virtualColumn.start}px) translateY(${virtualRow.start}px)"
                    >
                      Cell ${virtualRow.index}, ${virtualColumn.index}
                    </div>
                  `,
                ),
            )}
          </div>
        </div>
      </div>
      <style>
        .list {
          border: 1px solid #e6e4dc;
          max-width: 100%;
        }

        .list-item-even,
        .list-item-odd {
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .list-item-even {
          background-color: #e6e4dc;
        }

        .scroll-container {
          height: 500px;
          width: 500px;
          overflow: auto;
        }
      </style>
    `
  }
}

@customElement('my-app')
export class MyApp extends LitElement {
  protected render() {
    const { pathname } = window.location

    return html`
      <div>
        <p>
          These components are using <strong>fixed</strong> sizes. This means
          that every element's dimensions are hard-coded to the same value and
          never change.
        </p>
        <br />
        <br />

        <h3>Rows</h3>
        <row-virtualizer-fixed></row-virtualizer-fixed>
        <br />
        <br />
        <h3>Columns</h3>
        <column-virtualizer-fixed></column-virtualizer-fixed>
        <br />
        <br />
        <h3>Grid</h3>
        <grid-virtualizer-fixed></grid-virtualizer-fixed>
        <br />
        <br />
      </div>
    `
  }
}

VirtualItem

Dynamic

Partners Become a Partner