pinned

Fixe la colonne d’un côté de la grille.

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

Ce qu’il fait

pinned: 'start' garde la colonne au début de la ligne (à gauche en français, à droite en arabe), 'end' à l’autre bout ; les autres colonnes défilent entre elles. Les côtés sont logiques, jamais gauche ou droite. L’utilisateur épingle et désépingle depuis le menu de colonne, et ce choix fait partie de l’état enregistré.

Toute autre valeur est refusée avec une erreur invalid-column, et la colonne est écartée. Plus de six colonnes épinglées d’un même côté sont acceptées avec un avertissement too-many-pinned. Quand la grille est trop étroite pour ses colonnes épinglées, elles défilent avec les autres jusqu’à ce que la place revienne ; l’état ne change pas.

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

Démo

Faites défiler de côté : Outil reste au début.

Voir aussi

• movable, width.
• Colonnes.