Colunas — redimensionar, reordenar e fixar
Comportamento das colunas nas tabelas ME — a pessoa ajusta largura, ordem e congela colunas à esquerda ou à direita; 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 ou à direita. 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 (à esquerda ou à direita). | A coluna congela no lado escolhido — à esquerda logo após a caixa de seleção; à direita junto das ações — e fica visível enquanto a tabela rola na horizontal. Desfixar solta. |
Por quê: tabela larga com muitas colunas fica utilizável — a pessoa mantém as âncoras (nº, nome) fixas à esquerda e as ações (favoritar, ⋮) fixas à direita, e explora o meio rolando.
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, não só reagrupar: a coluna gruda na borda escolhida no scroll horizontal, com uma sombra marcando a divisa. Esquerda = ancora (a caixa de seleção acompanha); direita = mantém as ações da linha sempre à mão.
- 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 acumulado: left nas N primeiras colunas e right nas M últimas — o valor passado à diretiva é um número (só esquerda) ou{ left, right } (os dois lados). 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).