Tables and stats
In the LearnUp dashboard a student sees numbers: how many courses are finished, how many hours spent, what grades received. Long data goes into a table — the table component, and a few key numbers go into stat blocks — the stats component.
A table
The table class goes on a regular HTML table. Wrap the table in a block with overflow-x-auto so that on a narrow screen it scrolls instead of breaking the page:
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div class="overflow-x-auto rounded-box border border-base-300">
<table class="table">
<thead>
<tr>
<th>Course</th>
<th>Progress</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>HTML basics</td>
<td>12 of 12</td>
<td>95</td>
</tr>
<tr>
<td>JavaScript from scratch</td>
<td>8 of 24</td>
<td>88</td>
</tr>
</tbody>
</table>
</div>A neat table in a frame: padding in the cells, thin lines between rows and pale column headings.
Table modifiers
| Modifier | What it does |
|---|---|
table-zebra | Alternates row backgrounds |
table-xs … table-xl | Changes text size and padding |
table-pin-rows | Pins the <thead> while scrolling |
table-pin-cols | Pins the <th> cells in rows |
Cells can hold other components — for example, a status badge:
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div class="overflow-x-auto">
<table class="table table-zebra">
<tbody>
<tr>
<td>HTML basics</td>
<td><span class="badge badge-success">Completed</span></td>
</tr>
<tr>
<td>JavaScript from scratch</td>
<td><span class="badge badge-warning">In progress</span></td>
</tr>
<tr>
<td>Flexbox layouts</td>
<td><span class="badge badge-ghost">Not started</span></td>
</tr>
</tbody>
</table>
</div>The rows alternate white and grey, and each course's status is marked with a colored badge.
Stats
The stats component is a row of stat blocks. Each has three parts: stat-title — the caption, stat-value — a large number, stat-desc — a note:
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div class="stats bg-base-100 shadow">
<div class="stat">
<div class="stat-title">Courses completed</div>
<div class="stat-value">3</div>
<div class="stat-desc">out of 5 purchased</div>
</div>
<div class="stat">
<div class="stat-title">Hours of learning</div>
<div class="stat-value text-primary">42</div>
<div class="stat-desc">+6 this week</div>
</div>
</div>Two blocks side by side, separated by a line; the second number is colored with the text-primary utility. The stats-vertical modifier stacks the blocks.
Common mistake
Putting three or four stat blocks in a row and not checking a phone. stats is horizontal by default and does not wrap, so on a narrow screen some numbers end up in a horizontal scroll that is easy to miss. Make stats vertical on small screens and horizontal on large ones: class="stats stats-vertical lg:stats-horizontal".