Table Rails Components
Clean, modern table components for displaying data in your Rails applications. These examples showcase different table styles and layouts.
If you're looking for a more interactive table component, check out the Datatable component.
Examples
Basic Table
A clean, simple table with status badges. Perfect for displaying user lists, team members, or any basic data with clear visual hierarchy.
| Name | Role | Status | |
|---|---|---|---|
| Alex Johnson | alex@example.com | Admin | Active |
| Sarah Miller | sarah@example.com | Editor | Active |
| Michael Chen | michael@example.com | Viewer | Pending |
| Emily Davis | emily@example.com | Editor | Active |
| James Wilson | james@example.com | Viewer | Inactive |
<div class="w-full max-w-4xl mx-auto">
<div class="bg-white dark:bg-neutral-900 rounded-xl border border-black/10 dark:border-white/10 shadow-xs overflow-hidden">
<div class="overflow-x-auto">
<table class="w-full">
<thead class="bg-neutral-100 dark:bg-neutral-800">
<tr class="*:py-3 *:text-left *:[box-shadow:inset_0_-1px_0_0_rgb(229_229_229)] dark:*:[box-shadow:inset_0_-1px_0_0_rgb(46_46_46)]">
<th scope="col" class="pl-6 pr-3 text-sm font-semibold text-neutral-900 dark:text-neutral-50">
Name
</th>
<th scope="col" class="px-3 text-sm font-semibold text-neutral-900 dark:text-neutral-50">
Email
</th>
<th scope="col" class="px-3 text-sm font-semibold text-neutral-900 dark:text-neutral-50">
Role
</th>
<th scope="col" class="pl-3 pr-6 text-sm font-semibold text-neutral-900 dark:text-neutral-50">
Status
</th>
</tr>
</thead>
<tbody class="*:*:py-4">
<tr class="[box-shadow:inset_0_-1px_0_0_rgb(229_229_229)] dark:[box-shadow:inset_0_-1px_0_0_rgb(46_46_46)]">
<td class="pl-6 pr-3 text-sm font-medium text-neutral-900 dark:text-neutral-100">
Alex Johnson
</td>
<td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
alex@example.com
</td>
<td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
Admin
</td>
<td class="pl-3 pr-6">
<span class="inline-flex items-center gap-1 rounded-full bg-green-50 px-2 py-1 text-xs font-medium text-green-700 outline outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25">
Active
</span>
</td>
</tr>
<tr class="[box-shadow:inset_0_-1px_0_0_rgb(229_229_229)] dark:[box-shadow:inset_0_-1px_0_0_rgb(46_46_46)]">
<td class="pl-6 pr-3 text-sm font-medium text-neutral-900 dark:text-neutral-100">
Sarah Miller
</td>
<td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
sarah@example.com
</td>
<td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
Editor
</td>
<td class="pl-3 pr-6">
<span class="inline-flex items-center gap-1 rounded-full bg-green-50 px-2 py-1 text-xs font-medium text-green-700 outline outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25">
Active
</span>
</td>
</tr>
<tr class="[box-shadow:inset_0_-1px_0_0_rgb(229_229_229)] dark:[box-shadow:inset_0_-1px_0_0_rgb(46_46_46)]">
<td class="pl-6 pr-3 text-sm font-medium text-neutral-900 dark:text-neutral-100">
Michael Chen
</td>
<td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
michael@example.com
</td>
<td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
Viewer
</td>
<td class="pl-3 pr-6">
<span class="inline-flex items-center gap-1 rounded-full bg-yellow-50 px-2 py-1 text-xs font-medium text-yellow-700 outline outline-yellow-700/20 dark:bg-yellow-400/10 dark:text-yellow-500 dark:outline-yellow-400/25">
Pending
</span>
</td>
</tr>
<tr class="[box-shadow:inset_0_-1px_0_0_rgb(229_229_229)] dark:[box-shadow:inset_0_-1px_0_0_rgb(46_46_46)]">
<td class="pl-6 pr-3 text-sm font-medium text-neutral-900 dark:text-neutral-100">
Emily Davis
</td>
<td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
emily@example.com
</td>
<td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
Editor
</td>
<td class="pl-3 pr-6">
<span class="inline-flex items-center gap-1 rounded-full bg-green-50 px-2 py-1 text-xs font-medium text-green-700 outline outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25">
Active
</span>
</td>
</tr>
<tr>
<td class="pl-6 pr-3 text-sm font-medium text-neutral-900 dark:text-neutral-100">
James Wilson
</td>
<td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
james@example.com
</td>
<td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
Viewer
</td>
<td class="pl-3 pr-6">
<span class="inline-flex items-center gap-1 rounded-full bg-red-50 px-2 py-1 text-xs font-medium text-red-700 outline outline-red-600/20 dark:bg-red-400/10 dark:text-red-400 dark:outline-red-400/25">
Inactive
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>Striped Table
A table with alternating row colors for improved readability. Great for product lists, inventory management, or any data where visual separation between rows helps scanning.
| Product | Category | Price | Stock |
|---|---|---|---|
| Wireless Headphones | Electronics | $129.99 | 245 |
| Ergonomic Mouse | Electronics | $49.99 | 512 |
| Desk Lamp | Furniture | $79.99 | 89 |
| Notebook Set | Stationery | $24.99 | 1,024 |
| USB-C Cable | Accessories | $19.99 | 3,456 |
| Monitor Stand | Furniture | $89.99 | 156 |
<div class="w-full max-w-4xl mx-auto">
<div class="bg-white dark:bg-neutral-900 rounded-xl border border-black/10 dark:border-white/10 shadow-xs overflow-hidden">
<div class="overflow-x-auto">
<table class="w-full">
<thead class="bg-neutral-100 dark:bg-neutral-800">
<tr class="*:py-3 *:text-left *:[box-shadow:inset_0_-1px_0_0_rgb(229_229_229)] dark:*:[box-shadow:inset_0_-1px_0_0_rgb(46_46_46)]">
<th scope="col" class="pl-6 pr-3 text-sm font-semibold text-neutral-900 dark:text-neutral-50">
Product
</th>
<th scope="col" class="px-3 text-sm font-semibold text-neutral-900 dark:text-neutral-50">
Category
</th>
<th scope="col" class="px-3 text-sm font-semibold text-neutral-900 dark:text-neutral-50">
Price
</th>
<th scope="col" class="pl-3 pr-6 text-sm font-semibold text-neutral-900 dark:text-neutral-50 text-right">
Stock
</th>
</tr>
</thead>
<tbody class="*:even:bg-neutral-50 dark:*:even:bg-neutral-800/50 *:*:py-4">
<tr>
<td class="pl-6 pr-3 text-sm font-medium text-neutral-900 dark:text-neutral-100">
Wireless Headphones
</td>
<td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
Electronics
</td>
<td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
$129.99
</td>
<td class="pl-3 pr-6 text-sm text-neutral-500 dark:text-neutral-400 text-right">
245
</td>
</tr>
<tr>
<td class="pl-6 pr-3 text-sm font-medium text-neutral-900 dark:text-neutral-100">
Ergonomic Mouse
</td>
<td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
Electronics
</td>
<td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
$49.99
</td>
<td class="pl-3 pr-6 text-sm text-neutral-500 dark:text-neutral-400 text-right">
512
</td>
</tr>
<tr>
<td class="pl-6 pr-3 text-sm font-medium text-neutral-900 dark:text-neutral-100">
Desk Lamp
</td>
<td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
Furniture
</td>
<td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
$79.99
</td>
<td class="pl-3 pr-6 text-sm text-neutral-500 dark:text-neutral-400 text-right">
89
</td>
</tr>
<tr>
<td class="pl-6 pr-3 text-sm font-medium text-neutral-900 dark:text-neutral-100">
Notebook Set
</td>
<td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
Stationery
</td>
<td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
$24.99
</td>
<td class="pl-3 pr-6 text-sm text-neutral-500 dark:text-neutral-400 text-right">
1,024
</td>
</tr>
<tr>
<td class="pl-6 pr-3 text-sm font-medium text-neutral-900 dark:text-neutral-100">
USB-C Cable
</td>
<td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
Accessories
</td>
<td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
$19.99
</td>
<td class="pl-3 pr-6 text-sm text-neutral-500 dark:text-neutral-400 text-right">
3,456
</td>
</tr>
<tr>
<td class="pl-6 pr-3 text-sm font-medium text-neutral-900 dark:text-neutral-100">
Monitor Stand
</td>
<td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
Furniture
</td>
<td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
$89.99
</td>
<td class="pl-3 pr-6 text-sm text-neutral-500 dark:text-neutral-400 text-right">
156
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>Table with Avatars
A table featuring user avatars and multi-line content. Ideal for team directories, contact lists, or any interface showing people with additional details.
| User | Title | Department | Status |
|---|---|---|---|
|
AJ
Alex Johnson
alex@company.com
|
Senior Developer | Engineering | Active |
|
SM
Sarah Miller
sarah@company.com
|
Product Manager | Product | Active |
|
MC
Michael Chen
michael@company.com
|
UX Designer | Design | Away |
|
ED
Emily Davis
emily@company.com
|
Marketing Lead | Marketing | Active |
|
JW
James Wilson
james@company.com
|
Sales Director | Sales | Offline |
<div class="w-full max-w-5xl mx-auto">
<div class="bg-white dark:bg-neutral-900 rounded-xl border border-black/10 dark:border-white/10 shadow-xs overflow-hidden">
<div class="overflow-x-auto">
<table class="w-full">
<thead class="bg-neutral-100 dark:bg-neutral-800">
<tr class="*:py-3 *:text-left *:[box-shadow:inset_0_-1px_0_0_rgb(229_229_229)] dark:*:[box-shadow:inset_0_-1px_0_0_rgb(46_46_46)]">
<th scope="col" class="pl-6 pr-3 text-sm font-semibold text-neutral-900 dark:text-neutral-50">
User
</th>
<th scope="col" class="px-3 text-sm font-semibold text-neutral-900 dark:text-neutral-50">
Title
</th>
<th scope="col" class="px-3 text-sm font-semibold text-neutral-900 dark:text-neutral-50">
Department
</th>
<th scope="col" class="pl-3 pr-6 text-sm font-semibold text-neutral-900 dark:text-neutral-50">
Status
</th>
</tr>
</thead>
<tbody class="*:*:py-4">
<tr class="[box-shadow:inset_0_-1px_0_0_rgb(229_229_229)] dark:[box-shadow:inset_0_-1px_0_0_rgb(46_46_46)]">
<td class="pl-6 pr-3">
<div class="flex items-center gap-3">
<div class="flex-shrink-0 size-10 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-white font-semibold text-sm">
AJ
</div>
<div>
<div class="text-sm font-medium text-neutral-900 dark:text-neutral-100">Alex Johnson</div>
<div class="text-xs text-neutral-500 dark:text-neutral-400">alex@company.com</div>
</div>
</div>
</td>
<td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
Senior Developer
</td>
<td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
Engineering
</td>
<td class="pl-3 pr-6">
<span class="inline-flex items-center gap-1 rounded-full bg-green-50 px-2 py-1 text-xs font-medium text-green-700 outline outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25">
Active
</span>
</td>
</tr>
<tr class="[box-shadow:inset_0_-1px_0_0_rgb(229_229_229)] dark:[box-shadow:inset_0_-1px_0_0_rgb(46_46_46)]">
<td class="pl-6 pr-3">
<div class="flex items-center gap-3">
<div class="flex-shrink-0 size-10 rounded-full bg-gradient-to-br from-pink-500 to-rose-600 flex items-center justify-center text-white font-semibold text-sm">
SM
</div>
<div>
<div class="text-sm font-medium text-neutral-900 dark:text-neutral-100">Sarah Miller</div>
<div class="text-xs text-neutral-500 dark:text-neutral-400">sarah@company.com</div>
</div>
</div>
</td>
<td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
Product Manager
</td>
<td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
Product
</td>
<td class="pl-3 pr-6">
<span class="inline-flex items-center gap-1 rounded-full bg-green-50 px-2 py-1 text-xs font-medium text-green-700 outline outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25">
Active
</span>
</td>
</tr>
<tr class="[box-shadow:inset_0_-1px_0_0_rgb(229_229_229)] dark:[box-shadow:inset_0_-1px_0_0_rgb(46_46_46)]">
<td class="pl-6 pr-3">
<div class="flex items-center gap-3">
<div class="flex-shrink-0 size-10 rounded-full bg-gradient-to-br from-amber-500 to-orange-600 flex items-center justify-center text-white font-semibold text-sm">
MC
</div>
<div>
<div class="text-sm font-medium text-neutral-900 dark:text-neutral-100">Michael Chen</div>
<div class="text-xs text-neutral-500 dark:text-neutral-400">michael@company.com</div>
</div>
</div>
</td>
<td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
UX Designer
</td>
<td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
Design
</td>
<td class="pl-3 pr-6">
<span class="inline-flex items-center gap-1 rounded-full bg-yellow-50 px-2 py-1 text-xs font-medium text-yellow-700 outline outline-yellow-700/20 dark:bg-yellow-400/10 dark:text-yellow-500 dark:outline-yellow-400/25">
Away
</span>
</td>
</tr>
<tr class="[box-shadow:inset_0_-1px_0_0_rgb(229_229_229)] dark:[box-shadow:inset_0_-1px_0_0_rgb(46_46_46)]">
<td class="pl-6 pr-3">
<div class="flex items-center gap-3">
<div class="flex-shrink-0 size-10 rounded-full bg-gradient-to-br from-green-500 to-emerald-600 flex items-center justify-center text-white font-semibold text-sm">
ED
</div>
<div>
<div class="text-sm font-medium text-neutral-900 dark:text-neutral-100">Emily Davis</div>
<div class="text-xs text-neutral-500 dark:text-neutral-400">emily@company.com</div>
</div>
</div>
</td>
<td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
Marketing Lead
</td>
<td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
Marketing
</td>
<td class="pl-3 pr-6">
<span class="inline-flex items-center gap-1 rounded-full bg-green-50 px-2 py-1 text-xs font-medium text-green-700 outline outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25">
Active
</span>
</td>
</tr>
<tr>
<td class="pl-6 pr-3">
<div class="flex items-center gap-3">
<div class="flex-shrink-0 size-10 rounded-full bg-gradient-to-br from-cyan-500 to-blue-600 flex items-center justify-center text-white font-semibold text-sm">
JW
</div>
<div>
<div class="text-sm font-medium text-neutral-900 dark:text-neutral-100">James Wilson</div>
<div class="text-xs text-neutral-500 dark:text-neutral-400">james@company.com</div>
</div>
</div>
</td>
<td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
Sales Director
</td>
<td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
Sales
</td>
<td class="pl-3 pr-6">
<span class="inline-flex items-center gap-1 rounded-full bg-red-50 px-2 py-1 text-xs font-medium text-red-700 outline outline-red-600/20 dark:bg-red-400/10 dark:text-red-400 dark:outline-red-400/25">
Offline
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>Condensed Table
A compact table with uppercase headers and tighter spacing. Perfect for transaction histories, financial data, or dashboards where you need to display more rows in limited space.
| Transaction ID | Date | Customer | Amount | Status |
|---|---|---|---|---|
| #TXN-4821 | Nov 28, 2025 | Acme Corp | $2,450.00 | Completed |
| #TXN-4820 | Nov 28, 2025 | TechStart Inc | $1,299.00 | Processing |
| #TXN-4819 | Nov 27, 2025 | Global Solutions | $899.00 | Completed |
| #TXN-4818 | Nov 27, 2025 | Creative Studios | $3,750.00 | Completed |
| #TXN-4817 | Nov 26, 2025 | Innovate Labs | $599.00 | Failed |
| #TXN-4816 | Nov 26, 2025 | Blueprint Co | $1,850.00 | Completed |
| #TXN-4815 | Nov 25, 2025 | NextGen Systems | $4,200.00 | Completed |
<div class="w-full max-w-4xl mx-auto">
<div class="bg-white dark:bg-neutral-900 rounded-xl border border-black/10 dark:border-white/10 shadow-xs overflow-hidden">
<div class="overflow-x-auto">
<table class="w-full">
<thead class="bg-neutral-100 dark:bg-neutral-800">
<tr class="*:py-2.5 *:text-left *:[box-shadow:inset_0_-1px_0_0_rgb(229_229_229)] dark:*:[box-shadow:inset_0_-1px_0_0_rgb(46_46_46)]">
<th scope="col" class="pl-6 pr-3 text-xs font-semibold uppercase tracking-wider text-neutral-500 dark:text-neutral-400">
Transaction ID
</th>
<th scope="col" class="px-3 text-xs font-semibold uppercase tracking-wider text-neutral-500 dark:text-neutral-400">
Date
</th>
<th scope="col" class="px-3 text-xs font-semibold uppercase tracking-wider text-neutral-500 dark:text-neutral-400">
Customer
</th>
<th scope="col" class="px-3 text-xs font-semibold uppercase tracking-wider text-neutral-500 dark:text-neutral-400 text-right">
Amount
</th>
<th scope="col" class="pl-3 pr-6 text-xs font-semibold uppercase tracking-wider text-neutral-500 dark:text-neutral-400">
Status
</th>
</tr>
</thead>
<tbody class="*:*:py-3">
<tr class="[box-shadow:inset_0_-1px_0_0_rgb(229_229_229)] dark:[box-shadow:inset_0_-1px_0_0_rgb(46_46_46)]">
<td class="pl-6 pr-3 text-sm font-mono text-neutral-900 dark:text-neutral-100">
#TXN-4821
</td>
<td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
Nov 28, 2025
</td>
<td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
Acme Corp
</td>
<td class="px-3 text-sm text-neutral-900 dark:text-neutral-100 text-right font-medium">
$2,450.00
</td>
<td class="pl-3 pr-6">
<span class="inline-flex items-center gap-1 rounded-full bg-green-50 px-2 py-1 text-xs font-medium text-green-700 outline outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25">
Completed
</span>
</td>
</tr>
<tr class="[box-shadow:inset_0_-1px_0_0_rgb(229_229_229)] dark:[box-shadow:inset_0_-1px_0_0_rgb(46_46_46)]">
<td class="pl-6 pr-3 text-sm font-mono text-neutral-900 dark:text-neutral-100">
#TXN-4820
</td>
<td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
Nov 28, 2025
</td>
<td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
TechStart Inc
</td>
<td class="px-3 text-sm text-neutral-900 dark:text-neutral-100 text-right font-medium">
$1,299.00
</td>
<td class="pl-3 pr-6">
<span class="inline-flex items-center gap-1 rounded-full bg-yellow-50 px-2 py-1 text-xs font-medium text-yellow-700 outline outline-yellow-700/20 dark:bg-yellow-400/10 dark:text-yellow-500 dark:outline-yellow-400/25">
Processing
</span>
</td>
</tr>
<tr class="[box-shadow:inset_0_-1px_0_0_rgb(229_229_229)] dark:[box-shadow:inset_0_-1px_0_0_rgb(46_46_46)]">
<td class="pl-6 pr-3 text-sm font-mono text-neutral-900 dark:text-neutral-100">
#TXN-4819
</td>
<td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
Nov 27, 2025
</td>
<td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
Global Solutions
</td>
<td class="px-3 text-sm text-neutral-900 dark:text-neutral-100 text-right font-medium">
$899.00
</td>
<td class="pl-3 pr-6">
<span class="inline-flex items-center gap-1 rounded-full bg-green-50 px-2 py-1 text-xs font-medium text-green-700 outline outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25">
Completed
</span>
</td>
</tr>
<tr class="[box-shadow:inset_0_-1px_0_0_rgb(229_229_229)] dark:[box-shadow:inset_0_-1px_0_0_rgb(46_46_46)]">
<td class="pl-6 pr-3 text-sm font-mono text-neutral-900 dark:text-neutral-100">
#TXN-4818
</td>
<td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
Nov 27, 2025
</td>
<td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
Creative Studios
</td>
<td class="px-3 text-sm text-neutral-900 dark:text-neutral-100 text-right font-medium">
$3,750.00
</td>
<td class="pl-3 pr-6">
<span class="inline-flex items-center gap-1 rounded-full bg-green-50 px-2 py-1 text-xs font-medium text-green-700 outline outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25">
Completed
</span>
</td>
</tr>
<tr class="[box-shadow:inset_0_-1px_0_0_rgb(229_229_229)] dark:[box-shadow:inset_0_-1px_0_0_rgb(46_46_46)]">
<td class="pl-6 pr-3 text-sm font-mono text-neutral-900 dark:text-neutral-100">
#TXN-4817
</td>
<td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
Nov 26, 2025
</td>
<td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
Innovate Labs
</td>
<td class="px-3 text-sm text-neutral-900 dark:text-neutral-100 text-right font-medium">
$599.00
</td>
<td class="pl-3 pr-6">
<span class="inline-flex items-center gap-1 rounded-full bg-red-50 px-2 py-1 text-xs font-medium text-red-700 outline outline-red-600/20 dark:bg-red-400/10 dark:text-red-400 dark:outline-red-400/25">
Failed
</span>
</td>
</tr>
<tr class="[box-shadow:inset_0_-1px_0_0_rgb(229_229_229)] dark:[box-shadow:inset_0_-1px_0_0_rgb(46_46_46)]">
<td class="pl-6 pr-3 text-sm font-mono text-neutral-900 dark:text-neutral-100">
#TXN-4816
</td>
<td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
Nov 26, 2025
</td>
<td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
Blueprint Co
</td>
<td class="px-3 text-sm text-neutral-900 dark:text-neutral-100 text-right font-medium">
$1,850.00
</td>
<td class="pl-3 pr-6">
<span class="inline-flex items-center gap-1 rounded-full bg-green-50 px-2 py-1 text-xs font-medium text-green-700 outline outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25">
Completed
</span>
</td>
</tr>
<tr>
<td class="pl-6 pr-3 text-sm font-mono text-neutral-900 dark:text-neutral-100">
#TXN-4815
</td>
<td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
Nov 25, 2025
</td>
<td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
NextGen Systems
</td>
<td class="px-3 text-sm text-neutral-900 dark:text-neutral-100 text-right font-medium">
$4,200.00
</td>
<td class="pl-3 pr-6">
<span class="inline-flex items-center gap-1 rounded-full bg-green-50 px-2 py-1 text-xs font-medium text-green-700 outline outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25">
Completed
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>Sticky Header Table with Progress
A scrollable table with a sticky header that stays visible while scrolling. Features progress bars for tracking completion. Great for project management, task lists, or any long dataset where context is important.
<div class="w-full max-w-6xl mx-auto">
<div class="bg-white dark:bg-neutral-900 rounded-xl border border-black/10 dark:border-white/10 shadow-xs overflow-hidden">
<div class="overflow-x-auto max-h-[400px] overflow-y-auto small-scrollbar">
<table class="w-full">
<thead class="sticky top-0 z-10 bg-neutral-100/75 dark:bg-neutral-800/75 backdrop-blur-sm backdrop-filter">
<tr class="*:py-3 *:text-left *:[box-shadow:inset_0_-1px_0_0_rgb(229_229_229)] dark:*:[box-shadow:inset_0_-1px_0_0_rgb(46_46_46)]">
<th scope="col" class="pl-6 pr-3 text-sm font-semibold text-neutral-900 dark:text-neutral-50">
Project
</th>
<th scope="col" class="px-3 text-sm font-semibold text-neutral-900 dark:text-neutral-50">
Deadline
</th>
<th scope="col" class="px-3 text-sm font-semibold text-neutral-900 dark:text-neutral-50">
Progress
</th>
<th scope="col" class="pl-3 pr-6 text-sm font-semibold text-neutral-900 dark:text-neutral-50">
Priority
</th>
</tr>
</thead>
<tbody class="*:even:bg-neutral-50 dark:*:even:bg-neutral-800/50 *:*:py-4">
<tr>
<td class="pl-6 pr-3 text-sm font-medium text-neutral-900 dark:text-neutral-100">
Website Redesign
</td>
<td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
Dec 15, 2025
</td>
<td class="px-3">
<div class="flex items-center gap-2">
<div class="flex-1 h-2 bg-neutral-200 dark:bg-neutral-700 rounded-full overflow-hidden">
<div class="h-full bg-blue-600 rounded-full" style="width: 75%"></div>
</div>
<span class="text-xs text-neutral-500 dark:text-neutral-400 min-w-[3ch]">75%</span>
</div>
</td>
<td class="pl-3 pr-6">
<span class="inline-flex items-center gap-1 rounded-full bg-red-50 px-2 py-1 text-xs font-medium text-red-700 outline outline-red-600/20 dark:bg-red-400/10 dark:text-red-400 dark:outline-red-400/25">
High
</span>
</td>
</tr>
<tr>
<td class="pl-6 pr-3 text-sm font-medium text-neutral-900 dark:text-neutral-100">
Mobile App Development
</td>
<td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
Jan 20, 2026
</td>
<td class="px-3">
<div class="flex items-center gap-2">
<div class="flex-1 h-2 bg-neutral-200 dark:bg-neutral-700 rounded-full overflow-hidden">
<div class="h-full bg-blue-600 rounded-full" style="width: 45%"></div>
</div>
<span class="text-xs text-neutral-500 dark:text-neutral-400 min-w-[3ch]">45%</span>
</div>
</td>
<td class="pl-3 pr-6">
<span class="inline-flex items-center gap-1 rounded-full bg-yellow-50 px-2 py-1 text-xs font-medium text-yellow-700 outline outline-yellow-700/20 dark:bg-yellow-400/10 dark:text-yellow-500 dark:outline-yellow-400/25">
Medium
</span>
</td>
</tr>
<tr>
<td class="pl-6 pr-3 text-sm font-medium text-neutral-900 dark:text-neutral-100">
Brand Identity
</td>
<td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
Dec 01, 2025
</td>
<td class="px-3">
<div class="flex items-center gap-2">
<div class="flex-1 h-2 bg-neutral-200 dark:bg-neutral-700 rounded-full overflow-hidden">
<div class="h-full bg-green-600 rounded-full" style="width: 100%"></div>
</div>
<span class="text-xs text-neutral-500 dark:text-neutral-400 min-w-[3ch]">100%</span>
</div>
</td>
<td class="pl-3 pr-6">
<span class="inline-flex items-center gap-1 rounded-full bg-green-50 px-2 py-1 text-xs font-medium text-green-700 outline outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25">
Low
</span>
</td>
</tr>
<tr>
<td class="pl-6 pr-3 text-sm font-medium text-neutral-900 dark:text-neutral-100">
E-commerce Platform
</td>
<td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
Feb 28, 2026
</td>
<td class="px-3">
<div class="flex items-center gap-2">
<div class="flex-1 h-2 bg-neutral-200 dark:bg-neutral-700 rounded-full overflow-hidden">
<div class="h-full bg-blue-600 rounded-full" style="width: 20%"></div>
</div>
<span class="text-xs text-neutral-500 dark:text-neutral-400 min-w-[3ch]">20%</span>
</div>
</td>
<td class="pl-3 pr-6">
<span class="inline-flex items-center gap-1 rounded-full bg-yellow-50 px-2 py-1 text-xs font-medium text-yellow-700 outline outline-yellow-700/20 dark:bg-yellow-400/10 dark:text-yellow-500 dark:outline-yellow-400/25">
Medium
</span>
</td>
</tr>
<tr>
<td class="pl-6 pr-3 text-sm font-medium text-neutral-900 dark:text-neutral-100">
Marketing Campaign
</td>
<td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
Dec 10, 2025
</td>
<td class="px-3">
<div class="flex items-center gap-2">
<div class="flex-1 h-2 bg-neutral-200 dark:bg-neutral-700 rounded-full overflow-hidden">
<div class="h-full bg-blue-600 rounded-full" style="width: 60%"></div>
</div>
<span class="text-xs text-neutral-500 dark:text-neutral-400 min-w-[3ch]">60%</span>
</div>
</td>
<td class="pl-3 pr-6">
<span class="inline-flex items-center gap-1 rounded-full bg-red-50 px-2 py-1 text-xs font-medium text-red-700 outline outline-red-600/20 dark:bg-red-400/10 dark:text-red-400 dark:outline-red-400/25">
High
</span>
</td>
</tr>
<tr>
<td class="pl-6 pr-3 text-sm font-medium text-neutral-900 dark:text-neutral-100">
API Integration
</td>
<td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
Jan 05, 2026
</td>
<td class="px-3">
<div class="flex items-center gap-2">
<div class="flex-1 h-2 bg-neutral-200 dark:bg-neutral-700 rounded-full overflow-hidden">
<div class="h-full bg-blue-600 rounded-full" style="width: 85%"></div>
</div>
<span class="text-xs text-neutral-500 dark:text-neutral-400 min-w-[3ch]">85%</span>
</div>
</td>
<td class="pl-3 pr-6">
<span class="inline-flex items-center gap-1 rounded-full bg-yellow-50 px-2 py-1 text-xs font-medium text-yellow-700 outline outline-yellow-700/20 dark:bg-yellow-400/10 dark:text-yellow-500 dark:outline-yellow-400/25">
Medium
</span>
</td>
</tr>
<tr>
<td class="pl-6 pr-3 text-sm font-medium text-neutral-900 dark:text-neutral-100">
Security Audit
</td>
<td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
Dec 20, 2025
</td>
<td class="px-3">
<div class="flex items-center gap-2">
<div class="flex-1 h-2 bg-neutral-200 dark:bg-neutral-700 rounded-full overflow-hidden">
<div class="h-full bg-blue-600 rounded-full" style="width: 30%"></div>
</div>
<span class="text-xs text-neutral-500 dark:text-neutral-400 min-w-[3ch]">30%</span>
</div>
</td>
<td class="pl-3 pr-6">
<span class="inline-flex items-center gap-1 rounded-full bg-red-50 px-2 py-1 text-xs font-medium text-red-700 outline outline-red-600/20 dark:bg-red-400/10 dark:text-red-400 dark:outline-red-400/25">
High
</span>
</td>
</tr>
<tr>
<td class="pl-6 pr-3 text-sm font-medium text-neutral-900 dark:text-neutral-100">
Documentation Update
</td>
<td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
Dec 05, 2025
</td>
<td class="px-3">
<div class="flex items-center gap-2">
<div class="flex-1 h-2 bg-neutral-200 dark:bg-neutral-700 rounded-full overflow-hidden">
<div class="h-full bg-blue-600 rounded-full" style="width: 90%"></div>
</div>
<span class="text-xs text-neutral-500 dark:text-neutral-400 min-w-[3ch]">90%</span>
</div>
</td>
<td class="pl-3 pr-6">
<span class="inline-flex items-center gap-1 rounded-full bg-green-50 px-2 py-1 text-xs font-medium text-green-700 outline outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25">
Low
</span>
</td>
</tr>
<tr>
<td class="pl-6 pr-3 text-sm font-medium text-neutral-900 dark:text-neutral-100">
Performance Optimization
</td>
<td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
Jan 15, 2026
</td>
<td class="px-3">
<div class="flex items-center gap-2">
<div class="flex-1 h-2 bg-neutral-200 dark:bg-neutral-700 rounded-full overflow-hidden">
<div class="h-full bg-blue-600 rounded-full" style="width: 55%"></div>
</div>
<span class="text-xs text-neutral-500 dark:text-neutral-400 min-w-[3ch]">55%</span>
</div>
</td>
<td class="pl-3 pr-6">
<span class="inline-flex items-center gap-1 rounded-full bg-yellow-50 px-2 py-1 text-xs font-medium text-yellow-700 outline outline-yellow-700/20 dark:bg-yellow-400/10 dark:text-yellow-500 dark:outline-yellow-400/25">
Medium
</span>
</td>
</tr>
<tr>
<td class="pl-6 pr-3 text-sm font-medium text-neutral-900 dark:text-neutral-100">
User Testing
</td>
<td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
Dec 12, 2025
</td>
<td class="px-3">
<div class="flex items-center gap-2">
<div class="flex-1 h-2 bg-neutral-200 dark:bg-neutral-700 rounded-full overflow-hidden">
<div class="h-full bg-blue-600 rounded-full" style="width: 40%"></div>
</div>
<span class="text-xs text-neutral-500 dark:text-neutral-400 min-w-[3ch]">40%</span>
</div>
</td>
<td class="pl-3 pr-6">
<span class="inline-flex items-center gap-1 rounded-full bg-green-50 px-2 py-1 text-xs font-medium text-green-700 outline outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25">
Low
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>