spans

Dessine les cellules fusionnées, les cellules sur plusieurs lignes ou colonnes, les lignes pleine largeur et les titres groupés.

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

Options	Type
acrossLevels	boolean

Ce qu’elle fait

spans() dessine ce que demandent les colonnes et les réglages : des voisines égales fusionnées en une haute cellule (merge), des étendues décidées par les données (rowSpan, colSpan), des lignes d’une seule cellule (fullWidth), et les rangées de titres des groupes de colonnes (une colonne avec children). Des règles d’étendue données sans elle sont ignorées, et la grille signale un avertissement missing-feature par sorte de règle.

Les étendues se calculent sur les lignes telles qu’affichées : après un tri ou un filtre, les lignes désormais voisines fusionnent à nouveau. Une fusion ne traverse jamais une page, un bord épinglé, un groupe de lignes ni un espace. Le libellé d’une longue cellule fusionnée suit le défilement, pour rester en vue. Les touches traitent une cellule étendue comme un seul arrêt, et revenir en arrière ramène à la ligne d’où l’on venait ; un clic sur une haute cellule agit sur la ligne sous le pointeur. Un fichier CSV écrit la valeur sur chaque ligne que la cellule couvre.

Dans un arbre, une fusion ne joint que des sœurs, sauf si acrossLevels est activé ; les lignes pleine largeur restent refusées à côté d’un arbre (unsupported-combination). Le maître-détail refuse spans(). Une étendue posée sur une autre est écartée (span-overlap) ; une étendue coupée par un bord épinglé ou par la fin des lignes signale span-clipped ; une étendue fausse (merge avec rowSpan ou colSpan sur une même colonne, une règle qui lève une exception) invalid-span ; un groupe de colonnes faux invalid-column-group.

Options

• acrossLevels : dans un arbre, hors de la colonne de l’arbre d’une ligne, une fusion continue à travers un nœud et ses enfants affichés, sous une même ligne du haut. Désactivé par défaut : une fusion s’arrête là où le niveau change.

Lue à la création de la grille.

Exemple

import { createGrid } from '@dzgrid/dom';
import type { ColumnOrGroup } from '@dzgrid/core';
import { spans } from '@dzgrid/dom/spans';
import { FR } from '@dzgrid/dom/locales/fr';

type Hike = { id: string; valley: string; trail: string; km: number };

const columns: ColumnOrGroup<Hike>[] = [
  { id: 'valley', header: 'Vallée', merge: true },
  { id: 'walk', header: 'Balade', children: [
    { id: 'trail', header: 'Sentier' },
    { id: 'km', header: 'Distance (km)', type: 'number' },
  ] },
];

createGrid<Hike>(document.getElementById('walks')!, {
  rows: [
    { id: 'w1', valley: 'Vallée verte', trail: 'Sentier des fougères', km: 4.5 },
    { id: 'w2', valley: 'Vallée verte', trail: 'Boucle de la cascade', km: 7 },
    { id: 'w3', valley: 'Vallée de pierre', trail: 'Chemin de crête', km: 11 },
  ],
  columns,
  getRowId: (w) => w.id,
  messages: FR,
  features: [spans()],
});

Démo

Triez par Distance : les vallées se séparent, puis fusionnent à nouveau triées par Vallée.

Voir aussi

• L’option de colonne merge.
• Le réglage fullWidth.
• Groupes de colonnes dans le guide.