Virtuoso

https://virtuoso.dev
Admin
Virtuoso is a comprehensive React virtualization library suite providing performant components for...
Tokens:184,035
Snippets:1,717
Trust Score:8.3
Update:1 month ago
Show doc for...
Tokens:
Raw
### Basic Data-table Setup with Columns

Source: https://virtuoso.dev/data-table/guides/migrating-from-table-virtuoso

Use this example to set up a basic data-table with local data, defining columns for name, category, and status. The 'status' column is set to be sticky on the right.

```javascript
import { DataTable, DataTableCell, DataTableColumn, DataTableColumnHeader } from '@/components/ui/data-table'
import { localModel } from '@virtuoso.dev/data-table'

const rows = Array.from({ length: 40 }, (_, index) => ({
  id: `SKU-${String(index + 1).padStart(3, '0')}`,
  name: `Product ${index + 1}`,
  category: ['Office', 'Peripherals', 'Audio'][index % 3]!,
  status: ['In stock', 'Low stock', 'Backorder'][index % 3]!,
}))

const model = localModel({ data: rows })

export default function App() {
  return (
    <DataTable className="rounded-xl" computeRowKey={({ data }) => data.id} model={model} style={{ height: 340 }}>
      <DataTableColumn field="name">
        <DataTableColumnHeader>Name</DataTableColumnHeader>
        <DataTableCell>
          {({ row }) => (
            <div className="flex flex-col">
              <span className="font-medium">{row.data.name}</span>
              <span className="text-xs text-muted-foreground">{row.data.id}</span>
            </div>
          )}
        </DataTableCell>
      </DataTableColumn>
      <DataTableColumn field="category">
        <DataTableColumnHeader>Category</DataTableColumnHeader>
        <DataTableCell>{({ cellValue }) => String(cellValue)}</DataTableCell>
      </DataTableColumn>
      <DataTableColumn field="status" sticky="right">
        <DataTableColumnHeader>Status</DataTableColumnHeader>
        <DataTableCell>{({ cellValue }) => String(cellValue)}</DataTableCell>
      </DataTableColumn>
    </DataTable>
  )
}
```

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

### Implement Resizable Columns

Source: https://virtuoso.dev/data-table/columns/column-resizing

Full example showing the setup of a data table with resizable columns using the ResizeHandle component.

```tsx
import { DataTable, DataTableCell, DataTableColumn, DataTableColumnHeader, HeaderEdge } from '@/components/ui/data-table'
import { ResizeHandle } from '@/components/ui/data-table/column-resize'
import { localModel } from '@virtuoso.dev/data-table'

const rows = Array.from({ length: 60 }, (_, index) => ({
  name: `Product ${index + 1}`,
  category: ['Office', 'Peripherals', 'Audio'][index % 3]!,
  stock: 8 + ((index * 7) % 41),
}))

const model = localModel({ data: rows })

export default function App() {
  return (
    <DataTable className="rounded-xl" model={model} style={{ height: 340 }}>
      <DataTableColumn field="name">
        <DataTableColumnHeader>
          <HeaderEdge component={ResizeHandle} />
          {() => 'Product'}
        </DataTableColumnHeader>
        <DataTableCell className="font-medium">{({ cellValue }) => String(cellValue)}</DataTableCell>
      </DataTableColumn>
      <DataTableColumn field="category">
        <DataTableColumnHeader>
          <HeaderEdge component={ResizeHandle} />
          {() => 'Category'}
        </DataTableColumnHeader>
        <DataTableCell>{({ cellValue }) => String(cellValue)}</DataTableCell>
      </DataTableColumn>
      <DataTableColumn field="stock">
        <DataTableColumnHeader className="justify-end">
          <HeaderEdge component={ResizeHandle} />
          {() => 'Stock'}
        </DataTableColumnHeader>
        <DataTableCell className="text-right tabular-nums">{({ cellValue }) => String(cellValue)}</DataTableCell>
      </DataTableColumn>
    </DataTable>
  )
}
```

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

### Minimum Known-Good Virtuoso Data Table Example

Source: https://virtuoso.dev/data-table/guides/troubleshooting

This example demonstrates the essential setup for a Virtuoso Data Table, including explicit height, wrapper import, and basic data configuration. Use this as a baseline for comparison if your table is not rendering correctly.

```javascript
import { DataTable, DataTableCell, DataTableColumn, DataTableColumnHeader } from '@/components/ui/data-table'
import { localModel } from '@virtuoso.dev/data-table'

const rows = [
  { name: 'Standing Desk', category: 'Office' },
  { name: 'USB-C Dock', category: 'Peripherals' },
  { name: 'Mechanical Keyboard', category: 'Peripherals' },
]

const model = localModel({ data: rows })

export default function App() {
  return (
    <div className="space-y-3">
      <p className="text-sm text-muted-foreground">
        This is the minimum known-good layout: explicit height, installed wrapper import, and plain data.
      </p>

      <DataTable className="rounded-xl" model={model} style={{ height: 240 }}>
        <DataTableColumn field="name">
          <DataTableColumnHeader>Product</DataTableColumnHeader>
          <DataTableCell>{({ cellValue }) => String(cellValue)}</DataTableCell>
        </DataTableColumn>
        <DataTableColumn field="category">
          <DataTableColumnHeader>Category</DataTableColumnHeader>
          <DataTableCell>{({ cellValue }) => String(cellValue)}</DataTableCell>
        </DataTableColumn>
      </DataTable>
    </div>
  )
}
```

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

### App Component Setup for Data Table

Source: https://virtuoso.dev/data-table/examples/table-instance-dashboard

