Tailwind CSS Data Table Components

Dev Design Library indexes 150 Tailwind CSS data table components from 29 open-source UI libraries, with the most coming from Tremor Blocks, Origin UI, FLX UI, Spectrum UI and Watermelon UI. Each one links to its page with the source code, a live preview where available, the library license and the install command. Every library in this list styles its components with Tailwind CSS utility classes. Data table components belong to the Data display group.

Showing 120 of 150, a mix from every library. Open a library to see all of its components.

• Dashboard 01shadcn/ui · ReactA dashboard with sidebar, charts and data table.
• TableHeroUI · ReactTables display structured data in rows and columns with support for sorting, selection, column resizing, and infinite…
• Table ViewReact Spectrum · ReactTables are containers for displaying information. They allow users to quickly scan, sort, compare, and take action on…
• Comp 466Origin UI · React
• DatatablePreline UI · JavaScript (HTML + Tailwind)
• tableIntent UI · Reacttable
• TableUntitled UI React · React
• Order BookbeUI · ReactAnimated order book with bid and ask depth, spread, and volume balance.
• API Keys TableSpectrum UI · ReactKey management with masked secrets in mono, scope chips, usage counts and a revoke action.
• Data TableFluid Functionalism · ReactTanStack Table drawn with the library's Table: the fluid hover row highlight plus resizable, draggable columns…
• Customers TableOpenSourceUI · React
• Data TableBoardUI · ReactFilters, selection, and pagination wired up.
• TableTremor Blocks · React
• 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 TableWatermelon UI · React
• Basic Data Tablesv-table · Svelte
• Data TableUI Lab · ReactSorts, selects and bulk-acts on rows without losing its place.
• Data tableHextaUI · ReactA table for real data, with sorting, search, row selection, pinned columns, a sticky header and pagination.
• Data Table ArtifactLocalMode · ReactA generic sortable data table for local row data — VectorDB results, model catalogs, evaluation rows, or…
• Data TableCojeev UI · ReactDisplays records with client-side filtering, sortable columns, and paginated rows.
• BasicFLX UI · ReactCaption, header, and a footer total row.
• Data GridVelora UI · ReactSortable, searchable, filterable table with selection, column toggles and pagination, built on TanStack Table.
• Basic Tablesv-particles · Svelte
• Data GridSpaceUI · ReactDisplays large datasets in an interactive table where users can sort, filter, paginate, and resize columns to analyze…
• Dashboard 01D2Studio UI · ReactHotel booking dashboard with guest and vacancy stats, booking search and a check-in and check-out table.
• TableEaseUI · ReactA plain, composable data table: sortable headers with an arrow that only shows on hover until active, and rows that…
• Data TableFibo · ReactA table for lists people work through, on TanStack Table: sorting, search, filters with counts, pages, selection, cell…
• Data TableReactFrame · ReactAn admin data table with sortable/filterable columns, global search, status tabs, row selection, badge/avatar/actions…
• Tailwind TableReact Spectrum · React
• Comp 467Origin UI · React
• Audit Log TableSpectrum UI · ReactA dense, pinned-header event log with actors, mono action names, IPs and severity levels.
• Orders TableOpenSourceUI · React
• Table 01Tremor Blocks · React
• Data Table 1Watermelon UI · React
• Complex Examplesv-table · Svelte
• GGUF Explorer BlockLocalMode · ReactBrowse 160,000+ HuggingFace GGUF models and the curated wllama catalog, inspect any file's metadata via a ~4KB HTTP…
• With imagesFLX UI · ReactAvatar thumbnails beside name and email in each row.
• Column Visiblity Tablesv-particles · Svelte
• Vanilla TableReact Spectrum · React
• Comp 468Origin UI · React
• Customers TableSpectrum UI · ReactAccounts ranked by MRR with plan badges, churn-risk indicators and owner avatars.
• Recent Transactions TableOpenSourceUI · React
• Table 02Tremor Blocks · React
• Data Table 10Watermelon UI · React
• Custom Filters Examplesv-table · Svelte
• Vector Data Manager BlockLocalMode · ReactFour-format vector import (Pinecone/ChromaDB/CSV/JSONL + native JSON) with auto format-detection, preview, batched…
• Without dividersFLX UI · ReactBorderless rows for a clean, list-like layout.
• Filter Tablesv-particles · Svelte
• Comp 469Origin UI · React
• Data TableSpectrum UI · ReactA typed data table with sorting, search and row selection, where rows glide into their new order.
• Tasks TableOpenSourceUI · React
• Table 03Tremor Blocks · React
• Data Table 11Watermelon UI · React
• Data Gridsv-table · Svelte
• Model Cache TableLocalMode · ReactCached-model observability table: model ID (monospace, truncated), status badge (loaded/loading/error), load duration…
• Striped rowsFLX UI · ReactZebra striping tints every other row.
• Froze Column Dropdownsv-particles · Svelte
• Comp 470Origin UI · React
• Deployments TableSpectrum UI · ReactCI deploys with commit messages, mono shas, environment badges, build status and author avatars.
• Team Members TableOpenSourceUI · React
• Table 04Tremor Blocks · React
• Data Table 12Watermelon UI · React
• Data Table Filters Examplesv-table · Svelte
• With vertical linesFLX UI · ReactColumn grid lines via per-cell right borders.
• Frozen Column Tablesv-particles · Svelte
• Comp 471Origin UI · React
• Feature Flags TableSpectrum UI · ReactFlag management with env chips, rollout meters and a live spring-animated switch per row.
• Users Select TableOpenSourceUI · React
• Table 05Tremor Blocks · React
• Data Table 13Watermelon UI · React
• Dnd Kit Examplesv-table · Svelte
• DenseFLX UI · ReactCompact padding and type for high-density data.
• Full Tablesv-particles · Svelte
• Comp 472Origin UI · React
• Files TableSpectrum UI · ReactA shared-drive browser with type-glyph tiles, sizes, collaborator stacks and modified dates.
• Table 06Tremor Blocks · React
• Data Table 2Watermelon UI · React
• Draggable Examplesv-table · Svelte
• With checkboxFLX UI · ReactSelect-all header, per-row checkboxes, and a selection count.
• Pagination Tablesv-particles · Svelte
• Comp 473Origin UI · React
• Inventory TableSpectrum UI · ReactStock management with SKU tiles, capacity meters that change color at thresholds and status labels.
• Table 07Tremor Blocks · React
• Data Table 3Watermelon UI · React
• Expanded Sub Rowssv-table · Svelte
• Card tableFLX UI · ReactTable inside a Card with title and status badges.
• Search Tablesv-particles · Svelte
• Comp 474Origin UI · React
• Invoices TableSpectrum UI · ReactBilling history with mono invoice numbers, status pills and a per-row PDF download.
• Table 08Tremor Blocks · React
• Data Table 4Watermelon UI · React
• Numeric Pagination Examplesv-table · Svelte
• VerticalFLX UI · ReactKey-value details with row headers down the left.
• Simple Tablesv-particles · Svelte
• Comp 475Origin UI · React
• Leaderboard TableSpectrum UI · ReactRankings with medal chips for the top three, player avatars, streaks and weekly movement.
• Table 09Tremor Blocks · React
• Data Table 5Watermelon UI · React
• Paginated Examplesv-table · Svelte
• Sticky headerFLX UI · ReactHeader pinned while the capped body scrolls.
• Sortable Tablesv-particles · Svelte
• Comp 476Origin UI · React
• Market Watchlist TableSpectrum UI · ReactA price watchlist with ticker tiles, signed 24h changes and seven-day inline sparklines.
• Table 10Tremor Blocks · React
• Data Table 6Watermelon UI · React
• Pinnable Columnsv-table · Svelte
• SortableFLX UI · ReactTanStack Table, click a column header to sort ascending or descending.
• Sticky Column Dropdownsv-particles · Svelte
• Comp 477Origin UI · React
• Orders TableSpectrum UI · ReactE-commerce orders with fulfillment pills, customer avatars and an expandable line-item panel.
• Table 11Tremor Blocks · React
• Data Table 7Watermelon UI · React
• Resizable Sort Examplesv-table · Svelte
• With filtersFLX UI · ReactTanStack Table, global search input plus a status column filter dropdown.
• Sticky Horizontal Tablesv-particles · Svelte
• Comp 478Origin UI · React
• Payments TableSpectrum UI · ReactTransactions with people avatars, status pills, filters, row selection and a bulk export bar.
• Table Action 01Tremor Blocks · React
• Data Table 8Watermelon UI · React

Libraries with Tailwind CSS data table components

• Tremor Blocks
• Origin UI
• FLX UI
• Spectrum UI
• Watermelon UI

Related categories

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