DocsQuick Examples

Quick Examples

Virtualized Example

An example of a Shadcn Table with virtualization enabled to achieve higher performance when rendering large data sets

Shadcn Table has a built-in virtualization features (via @tanstack/react-virtual) that allows you to render a large number of rows or columns without major performance issues that you would normally see with a large number of DOM elements.

Try out the performance of the table below with 10,000 rows and over a dozen columns! Filtering, Search, and Sorting also maintain usable performance.

Be sure to also check out the full virtualization feature guide docs to learn about both Row and Column Virtualization.

NOTE: You should only enable row virtualization if you have a large number of rows or columns. Depending on the size of the table, if you are rendering fewer than a couple dozen rows at a time, you will actually just be adding extra overhead to the table renders. Virtualization only becomes necessary when you have over 50 rows or so at the same time with no pagination or dozens of columns.

Loading example

View Extra Storybook Examples

Lazy Sub-Rows Example

A Shadcn Table example show how use use expandable rows to fetch additional sub-rows data only after the user expands the row.

Row Virtualization Example

An example of a Shadcn Table with row virtualization enabled to achieve higher performance when rendering large data sets