Negocios

Table

Componente de tabela HTML semântica com estilização consistente. Base para Data Table e listas tabulares simples.

Visão geral

O Table é a base semântica de qualquer tabela no design system. Use Data Table para funcionalidades avançadas.

Transações recentes
MétodoStatusE-mailValor
PixAprovadolucas@mn.comR$ 250,00
CartãoPendenteana@empresa.comR$ 1.200,00
BoletoRecusadojoao@site.comR$ 75,00
PixAprovadomaria@org.comR$ 3.000,00
TotalR$ 4.525,00

Import

import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "@/components/ui/table"

Padrão de implementação

Snippets para tabelas simples e avançadas.

Tabela básica

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Nome</TableHead>
      <TableHead>Status</TableHead>
      <TableHead className="text-right">Valor</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    {dados.map((row) => (
      <TableRow key={row.id}>
        <TableCell>{row.nome}</TableCell>
        <TableCell><Badge>{row.status}</Badge></TableCell>
        <TableCell className="text-right">{row.valor}</TableCell>
      </TableRow>
    ))}
  </TableBody>
</Table>

MN Design System · Primary #5FC318 · Brand Green #AFF000 · Font: Inter