📊 Anatomia de uma Data Table
Estrutura completa de tabelas profissionais
Data Tables sao componentes complexos para exibir dados tabulares com funcionalidades como ordenacao, filtragem, selecao e acoes. Diferem de tabelas HTML simples por serem interativas e otimizadas para grandes volumes.
Tabelas sao o coracao de dashboards administrativos. Lista de clientes, pedidos, transacoes - tudo vira tabela. Uma tabela mal projetada torna o sistema inutilizavel; bem projetada, e extremamente poderosa.
🔍 Estrutura de uma Data Table
┌─────────────────────────────────────────────────────────────┐ │ ☐ Selecionar todos [🔍 Buscar...] [Filtros] [Exportar]│ ← Toolbar ├─────┬────────────────┬────────────┬──────────┬──────────────┤ │ ☐ │ Nome ↑↓ │ Email │ Status │ Acoes │ ← Header ├─────┼────────────────┼────────────┼──────────┼──────────────┤ │ ☐ │ Ana Silva │ ana@... │ ● Ativo │ [✏️] [🗑️] │ ← Row │ ☐ │ Bruno Lima │ bruno@... │ ○ Inativo│ [✏️] [🗑️] │ │ ☐ │ Carla Dias │ carla@... │ ● Ativo │ [✏️] [🗑️] │ ├─────┴────────────────┴────────────┴──────────┴──────────────┤ │ Mostrando 1-10 de 156 [◀] [1] [2] [3] ... [▶] │ ← Footer └─────────────────────────────────────────────────────────────┘
🧩 Componentes da Data Table
Busca global, filtros avancados, acoes em lote, exportacao.
Titulos ordenaveis, checkbox global, resize de colunas.
Dados, selecao individual, hover states, linhas expandiveis.
Paginacao, contador de resultados, itens por pagina.
👁️ Exemplo: Mini Data Table
| Nome ↕ | Status | ||
|---|---|---|---|
| Ana Silva | ana@exemplo.com | Ativo | |
| Bruno Lima | bruno@exemplo.com | Inativo |
💡 Dica Pratica
Comece simples: Adicione funcionalidades incrementalmente. Uma tabela basica bem estilizada e melhor que uma super complexa cheia de bugs. Comece com ordenacao, depois adicione paginacao, depois filtros.
🔀 Ordenacao (Sorting)
Reorganizar dados por qualquer coluna
Ordenacao permite reorganizar dados por qualquer coluna em ordem crescente ou decrescente. Usuarios esperam clicar no cabecalho para ordenar. Suportar ordenacao multipla (shift+click) e um diferencial.
Ordenacao e a funcionalidade mais usada em tabelas. "Quem sao os maiores clientes?", "Quais pedidos sao mais recentes?" - tudo requer ordenacao. Sem ela, tabelas sao estaticas e frustrantes.
🔄 Estados de Ordenacao
Estado inicial, clicavel
Menor para maior
Maior para menor
💻 Codigo: Logica de Ordenacao
// Funcao de ordenacao generica
function sortTable(data, column, direction = 'asc') {
return [...data].sort((a, b) => {
let valA = a[column];
let valB = b[column];
// Normalizar strings para comparacao
if (typeof valA === 'string') {
valA = valA.toLowerCase();
valB = valB.toLowerCase();
}
// Comparacao
if (valA < valB) return direction === 'asc' ? -1 : 1;
if (valA > valB) return direction === 'asc' ? 1 : -1;
return 0;
});
}
// Uso
const sortedData = sortTable(users, 'name', 'asc');
// Header clicavel (HTML)
<th class="cursor-pointer hover:bg-dark-700 select-none px-4 py-3"
onclick="handleSort('name')">
<span class="flex items-center">
Nome
<span class="ml-2 text-neutral-500">
{sortColumn === 'name' ? (sortDir === 'asc' ? '↑' : '↓') : '↕'}
</span>
</span>
</th>
✅ Fazer vs ❌ Evitar
- • Indicar visualmente coluna ordenada
- • Ciclo: neutro → asc → desc → neutro
- • Manter ordenacao ao paginar
- • Ordenar no backend se muitos dados
- • Ordenar coluna sem feedback visual
- • Ordenar 10k+ registros no frontend
- • Ignorar tipos (numero vs string)
- • Perder ordenacao ao mudar de pagina
📄 Paginacao
Dividir dados em paginas gerenciaveis
Paginacao divide grandes conjuntos de dados em paginas menores. Tipicamente 10, 25, 50 ou 100 itens por pagina. Essencial para performance e usabilidade quando ha centenas ou milhares de registros.
Tabelas com 1000+ linhas sem paginacao travam o navegador e sao impossiveis de navegar. Paginacao melhora performance, facilita navegacao e permite o backend enviar dados em chunks.
📊 Tipos de Paginacao
Botao "Carregar mais" no final da lista. Bom para feeds infinitos.
Carrega automaticamente ao scrollar. Use com cuidado - pode ser confuso.
💻 Codigo: Componente de Paginacao
<!-- Paginacao completa -->
<div class="flex items-center justify-between px-4 py-3 border-t border-dark-600">
<!-- Info de resultados -->
<p class="text-sm text-neutral-400">
Mostrando <span class="font-medium text-white">1</span> a
<span class="font-medium text-white">10</span> de
<span class="font-medium text-white">156</span> resultados
</p>
<!-- Navegacao -->
<div class="flex items-center space-x-1">
<button class="px-3 py-1.5 rounded bg-dark-700 hover:bg-dark-600
disabled:opacity-50 disabled:cursor-not-allowed"
disabled>◀ Anterior</button>
<button class="px-3 py-1.5 rounded bg-blue-600 text-white">1</button>
<button class="px-3 py-1.5 rounded bg-dark-700 hover:bg-dark-600">2</button>
<button class="px-3 py-1.5 rounded bg-dark-700 hover:bg-dark-600">3</button>
<span class="px-2 text-neutral-500">...</span>
<button class="px-3 py-1.5 rounded bg-dark-700 hover:bg-dark-600">16</button>
<button class="px-3 py-1.5 rounded bg-dark-700 hover:bg-dark-600">
Proximo ▶
</button>
</div>
</div>
// Calculo de paginacao (JavaScript)
const itemsPerPage = 10;
const currentPage = 1;
const totalItems = 156;
const totalPages = Math.ceil(totalItems / itemsPerPage); // 16
const startIndex = (currentPage - 1) * itemsPerPage; // 0
const endIndex = startIndex + itemsPerPage; // 10
const pageData = allData.slice(startIndex, endIndex);
💡 Dica Pratica
Permita configurar itens por pagina: Adicione um seletor (10, 25, 50, 100) para usuarios que preferem ver mais ou menos dados de uma vez. Power users geralmente preferem 50-100.
⚡ Virtualizacao de Tabelas
Performance com milhares de linhas
Virtualizacao renderiza apenas as linhas visiveis na tela, mesmo com milhares de registros. Conforme o usuario scrolla, linhas sao recicladas. Permite scroll "infinito" sem paginacao tradicional.
Para datasets enormes (10k+ linhas), paginacao ainda pode ser lenta. Virtualizacao mantem 60fps mesmo com 100k linhas. Bibliotecas como react-window e TanStack Virtual facilitam a implementacao.
🔍 Como a Virtualizacao Funciona
Dados totais: 10.000 linhas Viewport visivel: ~20 linhas ┌──────────────────────────────────────┐ │ Espaco vazio (padding-top) │ ← Altura simulada ├──────────────────────────────────────┤ │ Linha 245 ████████████████████████ │ │ Linha 246 ████████████████████████ │ ← Apenas linhas │ Linha 247 ████████████████████████ │ visiveis sao │ Linha 248 ████████████████████████ │ renderizadas │ Linha 249 ████████████████████████ │ no DOM │ Linha 250 ████████████████████████ │ ├──────────────────────────────────────┤ │ Espaco vazio (padding-bottom) │ ← Altura simulada └──────────────────────────────────────┘ Processo ao scrollar: 1. Detecta posicao do scroll 2. Calcula quais linhas estao visiveis 3. Renderiza apenas essas + buffer 4. Recicla elementos DOM existentes 5. Ajusta padding para manter scrollbar correta
📦 Bibliotecas de Virtualizacao
Leve (~6KB), API simples. Recomendado para React.
npm install react-window
Framework-agnostic. React, Vue, Solid, Svelte.
npm install @tanstack/virtual-core
Especifico para Vue.js. Bem documentado.
npm install vue-virtual-scroller
Enterprise-grade. Virtualizacao built-in.
npm install ag-grid-community
⚠️ Quando Usar Virtualizacao
- • 1000+ linhas de dados
- • Scroll infinito e necessario
- • Paginacao nao e desejada pelo UX
- • Menos de 500 linhas
- • Paginacao resolve o problema
- • Adiciona complexidade desnecessaria
☑️ Selecao e Acoes em Lote
Operar em multiplos registros
Selecao em lote permite selecionar multiplas linhas para executar acoes: deletar varios, exportar selecionados, alterar status em massa. Checkboxes nas linhas + checkbox "selecionar todos" no header.
Usuarios administrativos frequentemente precisam agir em multiplos registros. Sem selecao em lote, teriam que repetir a mesma acao dezenas de vezes. Produtividade aumenta exponencialmente.
📋 Estados do Checkbox Principal
Checkbox vazio
Checkbox indeterminado
Checkbox marcado
💻 Codigo: Logica de Selecao
// Estado de selecao (usando Set para performance)
const [selectedIds, setSelectedIds] = useState(new Set());
// Toggle selecao individual
function toggleSelect(id) {
const newSet = new Set(selectedIds);
if (newSet.has(id)) {
newSet.delete(id);
} else {
newSet.add(id);
}
setSelectedIds(newSet);
}
// Toggle selecionar todos
function toggleSelectAll() {
if (selectedIds.size === data.length) {
setSelectedIds(new Set()); // deseleciona todos
} else {
setSelectedIds(new Set(data.map(item => item.id))); // seleciona todos
}
}
// Barra de acoes em lote (aparece quando ha selecao)
{selectedIds.size > 0 && (
<div class="bg-blue-900/50 border-b border-blue-500/30 px-4 py-3
flex items-center justify-between">
<span class="text-blue-300">
{selectedIds.size} item(s) selecionado(s)
</span>
<div class="flex space-x-3">
<button class="text-red-400 hover:text-red-300">
🗑️ Excluir
</button>
<button class="text-blue-400 hover:text-blue-300">
📤 Exportar
</button>
</div>
</div>
)}
💡 Dica Pratica
Confirmacao para acoes destrutivas: Sempre peca confirmacao antes de deletar multiplos registros. Um modal simples "Voce esta prestes a excluir 15 registros. Esta acao nao pode ser desfeita." evita desastres.
📱 Tabelas Responsivas
Adaptar para todas as telas
Em telas menores, nem todas as colunas cabem. Estrategias incluem: scroll horizontal, esconder colunas menos importantes, ou transformar em cards.
Dashboards sao acessados em tablets e celulares. Uma tabela de 10 colunas em mobile e inutilizavel. Definir estrategia responsiva e essencial para usabilidade multiplataforma.
📐 Estrategias Responsivas
Use classes Tailwind para mostrar/ocultar colunas.
class="hidden md:table-cell"
Container com overflow-x-auto.
<div class="overflow-x-auto"><table>...</table></div>
Tabela em desktop, cards em mobile.
class="hidden sm:block" / class="sm:hidden"
💻 Codigo: Tabela Responsiva
<!-- Estrategia 1: Esconder colunas -->
<table class="w-full">
<thead>
<tr>
<th>Nome</th> <!-- sempre visivel -->
<th class="hidden sm:table-cell">Email</th> <!-- sm+ -->
<th class="hidden md:table-cell">Telefone</th><!-- md+ -->
<th class="hidden lg:table-cell">Empresa</th> <!-- lg+ -->
<th>Acoes</th> <!-- sempre visivel -->
</tr>
</thead>
<tbody>
<tr>
<td>Ana Silva</td>
<td class="hidden sm:table-cell">ana@email.com</td>
<td class="hidden md:table-cell">(11) 99999</td>
<td class="hidden lg:table-cell">Acme Inc</td>
<td>[Edit]</td>
</tr>
</tbody>
</table>
<!-- Estrategia 3: Card em mobile -->
<div class="hidden sm:block">
<table>...tabela completa...</table>
</div>
<div class="sm:hidden space-y-4">
{data.map(item => (
<div class="bg-dark-800 rounded-lg p-4 border border-dark-600">
<div class="font-bold">{item.name}</div>
<div class="text-sm text-neutral-400">{item.email}</div>
<div class="mt-2">[Acoes]</div>
</div>
))}
</div>