Sets up the main application component, including the Virtuoso DataTable and an external ControlPanel. It initializes the data model and uses `useEngineRef` to get a reference to the table's engine.

```tsx
import { DataTable, DataTableCell, DataTableColumn, DataTableColumnHeader } from '@/components/ui/data-table'
import { localModel, useEngineRef } from '@virtuoso.dev/data-table'

import { ControlPanel } from './ControlPanel'
import { products } from './data'

const model = localModel({ data: products })

export default function App() {
  const engineRef = useEngineRef()

  return (
    <div className="grid gap-4 lg:grid-cols-[280px_minmax(0,1fr)]">
      <ControlPanel engineRef={engineRef} />

      <DataTable className="rounded-xl" model={model} engineRef={engineRef} style={{ height: 420 }}>
        <DataTableColumn field="name">
          <DataTableColumnHeader>Product</DataTableColumnHeader>
          <DataTableCell className="font-medium">{({ row }) => row.data.name}</DataTableCell>
        </DataTableColumn>
        <DataTableColumn field="category">
          <DataTableColumnHeader>Category</DataTableColumnHeader>
          <DataTableCell>{({ cellValue }) => String(cellValue)}</DataTableCell>
        </DataTableColumn>
        <DataTableColumn field="status">
          <DataTableColumnHeader>Status</DataTableColumnHeader>
          <DataTableCell>{({ cellValue }) => String(cellValue)}</DataTableCell>
        </DataTableColumn>
        <DataTableColumn field="region">
          <DataTableColumnHeader>Region</DataTableColumnHeader>
          <DataTableCell>{({ cellValue }) => String(cellValue)}</DataTableCell>
        </DataTableColumn>
      </DataTable>
    </div>
  )
}
```

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

### Install Virtuoso Masonry

Source: https://virtuoso.dev/masonry

Use npm to install the package in your project.

```bash
npm install @virtuoso.dev/masonry
```

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

### VirtuosoMessageList Live Example

Source: https://virtuoso.dev/virtuoso-message-list

A comprehensive example demonstrating a chat-like message list. It includes custom message rendering, adding new messages, and simulating bot responses with text updates. Use this for a full-featured chat interface implementation.

```jsx
import {
  VirtuosoMessageListProps,
  VirtuosoMessageListMethods,
  VirtuosoMessageListLicense,
  VirtuosoMessageList,
} from '@virtuoso.dev/message-list'
import { randTextRange, randPhrase } from '@ngneat/falso'
import { useRef, useMemo, useState } from 'react'

interface Message {
  key: string
  text: string
  user: 'me' | 'other'
}

let idCounter = 0

function randomMessage(user: Message['user']): Message {
  return { user, key: `${idCounter++}`, text: randTextRange({ min: user === 'me' ? 20 : 100, max: 200 }) }
}

const ItemContent: VirtuosoMessageListProps<Message, null>['ItemContent'] = ({ data }) => {
  const ownMessage = data.user === 'me'
  return (
    <div style={{ paddingBottom: '2rem', display: 'flex' }}>
      <div
        style={{
          maxWidth: '60%',
          marginLeft: data.user === 'me' ? 'auto' : undefined,
          border: '1px solid var(--border)',
          background: ownMessage ? 'var(--background)' : 'var(--alt-background)',
          color: 'var(--foreground)',
          borderRadius: '1rem',
          padding: '1rem',
        }}
      >
        {data.text}
      </div>
    </div>
  )
}

export default function App() {
  const virtuoso = useRef<VirtuosoMessageListMethods<Message>>(null)
  const [data, setData] = useState<VirtuosoMessageListProps<Message, null>['data']>(() => {
    return {
      data: Array.from({ length: 100 }, (_, index) => randomMessage(index % 2 === 0 ? 'me' : 'other')),
      scrollModifier: {
        type: 'item-location',
        location: {
          index: 'LAST',
          align: 'end',
        },
      },
    }
  })

  return (
    <div className="wide-example" style={{ height: 500, display: 'flex', flexDirection: 'column', fontSize: '70%' }}>
      <VirtuosoMessageListLicense licenseKey="">
        <VirtuosoMessageList<Message, null>
          data={data}
          ref={virtuoso}
          style={{ flex: 1 }}
          computeItemKey={({ data }) => data.key}
          ItemContent={ItemContent}
        />
      </VirtuosoMessageListLicense>

      <button
        style={{ marginTop: '1rem', fontSize: '1.1rem', padding: '1rem' }}
        onClick={(e) => {
          ;(e.target as HTMLButtonElement).disabled = true
          setData((current) => {
            const myMessage = randomMessage('me')
            return {
              data: [...current.data, myMessage],
              scrollModifier: {
                type: 'auto-scroll-to-bottom',
                autoScroll: ({ scrollInProgress, atBottom }) => {
                  // This is a local user action, so it intentionally brings the question into view.
                  return {
                    index: 'LAST',
                    align: 'start',
                    behavior: atBottom || scrollInProgress ? 'smooth' : 'auto',
                  }
                },
              },
            }
          })

          setTimeout(() => {
            const botMessage = randomMessage('other')
            setData((current) => {
              return {
                data: [...current.data, botMessage],
              }
            })

            let counter = 0
            const interval = setInterval(() => {
              if (counter++ > 20) {
                clearInterval(interval)
                ;(e.target as HTMLButtonElement).disabled = false
              }

              setData((current) => {
                return {
                  data: current.data.map((message) => {
                    return message.key === botMessage.key ? { ...message, text: message.text + ' ' + randPhrase() } : message
                  }),
                  // scroll modifier that will make the list autoscroll when the bot response overflows the viewport.
                  scrollModifier: {
                    type: 'items-change',
                    behavior: 'smooth',
                  },
                }
              })
            }, 150)
          }, 1000)
        }}
      >
        Ask the bot a question!
      </button>
    </div>
  )
}
```

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

