flex

Fait s’étirer la colonne avec la grille.

Type	number
Par défaut	non défini
Modifiable en direct (update())	Oui — en redonnant les colonnes (update({ columns }))
Déclaré dans	packages/core/src/columns/defs.ts

Ce qu’il fait

Les colonnes avec un flex se partagent la largeur que laissent les autres colonnes, chacune en proportion de son nombre : flex: 2 prend deux fois ce que prend flex: 1. Elles suivent la largeur de la grille quand la fenêtre change de taille, et restent entre leurs minWidth et maxWidth. Quand toutes les colonnes sont flexibles, elles remplissent toujours exactement la grille ; il n’y a pas d’interrupteur « ajuster à la largeur » à part.

Une fois qu’une colonne flexible est redimensionnée par l’utilisateur, elle garde cette largeur ; le « Réinitialiser les colonnes » du menu de colonne la rend de nouveau flexible. Une valeur qui n’est pas un nombre positif ou nul est refusée avec une erreur invalid-column ; 0 n’est pas flexible.

Exemple

import { createGrid } from '@dzgrid/dom';
import { FR } from '@dzgrid/dom/locales/fr';

type Tool = { id: string; name: string; shelf: number; notes: string };

createGrid<Tool>(document.getElementById('outils')!, {
  rows: [{ id: 't1', name: 'Marteau', shelf: 2, notes: 'Arrache-clou, 450 g' }],
  columns: [
    { id: 'name', header: 'Outil', flex: 1, minWidth: 120 },
    { id: 'shelf', header: 'Étagère', type: 'number', width: 90 },
    { id: 'notes', header: 'Notes', flex: 2, minWidth: 160 },
  ],
  getRowId: (r) => r.id,
  messages: FR,
});

Démo

Changez la taille de la page : Outil et Notes se partagent la place, Notes deux fois plus.

Voir aussi

• width, minWidth, maxWidth.
• Colonnes.