Virtualized Table React component
A table that scrolls through 10,000 or 100,000 rows without slowing down: only the rows on screen are rendered, with instant search, sortable columns, a real-size scrollbar and a footer that shows what's visible and how many rows are actually in the DOM.
About the Virtualized Table component
Virtualized Table handles huge lists without slowing the page down: you can scroll through 10,000 or 100,000 customers smoothly because only the couple of dozen rows on screen are ever in the page, and the scrollbar still reflects the full size.
Search filters the whole set as you type, every column sorts, and the footer shows which rows you're looking at and how many are actually rendered.
When to use it
Use it for admin tools, logs, audit trails, customer and order lists, analytics exports and any table that can grow to thousands of rows.
For a few dozen rows, a normal table is simpler and better for find-in-page.
Installation
Add the Virtualized Table component to your project with the shadcn CLI. It lands in components/virtualized-table.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/virtualized-tableOr copy the source by hand and install its dependencies:
npm install clsx tailwind-mergeProps
<VirtualizedTable /> accepts 7 props, all optional. It also accepts the usual <div> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "dark" | "light" | "dark" |
| title | string | "Customers" |
| rowCount How many sample rows to generate when no rows are passed. | number | 10000 |
| rows | VirtualUser[] | — |
| height Height of the scroll area, in px. | number | 440 |
| rowHeight | number | 44 |
| overscan Extra rows rendered above and below the visible window. | number | 8 |
- theme"dark" | "light"Default: "dark"
- titlestringDefault: "Customers"
- rowCount
How many sample rows to generate when no rows are passed.
numberDefault: 10000 - rowsVirtualUser[]
- height
Height of the scroll area, in px.
numberDefault: 440 - rowHeightnumberDefault: 44
- overscan
Extra rows rendered above and below the visible window.
numberDefault: 8
npm dependencies
Installed for you by the shadcn CLI.
Virtualized Table FAQ
- How many rows can it take?
- It renders only what's visible plus a few rows of overscan, so 100,000 rows scroll as smoothly as 100. Sorting and filtering still run over the full set in memory, which takes a few milliseconds at that size.
- Can I pass my own data?
- Yes, rows takes { id, name, email, country, plan, mrr, signedUp, status }[]. Adapt the columns in the component for other shapes; each column has a key, a grid width, alignment and a render function.
- Do rows need a fixed height?
- Yes. rowHeight (44px by default) keeps the maths simple and the scrolling exact. Long text is truncated to fit.
- Is it accessible?
- The table uses aria-rowcount and aria-rowindex so screen readers know the full size even though only some rows exist, headers carry aria-sort, and the scroll area is focusable for keyboard scrolling.
