Table

A Table é a área de dados em tabela da index — o view mode padrão (denso). O block MeTableView entrega colunas, ordenação por cabeçalho, seleção de linha (checkbox), busca e paginação; o UTable (Nuxt UI) é a base interna. Personalize colunas pelos slots #<id>-cell / #<id>-header.

Uso em tela

Cabeçalho fixo (sticky), checkbox de seleção à esquerda, ações por linha (menu de mais ações) à direita e paginação no rodapé. O status de cada linha é um Badge com cor semântica, nunca texto solto. Quando a linha precisa de mais do que colunas comparáveis, troque pela Lista.

Densidade e altura da linha

A altura da linha vem da densidade + linhas por registro (ambas no menu de ações):

Linhas por registro: 1 (padrão) · 2 (+20px) · 3 (+40px) · Ajustar ao texto. A altura efetiva = densidade + acréscimo das linhas.

Paginação

• Quando aparece: só quando há mais linhas do que cabem na página (linhas > página). Se tudo cabe, sem rodapé (sem buraco).
• Tamanho da página: por padrão preenche a área disponível (auto-fill pela altura); o usuário pode fixar 10 / 20 / 50 / 100 itens.
• Como é: rodapé colado à tabela com Exibindo X–Y de N + a paginação. Atalhos Primeira / Última no menu.
• Seleção em massa NÃO fica no rodapé: quando há itens marcados, a contagem vira badge "N selecionados" na Filter Bar (que desabilita os filtros enquanto a seleção está ativa) — não o padrão "N de M linha(s) selecionada(s)".

Cabeçalho da coluna (menu + arrastar)

Toda coluna é um button (color=neutral, size=md) com o ícone de sort à ESQUERDA, sem chevron, em text-muted — e é arrastável (draggable) para reposicionar a coluna. Clicar abre o dropdown da coluna:

• Ordenar — pelo maior / pelo menor (arrow-down-wide-narrow); sem ordem = arrow-up-down.
• Fixar / Desafixar coluna (pin).
• Ocultar coluna (eye-off).
• só coluna chartable Criar gráfico (7 tipos) + Criar métrica (contador / distintos) — ver abaixo. O identificador único (Número) não é chartable: tem ordenar/fixar/ocultar, mas sem o grupo de widget.

Editar colunas · resize

• Editar colunas (no menu ⋮ da tabela) → modal com MeDualList (inativas ↔ ativas, draggable → define a ordem; ativa/oculta = visibilidade).
• Resize: handle na borda do header — a coluna atualiza ao arrastar (sem confirmar). A largura persiste na sessão; colunas sem largura custom se ajustam para preencher a área (auto-fill), sem espaço vazio à direita.

Tipos de célula

Cada coluna escolhe como apresentar o dado:

Gerar gráfico ou métrica a partir da coluna

O menu do header também cria visualizações daquela coluna:

• Criar Gráfico → tipos geométricos (Barras, Linhas, Área, Pizza, Radar, Radial…). Gera via raiz única e edita no ChartWizard.
• Criar Métrica → Contador, Distintos ou Tag Cloud.

O gráfico gerado entra no corpo e pode ser fixado na sidebar — ver Widgets e Gráficos.

Ações da tabela (ao lado da busca)

Na Filter Bar (com show-table-actions + table-more-menu), ao lado da busca: ⋮ Mais ações (Exportar · Editar colunas · densidade · linhas por registro · paginação · redefinir tabela), "+" (adicionar filtro / abrir o Wizard) e os chips de filtro/processo/período. A personalização de coluna acontece em dois lugares: por coluna (dropdown do cabeçalho: ordenar/fixar/ocultar + resize por arraste) e em lote (⋮ → Editar colunas → modal MeDualList).

⋮ "Mais ações" só existe na TABELA (prop more-actions). Lista e Card não têm densidade nem paginação (rolam por scroll infinito).

Listas de domínio (Fornecedores/Usuários/Catálogos) não montam a tabela à mão: usam o composable useFilterSearchPage + a Filter Search, que já integram busca, filtros e paginação.

