Virtual List

A React virtual list that renders only the rows in view, with fixed or measured row heights, overscan, arrow key and Page Up/Down navigation and a scrollToIndex handle.

src/registry/ui/virtual-list.tsx/r/virtual-list.json

Installation#

bash

npx shadcn@latest add @minidev/virtual-list

MiniDev UI is in the shadcn registry directory, so the short form works with no setup. Older CLI versions can use the full URL: npx shadcn@latest add https://ui.minidev.pro/r/virtual-list.json

Usage#

tsx

import { VirtualList } from "@/components/ui/virtual-list"

export function Example() {
  return <VirtualList />
}

API reference#

VirtualList props
Prop	Type	Default
`items`	`T[]`	`SAMPLE_INVOICES as unknown as T[]`
`rowHeight`	`number \| "auto"`	`40`
`estimatedRowHeight`	`number`	`40`
`overscan`	`number`	`6`
`height`	`number`	`360`
`renderRow`	`(item: T, index: number, state: { active: boolean }) => React.ReactNode`	`defaultRender`
`getKey`	`(item: T, index: number) => React.Key`	`defaultKey`
`describeRow`	`(item: T, index: number) => string`	`defaultDescribe`
`activeIndex`	`number`	`-`
`defaultActiveIndex`	`number`	`0`
`onActiveChange`	`(index: number) => void`	`-`
`onSelect`	`(item: T, index: number) => void`	`-`
`title`	`string`	`"Invoices"`
`showJump`	`boolean`	`true`
`showFooter`	`boolean`	`true`
`ref`	`React.Ref<VirtualListHandle>`	`-`
`aria-label`	`string`	`-`
`className`	`string`	`-`