shadcn/ui Table Components

Dev Design Library indexes 99 shadcn/ui table components from 13 open-source UI libraries, with the most coming from Watermelon UI, sv-particles, FLX UI, sv-table and Velora UI. Each one links to its page with the source code, a live preview where available, the library license and the install command. They follow the shadcn/ui conventions, so most install with the shadcn CLI and drop into a Tailwind project. Table components belong to the Data display group.

• tableIntent UI · Reacttable
• Data TableFluid Functionalism · ReactTanStack Table drawn with the library's Table: the fluid hover row highlight plus resizable, draggable columns…
• Pricing 02 - Scalable Pricing TableShadcn Space · ReactA three tier pricing layout with a highlighted recommended plan, feature checklists, and clear CTAs, perfect for any…
• Data TableNotra · ReactA sortable, selectable table with a sticky header, virtualized rows, pagination with a page-size select, and an…
• tableBaseLayer · ReactA table displays data in rows and columns and enables a user to navigate its contents via directional navigation keys…
• Data Table 1Watermelon UI · React
• Basic Data Tablesv-table · Svelte
• Data tableHextaUI · ReactA table for real data, with sorting, search, row selection, pinned columns, a sticky header and pagination.
• TablesCojeev UI · ReactScan a compact ledger, explore detailed records or compare them side by side. One Tables guide for native parts and…
• Comparison TableFLX UI · ReactComparison Table for Select a Plan.
• Data GridVelora UI · ReactSortable, searchable, filterable table with selection, column toggles and pagination, built on TanStack Table.
• Basic Tablesv-particles · Svelte
• Dashboard 01D2Studio UI · ReactHotel booking dashboard with guest and vacancy stats, booking search and a check-in and check-out table.
• TableFluid Functionalism · ReactAnimated table with fluid hover row highlighting and fluid border transitions. Includes TableHeader, TableBody…
• Table 01 - Project Management TableShadcn Space · ReactA sortable projects table with manager, team avatars, progress indicators, search, and pagination, ideal for admin…
• Data Table 10Watermelon UI · React
• Complex Examplesv-table · Svelte
• BasicFLX UI · ReactCaption, header, and a footer total row.
• Pricing comparison tableVelora UI · ReactGrouped feature comparison table with a sticky plan header, and per-plan tabs on mobile.
• Card Tablesv-particles · Svelte
• Pricing CardsD2Studio UI · ReactResponsive three-tier pricing cards with feature comparison and popular plan highlighting
• Data Table 11Watermelon UI · React
• Custom Filters Examplesv-table · Svelte
• With imagesFLX UI · ReactAvatar thumbnails beside name and email in each row.
• Column Visiblity Tablesv-particles · Svelte
• Data Table 12Watermelon UI · React
• Data Gridsv-table · Svelte
• Without dividersFLX UI · ReactBorderless rows for a clean, list-like layout.
• Dense Tablesv-particles · Svelte
• Data Table 13Watermelon UI · React
• Data Table Filters Examplesv-table · Svelte
• Striped rowsFLX UI · ReactZebra striping tints every other row.
• Filter Tablesv-particles · Svelte
• Data Table 2Watermelon UI · React
• Dnd Kit Examplesv-table · Svelte
• With vertical linesFLX UI · ReactColumn grid lines via per-cell right borders.
• Froze Column Dropdownsv-particles · Svelte
• Data Table 3Watermelon UI · React
• Draggable Examplesv-table · Svelte
• DenseFLX UI · ReactCompact padding and type for high-density data.
• Frozen Column Tablesv-particles · Svelte
• Data Table 4Watermelon UI · React
• Expanded Sub Rowssv-table · Svelte
• With checkboxFLX UI · ReactSelect-all header, per-row checkboxes, and a selection count.
• Full Tablesv-particles · Svelte
• Data Table 5Watermelon UI · React
• Numeric Pagination Examplesv-table · Svelte
• Card tableFLX UI · ReactTable inside a Card with title and status badges.
• Pagination Tablesv-particles · Svelte
• Data Table 6Watermelon UI · React
• Paginated Examplesv-table · Svelte
• VerticalFLX UI · ReactKey-value details with row headers down the left.
• Search Tablesv-particles · Svelte
• Data Table 7Watermelon UI · React
• Pinnable Columnsv-table · Svelte
• Sticky headerFLX UI · ReactHeader pinned while the capped body scrolls.
• Simple Tablesv-particles · Svelte
• Data Table 8Watermelon UI · React
• Resizable Sort Examplesv-table · Svelte
• SortableFLX UI · ReactTanStack Table, click a column header to sort ascending or descending.
• Sortable Tablesv-particles · Svelte
• Data Table 9Watermelon UI · React
• Row Selectionsv-table · Svelte
• With filtersFLX UI · ReactTanStack Table, global search input plus a status column filter dropdown.
• Sticky Column Dropdownsv-particles · Svelte
• Table 1Watermelon UI · React
• PaginationFLX UI · ReactTanStack Table, prev / next controls with a rows-per-page select.
• Sticky Horizontal Tablesv-particles · Svelte
• Table 10Watermelon UI · React
• Numeric paginationFLX UI · ReactTanStack Table, numbered page buttons with prev / next arrows.
• Striped Tablesv-particles · Svelte
• Table 11Watermelon UI · React
• Column visibilityFLX UI · ReactTanStack Table, toggle individual columns on or off from a dropdown menu.
• Table Basic Tablesv-particles · Svelte
• Table 12Watermelon UI · React
• Resizable columnsFLX UI · ReactTanStack Table, drag the header edge to resize column widths.
• Table With Row Selectionsv-particles · Svelte
• Table 13Watermelon UI · React
• Pinnable columnsFLX UI · ReactTanStack Table, a column pinned to the right stays visible while scrolling horizontally.
• Table With Sticky Headersv-particles · Svelte
• Table 14Watermelon UI · React
• Row selectionFLX UI · ReactTanStack Table, row checkboxes with a bulk actions toolbar showing count, clear, and delete.
• Unique Tablesv-particles · Svelte
• Table 15Watermelon UI · React
• Expanding sub-rowsFLX UI · ReactTanStack Table, expandable parent rows reveal nested child rows for tree-shaped data.
• Vertical Tablesv-particles · Svelte
• Table 16Watermelon UI · React
• Complex data tableFLX UI · ReactTanStack Table, combines sorting, column filter, pagination, row selection, column visibility toggle, and per-row…
• With Imagessv-particles · Svelte
• Table 2Watermelon UI · React
• With Vertical Linessv-particles · Svelte
• Table 3Watermelon UI · React
• Without Horizontal Dividersv-particles · Svelte
• Table 4Watermelon UI · React
• Table 5Watermelon UI · React
• Table 6Watermelon UI · React
• Table 7Watermelon UI · React
• Table 8Watermelon UI · React
• Table 9Watermelon UI · React

Libraries with shadcn/ui table components

• Watermelon UI
• sv-particles
• FLX UI
• sv-table
• Velora UI

Related categories

• Table Components
• React Table Components
• Tailwind CSS Table Components
• Svelte Table Components
• Animated Table Components
• shadcn/ui Data Display Components
• shadcn/ui Card Components
• shadcn/ui Avatar Components
• shadcn/ui Data Table Components
• shadcn/ui Accordion Components
• shadcn/ui Stat Components
• shadcn/ui List Components
• shadcn/ui Chart Components
• shadcn/ui Calendar Components
• shadcn/ui Collapsible Components
• shadcn/ui Stat Card Components
• shadcn/ui Avatar Group Components
• shadcn/ui Tree View Components
• shadcn/ui Carousel Components
• shadcn/ui Testimonial Components
• shadcn/ui Filter Bar Components