columns

Permet de déplacer les colonnes et de les ajuster ou dimensionner, à la souris ou au clavier.

Import	import { columns } from '@dzgrid/dom/columns';
Signature	columns(o?: ColumnsOptions): ColumnsFeature
Textes	import { FR_COLUMNS } from '@dzgrid/dom/locales/fr-columns'; langues : en, fr, ar
Feuille de style	import '@dzgrid/theme/columns.css';
Déclarée dans	packages/dom/src/columns/index.ts

Options	Type
drag	boolean
fitOnLoad	'content'

Ce qu’elle fait

columns() permet de déplacer une colonne. À la souris, un titre pressé puis déplacé de 4 px glisse : une copie légère suit le pointeur et une barre montre où la colonne va se poser. Posée parmi les colonnes figées au début ou à la fin, la colonne y est figée ; sortie de là, elle ne l’est plus. Près des bords de la grille, les colonnes défilent. Échap remet tout en place. Un doigt sur un titre fait défiler la grille et ne le déplace jamais. En arabe, tout est en miroir.

Au clavier, sur un titre qui a le focus : Ctrl+Maj+flèches (Cmd+Maj sur Mac) déplacent la colonne d’une place, Ctrl+Maj+Début / Fin jusqu’au bord de sa partie (jamais au-delà d’un bord figé) ; la nouvelle place est dite. Alt+R ouvre un mode de redimensionnement : les flèches changent la largeur de 10 px (Maj : 1 px), Début ajuste au contenu, Entrée garde, Échap rend l’ancienne largeur.

Faire glisser le bord d’un titre redimensionne une colonne même sans cette fonction ; avec elle, un double-clic sur le bord ajuste la colonne à son contenu. Une colonne avec movable: false garde sa place, une avec resizable: false sa largeur. Chaque déplacement ou ajustement est un seul changement de l’état des colonnes, que gridState() peut garder. Par le code, columnsFeature.api(grid) donne move, autoSize, autoSizeAll, resizeMode et fitContent. Sans les textes -columns, la grille n’est pas créée : une erreur nomme les clés qui manquent.

Options

• drag : si un titre peut être glissé à la souris. false ne laisse que les touches et l’API. Par défaut true.
• fitOnLoad : 'content' ajuste une fois les colonnes affichées à leur contenu, quand les premières lignes s’affichent. Les colonnes flexibles, celles en resizable: false et les largeurs déjà fixées (un état gardé, l’utilisateur) ne bougent pas. Un changement de données n’ajuste plus jamais ; fitContent() de l’API le refait.

Exemple

import { createGrid } from '@dzgrid/dom';
import { columns } from '@dzgrid/dom/columns';
import { FR } from '@dzgrid/dom/locales/fr';
import { FR_COLUMNS } from '@dzgrid/dom/locales/fr-columns';
import '@dzgrid/theme/columns.css';

type Book = { id: string; title: string; shelf: string; pages: number };

const moves = columns({ fitOnLoad: 'content' });

const grid = createGrid<Book>(document.getElementById('books')!, {
  rows: [{ id: 'b1', title: 'La Route du sel', shelf: 'A3', pages: 312 }],
  columns: [
    { id: 'title', header: 'Titre', movable: false },
    { id: 'shelf', header: 'Étagère' },
    { id: 'pages', header: 'Pages', type: 'number' },
  ],
  getRowId: (b) => b.id,
  messages: { ...FR, text: { ...FR.text, ...FR_COLUMNS.text } },
  features: [moves],
});

moves.api(grid)?.move('pages', 'start');

Démo

Faites glisser un titre pour déplacer sa colonne ; sur un titre qui a le focus, Ctrl+Maj+flèches le déplacent et Alt+R le redimensionne.

Voir aussi

• La fonction columnMenu : déplacer, figer et dimensionner depuis un menu.
• Les options de colonne movable et resizable.
• Colonnes : le guide des colonnes.