### Basic VirtuosoMasonry Usage

Source: https://virtuoso.dev/masonry/api-reference/virtuoso-masonry

Demonstrates the basic setup for VirtuosoMasonry with a specified number of columns and data.

```jsx
<VirtuosoMasonry columnCount={3} data={items} />
```

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

### Basic Column Reordering Setup

Source: https://virtuoso.dev/data-table/columns/column-reordering

This snippet demonstrates the basic setup for column reordering in a Virtuoso Data Table. It includes necessary imports and the structure for defining columns with reordering components.

```javascript
import { DataTable, DataTableCell, DataTableColumn, DataTableColumnHeader, HeaderOverlay, HeaderStart } from '@/components/ui/data-table'
import { ReorderDropZone, ReorderGrip } from '@/components/ui/data-table/column-reorder'
import { localModel } from '@virtuoso.dev/data-table'

const rows = Array.from({ length: 40 }, (_, index) => ({
  id: `SKU-${String(index + 1).padStart(3, '0')}`,
  name: `Product ${index + 1}`,
  category: ['Office', 'Peripherals', 'Audio'][index % 3]!,
  status: ['In stock', 'Low stock', 'Backorder'][index % 3]!,
  region: ['US', 'EU', 'APAC'][index % 3]!,
}))

const model = localModel({ data: rows })
const columns = [
  ['name', 'Product', 'font-medium'],
  ['category', 'Category', ''],
  ['status', 'Status', ''],
  ['region', 'Region', ''],
] as const

export default function App() {
  return (
    <DataTable className="rounded-xl" computeRowKey={({ data }) => data.id} model={model} style={{ height: 320 }}>
      {columns.map(([field, label, cellClassName]) => (
        <DataTableColumn key={field} field={field}>
          <DataTableColumnHeader>
            <HeaderStart component={ReorderGrip} />
            <HeaderOverlay component={ReorderDropZone} />
            {() => label}
          </DataTableColumnHeader>
          <DataTableCell className={cellClassName}>{({ cellValue }) => String(cellValue)}</DataTableCell>
        </DataTableColumn>
      ))}
    </DataTable>
  )
}
```

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

### Minimal Headless Virtuoso Data Table Example

Source: https://virtuoso.dev/data-table/installation/headless

A minimal example demonstrating the usage of the headless Virtuoso Data Table with custom column headers and cells. This setup is suitable when you need full control over the table's markup and styling.

```typescript
import { Cell, Column, ColumnHeader, VirtuosoDataTable, localModel } from '@virtuoso.dev/data-table'

import { rows } from './data'

const currency = new Intl.NumberFormat('en-US', {
  currency: 'USD',
  style: 'currency',
})

const model = localModel({ data: rows })

export default function App() {
  return (
    <VirtuosoDataTable
      model={model}
      style={{
        height: 360,
        border: '1px solid var(--border)',
        borderRadius: 16,
        overflow: 'hidden',
      }}
    >
      <Column field="name">
        <ColumnHeader>
          {() => <div style={{ padding: '0 12px', fontWeight: 600, height: 44, display: 'flex', alignItems: 'center' }}>Product</div>}
        </ColumnHeader>
        <Cell>
          {({ cellValue }) => (
            <div style={{ padding: '0 12px', height: 44, display: 'flex', alignItems: 'center' }}>{String(cellValue)}</div>
          )}
        </Cell>
      </Column>
      <Column field="category">
        <ColumnHeader>
          {() => <div style={{ padding: '0 12px', fontWeight: 600, height: 44, display: 'flex', alignItems: 'center' }}>Category</div>}
        </ColumnHeader>
        <Cell>
          {({ cellValue }) => (
            <div style={{ padding: '0 12px', height: 44, display: 'flex', alignItems: 'center' }}>{String(cellValue)}</div>
          )}
        </Cell>
      </Column>
      <Column field="price">
        <ColumnHeader>
          {() => (
            <div
              style={{ padding: '0 12px', fontWeight: 600, height: 44, display: 'flex', alignItems: 'center', justifyContent: 'flex-end' }}
            >
              Price
            </div>
          )}
        </ColumnHeader>
        <Cell>
          {({ cellValue }) => (
            <div
              style={{
                padding: '0 12px',
                height: 44,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'flex-end',
                fontVariantNumeric: 'tabular-nums',
              }}
            >
              {currency.format(Number(cellValue))}
            </div>
          )}
        </Cell>
      </Column>
    </VirtuosoDataTable>
  )
}
```

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

### Basic Virtuoso Setup with Data

Source: https://virtuoso.dev/react-virtuoso/virtuoso/basic-usage

Initializes a Virtuoso component with a large array of data generated via useMemo.

```javascript
import { Virtuoso } from 'react-
virtuoso'
import { useMemo } from 'react'
export default function App() {
const users = useMemo(() => {
return Array.from({ length: 100000 
}, (_, index) => ({
name: `User ${index}`,
size: Math.floor(Math.random() * 
```

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

### Install Resize Handle

Source: https://virtuoso.dev/data-table/columns/column-resizing

Command to add the required resize handle component to your project.

```bash
npx shadcn@latest add petyosi/react-virtuoso/data-table-resize-handle
```

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

### Install React Virtuoso

Source: https://virtuoso.dev/react-virtuoso

Use npm to add the library to your project dependencies.

```bash
npm install react-virtuoso
```

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

### HeaderStart

Source: https://virtuoso.dev/data-table/api-reference/misc

