### Row Virtualizer with Dynamic Sizes and Padding

Source: https://tanstack.com/virtual/latest/docs/framework/react/examples/padding

This example demonstrates a virtualized list where rows have dynamic sizes. It configures padding at the start and end of the scrollable area to improve scroll performance and user experience. The parent container has a fixed height and overflow set to auto.

```jsx
import React from 'react'
import ReactDOM from 'react-dom'

import './index.css'

import { useVirtualizer } from '@tanstack/react-virtual'

const rows = new Array(10000)
  .fill(true)
  .map(() => 25 + Math.round(Math.random() * 100))

const columns = new Array(10000)
  .fill(true)
  .map(() => 75 + Math.round(Math.random() * 100))

function App() {
  return (
    <div>
      <p>
        These components are using <strong>dynamic</strong> sizes. This means
        that each element's exact dimensions are unknown when rendered. An
        estimated dimension is used as the initial measurement, then this
        measurement is readjusted on the fly as each element is rendered.
      </p>
      <br />
      <br />

      <h3>Rows</h3>
      <RowVirtualizerDynamic rows={rows} />
      <br />
      <br />
      <h3>Columns</h3>
      <ColumnVirtualizerDynamic columns={columns} />
      <br />
      <br />
      <h3>Grid</h3>
      <GridVirtualizerDynamic rows={rows} columns={columns} />
    </div>
  )
}

function RowVirtualizerDynamic({ rows }: { rows: Array<number> }) {
  const parentRef = React.useRef<HTMLDivElement>(null)

  const rowVirtualizer = useVirtualizer({
    count: rows.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 50,
    paddingStart: 100,
    paddingEnd: 100,
  })

  return (
    <>
      <div
        ref={parentRef}
        className="List"
        style={{
          height: `200px`,
          width: `400px`,
          overflow: 'auto',
        }}>
        <div
          style={{
            height: `${rowVirtualizer.getTotalSize()}px`,
            width: '100%',
            position: 'relative',
          }}>
          {rowVirtualizer.getVirtualItems().map((virtualRow) => (
            <div
              key={virtualRow.key}
              data-index={virtualRow.index}
              ref={rowVirtualizer.measureElement}
              className={virtualRow.index % 2 ? 'ListItemOdd' : 'ListItemEven'}
              style={{
                position: 'absolute',
                top: 0,
                left: 0,
                width: '100%',
                height: `${rows[virtualRow.index]}px`,
                transform: `translateY(${virtualRow.start}px)`,
              }}>
              Row {virtualRow.index}
            </div>
          ))}

```

--------------------------------

### Install Virtual Core (No Framework)

Source: https://tanstack.com/virtual/latest/docs/installation.md

Installs the core TanStack Virtual library, which can be used independently of any specific framework. This provides the fundamental virtual scrolling logic.

```bash
npm install @tanstack/virtual-core
```

--------------------------------

### React DOM Rendering Setup

Source: https://tanstack.com/virtual/latest/docs/framework/react/examples/variable

Standard React DOM rendering setup for the application. Mounts the main App component into the root element.

```jsx
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root'),
)
```

--------------------------------

### App Component Setup

Source: https://tanstack.com/virtual/latest/docs/framework/react/examples/table

The main App component that includes the virtualized table and development mode notice.

```jsx
function App() {
  return (
    <div>
      <p>
        For tables, the basis for the offset of the translate css function is
        from the row's initial position itself. Because of this, we need to
        calculate the translateY pixel count differently and base it off the
        index.
      </p>
      <ReactTableVirtualized />
      <br />
      <br />
      {process.env.NODE_ENV === 'development' ? (
        <p>
          <strong>Notice:</strong> You are currently running React in
          development mode. Rendering performance will be slightly degraded
          until this application is built for production.
        </p>
      ) : null}
    </div>
  )
}
```

--------------------------------

### React Virtualizer Setup with Variable Sizes

Source: https://tanstack.com/virtual/latest/docs/framework/react/examples/variable

This code sets up the necessary data arrays and imports for using variable-sized virtualizers in React.

```jsx
import React from 'react'
import ReactDOM from 'react-dom'

import './index.css'

import { useVirtualizer } from '@tanstack/react-virtual'

const rows = new Array(10000)
  .fill(true)
  .map(() => 25 + Math.round(Math.random() * 100))

const columns = new Array(10000)
  .fill(true)
  .map(() => 75 + Math.round(Math.random() * 100))

function App() {
  return (
    <div>
      <p>
        These components are using <strong>variable</strong> sizes. This means
        that each element has a unique, but knowable dimension at render time.
      </p>
      <br />
      <br />

      <h3>Rows</h3>
      <RowVirtualizerVariable rows={rows} />
      <br />
      <br />
      <h3>Columns</h3>
      <ColumnVirtualizerVariable columns={columns} />
    </div>
  )
}

```

--------------------------------

### React App Entry Point

Source: https://tanstack.com/virtual/latest/docs/framework/react/examples/table

Standard React application setup using createRoot for rendering the main App component within StrictMode.

```jsx
const container = document.getElementById('root')
const root = createRoot(container!)
const { StrictMode } = React

root.render(
  <StrictMode>
    <App />
  </StrictMode>,
)
```
```

--------------------------------

### Install Lit Virtual Adapter

Source: https://tanstack.com/virtual/latest/docs/installation.md

Installs the TanStack Virtual adapter for Lit (Web Components). This package enables virtual scrolling for Lit-based components.

```bash
npm install @tanstack/lit-virtual
```

--------------------------------

### Basic React App Setup

Source: https://tanstack.com/virtual/latest/docs/framework/react/examples/padding

This snippet shows the basic structure for rendering a React application, including the root element and strict mode.

```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root'),
)

