responsive

Sur un écran étroit, retire des lignes les colonnes qui ne tiennent pas et les montre sous chaque ligne.

Import	import { responsive } from '@dzgrid/dom/responsive';
Signature	responsive(o?: ResponsiveOptions): GridFeature
Textes	pas de paquet à elle
CSS à part	RESPONSIVE_CSS — à ajouter soi-même avec injectStyles: false
Déclarée dans	packages/dom/src/responsive/index.ts

Options	Type
priority	Readonly<Record<string, number>>

Ce qu’elle fait

Quand les colonnes ne tiennent pas dans la vue, responsive() retire des lignes des colonnes du centre au lieu de faire défiler la grille de côté. Un chevron dans la première cellule de chaque ligne ouvre alors des lignes « Titre : valeur » sous la ligne, une par colonne retirée. La colonne au plus grand collapsePriority part en premier (une colonne sans priorité compte 1) ; à égalité, la dernière à l’écran. La première colonne, les colonnes figées et une priorité de 0 ne partent jamais. Une colonne flexible compte son minWidth. Tout suit chaque changement de taille.

Sur la première cellule d’une ligne, Entrée ou Espace ouvre et ferme ses lignes. La recherche rapide, les filtres, les fichiers et l’impression voient toujours toutes les colonnes, et rien n’est gardé dans l’état de la grille.

Les lignes sont un panneau de lignes de détail : il faut donc les textes -detail. Elle ne se combine pas avec un arbre, le regroupement de lignes, des groupes de titres, des cellules fusionnées (spans()) ou votre propre detail() : la grille signale unsupported-combination. Une colonne avec collapsePriority dans une grille sans cette fonction signale un avertissement missing-feature.

Options

• priority : une priorité de repli par identifiant de colonne, au-dessus du collapsePriority des colonnes. La plus haute se replie en premier ; 0 jamais.

Exemple

import { createGrid, type GridMessages } from '@dzgrid/dom';
import { responsive } from '@dzgrid/dom/responsive';
import { FR } from '@dzgrid/dom/locales/fr';
import { FR_DETAIL } from '@dzgrid/dom/locales/fr-detail';

type Hive = { id: string; name: string; apiary: string; frames: number; queen: string; checked: string };
const messages: GridMessages = { ...FR, text: { ...FR.text, ...FR_DETAIL.text } };

createGrid<Hive>(document.getElementById('hives')!, {
  rows: [{ id: 'h1', name: 'Trèfle', apiary: 'Colline', frames: 9, queen: 'Marquée bleu', checked: '2026-05-02' }],
  columns: [
    { id: 'name', header: 'Ruche', width: 160 },
    { id: 'apiary', header: 'Rucher', width: 140, collapsePriority: 2 },
    { id: 'frames', header: 'Cadres', type: 'number', width: 100, collapsePriority: 0 },
    { id: 'queen', header: 'Reine', width: 180 },
    { id: 'checked', header: 'Visitée le', type: 'day', width: 140 },
  ],
  getRowId: (h) => h.id,
  messages,
  features: [responsive({ priority: { queen: 3 } })],
});

Démo

Rétrécissez la fenêtre : Rucher quitte les lignes en premier, puis les dernières colonnes ; le chevron les montre sous chaque ligne.

Voir aussi

• L’option de colonne collapsePriority.
• La fonction detail : les panneaux sous les lignes.
• Colonnes : le guide.