Capítulo 65 de 108

Table

Core Idea

Componente de tabela responsiva e não opinativo sobre dados: fornece só a marcação/estilo (Table, TableRow, TableCell...); lógica de sorting/filtering/paginação fica a cargo de TanStack Table (ver Data Table).

Key Concepts

  • Composição fixa: Table > TableCaption, TableHeader > TableRow > TableHead, TableBody > TableRow > TableCell, TableFooter.
  • TableFooter: linha de resumo (ex. total) fixada visualmente ao final da tabela.
  • Ações de linha: renderizar um DropdownMenu dentro de TableCell para menu de ações por linha (padrão comum, não uma prop dedicada).
  • Este componente é a base para o guia de Data Table (ch066); sozinho não tem sort/filter/paginação.

Code Examples

<Table>
  <TableCaption>A list of your recent invoices.</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead className="w-[100px]">Invoice</TableHead>
      <TableHead>Status</TableHead>
      <TableHead>Method</TableHead>
      <TableHead className="text-right">Amount</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell className="font-medium">INV001</TableCell>
      <TableCell>Paid</TableCell>
      <TableCell>Credit Card</TableCell>
      <TableCell className="text-right">$250.00</TableCell>
    </TableRow>
  </TableBody>
</Table>
  • O que demonstra: estrutura básica de tabela com caption, header e body.
<TableFooter>
  <TableRow>
    <TableCell colSpan={3}>Total</TableCell>
    <TableCell className="text-right">$2,500.00</TableCell>
  </TableRow>
</TableFooter>
  • O que demonstra: linha de totalização usando colSpan para mesclar células.
<TableCell className="text-right">
  <DropdownMenu>
    <DropdownMenuTrigger render={<Button variant="ghost" size="icon" className="size-8" />}>
      <MoreHorizontalIcon />
      <span className="sr-only">Open menu</span>
    </DropdownMenuTrigger>
    <DropdownMenuContent align="end">
      <DropdownMenuItem>Edit</DropdownMenuItem>
      <DropdownMenuItem>Duplicate</DropdownMenuItem>
      <DropdownMenuSeparator />
      <DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>
    </DropdownMenuContent>
  </DropdownMenu>
</TableCell>
  • O que demonstra: célula de ações com menu dropdown, padrão recorrente em tabelas de dados.

Reference Tables

Table
├── TableCaption
├── TableHeader
│   └── TableRow > TableHead (×N)
├── TableBody
│   └── TableRow > TableCell (×N)
└── TableFooter

Anti-patterns

  • Esperar sort/filter/paginação "de graça" do Table: este componente é puramente de marcação; qualquer comportamento de dados precisa de TanStack Table (ver Data Table).
  • Duplicar <table> HTML puro ao lado de Table: perde consistência de estilo/dark mode do design system.

Key Takeaways

  1. Table é a camada de apresentação; para qualquer interatividade (sort, filter, paginação, seleção), acople TanStack Table por cima (ch066).
  2. TableFooter é o slot correto para totais/resumos, não uma TableRow extra dentro de TableBody.
  3. Ações por linha (editar/deletar) seguem o padrão DropdownMenu dentro de TableCell com align="end".

Connects To

  • Data Table (ch066): guia completo de como acoplar TanStack Table ao Table para sort/filter/paginação/seleção.
  • DropdownMenu: componente usado para ações de linha.
AnteriorCardPróximoData Table