Responsividade

Segue a régua geral em Foundations › Breakpoints; o que é próprio da tabela:

Estados

Acessibilidade

• Cabeçalhos com th scope="col" (e scope="row" quando houver coluna-rótulo); a tabela tem nome (caption/aria-label).
• Coluna ordenável expõe aria-sort e é acionável por teclado (Enter); a mudança de ordenação é anunciada (aria-live).
• Seleção (checkbox) anunciada — quantos itens marcados (aria-live); o recarregar/paginar também.
• Status da linha via Badge com rótulo textual (não só cor).

Gotchas de montagem (verificados na index real)

Aprendidos montando a index de verdade com o MeTableView — reproduza, não reinterprete:

• Altura & padding do corpo: a área de dados não colapsa a zero só se houver um ancestral com altura definida (h-full + flex flex-col + min-h-0); o #default do MeLayout já rola. O padding lateral vem do #header nativo do MeTableView — não some outro px-3 (vira 24).
• Altura das células: o table-header é h-12 (48px); height em <th>/<td> é mínimo → zere o padding vertical (!py-0) senão o conteúdo estoura. ui.th/ui.td apendam às classes base → use !important para vencer.
• Checkbox líder (célula de seleção do cabeçalho) casa a largura da coluna de seleção das linhas: lista w-9 (36px), preview w-11 (44px).
• Scrollbar da área de dados = a scrollbar padrão ME (fina, thumb var(--ui-border-accented), track transparente).
• Full-bleed: a tabela encosta nas bordas do conteúdo — sem padding externo, borda externa ou border-radius próprios (o padding vem das células). Cards/lista mantêm o padding do grid.

No código

MeTableView (block EletroDS) — :data + :columns (ColumnDef do TanStack); :search="false" esconde a busca, showHeader: false esconde a barra; slots #<id>-cell / #<id>-header para customizar colunas. Base interna: UTable (ui.nuxt.com/docs/components/table).

No documento (tabela HTML)

Nas telas de documento (Pedido, Fornecedor, Produto…) as tabelas internas não usam MeTableView — são <table> HTML cru (empilhar vários MeTableView travava o browser). Mesmo assim seguem o mesmo padrão visual — reproduza, não reinterprete:

• Cabeçalho (thead th): classe DOC_TH = 'px-3 !py-0 !h-10 align-middle' (40px). O rótulo é um UButton color="neutral" variant="ghost" size="md" com -mx-2 font-semibold e :ui="{ label: '!text-muted', leadingIcon: '!text-muted' }", envolvido por UDropdownMenu (menu da coluna) — igual à index, mas sem resize/drag.
• Menu da coluna (colMenu): [[Ordenar crescente, Ordenar decrescente], [Criar gráfico → tipos, Criar métrica → Contador/Distintos]]. Ícone de sort: sem sort arrow-up-down; asc arrow-up-narrow-wide; desc arrow-down-wide-narrow.
• Células (tbody td): classe de densidade tdCls = `px-3 !py-0 align-middle ${DENSITY_TD[dens]}` (Compacto !h-10 / Regular !h-12 / Espaçoso !h-16).
• Toolbar acima da tabela: busca (UInput) + botão gráfico (chart-column, alterna o painel "Meus widgets") + VibeTableMoreMenu (mais ações: densidade/linhas/itens + exportar/paginação/editar colunas/restaurar). Sem paginação inline nem troca de visão a menos que a tela peça.
• Widgets: cada tabela tem sua instância (makeWidgets() → {state, gerarGrafico, gerarMetrica, remover, limpar}) — vidas apartadas (gerar num não abre no outro).
• Rodapé de paginação (quando usa): esquerda "0 of 20 row(s) selected." + direita Pagination (UPagination show-edges).
• Scroll-x: wrapper .vibe-galscroll overflow-x-auto + <table class="w-full min-w-[NNNpx]"> (eds-allow no min-w).
• Detalhe fino completo: docs/documento-anatomia-me.md §6.

Onde se aplica

Veja tambémEstrutura de Index Estrutura de Documento Views Pagination