```

--------------------------------

### Grid Virtualizer with Padding

Source: https://tanstack.com/virtual/latest/docs/framework/react/examples/padding

Implement `paddingStart` and `paddingEnd` for both row and column virtualizers in a grid to manage padding in both dimensions. This example also includes buttons to toggle visibility and scroll to specific rows.

```jsx
function GridVirtualizerDynamic({
  rows,
  columns,
}: {
  rows: Array<number>
  columns: Array<number>
}) {
  const parentRef = React.useRef<HTMLDivElement>(null)

  const rowVirtualizer = useVirtualizer({
    count: rows.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 50,
    paddingStart: 200,
    paddingEnd: 200,
    indexAttribute: 'data-row-index',
  })

  const columnVirtualizer = useVirtualizer({
    horizontal: true,
    count: columns.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 50,
    paddingStart: 200,
    paddingEnd: 200,
    indexAttribute: 'data-column-index',
  })

  const [show, setShow] = React.useState(true)

  const halfWay = Math.floor(rows.length / 2)

  return (
    <>
      <button onClick={() => setShow((old) => !old)}>Toggle</button>
      <button onClick={() => rowVirtualizer.scrollToIndex(halfWay)}>
        Scroll to index {halfWay}
      </button>
      <button onClick={() => rowVirtualizer.scrollToIndex(rows.length - 1)}>
        Scroll to index {rows.length - 1}
      </button>
      {show ? (
        <div
          ref={parentRef}
          className="List"
          style={{
            height: `400px`,
            width: `500px`,
            overflow: 'auto',
          }}
        >
          <div
            style={{
              height: `${rowVirtualizer.getTotalSize()}px`,
              width: `${columnVirtualizer.getTotalSize()}px`,
              position: 'relative',
            }}
          >
            {rowVirtualizer.getVirtualItems().map((virtualRow) => (
              <React.Fragment key={virtualRow.key}>
                {columnVirtualizer.getVirtualItems().map((virtualColumn) => (
                  <div
                    key={virtualColumn.key}
                    data-row-index={virtualRow.index}
                    data-column-index={virtualColumn.index}
                    ref={(el) => {
                      rowVirtualizer.measureElement(el)
                      columnVirtualizer.measureElement(el)
                    }}
                    className={
                      virtualColumn.index % 2
                        ? virtualRow.index % 2 === 0
                          ? 'ListItemOdd'
                          : 'ListItemEven'
                        : virtualRow.index % 2
                          ? 'ListItemOdd'
                          : 'ListItemEven'
                    }
                    style={{
                      position: 'absolute',
                      top: 0,
                      left: 0,
                      width: `${columns[virtualColumn.index]}px`,
                      height: `${rows[virtualRow.index]}px`,
                      transform: `translateX(${virtualColumn.start}px) translateY(${virtualRow.start}px)`,
                    }}
                  >
                    Cell {virtualRow.index}, {virtualColumn.index}
                  </div>
                ))}
              </React.Fragment>
            ))}
          </div>
        </div>
      ) : null}
      <br />
      <br />
      {process.env.NODE_ENV === 'development' ? (
        <p>
          <strong>Notice:</strong> You are currently running React in
          development mode. Rendering performance will be slightly degraded
          until this application is built for production.
        </p>
      ) : null}
    </>
  )
}
```

--------------------------------

### Install React Virtual Adapter

Source: https://tanstack.com/virtual/latest/docs/installation.md

Installs the TanStack Virtual adapter for React applications. This package enables virtualized scrolling for React components.

```bash
npm install @tanstack/react-virtual
```

--------------------------------

### Install Solid Virtual Adapter

Source: https://tanstack.com/virtual/latest/docs/installation.md

Installs the TanStack Virtual adapter for SolidJS applications. This package facilitates virtual scrolling within Solid components.

```bash
npm install @tanstack/solid-virtual
```

--------------------------------

### React Root Rendering

Source: https://tanstack.com/virtual/latest/docs/framework/react/examples/table

Standard React root rendering setup for the application.

```jsx
const container = document.getElementById('root')
const root = createRoot(container!)
const { StrictMode } = React

root.render(
  <StrictMode>
    <App />
  </StrictMode>,
)
```

--------------------------------

### Install Angular Virtual Adapter

Source: https://tanstack.com/virtual/latest/docs/installation.md

Installs the TanStack Virtual adapter for Angular applications. This package provides virtual scrolling capabilities for Angular projects.

```bash
npm install @tanstack/angular-virtual
```

--------------------------------

### React Table with Virtualization Setup

Source: https://tanstack.com/virtual/latest/docs/framework/react/examples/table

Sets up a React component to render a virtualized table. It includes data generation, column definitions, table instance creation with sorting, and virtualizer configuration for efficient scrolling.

```jsx
import * as React from 'react'
import { createRoot } from 'react-dom/client'

import { useVirtualizer } from '@tanstack/react-virtual'
import {
  flexRender,
  getCoreRowModel,
  getSortedRowModel,
  useReactTable,
} from '@tanstack/react-table'
import { makeData } from './makeData'
import type { ColumnDef, Row, SortingState } from '@tanstack/react-table'
import type { Person } from './makeData'
import './index.css'

