Quick Examples
React Query Example
An example of Shadcn Table which shows how to fetch remote data and filter and paginate on a remote server with react-query
This is just like the Remote Data Fetching Example, but react-query is used to simplify all the state management of the fetching and loading of data.
For a step-by-step build of this pattern with a service, a query hook and a reusable state hook, read the Building Production-Ready Tables guide.
React Query is by far the best way to fetch remote data in React. It has features like caching, refetching, polling, pagination, and more that work together very well with table logic as seen in this example.
Also, be sure to check out the Virtualized Example, which shows off the use of another TanStack library, React Virtual, to render thousands of rows at once while still maintaining great performance.
View Extra Storybook Examples
Sticky Row Selection Example
An example of Shadcn Table which shows how to pin individual rows as they get selected and have them be sticky and stay in view while scrolling.
Remote Data Fetching Example
An example of Shadcn Table which shows how to fetch remote data and filter and paginate on a remote server