*Build an Admin Dashboard — chapter 3 of 4.* Sortable-looking table with states.

What you will build#

Table with hover rows and badges.

Step by step#

example
html
<table class="w-full text-sm">
  <thead class="text-left text-slate-500 border-b"><tr><th class="py-2">Customer</th><th>Status</th><th class="text-right">Total</th></tr></thead>
  <tbody class="divide-y">
    <tr class="hover:bg-slate-50"><td class="py-3">Ayesha R.</td><td><span class="px-2 py-0.5 rounded-full bg-emerald-100 text-emerald-700 text-xs">Paid</span></td><td class="text-right tabular-nums">$120</td></tr>
  </tbody>
</table>

Why it works#

divide-y + hover:bg = the whole data-grid aesthetic.

Try it yourself#

  • Add sticky header
  • Add row actions
  • Add empty state

Series navigation#

tutorials/index|All tutorials · tutorials/dashboard/stat-cards|← Stat cards · tutorials/dashboard/forms-modals|Forms & modals →