Blocks
Data Table
Tabela com header de filtros (search + status), 5 colunas, ações por row e footer pagination.
Tabela completa: search bar + filter chips + sticky header + status tags + ações row + paginação.
| Projeto | Status | Owner | Atualizado | |
|---|---|---|---|---|
| Sinapse v0.1 | Ativo | Maiane | há 2 horas | |
| Dashboard analytics | Pendente | Janderson | ontem | |
| Migração tokens | Atrasado | Janderson | 3 dias |
<div class="flex flex-col rounded-2xl border border-border bg-card">
<header class="flex flex-wrap items-center justify-between gap-3 border-b border-border p-4">
<div class="flex flex-1 items-center gap-2">
<input type="search" class="itps-input max-w-xs" placeholder="Buscar projeto..." />
<button class="itps-btn itps-btn--ghost itps-btn--sm">Status</button>
<button class="itps-btn itps-btn--ghost itps-btn--sm">Owner</button>
</div>
<button class="itps-btn itps-btn--primary itps-btn--sm">Novo</button>
</header>
<table class="w-full text-sm">
<thead>
<tr class="border-b border-border text-left text-xs font-medium uppercase tracking-wider text-muted-foreground">
<th class="px-4 py-3">Projeto</th>
<th class="px-4 py-3">Status</th>
<th class="px-4 py-3">Owner</th>
<th class="px-4 py-3">Atualizado</th>
<th class="px-4 py-3 text-right"></th>
</tr>
</thead>
<tbody>
<tr class="border-b border-border last:border-0 hover:bg-muted">
<td class="px-4 py-3 font-medium text-foreground">Sinapse v0.1</td>
<td class="px-4 py-3"><span class="itps-chip itps-chip--success">Ativo</span></td>
<td class="px-4 py-3 text-muted-foreground">Maiane</td>
<td class="px-4 py-3 text-muted-foreground">há 2 horas</td>
<td class="px-4 py-3 text-right"><button aria-label="Ações"><i class="ti ti-dots text-muted-foreground" style="font-size:18px"></i></button></td>
</tr>
<tr class="border-b border-border last:border-0 hover:bg-muted">
<td class="px-4 py-3 font-medium text-foreground">Dashboard analytics</td>
<td class="px-4 py-3"><span class="itps-chip itps-chip--warning">Pendente</span></td>
<td class="px-4 py-3 text-muted-foreground">Janderson</td>
<td class="px-4 py-3 text-muted-foreground">ontem</td>
<td class="px-4 py-3 text-right"><button aria-label="Ações"><i class="ti ti-dots text-muted-foreground" style="font-size:18px"></i></button></td>
</tr>
<tr class="hover:bg-muted">
<td class="px-4 py-3 font-medium text-foreground">Migração tokens</td>
<td class="px-4 py-3"><span class="itps-chip itps-chip--danger">Atrasado</span></td>
<td class="px-4 py-3 text-muted-foreground">Janderson</td>
<td class="px-4 py-3 text-muted-foreground">3 dias</td>
<td class="px-4 py-3 text-right"><button aria-label="Ações"><i class="ti ti-dots text-muted-foreground" style="font-size:18px"></i></button></td>
</tr>
</tbody>
</table>
<footer class="flex items-center justify-between border-t border-border p-4 text-sm text-muted-foreground">
<span>3 de 24</span>
<div class="flex items-center gap-2">
<button class="itps-btn itps-btn--ghost itps-btn--sm" disabled>Anterior</button>
<button class="itps-btn itps-btn--ghost itps-btn--sm">Próximo</button>
</div>
</footer>
</div>
<div class="flex flex-col rounded-2xl border border-border bg-card">
<header class="flex flex-wrap items-center justify-between gap-3 border-b border-border p-4">
<div class="flex flex-1 items-center gap-2">
<input type="search" class="itps-input max-w-xs" placeholder="Buscar projeto..." />
<button class="itps-btn itps-btn--ghost itps-btn--sm">Status</button>
<button class="itps-btn itps-btn--ghost itps-btn--sm">Owner</button>
</div>
<button class="itps-btn itps-btn--primary itps-btn--sm">Novo</button>
</header>
<table class="w-full text-sm">
<thead>
<tr class="border-b border-border text-left text-xs font-medium uppercase tracking-wider text-muted-foreground">
<th class="px-4 py-3">Projeto</th>
<th class="px-4 py-3">Status</th>
<th class="px-4 py-3">Owner</th>
<th class="px-4 py-3">Atualizado</th>
<th class="px-4 py-3 text-right"></th>
</tr>
</thead>
<tbody>
<tr class="border-b border-border last:border-0 hover:bg-muted">
<td class="px-4 py-3 font-medium text-foreground">Sinapse v0.1</td>
<td class="px-4 py-3"><span class="itps-chip itps-chip--success">Ativo</span></td>
<td class="px-4 py-3 text-muted-foreground">Maiane</td>
<td class="px-4 py-3 text-muted-foreground">há 2 horas</td>
<td class="px-4 py-3 text-right"><button aria-label="Ações"><i class="ti ti-dots text-muted-foreground" style="font-size:18px"></i></button></td>
</tr>
<tr class="border-b border-border last:border-0 hover:bg-muted">
<td class="px-4 py-3 font-medium text-foreground">Dashboard analytics</td>
<td class="px-4 py-3"><span class="itps-chip itps-chip--warning">Pendente</span></td>
<td class="px-4 py-3 text-muted-foreground">Janderson</td>
<td class="px-4 py-3 text-muted-foreground">ontem</td>
<td class="px-4 py-3 text-right"><button aria-label="Ações"><i class="ti ti-dots text-muted-foreground" style="font-size:18px"></i></button></td>
</tr>
<tr class="hover:bg-muted">
<td class="px-4 py-3 font-medium text-foreground">Migração tokens</td>
<td class="px-4 py-3"><span class="itps-chip itps-chip--danger">Atrasado</span></td>
<td class="px-4 py-3 text-muted-foreground">Janderson</td>
<td class="px-4 py-3 text-muted-foreground">3 dias</td>
<td class="px-4 py-3 text-right"><button aria-label="Ações"><i class="ti ti-dots text-muted-foreground" style="font-size:18px"></i></button></td>
</tr>
</tbody>
</table>
<footer class="flex items-center justify-between border-t border-border p-4 text-sm text-muted-foreground">
<span>3 de 24</span>
<div class="flex items-center gap-2">
<button class="itps-btn itps-btn--ghost itps-btn--sm" disabled>Anterior</button>
<button class="itps-btn itps-btn--ghost itps-btn--sm">Próximo</button>
</div>
</footer>
</div><div class="flex flex-col rounded-2xl border border-border bg-card">…</div>
<div class="flex flex-col rounded-2xl border border-border bg-card">…</div>