A component or function used to render the start of the header.

```APIDOC
## HeaderStart

### Signature
`const HeaderStart : (props: HeaderSlotProps) => null`

### Parameters
- **props** (HeaderSlotProps) - Required - The properties for the HeaderStart component.
```

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

### Install React Virtuoso Plugin for Claude

Source: https://virtuoso.dev/skills

Install the react-virtuoso plugin and virtuoso-skills for use with Claude.

```bash
/plugin marketplace add petyosi/react-virtuoso
/plugin install virtuoso-skills@virtuoso
```

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

### Tuned Viewport Example

Source: https://virtuoso.dev/data-table/guides/performance

Demonstrates how to configure a Virtuoso data table for optimal performance by setting `columnOverscanCount` and `increaseViewportBy`. This example uses a local model for data and defines custom row keys.

```javascript
import { DataTable, DataTableCell, DataTableColumn, DataTableColumnHeader } from '@/components/ui/data-table'
import { localModel } from '@virtuoso.dev/data-table'

const rows = Array.from({ length: 240 }, (_, index) => ({
  id: `SKU-${String(index + 1).padStart(3, '0')}`,
  name: `Product ${index + 1}`,
  region: ['US', 'EU', 'APAC'][index % 3]!,
  status: ['In stock', 'Low stock', 'Backorder'][index % 3]!,
}))

const model = localModel({ data: rows })

export default function App() {
  return (
    <DataTable
      className="rounded-xl"
      columnOverscanCount={1}
      computeRowKey={({ data }) => ('id' in data ? data.id : String(data))}
      model={model}
      increaseViewportBy={120}
      style={{ height: 360 }}
    >
      <DataTableColumn field="name">
        <DataTableColumnHeader>Product</DataTableColumnHeader>
        <DataTableCell>{({ cellValue }) => String(cellValue)}</DataTableCell>
      </DataTableColumn>
      <DataTableColumn field="region">
        <DataTableColumnHeader>Region</DataTableColumnHeader>
        <DataTableCell>{({ cellValue }) => String(cellValue)}</DataTableCell>
      </DataTableColumn>
      <DataTableColumn field="status">
        <DataTableColumnHeader>Status</DataTableColumnHeader>
        <DataTableCell>{({ cellValue }) => String(cellValue)}</DataTableCell>
      </DataTableColumn>
    </DataTable>
  )
}
```

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

### Install Headless Package

Source: https://virtuoso.dev/data-table/installation/headless

Install the headless Virtuoso Data Table package using pnpm. npm, yarn, and bun are also supported.

```bash
pnpm add @virtuoso.dev/data-table
```

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

### Minimal DataTable Setup with State Persistence

Source: https://virtuoso.dev/data-table/state-persistence

This example demonstrates the basic integration of DataTableStatePersistence with column visibility and width persistence adapters. Ensure the DataTableStatePersistence component is mounted within the DataTable and pass the desired adapters.

```javascript
import { DataTable, DataTableCell, DataTableColumn, DataTableColumnHeader, HeaderEdge } from '@/components/ui/data-table'
import { ResizeHandle } from '@/components/ui/data-table/column-resize'
import { columns$, localModel, useCellValue, usePublisher } from '@virtuoso.dev/data-table'
import { columnWidthPersistenceAdapter } from '@virtuoso.dev/data-table/column-resize'
import {
  columnVisibilityPersistenceAdapter,
  columnVisibilityState$,
  setColumnVisibility$,
} from '@virtuoso.dev/data-table/column-visibility'
import { DataTableStatePersistence } from '@virtuoso.dev/data-table/state-persistence'

const rows = [
  { id: 'SKU-001', product: 'Standing Desk', category: 'Office', stock: 14, internalId: 'inv-001' },
  { id: 'SKU-002', product: 'USB-C Dock', category: 'Peripherals', stock: 42, internalId: 'inv-002' },
  { id: 'SKU-003', product: 'Mechanical Keyboard', category: 'Peripherals', stock: 28, internalId: 'inv-003' },
  { id: 'SKU-004', product: 'Noise-canceling Headset', category: 'Audio', stock: 9, internalId: 'inv-004' },
]

const model = localModel({ data: rows })
const adapters = [columnVisibilityPersistenceAdapter(), columnWidthPersistenceAdapter()]

function ColumnPicker() {
  const columns = useCellValue(columns$)
  const visibility = useCellValue(columnVisibilityState$)
  const setColumnVisibility = usePublisher(setColumnVisibility$)

  return (
    <div className="mb-3 flex flex-wrap gap-2 rounded-md border bg-muted/30 p-3 text-sm">
      {[...columns].map(([key, column]) => {
        const visible = visibility.get(key) ?? column.visible !== false
        return (
          <button
            aria-pressed={visible}
            className={visible ? 'rounded border bg-background px-2 py-1 font-medium' : 'rounded border px-2 py-1 text-muted-foreground'}
            key={key}
            onClick={() => setColumnVisibility({ key, visible: !visible })}
            type="button"
          >
            {visible ? 'Hide' : 'Show'} {column.field}
          </button>
        )
      })}
    </div>
  )
}

export default function App() {
  return (
    <DataTable className="rounded-xl" computeRowKey={({ data }) => data.id} model={model} style={{ height: 360 }}>
      <DataTableStatePersistence adapters={adapters} storageKey="docs-state-persistence-feature-page" />
      <ColumnPicker />

      <DataTableColumn field="product">
        <DataTableColumnHeader>
          <HeaderEdge component={ResizeHandle} />
          {() => 'Product'}
        </DataTableColumnHeader>
        <DataTableCell className="font-medium">{({ cellValue }) => String(cellValue)}</DataTableCell>
      </DataTableColumn>
      <DataTableColumn field="category">
        <DataTableColumnHeader>
          <HeaderEdge component={ResizeHandle} />
          {() => 'Category'}
        </DataTableColumnHeader>
        <DataTableCell>{({ cellValue }) => String(cellValue)}</DataTableCell>
      </DataTableColumn>
      <DataTableColumn field="stock">
        <DataTableColumnHeader className="justify-end">
          <HeaderEdge component={ResizeHandle} />
          {() => 'Stock'}
        </DataTableColumnHeader>
        <DataTableCell className="text-right tabular-nums">{({ cellValue }) => String(cellValue)}</DataTableCell>
      </DataTableColumn>
      <DataTableColumn field="internalId" visible={false}>
        <DataTableColumnHeader>
          <HeaderEdge component={ResizeHandle} />
          {() => 'Internal ID'}
        </DataTableColumnHeader>
        <DataTableCell>{({ cellValue }) => String(cellValue)}</DataTableCell>
      </DataTableColumn>
    </DataTable>
  )
}

```

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

