Home/Componentes/Table

Table

Componente de tabela flexível e responsivo para exibição de dados estruturados. Inclui suporte para ordenação, filtragem e ações contextuais.

Instalação

npm install @scmposs/hollow-ui@latest

Tabela Básica

Exemplo simples de tabela com dados de usuários:

Lista de usuários do sistema
Nome	Email	Cargo	Departamento	Status
João Silva	joao@empresa.com	Motorista	Logística	Ativo
Maria Santos	maria@empresa.com	Supervisor	Operações	Ativo
Carlos Oliveira	carlos@empresa.com	Analista	Manutenção	Inativo

Tabela Básica

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

<Table>
  <TableCaption>Lista de usuários do sistema</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead>Nome</TableHead>
      <TableHead>Email</TableHead>
      <TableHead>Cargo</TableHead>
      <TableHead>Status</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    {users.map((user) => (
      <TableRow key={user.id}>
        <TableCell className="font-medium">{user.name}</TableCell>
        <TableCell>{user.email}</TableCell>
        <TableCell>{user.role}</TableCell>
        <TableCell>
          <Badge variant="secondary">{user.status}</Badge>
        </TableCell>
      </TableRow>
    ))}
  </TableBody>
</Table>

Tabela com Ações

Tabela com botões de ação e seleção múltipla:

Gerenciamento de Usuários

Gerencie usuários do sistema com ações contextuais

Nome	Email	Cargo	Último Login	Status
João Silva	joao@empresa.com	Motorista	2025-01-14	Ativo
Maria Santos	maria@empresa.com	Supervisor	2025-01-14	Ativo
Carlos Oliveira	carlos@empresa.com	Analista	2025-01-10	Inativo

Tabela com Ações

import { Checkbox } from "@/registry/ui/checkbox";
import { Button } from "@/registry/ui/button";
import { Eye, Edit, Trash2 } from "lucide-react";

<Table>
  <TableHeader>
    <TableRow>
      <TableHead className="w-12">
        <Checkbox />
      </TableHead>
      <TableHead>Nome</TableHead>
      <TableHead>Email</TableHead>
      <TableHead>Status</TableHead>
      <TableHead className="text-right">Ações</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    {users.map((user) => (
      <TableRow key={user.id}>
        <TableCell>
          <Checkbox />
        </TableCell>
        <TableCell className="font-medium">{user.name}</TableCell>
        <TableCell>{user.email}</TableCell>
        <TableCell>
          <Badge variant="secondary">{user.status}</Badge>
        </TableCell>
        <TableCell className="text-right">
          <div className="flex justify-end gap-2">
            <Button variant="ghost" size="sm">
              <Eye className="h-4 w-4" />
            </Button>
            <Button variant="ghost" size="sm">
              <Edit className="h-4 w-4" />
            </Button>
            <Button variant="ghost" size="sm">
              <Trash2 className="h-4 w-4" />
            </Button>
          </div>
        </TableCell>
      </TableRow>
    ))}
  </TableBody>
</Table>

Tabela Avançada - Controle de Veículos

Exemplo prático com dados de veículos e indicadores visuais:

Frota de Veículos

Monitoramento e controle da frota com indicadores em tempo real

ID	Placa	Modelo	Tipo	Motorista	Combustível	Próx. Manutenção	Status
001	ABC-1234	Volvo FH540	Cavalo Mecânico	João Silva	82%	2025-02-15	Ativo
002	DEF-5678	Mercedes Actros	Truck	-	45%	2025-01-20	Manutenção
003	GHI-9012	Scania R450	Cavalo Mecânico	Maria Santos	95%	2025-03-10	Ativo
004	JKL-3456	Iveco Daily	Van	-	12%	2025-01-25	Inativo
Total de veículos							4

Tabela com Footer

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

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Placa</TableHead>
      <TableHead>Modelo</TableHead>
      <TableHead>Status</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    {vehicles.map((vehicle) => (
      <TableRow key={vehicle.id}>
        <TableCell>{vehicle.placa}</TableCell>
        <TableCell>{vehicle.modelo}</TableCell>
        <TableCell>
          <Badge variant="secondary">{vehicle.status}</Badge>
        </TableCell>
      </TableRow>
    ))}
  </TableBody>
  <TableFooter>
    <TableRow>
      <TableCell colSpan={2}>Total</TableCell>
      <TableCell className="text-right">{vehicles.length}</TableCell>
    </TableRow>
  </TableFooter>
</Table>

Componentes e Props

Componentes Table

// Componentes principais
Table          - Container principal da tabela
TableCaption   - Legenda da tabela
TableHeader    - Cabeçalho da tabela
TableBody      - Corpo da tabela
TableFooter    - Rodapé da tabela
TableRow       - Linha da tabela
TableHead      - Célula do cabeçalho
TableCell      - Célula do corpo

// Props comuns (extends HTMLElement props)
className?: string
children?: React.ReactNode

// Exemplo de uso completo
<Table>
  <TableCaption>Dados de exemplo</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead>Coluna 1</TableHead>
      <TableHead>Coluna 2</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Dados 1</TableCell>
      <TableCell>Dados 2</TableCell>
    </TableRow>
  </TableBody>
  <TableFooter>
    <TableRow>
      <TableCell colSpan={2}>Rodapé</TableCell>
    </TableRow>
  </TableFooter>
</Table>

Características

• Layout responsivo com scroll horizontal
• Suporte a data-slot para personalização
• Hover effects integrados
• Compatível com checkbox e badges
• Suporte a sorting visual
• Estados de seleção

Boas Práticas

• Use TableCaption para acessibilidade
• Mantenha cabeçalhos descritivos
• Limite dados por página para performance
• Use cores consistentes para status
• Implemente paginação quando necessário
• Considere loading states