detail

Ouvre un volet sous chaque ligne maître, aussi large que la grille.

Import	import { detail } from '@dzgrid/dom/detail';
Signature	detail<T>(o: DetailFeatureOptions<T>): GridFeature
Textes	import { FR_DETAIL } from '@dzgrid/dom/locales/fr-detail'; langues : en, fr, ar
CSS à part	DETAIL_CSS — à ajouter soi-même avec injectStyles: false
Déclarée dans	packages/dom/src/detail/index.ts

Options	Type
part (obligatoire)	SlotPart<'detail'> | string
column	string
nested	number
height	number | ((master: Readonly<T>) => number) | 'auto'
initial	'none' | 'all'
isMaster	(master: Readonly<T>) => boolean

Ce qu’elle fait

detail({ part }) met un chevron dans la première colonne de chaque ligne maître. Un clic dessus, ou → sur cette colonne (← pour fermer, en miroir en arabe), ouvre un volet sous la ligne ; les lignes en dessous descendent. Le volet montre la part : une partie 'detail' à vous (definePart('detail', …)), ou toute une grille faite par nestedGrid(). Il est monté à sa première apparition et retiré quand sa ligne se ferme ou sort de la vue en défilant. Chaque ouverture par l’utilisateur est annoncée.

Le volet est un seul arrêt pour les touches : ↓ depuis le maître l’atteint, Entrée ou F2 entre dedans, Échap en ressort. Son nom est « Détails de » son maître. Il n’est jamais sélectionné, édité, copié ni exporté. Un changement de hauteur à l’intérieur ne déplace jamais les lignes au-dessus.

Le maître-détail refuse à côté de lui un arbre et la fonction spans() (unsupported-combination) : la grille montre les détails sans l’autre. Ses textes sont obligatoires : une erreur nomme chaque clé manquante. Une hauteur qui n’est pas un nombre de 0 ou plus, ou une fonction qui lève une exception, donne 240 px, sans avertissement.

Options

• part (obligatoire) : ce que montre un volet : une partie 'detail' (nestedGrid(…), definePart('detail', …)), ou son nom dans le réglage parts.
• height : la hauteur d’un volet : un nombre (240 par défaut), une fonction de la ligne maître, ou 'auto' (mesurée ; 240 en attendant). Une grille imbriquée demande un nombre ou une fonction.
• isMaster : quelles lignes ont un détail, demandé une fois par ligne et par version des lignes ; une exception vaut non. Toutes les lignes par défaut. Une ligne sans détail garde une place de chevron vide, pour aligner les textes.
• initial : ce qui est ouvert au premier chargement : 'none' (par défaut) ou 'all'.
• column : la colonne dont les cellules portent le chevron ; la première visible par défaut.
• nested : la profondeur de cette grille, 1 dans la page ; par défaut une de plus que les grilles autour.

Lues à la création de la grille.

Exemple

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

type Pick = { id: string; day: string; crates: number };
type Orchard = { id: string; name: string; picks: Pick[] };

const messages: GridMessages = { ...FR, text: { ...FR.text, ...FR_DETAIL.text } };
const picks = nestedGrid<Pick>({
  settings: (c) => ({
    rows: (c.row as Orchard).picks,
    columns: [{ id: 'day', header: 'Jour', type: 'day' }, { id: 'crates', header: 'Cageots', type: 'number' }],
    getRowId: (p) => p.id,
    messages,
  }),
});

createGrid<Orchard>(document.getElementById('orchards')!, {
  rows: [{ id: 'o1', name: 'Versant nord', picks: [{ id: 'p1', day: '2026-09-02', crates: 41 }] }],
  columns: [{ id: 'name', header: 'Verger' }],
  getRowId: (o) => o.id,
  messages,
  features: [detail<Orchard>({ part: picks, height: 200, isMaster: (o) => o.picks.length > 0 })],
});

Démo

Le chevron d’un verger ouvre ses jours de cueillette : une grille à elle dans la ligne.

Voir aussi

• nestedGrid() : toute une grille dans chaque volet.
• Maître et détail dans le guide.