### Implementing GroupedTableVirtuoso

Source: https://virtuoso.dev/react-virtuoso/table-virtuoso/table-grouped

Basic setup for the GroupedTableVirtuoso component using useMemo for group counts and data initialization.

```javascript
import { GroupedTableVirtuoso } from 
'react-virtuoso'
import { useMemo } from 'react'
export default function App() {
const groupCounts = useMemo(() => {
return Array(10).fill(10)
}, [])
const users = useMemo(() => {
```

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

### Install React Virtuoso Plugin for Codex

Source: https://virtuoso.dev/skills

Install the react-virtuoso plugin and virtuoso-skills for use with Codex.

```bash
codex plugin marketplace add petyosi/react-virtuoso --ref main --sparse .agents/plugins --sparse plugins/virtuoso-skills
codex plugin add virtuoso-skills@virtuoso
```

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

### Install Falso for Data Generation

Source: https://virtuoso.dev/message-list/tutorial/intro

Add the @ngneat/falso package to your project to generate random data for messages and users.

```bash
npm install @ngneat/falso
```

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

### GroupedVirtuoso Data Setup

Source: https://virtuoso.dev/react-virtuoso/grouped-virtuoso/grouped-by-first-letter

Initializes user data, group identifiers, and group counts for the GroupedVirtuoso component.

```javascript
import { GroupedVirtuoso } from 'react-
virtuoso'
import { useMemo } from 'react'
export default function App() {
const { users, groups, groupCounts }
= useMemo(() => {
const letters = 
'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split(
'')
const users = 
letters.flatMap((letter) => {
return Array.from({ length: 20 }, 
(_, index) => ({
name: `${letter} User 
${index}`,
initials: `${letter}${index}`,
description: `Description for 
user ${index}`,
}))
})
const groups = Array.from({ length: 
10 }, (_, index) => {
return letters[index]
})
```

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

### Install Virtuoso Message List Package

Source: https://virtuoso.dev/message-list/tutorial/message-list

Install the Virtuoso Message List NPM package using npm.

```bash
npm i @virtuoso.dev/message-list
```

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

### Install Sort Button Wrapper

Source: https://virtuoso.dev/data-table/examples/remote-column-sorting

Use the shadcn CLI to add the sort header button component to your project.

```bash
npx shadcn@latest add petyosi/react-virtuoso/data-table-sort-header-button
```

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

### Column Visibility Implementation

Source: https://virtuoso.dev/data-table/examples/column-visibility

Example implementation showing the integration of column visibility state and toolbar controls.

```tsx
App.tsx
```

```ts
data.ts
```

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

### Importing from Shadcn Wrapper

Source: https://virtuoso.dev/data-table/guides/troubleshooting

Use this import path when you have successfully installed the shadcn UI wrapper for Virtuoso Data Table. If the wrapper is not installed, import directly from `@virtuoso.dev/data-table`.

```javascript
import { DataTable } from '@/components/ui/data-table'
```

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

### initialTopMostItemIndex

Source: https://virtuoso.dev/react-virtuoso/api-reference/grouped-table-virtuoso

Configures the list to start scrolled to a specific item, identified by its index or an alignment object.

```APIDOC
## initialTopMostItemIndex

### Description
Set to a value between 0 and totalCount - 1 to make the list start scrolled to that item. Pass in an object to achieve additional effects similar to `scrollToIndex`.

### Parameters
#### Path Parameters
- None

#### Query Parameters
- None

#### Request Body
- None

### Request Example
- None

### Response
#### Success Response (200)
- None

#### Response Example
- None

### Inherited from
`Omit.initialTopMostItemIndex`
```

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

### Install Virtuoso Agent Skills

Source: https://virtuoso.dev/react-virtuoso

Add agent skills to assist coding assistants with component selection and measurement constraints.

```bash
npx skills add virtuoso-dev/skills --skill react-virtuoso
```

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

### Implementing an Auto-Resizing Virtuoso List

Source: https://virtuoso.dev/react-virtuoso/virtuoso/auto-resizing

Basic setup for a Virtuoso component that automatically adjusts to item height changes.

```javascript
import { Virtuoso } from 'react-
virtuoso'
import { useMemo } from 'react'
export default function App() {
const users = useMemo(() => {
return Array.from({ length: 100000 
}, (_, index) => ({
name: `User ${index}`,
description: `Description for 

