Loading video...

Video Failed to Load

Go Home

Introducing Table and Data Table components. Powered by TanStack Table ✨ Built using Radix UI and Tailwind CSS. With Pagination, Row Selection, Sorting, Filters, Row Actions and Keyboard Navigation.

420,951 views • 3 years ago •via X (Twitter)

10 Comments

shadcn's profile picture
shadcn3 years ago

I’ve created a 1500+ words guide on how you can build your own custom Data Table using existing components. Step by step guide on adding pagination, sorting, and building custom filters using Button, Popovers, DropdownMenu...etc

shadcn's profile picture
shadcn3 years ago

Looks really nice in dark mode with the new Tailwind CSS darker color palette.

shadcn's profile picture
shadcn3 years ago

Link to GitHub repo:

Devon Govett's profile picture
Devon Govett3 years ago

Would be awesome if this implemented the ARIA grid pattern for arrow key navigation, and exposed selection, sorting, etc. to screen readers. Check out the Table component from react-aria-components for all that and more. You can style it the same way! 👍

trash's profile picture
trash3 years ago

why you such a GOAT

Steven Tey's profile picture
Steven Tey3 years ago

Insane — this is so good 🤯🤯🤯🤯

Zain Wania's profile picture
Zain Wania3 years ago

such impressive work, super jealous of not being able to get this directly in Vue

Julius's profile picture
Julius3 years ago

Awesome as always! Keep it up 🔥🔥

Farhan H's profile picture
Farhan H3 years ago

Data TABLE!!! OMG this is so good

Favourite Jome's profile picture
Favourite Jome3 years ago

This project keeps getting better and better 🤩

Related Videos