Table Virtuoso Basic Example
The TableVirtuoso
component can display large tables with unknown row sizes. It has most of the Virtuoso
capabilities sans pinning top items. It also supports sticky table headers.
You do not have to configure anything apart from the data
or the totalCount
and the itemContent
renderer.
The itemContent
render callback accepts index
, and item
parameter (if data
is set),
which specifies the absolute index of the item rendered;
It is up to you to build and return the respective content.
Styling and markup
The component renders an HTML table structure. Few CSS settings can affect its look:
- A
border-collapse: collapse
setting on table
causes the fixed header borders to scroll away. To fix, use border-collapse: separate
and specify bottom/right borders. table
should not have styling that changes its display
and overflow
.
Table with data
import { TableVirtuoso } from 'react-virtuoso'
import { generateUsers } from './data'
export default function App() {
return (
<TableVirtuoso
style={{ height: 400 }}
data={generateUsers(100000)}
itemContent={(index, user) => (
<>
<td style={{ width: 150 }}>{user.name}</td>
<td>{user.description}</td>
</>
)}
/>
)
}
Table with totalCount
import { TableVirtuoso } from 'react-virtuoso'
import { generateUsers } from './data'
import { useMemo } from 'react'
export default function App() {
const users = useMemo(() => generateUsers(100), [])
return (
<TableVirtuoso
style={{ height: 400 }}
totalCount={users.length}
itemContent={(index) => {
const user = users[index]
return (
<>
<td style={{ width: 150 }}>{user.name}</td>
<td>{user.description}</td>
</>
)
}}
/>
)
}
The example below adjusts the top
of the sticky header element, so that the table header doesn't tuck under the site header.
import { TableVirtuoso } from 'react-virtuoso'
import { generateUsers } from './data'
export default function App() {
return (
<TableVirtuoso
data={generateUsers(100000)}
useWindowScroll
fixedHeaderContent={(index, user) => (
<tr>
<th style={{ width: 150, background: 'blue', color: 'white' }}>Name</th>
<th style={{ background: 'blue', color: 'white' }}>Description</th>
</tr>
)}
itemContent={(index, user) => (
<>
<td style={{ width: 150 }}>{user.name}</td>
<td>{user.description}</td>
</>
)}
/>
)
}