```

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

### Defining Data for VirtuosoMasonry

Source: https://virtuoso.dev/masonry/api-reference/virtuoso-masonry

An example of how to structure the data array for VirtuosoMasonry, including item IDs, titles, and image URLs.

```javascript
const items = [
  { id: 1, title: 'Item 1', imageUrl: '...' },
  { id: 2, title: 'Item 2', imageUrl: '...' },
]
```

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

### Define a basic Header and Footer

Source: https://virtuoso.dev/message-list/headers-footers

Basic setup for adding header and footer components to the Virtuoso message list.

```typescript
import {
VirtuosoMessageListProps,
VirtuosoMessageList,
useVirtuosoMethods,
VirtuosoMessageListLicense,
VirtuosoMessageListMethods,
} from '@virtuoso.dev/message-list'
const Header: 
VirtuosoMessageListProps<number, null>
```

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

### Basic Virtuoso Component Usage

Source: https://virtuoso.dev/react-virtuoso/api-reference/virtuoso

Demonstrates the basic setup for the Virtuoso component, rendering a list with a specified total count and custom item content.

```jsx
<Virtuoso
  totalCount={1000}
  itemContent={(index) => <div>Item {index}</div>}
/>
```

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

### Example Usage of Pipe and Signal

Source: https://virtuoso.dev/gurx/api-reference/misc

Demonstrates creating a signal, piping its values through a transformation (incrementing by 1), and subscribing to the transformed signal to log output.

```typescript
const signal$ = Signal<number>(true, (r) => {
  const signalPlusOne$ = r.pipe(signal$, map(i => i + 1))
  r.sub(signalPlusOne$, console.log)
})
const r = new Realm()
r.pub(signal$, 1)
```

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

### Initialize Column Reorder Data Table

Source: https://virtuoso.dev/data-table/examples/column-reorder

Setup for a data table with reorderable columns using the localModel and column-reorder components.

```typescript
import { DataTable, DataTableCell, DataTableColumn, DataTableColumnHeader, 
HeaderOverlay, HeaderStart } from '@/components/ui/data-table'
import { ReorderDropZone, ReorderGrip } from '@/components/ui/data-table/column-
reorder'
import { localModel } from '@virtuoso.dev/data-table'
import { products } from './data'
const model = localModel({ data: products })
const columns = [
['name', 'Product', 'font-medium'],
['category', 'Category', ''],
['status', 'Status', ''],
```

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

### Implementing Grouped Load on Demand

Source: https://virtuoso.dev/react-virtuoso/grouped-virtuoso/grouped-with-load-on-demand

This example demonstrates how to manage group counts and append items to existing groups using React state and memoization.

```javascript
import { GroupedVirtuoso } from 'react-
virtuoso'
import { useMemo, useState, 
useCallback, useEffect, useRef } from 
'react'
export default function App() {
const { users, groups, groupCounts
} = useMemo(() => {
const letters = 
'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split(
'')
const users = 
letters.flatMap((letter) => {
return Array.from({ length: 20 }, 
(_, index) => ({
name: `${letter} User 
${index}`,
initials: `${letter}${index}`,
description: `Description for 
user ${index}`,
}))
})
const groups = Array.from({ length: 
10 }, (_, index) => {
return letters[index]
```

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

### Implement Basic Message List

Source: https://virtuoso.dev/message-list

Initialize the component with a license key and data configuration. Ensure the container has a defined height for virtualization to function correctly.

```typescript
import { VirtuosoMessageListLicense, VirtuosoMessageList, VirtuosoMessageListProps } from '@virtuoso.dev/message-list'
import { useMemo } from 'react'

const licenseKey = 'your-license-key'

export default function App() {
  const data = useMemo<VirtuosoMessageListProps<{ id: number; content: string }, null>['data']>(() => {
    return {
      data: Array.from({ length: 100 }, (_, index) => ({ id: index, content: `Message ${index}` })),
      scrollModifier: {
        type: 'item-location',
        location: {
          index: 'LAST',
          align: 'end',
        },
      },
    }
  }, [])

  return (
    <VirtuosoMessageListLicense licenseKey={licenseKey}>
      <VirtuosoMessageList style={{ height: '100%' }} data={data} ItemContent={({ data }) => <div>{data.content}</div>} />
    </VirtuosoMessageListLicense>
  )
}
```

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

### Get Node Value Example

Source: https://virtuoso.dev/gurx/api-reference/misc

Demonstrates how to retrieve the current value of a stateful node and how the value updates after publishing a new value.

```typescript
const foo$ = Cell('foo')

const r = new Realm()
r.getValue(foo$) // 'foo'
r.pub(foo$, 'bar')
//...
r.getValue(foo$) // 'bar'
```

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

### Basic Styled Data Table Example

Source: https://virtuoso.dev/data-table/installation/shadcn

Demonstrates how to set up and render a basic styled data table using the shadcn/ui wrapper and Virtuoso's local model.

```tsx
import { DataTable, DataTableCell, DataTableColumn, DataTableColumnHeader } from '@/components/ui/data-table'

import { products } from './data'
import { localModel } from '@virtuoso.dev/data-table'

const currency = new Intl.NumberFormat('en-US', {
  currency: 'USD',
  style: 'currency',
})

const model = localModel({ data: products })

export default function App() {
  return (
    <DataTable className="rounded-xl" model={model} style={{ height: 360 }}>
      <DataTableColumn field="name">
        <DataTableColumnHeader>Product</DataTableColumnHeader>
        <DataTableCell className="font-medium">{({ cellValue }) => String(cellValue)}</DataTableCell>
      </DataTableColumn>
      <DataTableColumn field="category">
        <DataTableColumnHeader>Category</DataTableColumnHeader>
        <DataTableCell>{({ cellValue }) => String(cellValue)}</DataTableCell>
      </DataTableColumn>
      <DataTableColumn field="price">
        <DataTableColumnHeader className="justify-end">Price</DataTableColumnHeader>
        <DataTableCell className="text-right tabular-nums">{({ cellValue }) => currency.format(Number(cellValue))}</DataTableCell>
      </DataTableColumn>
      <DataTableColumn field="stock">
        <DataTableColumnHeader className="justify-end">Stock</DataTableColumnHeader>
        <DataTableCell className="text-right tabular-nums">{({ cellValue }) => String(cellValue)}</DataTableCell>
      </DataTableColumn>
    </DataTable>
  )
}
```

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

### Get Multiple Cell Values with useCellValues

Source: https://virtuoso.dev/gurx/api-reference/misc

Use this hook to retrieve values from multiple cells. It optimizes re-renders by updating the component only when any of the specified cells change. This example shows retrieving two cell values.

```javascript
const foo$ = Cell('foo')
const bar$ = Cell('bar')
//...
function MyComponent() {
  const [foo, bar] = useCellValues(foo$, bar$)
  return <div>{foo} - {bar}</div>
}
```

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

### get()

Source: https://virtuoso.dev/message-list/api-reference/imperative-api

Gets a shallow copy of the current data in the list.

```APIDOC
## get()

### Description
Gets a shallow copy of the current data in the list.

### Method
get

### Returns
`Data`[]
```

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

### Basic Local Data Model Example

Source: https://virtuoso.dev/data-table/data-model

Demonstrates setting up and using a `localModel` with static in-memory data for a Virtuoso DataTable. Ensure the model is stable and passed to the `DataTable` component.

```javascript
import { DataTable, DataTableCell, DataTableColumn, DataTableColumnHeader } from '@/components/ui/data-table'
import { localModel } from '@virtuoso.dev/data-table'

const rows = [
  { id: 'SKU-001', name: 'Standing Desk', category: 'Office', stock: 14 },
  { id: 'SKU-002', name: 'USB-C Dock', category: 'Peripherals', stock: 42 },
  { id: 'SKU-003', name: 'Mechanical Keyboard', category: 'Peripherals', stock: 28 },
]

const model = localModel({ data: rows })

export default function App() {
  return (
    <DataTable className="rounded-xl" model={model} style={{ height: 280 }}>
      <DataTableColumn field="name">
        <DataTableColumnHeader>Product</DataTableColumnHeader>
        <DataTableCell className="font-medium">{({ cellValue }) => String(cellValue)}</DataTableCell>
      </DataTableColumn>
      <DataTableColumn field="category">
        <DataTableColumnHeader>Category</DataTableColumnHeader>
        <DataTableCell>{({ cellValue }) => String(cellValue)}</DataTableCell>
      </DataTableColumn>
      <DataTableColumn field="stock">
        <DataTableColumnHeader className="justify-end">Stock</DataTableColumnHeader>
        <DataTableCell className="text-right tabular-nums">{({ cellValue }) => String(cellValue)}</DataTableCell>
      </DataTableColumn>
    </DataTable>
  )
}
```

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

### Install Gurx NPM Package

Source: https://virtuoso.dev/gurx

Install the Gurx package using NPM or a similar package manager. This package includes TypeScript types.

```bash
npm install @virtuoso.dev/gurx
```

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

### Create New React Project with Vite

Source: https://virtuoso.dev/message-list/tutorial/intro

Bootstrap a new Next.js project using npm and Vite with the React TypeScript template.

```bash
npm create vite@latest virtuoso-message-list-tutorial -- --template react-ts
```

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

### getCurrentlyRendered()

Source: https://virtuoso.dev/message-list/api-reference/imperative-api

Gets the currently rendered data items.

```APIDOC
## getCurrentlyRendered()

### Description
Gets the currently rendered data items.

### Method
getCurrentlyRendered

### Returns
`Data`[]
```

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

### Basic VirtuosoMessageList Setup

Source: https://virtuoso.dev/message-list/tutorial/message-list

This snippet shows the fundamental structure for integrating the VirtuosoMessageList component within a React application, including the necessary license wrapper and core props.

```jsx
return (
  <div>
    <VirtuosoMessageListLicense licenseKey="">
      <VirtuosoMessageList<ChatMessage, null> style={{ height: '80vh' }} data={messageListData} computeItemKey={computeItemKey} />
    </VirtuosoMessageListLicense>
  </div>
)
```

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

### Fixed-size Test Table Setup

Source: https://virtuoso.dev/data-table/guides/testing

Sets up a Virtuoso Data Table with fixed item and viewport heights for component testing. This context simulates virtualization behavior without relying on actual DOM layout.

```javascript
import { localModel, VirtuosoDataTableTestingContext } from '@virtuoso.dev/data-table'
import { DataTable, DataTableCell, DataTableColumn, DataTableColumnHeader } from '@/components/ui/data-table'

const rows = Array.from({ length: 20 }, (_, index) => ({
  id: `SKU-${String(index + 1).padStart(3, '0')}`,
  name: `Product ${index + 1}`,
}))

const model = localModel({ data: rows })

export default function App() {
  return (
    <VirtuosoDataTableTestingContext.Provider value={{ itemHeight: 40, viewportHeight: 240 }}>
      <DataTable className="rounded-xl" model={model} style={{ height: 240 }}>
        <DataTableColumn field="name">
          <DataTableColumnHeader>Product</DataTableColumnHeader>
          <DataTableCell>{({ cellValue }) => String(cellValue)}</DataTableCell>
        </DataTableColumn>
      </DataTable>
    </VirtuosoDataTableTestingContext.Provider>
  )
}
```

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

### Basic Data Table with Local Model

Source: https://virtuoso.dev/data-table

Demonstrates setting up a basic data table using a local data model and defining columns with headers and cell renderers. Ensure you have the necessary components imported from '@/components/ui/data-table' and '@virtuoso.dev/data-table'.

```jsx
import { DataTable, DataTableCell, DataTableColumn, DataTableColumnHeader } from '@/components/ui/data-table'
import { localModel } from '@virtuoso.dev/data-table'

const products = [
  { id: 'SKU-001', name: 'Standing Desk', category: 'Office', price: 699, stock: 14 },
  { id: 'SKU-002', name: 'USB-C Dock', category: 'Peripherals', price: 229, stock: 42 },
  { id: 'SKU-003', name: 'Mechanical Keyboard', category: 'Peripherals', price: 169, stock: 28 },
  { id: 'SKU-004', name: 'Noise-canceling Headset', category: 'Audio', price: 319, stock: 9 },
]

const currency = new Intl.NumberFormat('en-US', {
  currency: 'USD',
  style: 'currency',
})

const model = localModel({ data: products })

export default function App() {
  return (
    <DataTable className="rounded-xl" model={model} style={{ height: 320 }}>
      <DataTableColumn field="name">
        <DataTableColumnHeader>Name</DataTableColumnHeader>
        <DataTableCell className="font-medium">{({ cellValue }) => String(cellValue)}</DataTableCell>
      </DataTableColumn>
      <DataTableColumn field="category">
        <DataTableColumnHeader>Category</DataTableColumnHeader>
        <DataTableCell>{({ cellValue }) => String(cellValue)}</DataTableCell>
      </DataTableColumn>
      <DataTableColumn field="price">
        <DataTableColumnHeader className="justify-end">Price</DataTableColumnHeader>
        <DataTableCell className="text-right tabular-nums">{({ cellValue }) => currency.format(Number(cellValue))}</DataTableCell>
      </DataTableColumn>
      <DataTableColumn field="stock">
        <DataTableColumnHeader className="justify-end">Stock</DataTableColumnHeader>
        <DataTableCell className="text-right tabular-nums">{({ cellValue }) => String(cellValue)}</DataTableCell>
      </DataTableColumn>
    </DataTable>
  )
}
```

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

### Configure Remote Model with Fetch and Actions

Source: https://virtuoso.dev/data-table/data-model/remote-data-model

Set up a remote data model with fetch functions and define actions with concurrency strategies like 'supersede', 'queue', or 'deduplicate'. Use 'supersede' for search, 'queue' for ordered workflows, and 'deduplicate' for retries.

```javascript
const [model] = useState(() =>
  remoteModel({
    fetch: fetchProducts,
    actions: {
      search: {
        strategy: 'supersede',
        handler: ({ params, payload }) => ({ ...params, search: String(payload) }),
      },
      exportRows: {
        strategy: 'queue',
        handler: ({ params, payload }) => ({ ...params, exportId: String(payload) }),
      },
    },
  })
)
```

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

### height()

Source: https://virtuoso.dev/message-list/api-reference/imperative-api

Gets the known height of a specific item in the list. This is useful for calculations involving item dimensions.

```APIDOC
## height(item: Data)

### Description
Gets the known height of the item.

### Method
`height`

### Parameters
#### Path Parameters
- **item** (Data) - Required - The item to get the height for.

### Returns
`number`
```

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

### Implement Basic Virtuoso List

Source: https://virtuoso.dev/react-virtuoso

Requires a container height and total item count to render a virtualized list.

```javascript
import { Virtuoso } from 'react-virtuoso'
export default function App() {
return <Virtuoso style={{ height: '100%' }} totalCount={200}
itemContent={(index) => <div>Item {index}</div>} />
}
```

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

### Basic GroupedVirtuoso Usage

Source: https://virtuoso.dev/react-virtuoso/api-reference/grouped-virtuoso

Demonstrates the fundamental setup of GroupedVirtuoso with group counts, custom group content, and item content. Ensure you provide the necessary props for defining groups and their items.

```jsx
<GroupedVirtuoso
  groupCounts={[10, 20, 15]}
  groupContent={(index) => <div>Group {index}</div>}
  itemContent={(index, groupIndex) => <div>Item {index} in group {groupIndex}</div>}
/>
```

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

### Load License Key from Environment Variables

Source: https://virtuoso.dev/message-list/licensing

Load the license key from environment variables for use in your application. This example shows how to read a VITE-prefixed environment variable and apply it to the license wrapper.

```jsx
const licenseKey = import.meta.env.VITE_VIRTUOSO_MESSAGE_LIST_LICENSE_KEY ?? ''

export function App() {
  return (
    <VirtuosoMessageListLicense licenseKey={licenseKey}>
      <Routes />
    </VirtuosoMessageListLicense>
  )
}
```

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

### Define Message List Types and Helpers

Source: https://virtuoso.dev/message-list

Setup imports and message structure for a dynamic message list implementation.

```typescript
import {
VirtuosoMessageListProps,
VirtuosoMessageListMethods,
VirtuosoMessageListLicense,
VirtuosoMessageList,
} from '@virtuoso.dev/message-list'
import { randTextRange, randPhrase }
from '@ngneat/falso'
import { useRef, useMemo, useState }
from 'react'
interface Message {
key: string
text: string
user: 'me' | 'other'
}
let idCounter = 0
function randomMessage(user: 
Message['user']): Message {
return { user, key: `${idCounter++}`, 
text: randTextRange({ min: user === 
'me' ? 20 : 100, max: 200 }) }
}
const ItemContent: 
VirtuosoMessageListProps<Message, null>
```
Tokens:
Raw