DocsQuick Examples

Quick Examples

Lazy Detail Panel Example

A Shadcn Table example show how use use expandable rows to show additional information about a row and load the data for the detail panel only after the user expands the row.

Fetching the additional data for the detail panels only after the user clicks to expand the row can be a good way to improve performance, and it is pretty easy to implement in Shadcn Table.

It's even easier if you are using React Query. In this example, react query is used to fetch the data for the detail panel, but only after the user clicks to expand the row. The data is also cached for a certain period of time so that when the detail panel is closed and reopened, the data is already available and won't need to be re-fetched.

Loading example

View Extra Storybook Examples

Dynamic Columns Example

An example of Shadcn Table which shows how to fetch remote data and generate columns dynamically

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.