width

La largeur de la colonne, en pixels CSS.

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

Ce qu’il fait

Une colonne fait 150 px de large, sauf indication contraire. La largeur reste entre minWidth et maxWidth. Une largeur donnée par l’utilisateur (en tirant le bord du titre, par le menu, au clavier) l’emporte sur celle-ci et fait partie de l’état enregistré ; le « Réinitialiser les colonnes » du menu de colonne redonne celle-ci.

Une colonne avec un flex partage plutôt la place restante, et width n’est sa part que tant que la largeur de la grille n’est pas encore connue. Une largeur qui n’est pas un nombre positif ou nul est refusée avec une erreur invalid-column, et la colonne est écartée.

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', width: 160 },
    { id: 'shelf', header: 'Étagère', type: 'number', width: 90 },
    { id: 'notes', header: 'Notes', flex: 1 },
  ],
  getRowId: (r) => r.id,
  messages: FR,
});

Démo

Outil fait 160 px, Étagère 90 px, Notes prend le reste.

Voir aussi

• flex, minWidth, maxWidth, resizable.
• Colonnes.