Colunas — redimensionar, reordenar e fixar
Comportamento das colunas nas tabelas ME — a pessoa ajusta largura, ordem e congela colunas à esquerda; como o guide implementa isso por baixo.
Nas tabelas ME a pessoa ajusta as colunas ao próprio trabalho, sem sair da tela: muda a largura, troca a ordem e congela as importantes à esquerda. Mesma lógica de "Editar colunas" e do menu do cabeçalho.
Comportamento (o que a pessoa faz)
| Ação | Como | Resultado |
|---|---|---|
| Redimensionar | Arrasta a borda direita de um cabeçalho (cursor vira ↔). | A coluna muda de largura (mínimo = o nome do cabeçalho por extenso). A tabela rola na horizontal quando a soma passa da largura visível. |
| Reordenar | Arrasta o corpo do cabeçalho para outra posição. | Cabeçalho e coluna do corpo se movem juntos. Clique simples (sem arrastar) abre o menu de ordenar. |
| Fixar (pin) | Menu do cabeçalho → Fixar coluna. | A coluna congela na esquerda (logo após a caixa de seleção) e fica visível enquanto a tabela rola na horizontal — igual "congelar painel". Desfixar solta. |
Por quê: tabela larga com muitas colunas fica utilizável — a pessoa vê a coluna importante inteira, esconde ruído e mantém âncoras (nº, nome) fixas ao explorar o resto.
Regras
- Cabeçalho nunca trunca: a coluna tem largura mínima igual ao nome por extenso.
- Conteúdo trunca com "…", exceto quando "linhas por registro = ajustar ao texto" (aí quebra em várias linhas).
- Fixar = congelar à esquerda, não só reagrupar: a coluna (e a caixa de seleção) grudam na borda esquerda no scroll horizontal, com uma sombra marcando a divisa.
- Reordenar por arraste vale para as colunas; ordenar/esconder/fixar ficam no menu do cabeçalho.
Onde se aplica
- Index (listagem): redimensionar + reordenar + fixar + ordenar/esconder.
- Tabelas de documento (Itens, Históricos, Endereços, Contatos…): redimensionar + reordenar.
Como o guide implementa (interno — não vale para telas geradas, que usam os recursos nativos do MeTableView):Uma diretiva global
v-resizable-cols (app/plugins/resizable-cols.client.ts) dá resize + reorder a qualquer <table>:- liga
table-layout: fixede impõe a largura por coluna via CSSnth-child(sobrevive a sort/paginação/re-render); largura da tabela = soma das colunas (senão ummin-wdo Tailwind prende e o arraste "não faz nada"); - ouve o mousedown em fase de captura (o trigger do
UDropdownMenuno cabeçalho dástopPropagationno bubble → sem captura o listener nunca receberia); - resize = borda; reorder = corpo do cabeçalho (move os nós DOM).
v-resizable-cols.noreorder (reorder/fixar são nativos): a diretiva mede a largura renderizada antes de fixar (não colapsa) e, quando a ordem/nº de colunas muda, re-mede. O fixar vira position: sticky; left acumulado nas N primeiras colunas (valor passado à diretiva). Reorder por arraste em <table> cru é DOM → um re-render do Vue reseta a ordem; onde precisa persistir, a tabela é column-driven (ordem em estado reativo).