Data Tables
Data tables display sets of raw data. They feature a toolbar header, sortable columns, and pagination, following Material 3 guidelines.
Structured Information!
Table Anatomy
Clean & Scalable
| Employee arrow_downward | Role | Status | Actions | |
|---|---|---|---|---|
JD John Doe john.doe@example.com | Lead Developer | Active | ||
JS Jane Smith jane.smith@example.com | UX Designer | On Leave | ||
MW Mike Wilson mike.wilson@example.com | DevOps Engineer | Offline |
Use .table-hover and .align-middle for standard Material-style data presentation.
Interaction focus!
HTML
<div class="table-responsive">
<table class="table table-hover align-middle mb-0">
<thead style="background-color: #f8fafc;">
<tr>
<th scope="col" class="border-0 px-4 py-3" style="width: 50px;">
<input class="form-check-input" type="checkbox">
</th>
<th scope="col" class="border-0 py-3 text-muted text-uppercase" style="font-weight:600; font-size:.75rem; letter-spacing:.05em;">
Employee
<i class="material-icons" style="font-size:14px; vertical-align:middle;">arrow_downward</i>
</th>
<th scope="col" class="border-0 py-3 text-muted text-uppercase text-end px-4" style="font-weight:600; font-size:.75rem; letter-spacing:.05em;">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td class="px-4 py-3"><input class="form-check-input" type="checkbox"></td>
<td class="py-3">
<div class="d-flex align-items-center gap-3">
<div class="d-flex align-items-center justify-content-center rounded-circle bg-primary text-white fw-bold" style="width:40px;height:40px;">JD</div>
<div>
<div class="fw-bold" style="color:#1e293b;">John Doe</div>
<div class="text-muted small">john.doe@example.com</div>
</div>
</div>
</td>
<td class="py-3 text-end px-4">
<button class="btn rounded-circle d-inline-flex align-items-center justify-content-center p-2 text-muted border-0" type="button">
<i class="material-icons" style="font-size:20px;">edit</i>
</button>
</td>
</tr>
</tbody>
</table>
</div>