function ReactTableVirtualized() {
  const [sorting, setSorting] = React.useState<SortingState>([])

  const columns = React.useMemo<Array<ColumnDef<Person>>>(
    () => [
      {
        accessorKey: 'id',
        header: 'ID',
        size: 60,
      },
      {
        accessorKey: 'firstName',
        cell: (info) => info.getValue(),
      },
      {
        accessorFn: (row) => row.lastName,
        id: 'lastName',
        cell: (info) => info.getValue(),
        header: () => <span>Last Name</span>,
      },
      {
        accessorKey: 'age',
        header: () => 'Age',
        size: 50,
      },
      {
        accessorKey: 'visits',
        header: () => <span>Visits</span>,
        size: 50,
      },
      {
        accessorKey: 'status',
        header: 'Status',
      },
      {
        accessorKey: 'progress',
        header: 'Profile Progress',
        size: 80,
      },
      {
        accessorKey: 'createdAt',
        header: 'Created At',
        cell: (info) => info.getValue<Date>().toLocaleString(),
      },
    ],
    [],
  )

  const [data, setData] = React.useState(() => makeData(50_000))

  const table = useReactTable({
    data,
    columns,
    state: {
      sorting,
    },
    onSortingChange: setSorting,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
    debugTable: true,
  })

  const { rows } = table.getRowModel()

  const parentRef = React.useRef<HTMLDivElement>(null)

  const virtualizer = useVirtualizer({
    count: rows.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 34,
    overscan: 20,
  })

  return (
    <div ref={parentRef} className="container">
      <div style={{ height: `${virtualizer.getTotalSize()}px` }}>
        <table>
          <thead>
            {table.getHeaderGroups().map((headerGroup) => (
              <tr key={headerGroup.id}>
                {headerGroup.headers.map((header) => {
                  return (
                    <th
                      key={header.id}
                      colSpan={header.colSpan}
                      style={{ width: header.getSize() }}
                    >
                      {header.isPlaceholder ? null : (
                        <div
                          {{ 
                            className: header.column.getCanSort()
                              ? 'cursor-pointer select-none'
                              : '',
                            onClick: header.column.getToggleSortingHandler(),
                          }}
                        >
                          {flexRender(
                            header.column.columnDef.header,
                            header.getContext(),
                          )}
                          {{ 
                            asc: ' 🔼',
                            desc: ' 🔽',
                          }[header.column.getIsSorted() as string] ?? null}
                        </div>
                      )}
                    </th>
                  )
                })}
              </tr>
            ))}
          </thead>
          <tbody>
            {virtualizer.getVirtualItems().map((virtualRow, index) => {
              const row = rows[virtualRow.index]
              return (
                <tr
                  key={row.id}
                  style={{
                    height: `${virtualRow.size}px`,
                    transform: `translateY(${ 
                      virtualRow.start - index * virtualRow.size
                    }px)`,
                  }}>
                  {row.getVisibleCells().map((cell) => {
                    return (
                      <td key={cell.id}>
                        {flexRender(
                          cell.column.columnDef.cell,
                          cell.getContext(),
                        )}
                      </td>
                    )
                  })}
                </tr>
              )
            })}

```

--------------------------------

### Install Vue Virtual Adapter

Source: https://tanstack.com/virtual/latest/docs/installation.md

Installs the TanStack Virtual adapter for Vue.js applications. This package allows for efficient rendering of large lists in Vue.

```bash
npm install @tanstack/vue-virtual
```

--------------------------------

### Install Svelte Virtual Adapter

Source: https://tanstack.com/virtual/latest/docs/installation.md

Installs the TanStack Virtual adapter for Svelte applications. This package provides virtualized list functionality for Svelte projects.

```bash
npm install @tanstack/svelte-virtual
```

--------------------------------

### Grid Virtualizer with Padding

Source: https://tanstack.com/virtual/latest/docs/framework/react/examples/padding

This example demonstrates a virtualized grid with both row and column virtualization. It includes scroll buttons to jump to specific indices and utilizes padding for scrollable areas. The development mode notice is also conditionally rendered.

```jsx
      <button onClick={() => rowVirtualizer.scrollToIndex(halfWay)}>
        Scroll to index {halfWay}
      </button>
      <button onClick={() => rowVirtualizer.scrollToIndex(rows.length - 1)}>
        Scroll to index {rows.length - 1}
      </button>
      {show ? (
        <div
          ref={parentRef}
          className="List"
          style={{
            height: `400px`,
            width: `500px`,
            overflow: 'auto',
          }}>
          <div
            style={{
              height: `${rowVirtualizer.getTotalSize()}px`,
              width: `${columnVirtualizer.getTotalSize()}px`,
              position: 'relative',
            }}>
            {rowVirtualizer.getVirtualItems().map((virtualRow) => (
              <React.Fragment key={virtualRow.key}>
                {columnVirtualizer.getVirtualItems().map((virtualColumn) => (
                  <div
                    key={virtualColumn.key}
                    data-row-index={virtualRow.index}
                    data-column-index={virtualColumn.index}
                    ref={(el) => {
                      rowVirtualizer.measureElement(el)
                      columnVirtualizer.measureElement(el)
                    }}
                    className={
                      virtualColumn.index % 2
                        ? virtualRow.index % 2 === 0
                          ? 'ListItemOdd'
                          : 'ListItemEven'
                        : virtualRow.index % 2
                          ? 'ListItemOdd'
                          : 'ListItemEven'
                    }
                    style={{
                      position: 'absolute',
                      top: 0,
                      left: 0,
                      width: `${columns[virtualColumn.index]}px`,
                      height: `${rows[virtualRow.index]}px`,
                      transform: `translateX(${virtualColumn.start}px) translateY(${virtualRow.start}px)`,
                    }}>
                    Cell {virtualRow.index}, {virtualColumn.index}
                  </div>
                ))}
              </React.Fragment>
            ))}
          </div>
        </div>
      ) : null}
      <br />
      <br />
      {process.env.NODE_ENV === 'development' ? (
        <p>
          <strong>Notice:</strong> You are currently running React in
          development mode. Rendering performance will be slightly degraded
          until this application is built for production.
        </p>
      ) : null}
    </>
  )
}

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root'),
)
```

--------------------------------

### React Grid Virtualizer Example

Source: https://tanstack.com/virtual/latest/docs/framework/react/examples/variable

Combines row and column virtualization to create a scrollable grid with variable row heights and column widths. Both parent and child elements require specific styling for positioning and scrolling.

```jsx
function GridVirtualizerVariable({
  rows,
  columns,
}: {
  rows: Array<number>
  columns: Array<number>
}) {
  const parentRef = React.useRef<HTMLDivElement>(null)

  const rowVirtualizer = useVirtualizer({
    count: rows.length,
    getScrollElement: () => parentRef.current,
    estimateSize: (i) => rows[i],
    overscan: 5,
  })

  const columnVirtualizer = useVirtualizer({
    horizontal: true,
    count: columns.length,
    getScrollElement: () => parentRef.current,
    estimateSize: (i) => columns[i],
    overscan: 5,
  })

  return (
    <>
      <div
        ref={parentRef}
        className="List"
        style={{
          height: `400px`,
          width: `500px`,
          overflow: 'auto',
        }}
      >
        <div
          style={{
            height: `${rowVirtualizer.getTotalSize()}px`,
            width: `${columnVirtualizer.getTotalSize()}px`,
            position: 'relative',
          }}
        >
          {rowVirtualizer.getVirtualItems().map((virtualRow) => (
            <React.Fragment key={virtualRow.index}>
              {columnVirtualizer.getVirtualItems().map((virtualColumn) => (
                <div
                  key={virtualColumn.index}
                  className={
                    virtualColumn.index % 2
                      ? virtualRow.index % 2 === 0
                        ? 'ListItemOdd'
                        : 'ListItemEven'
                      : virtualRow.index % 2
                        ? 'ListItemOdd'
                        : 'ListItemEven'
                  }
                  style={{

```

--------------------------------

### Virtualizer Optional Option: scrollPaddingStart

Source: https://tanstack.com/virtual/latest/docs/api/virtualizer.md

Specifies padding in pixels applied to the start when scrolling to a specific element. Useful for ensuring elements are not hidden behind fixed headers.

```typescript
scrollPaddingStart?: number
```

--------------------------------

### React Column Virtualizer Example

Source: https://tanstack.com/virtual/latest/docs/framework/react/examples/variable

Implements a horizontally scrolling list where each column can have a different width. The parent div must have overflow: auto and a defined width.

```jsx
function ColumnVirtualizerVariable({ columns }: { columns: Array<number> }) {
  const parentRef = React.useRef<HTMLDivElement>(null)

  const columnVirtualizer = useVirtualizer({
    horizontal: true,
    count: columns.length,
    getScrollElement: () => parentRef.current,
    estimateSize: (i) => columns[i],
    overscan: 5,
  })

  return (
    <>
      <div
        ref={parentRef}
        className="List"
        style={{
          width: `400px`,
          height: `100px`,
          overflow: 'auto',
        }}
      >
        <div
          style={{
            width: `${columnVirtualizer.getTotalSize()}px`,
            height: '100%',
            position: 'relative',
          }}
        >
          {columnVirtualizer.getVirtualItems().map((virtualColumn) => (
            <div
              key={virtualColumn.index}
              className={
                virtualColumn.index % 2 ? 'ListItemOdd' : 'ListItemEven'
              }
              style={{
                position: 'absolute',
                top: 0,
                left: 0,
                height: '100%',
                width: `${columns[virtualColumn.index]}px`,
                transform: `translateX(${virtualColumn.start}px)`,
              }}
            >
              Column {virtualColumn.index}
            </div>
          ))}
        </div>
      </div>
    </>
  )
}
```

--------------------------------

### Grid Dynamic Virtualizer Setup in React

Source: https://tanstack.com/virtual/latest/docs/framework/react/examples/dynamic

Sets up the parent container for a grid virtualizer. This snippet focuses on capturing the parent element's offset for potential grid calculations, often used in conjunction with `useVirtualizer` for grid layouts.

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

function GridVirtualizerDynamic({
  columns,
  data,
}: { 
  data: Array<Array<string>>
  columns: Array<Column>
}) {
  const parentRef = React.useRef<HTMLDivElement | null>(null)

  const parentOffsetRef = React.useRef(0)

  React.useLayoutEffect(() => {
    parentOffsetRef.current = parentRef.current?.offsetTop ?? 0
  }, [])

```

--------------------------------

### React Fixed Virtualization Example

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

This snippet renders a grid of cells with fixed positioning using TanStack Virtual. It maps over virtualized rows and columns to display cell content and applies dynamic class names for styling.

```jsx
            width: `${columnVirtualizer.getTotalSize()}px`,
            position: 'relative',
          }}
        >
          {rowVirtualizer.getVirtualItems().map((virtualRow) => (
            <React.Fragment key={virtualRow.key}>
              {columnVirtualizer.getVirtualItems().map((virtualColumn) => (
                <div
                  key={virtualColumn.key}
                  className={
                    virtualColumn.index % 2
                      ? virtualRow.index % 2 === 0
                        ? 'ListItemOdd'
                        : 'ListItemEven'
                      : virtualRow.index % 2
                        ? 'ListItemOdd'
                        : 'ListItemEven'
                  }
                  style={{
                    position: 'absolute',
                    top: 0,
                    left: 0,
                    width: `${virtualColumn.size}px`,
                    height: `${virtualRow.size}px`,
                    transform: `translateX(${virtualColumn.start}px) translateY(${virtualRow.start}px)`,
                  }}
                >
                  Cell {virtualRow.index}, {virtualColumn.index}
                </div>
              ))}
            </React.Fragment>
          ))}
        </div>
      </div>
    </>
  )
}

// eslint-disable-next-line
ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

```

--------------------------------

### Main App Component with Routing

Source: https://tanstack.com/virtual/latest/docs/framework/react/examples/dynamic

The main application component that handles routing based on the URL pathname. It renders different virtualizer examples (rows, columns, grid, experimental) based on the current route. Includes a development mode notice.

```jsx
function App() {
  const pathname = location.pathname
  return (
    <div>
      <p>
        These components are using <strong>dynamic</strong> sizes. This means
        that each element's exact dimensions are unknown when rendered. An
        estimated dimension is used as the initial measurement, then this
        measurement is readjusted on the fly as each element is rendered.
      </p>
      <nav>
        <ul>
          <li>
            <a href="/">List</a>
          </li>
          <li>
            <a href="/columns">Column</a>
          </li>
          <li>
            <a href="/grid">Grid</a>
          </li>
          <li>
            <a href="/experimental">Experimental</a>
          </li>
        </ul>
      </nav>
      {(() => {
        switch (pathname) {
          case '/':
            return <RowVirtualizerDynamic />
          case '/columns':
            return <ColumnVirtualizerDynamic />
          case '/grid': {
            const columns = generateColumns(30)
            const data = generateData(columns)
            return <GridVirtualizerDynamic columns={columns} data={data} />
          }
          case '/experimental':
            return <RowVirtualizerExperimental />
          default:
            return <div>Not found</div>
        }
      })()}
      <br />
      <br />
      {process.env.NODE_ENV === 'development' ? (
        <p>
          <strong>Notice:</strong> You are currently running React in
          development mode. Rendering performance will be slightly degraded
          until this application is built for production.
        </p>
      ) : null}
    </div>
  )
}

const container = document.getElementById('root')!
const root = createRoot(container)
const { StrictMode } = React

root.render(
  <StrictMode>
    <App />
  </StrictMode>,
)

```

--------------------------------

### Simulated Server Page Fetching Function

Source: https://tanstack.com/virtual/latest/docs/framework/react/examples/infinite-scroll

This function simulates fetching a page of data from a server. It returns an array of strings and the offset for the next page. It includes a delay to mimic network latency. This is a utility function for the infinite scroll example.

```typescript
async function fetchServerPage(
  limit: number,
  offset: number = 0,
): Promise<{ rows: Array<string>; nextOffset: number }> {
  const rows = new Array(limit)
    .fill(0)
    .map((_, i) => `Async loaded row #${i + offset * limit}`)

  await new Promise((r) => setTimeout(r, 500))

  return { rows, nextOffset: offset + 1 }
}

```

--------------------------------

### React Infinite Scroll with Virtualization

Source: https://tanstack.com/virtual/latest/docs/framework/react/examples/infinite-scroll

This snippet demonstrates a complete implementation of infinite scrolling in React. It uses `useInfiniteQuery` from React Query to fetch data in pages and `useVirtualizer` from React Virtual to render only the visible items. Ensure you have React Query and React Virtual installed. The `fetchServerPage` function simulates an API call, and the `App` component manages the fetching and rendering logic.

```tsx
import React from 'react'
import ReactDOM from 'react-dom'
import {
  QueryClient,
  QueryClientProvider,
  useInfiniteQuery,
} from '@tanstack/react-query'

import './index.css'

import { useVirtualizer } from '@tanstack/react-virtual'

const queryClient = new QueryClient()

async function fetchServerPage(
  limit: number,
  offset: number = 0,
): Promise<{ rows: Array<string>; nextOffset: number }> {
  const rows = new Array(limit)
    .fill(0)
    .map((_, i) => `Async loaded row #${i + offset * limit}`)

  await new Promise((r) => setTimeout(r, 500))

  return { rows, nextOffset: offset + 1 }
}

function App() {
  const {
    status,
    data,
    error,
    isFetching,
    isFetchingNextPage,
    fetchNextPage,
    hasNextPage,
  } = useInfiniteQuery({
    queryKey: ['projects'],
    queryFn: (ctx) => fetchServerPage(10, ctx.pageParam),
    getNextPageParam: (lastGroup) => lastGroup.nextOffset,
    initialPageParam: 0,
  })

  const allRows = data ? data.pages.flatMap((d) => d.rows) : []

  const parentRef = React.useRef<HTMLDivElement>(null)

  const rowVirtualizer = useVirtualizer({
    count: hasNextPage ? allRows.length + 1 : allRows.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 100,
    overscan: 5,
  })

  React.useEffect(() => {
    const [lastItem] = [...rowVirtualizer.getVirtualItems()].reverse()

    if (!lastItem) {
      return
    }

    if (
      lastItem.index >= allRows.length - 1 &&
      hasNextPage &&
      !isFetchingNextPage
    ) {
      fetchNextPage()
    }
  }, [
    hasNextPage,
    fetchNextPage,
    allRows.length,
    isFetchingNextPage,
    rowVirtualizer.getVirtualItems(),
  ])

  return (
    <div>
      <p>
        This infinite scroll example uses React Query's useInfiniteScroll hook
        to fetch infinite data from a posts endpoint and then a rowVirtualizer
        is used along with a loader-row placed at the bottom of the list to
        trigger the next page to load.
      </p>

      <br />
      <br />

      {status === 'pending' ? (
        <p>Loading...</p>
      ) : status === 'error' ? (
        <span>Error: {error.message}</span>
      ) : (
        <div
          ref={parentRef}
          className="List"
          style={{
            height: `500px`,
            width: `100%`,
            overflow: 'auto',
          }}
        >
          <div
            style={{
              height: `${rowVirtualizer.getTotalSize()}px`,
              width: '100%',
              position: 'relative',
            }}
          >
            {rowVirtualizer.getVirtualItems().map((virtualRow) => {
              const isLoaderRow = virtualRow.index > allRows.length - 1
              const post = allRows[virtualRow.index]

              return (
                <div
                  key={virtualRow.index}
                  className={
                    virtualRow.index % 2 ? 'ListItemOdd' : 'ListItemEven'
                  }
                  style={{
                    position: 'absolute',
                    top: 0,
                    left: 0,
                    width: '100%',
                    height: `${virtualRow.size}px`,
                    transform: `translateY(${virtualRow.start}px)`,
                  }}
                >
                  {isLoaderRow
                    ? hasNextPage
                      ? 'Loading more...'
                      : 'Nothing more to load'
                    : post}
                </div>
              )
            })}
          </div>
        </div>
      )}
      <div>
        {isFetching && !isFetchingNextPage ? 'Background Updating...' : null}
      </div>
      <br />
      <br />
      {process.env.NODE_ENV === 'development' ? (
        <p>
          <strong>Notice:</strong> You are currently running React in
          development mode. Rendering performance will be slightly degraded
          until this application is built for production.
        </p>
      ) : null}
    </div>
  )
}

ReactDOM.render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </React.StrictMode>,
  document.getElementById('root'),
)

```

--------------------------------

### Virtualize a long list in React

Source: https://tanstack.com/virtual/latest/docs/introduction.md

This example demonstrates how to use the useVirtualizer hook to render a large list of 10,000 items within a scrollable div. It manages the scroll element reference, item size estimation, and absolute positioning of visible items.

```tsx
import { useVirtualizer } from '@tanstack/react-virtual';

function App() {
  const parentRef = React.useRef(null)

  const rowVirtualizer = useVirtualizer({
    count: 10000,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 35,
  })

  return (
    <div
      ref={parentRef}
      style={{
        height: '400px',
        overflow: 'auto',
      }}
    >
      <div
        style={{
          height: `${rowVirtualizer.getTotalSize()}px`,
          width: '100%',
          position: 'relative',
        }}
      >
        {rowVirtualizer.getVirtualItems().map((virtualItem) => (
          <div
            key={virtualItem.key}
            style={{
              position: 'absolute',
              top: 0,
              left: 0,
              width: '100%',
              height: `${virtualItem.size}px`,
              transform: `translateY(${virtualItem.start}px)`,
            }}
          >
            Row {virtualItem.index}
          </div>
        ))}
      </div>
    </div>
  )
}
```

--------------------------------

### Get Scroll Offset

Source: https://tanstack.com/virtual/latest/docs/api/virtualizer.md

Represents the current scroll position in pixels from the start of the scrollable area.

```typescript
scrollOffset: number
```

--------------------------------

### Virtualizer Configuration Options

Source: https://tanstack.com/virtual/latest/docs/api/virtualizer.md

Configuration options for the virtualizer instance.

```APIDOC
## Virtualizer Configuration Options

### isScrollingResetDelay
- **Type**: number
- **Description**: Duration to wait after the last scroll event before resetting the isScrolling instance property. Default is 150ms.

### useScrollendEvent
- **Type**: boolean
- **Description**: Determines whether to use the native scrollend event. If false, a debounced fallback is used. Default is false.

### isRtl
- **Type**: boolean
- **Description**: Whether to invert horizontal scrolling to support right-to-left language locales.

### useAnimationFrameWithResizeObserver
- **Type**: boolean
- **Description**: When enabled, defers ResizeObserver measurement processing to the next animation frame. Default is false.
```

--------------------------------

### Virtualizer Instance Methods

Source: https://tanstack.com/virtual/latest/docs/api/virtualizer.md

Methods and properties available on the virtualizer instance.

```APIDOC
## Virtualizer Instance Methods

### getVirtualItems
- **Description**: Returns the virtual items for the current state of the virtualizer.

### getVirtualIndexes
- **Description**: Returns the virtual row indexes for the current state of the virtualizer.

### scrollToOffset
- **Parameters**:
  - **toOffset** (number) - Required - The pixel offset to scroll to.
  - **options** (object) - Optional - { align?: 'start' | 'center' | 'end' | 'auto', behavior?: 'auto' | 'smooth' }

### scrollToIndex
- **Parameters**:
  - **index** (number) - Required - The index of the item to scroll to.
  - **options** (object) - Optional - { align?: 'start' | 'center' | 'end' | 'auto', behavior?: 'auto' | 'smooth' }

### scrollBy
- **Parameters**:
  - **delta** (number) - Required - Pixels to scroll relative to current position.
  - **options** (object) - Optional - { behavior?: 'auto' | 'smooth' }
```

--------------------------------

### Scroll Margin Option

Source: https://tanstack.com/virtual/latest/docs/api/virtualizer.md

Specifies the offset from the beginning of the scrolling element to the start of the virtualized list.

```APIDOC
## `scrollMargin`

### Description
This option allows you to specify where the scroll offset should originate. It represents the space between the beginning of the scrolling element and the start of the list, useful for headers or multiple virtualizers.

### Type
`number`

### Usage Example
```tsx
transform: `translateY(${virtualRow.start - rowVirtualizer.options.scrollMargin}px)`
```

### Notes
Can be dynamically measured using `getBoundingClientRect()` or ResizeObserver, especially if preceding items change height.
```

--------------------------------

### Virtualizer Configuration

Source: https://tanstack.com/virtual/latest/docs/api/virtualizer.md

Configuration options for the Virtualizer class constructor.

```APIDOC
## Virtualizer Constructor

### Description
Initializes a new Virtualizer instance with the provided configuration options.

### Parameters
#### Request Body
- **count** (number) - Required - The total number of items to virtualize.
- **getScrollElement** (function) - Required - A function that returns the scrollable element for the virtualizer.
- **estimateSize** (function) - Required - A function that returns the estimated size of an item at a given index.
- **enabled** (boolean) - Optional - Set to false to disable scrollElement observers.
- **debug** (boolean) - Optional - Set to true to enable debug logs.
- **initialRect** (Rect) - Optional - The initial Rect of the scrollElement, useful for SSR.
- **onChange** (function) - Optional - Callback fired when the virtualizer's internal state changes.
- **overscan** (number) - Optional - Number of items to render outside the visible area. Default is 1.
- **horizontal** (boolean) - Optional - Set to true for horizontal orientation.
- **paddingStart** (number) - Optional - Padding at the start of the virtualizer in pixels.
- **paddingEnd** (number) - Optional - Padding at the end of the virtualizer in pixels.
- **scrollPaddingStart** (number) - Optional - Padding at the start when scrolling to an element.
- **scrollPaddingEnd** (number) - Optional - Padding at the end when scrolling to an element.
- **initialOffset** (number | function) - Optional - Initial scroll position on render.
- **getItemKey** (function) - Optional - Function to return a unique key for an item.
- **rangeExtractor** (function) - Optional - Function to determine which indexes to render.
```

--------------------------------

### Get Virtual Indexes

Source: https://tanstack.com/virtual/latest/docs/api/virtualizer.md

Returns an array of numbers representing the indexes of the currently rendered virtual rows.

```typescript
type getVirtualIndexes = () => number[]
```

--------------------------------

### Virtualizer Optional Option: paddingStart

Source: https://tanstack.com/virtual/latest/docs/api/virtualizer.md

Adds pixel padding to the beginning of the virtualized area. This affects the layout and scroll positioning.

```typescript
paddingStart?: number
```

--------------------------------

### Get Scroll Direction

Source: https://tanstack.com/virtual/latest/docs/api/virtualizer.md

Indicates the current direction of scrolling. 'forward' for downwards, 'backward' for upwards, and `null` when not scrolling.

```typescript
scrollDirection: 'forward' | 'backward' | null
```

--------------------------------

### Get Scroll Element Rectangle

Source: https://tanstack.com/virtual/latest/docs/api/virtualizer.md

Provides the current `Rect` object representing the dimensions and position of the scrollable element.

```typescript
scrollRect: Rect
```

--------------------------------

### Get Virtual Items

Source: https://tanstack.com/virtual/latest/docs/api/virtualizer.md

Returns an array of `VirtualItem` objects representing the currently rendered items based on the virtualizer's state.

```typescript
type getVirtualItems = () => VirtualItem[]
```

--------------------------------

### React Window Virtualizer Implementation

Source: https://tanstack.com/virtual/latest/docs/framework/react/examples/window

This snippet demonstrates setting up a virtualized list with `useWindowVirtualizer`. It calculates and applies a `scrollMargin` based on the list's offset to ensure correct positioning of virtualized items within the window scroll. Use this when your scrollable container is the browser window itself.

```tsx
import * as React from 'react'
import * as ReactDOM from 'react-dom/client'

import './index.css'

import { useWindowVirtualizer } from '@tanstack/react-virtual'

function Example() {
  const listRef = React.useRef<HTMLDivElement | null>(null)
  const listOffsetRef = React.useRef(0)

  React.useLayoutEffect(() => {
    listOffsetRef.current = listRef.current?.offsetTop ?? 0
  }, [])

  const virtualizer = useWindowVirtualizer({
    count: 10000,
    estimateSize: () => 35,
    overscan: 5,
    scrollMargin: listOffsetRef.current,
  })

  return (
    <>
      <div ref={listRef} className="List">
        <div
          style={{
            height: `${virtualizer.getTotalSize()}px`,
            width: '100%',
            position: 'relative',
          }}>
          {virtualizer.getVirtualItems().map((item) => (
            <div
              key={item.key}
              className={item.index % 2 ? 'ListItemOdd' : 'ListItemEven'}
              style={{
                position: 'absolute',
                top: 0,
                left: 0,
                width: '100%',
                height: `${item.size}px`,
                transform: `translateY(${ 
                  item.start - virtualizer.options.scrollMargin
                }px)`,
              }}>
              Row {item.index}
            </div>
          ))}
        </div>
      </div>
    </>
  )
}

function App() {
  return (
    <div>
      <p>
        In many cases, when implementing a virtualizer with a window as the
        scrolling element, developers often find the need to specify a
        "scrollMargin." The scroll margin is a crucial setting that defines the
        space or gap between the start of the page and the edges of the list.
      </p>
      <br />
      <br />
      <h3>Window scroller</h3>
      <Example />
      <br />
      <br />
      {process.env.NODE_ENV === 'development' ? (
        <p>
          <strong>Notice:</strong> You are currently running React in
          development mode. Rendering performance will be slightly degraded
          until this application is built for production.
        </p>
      ) : null}
    </div>
  )
}

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

```

--------------------------------

### Dynamic Grid with Row and Column Virtualization

Source: https://tanstack.com/virtual/latest/docs/framework/react/examples/dynamic

Implements a virtualized grid with both row and column virtualization. Useful for large datasets with dynamic column widths. Requires `useWindowVirtualizer` for rows and `useVirtualizer` for columns.

```jsx
const getColumnWidth = (index: number) => columns[index].width

  const virtualizer = useWindowVirtualizer({
    count: data.length,
    estimateSize: () => 350,
    overscan: 5,
    scrollMargin: parentOffsetRef.current,
  })

  const columnVirtualizer = useVirtualizer({
    horizontal: true,
    count: columns.length,
    getScrollElement: () => parentRef.current,
    estimateSize: getColumnWidth,
    overscan: 5,
  })
  const columnItems = columnVirtualizer.getVirtualItems()
  const [before, after] =
    columnItems.length > 0
      ? [
          columnItems[0].start,
          columnVirtualizer.getTotalSize() -
            columnItems[columnItems.length - 1].end,
        ]
      : [0, 0]

  return (
    <div
      ref={parentRef}
      style={{ overflowY: 'auto', border: '1px solid #c8c8c8' }}
    >
      <div
        style={{ 
          height: virtualizer.getTotalSize(),
          position: 'relative',
        }}
      >
        {virtualizer.getVirtualItems().map((row) => {
          return (
            <div
              key={row.key}
              data-index={row.index}
              ref={virtualizer.measureElement}
              style={{ 
                position: 'absolute',
                top: 0,
                left: 0,
                transform: `translateY(${ 
                  row.start - virtualizer.options.scrollMargin
                }px)`,
                display: 'flex',
              }}
            >
              <div style={{ width: `${before}px` }} />
              {columnItems.map((column) => {
                return (
                  <div
                    key={column.key}
                    style={{ 
                      minHeight: row.index === 0 ? 50 : row.size,
                      width: getColumnWidth(column.index),
                      borderBottom: '1px solid #c8c8c8',
                      borderRight: '1px solid #c8c8c8',
                      padding: '7px 12px',
                    }}
                  >
                    {row.index === 0 ? (
                      <div>{columns[column.index].name}</div>
                    ) : (
                      <div>{data[row.index][column.index]}</div>
                    )}
                  </div>
                )
              })}
              <div style={{ width: `${after}px` }} />
            </div>
          )
        })}
      </div>
    </div>
  )
}
```

--------------------------------

### Get Total Virtualized Size

Source: https://tanstack.com/virtual/latest/docs/api/virtualizer.md

Returns the total size in pixels for the virtualized items. This measurement will incrementally change if you choose to dynamically measure your elements as they are rendered.

```typescript
getTotalSize: () => number
```

--------------------------------

### Virtualizer Methods

Source: https://tanstack.com/virtual/latest/docs/api/virtualizer.md

Provides methods to interact with and control the virtualized list.

```APIDOC
## getTotalSize

### Description
Returns the total size in pixels for the virtualized items. This measurement will incrementally change if you choose to dynamically measure your elements as they are rendered.

### Method
`getTotalSize`

### Endpoint
N/A (Method)

### Parameters
None

### Request Example
```javascript
const totalSize = virtualizer.getTotalSize();
```

### Response
#### Success Response (200)
- **totalSize** (number) - The total size in pixels of all virtualized items.

#### Response Example
```json
1500
```
```

```APIDOC
## measure

### Description
Resets any previously stored item measurements. This is useful when the size of items might have changed and needs to be recalculated.

### Method
`measure`

### Endpoint
N/A (Method)

### Parameters
None

### Request Example
```javascript
virtualizer.measure();
```

### Response
#### Success Response (200)
No explicit return value, performs an internal reset.

#### Response Example
```json
null
```
```

```APIDOC
## measureElement

### Description
Measures a specific DOM element using the configured `measureElement` virtualizer option. This method should be called when an element is rendered, typically using a ref callback, and must have a `data-index` attribute.

### Method
`measureElement`

### Endpoint
N/A (Method)

### Parameters
- **el** (TItemElement | null) - The DOM element to measure. Can be null.

### Request Example
```jsx
<div
  key={virtualRow.key}
  data-index={virtualRow.index}
  ref={virtualizer.measureElement}
  style={...}
>...</div>
```

### Response
#### Success Response (200)
No explicit return value, performs an internal measurement.

#### Response Example
```json
null
```
```

```APIDOC
## resizeItem

### Description
Manually changes the size of a virtualized item at a specific index. This is useful for scenarios with custom transitions or when the size is known beforehand.

### Method
`resizeItem`

### Endpoint
N/A (Method)

### Parameters
- **index** (number) - The index of the item to resize.
- **size** (number) - The new size of the item in pixels.

### Request Example
```javascript
virtualizer.resizeItem(5, 100);
```

### Response
#### Success Response (200)
No explicit return value, updates the item size internally.

#### Response Example
```json
null
```
```