Componentes

Table

Dados tabulares estáticos ou levemente interativos.

Dados e layout

Carregando demonstração…

Código da demo
"use client";

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

export function Demo() {
  return (
    <Table>
      <TableCaption>Faturas recentes.</TableCaption>
      <TableHeader>
        <TableRow>
          <TableHead>Fatura</TableHead>
          <TableHead>Status</TableHead>
          <TableHead numeric>Valor</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell>INV-001</TableCell>
          <TableCell>Pago</TableCell>
          <TableCell numeric>R$ 250,00</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>INV-002</TableCell>
          <TableCell>Pendente</TableCell>
          <TableCell numeric>R$ 150,00</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  );
}

Use

  • Colunas numéricas com numeric: tabulares e à direita.
  • Cabeçalho curto; a tabela rola na horizontal no celular.
  • Estado da linha em StatusBadge, dentro da célula.

Não use

  • Não use tabela para montar layout.
  • Não pinte a linha inteira com cor de status.
  • Para ordenar, filtrar e paginar, use DataTable.
Acessibilidade
caption; headers; escopo de colunas.
Importar
import { Table, TableHeader, TableBody, TableRow, TableCell } from "@financeequity/ui/table"

Neste repositório:

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