dock

Donne aux volets une place à côté ou sous les lignes, avec onglets, redimensionnement et repli.

Import	import { dock } from '@dzgrid/dom/dock';
Signature	dock(o?: DockOptions): DockFeature
Textes	import { FR_DOCK } from '@dzgrid/dom/locales/fr-dock'; langues : en, fr, ar
Feuille de style	import '@dzgrid/theme/dock.css';
CSS à part	DOCK_CSS — à ajouter soi-même avec injectStyles: false
Déclarée dans	packages/dom/src/dock/index.ts

Options	Type
open	Readonly<Record<string, DockArea>>
panels	readonly DockPanel[]
sizes	{ readonly min?: number; readonly max?: number }
onChange	(layout: DockState) => void

Ce qu’elle fait

dock() ajoute trois zones dans la boîte de la grille : start et end à côté des lignes (côtés logiques : en miroir en arabe) et bottom sous elles. Le columnsChooser (volet columns), le filtersPanel (volet filters) et vos propres volets s’y tiennent. Deux volets dans une même zone deviennent des onglets. Chaque zone se redimensionne par son bord, au pointeur ou avec les flèches, se replie en bandeau, se ferme, ou passe dans une autre zone par son bouton « Placer ».

api(grid) donne show(id, area), hide(id), move(id, area), collapse(area), resize(area, px), layout() et setLayout(layout). Avec gridState, la place de chaque volet est gardée avec le reste de l’état.

Une fenêtre flottante (zone float) n’est pas encore là : dans open elle est refusée avec un avertissement invalid-setting, et dans une disposition restaurée ignorée avec un avertissement state-field.

Options

• open : les volets montrés au départ, et où ({ columns: 'end' }), par-dessus la place par défaut de chacun.
• panels : vos propres volets — id, title (un texte, ou une fonction redemandée à chaque dessin), area (end par défaut ; caché là jusqu’à ce qu’on le montre, sauf si open le nomme) et mount(host), qui dessine le contenu une fois et peut rendre une fonction de nettoyage.
• sizes : les limites de la taille d’une zone en px CSS, { min, max } (160 et 800 par défaut) ; les lignes gardent toujours 160 px.
• onChange(layout) : après chaque changement fait par l’utilisateur ou l’API, jamais après une restauration : la disposition telle que l’état la garde.

Exemple

import { createGrid } from '@dzgrid/dom';
import { dock } from '@dzgrid/dom/dock';
import { columnsChooser } from '@dzgrid/dom/columns-panel';
import { FR } from '@dzgrid/dom/locales/fr';
import { FR_DOCK } from '@dzgrid/dom/locales/fr-dock';
import { FR_COLUMNS } from '@dzgrid/dom/locales/fr-columns';

type Tea = { id: string; tea: string; minutes: number };

const panels = dock({
  open: { columns: 'end' },
  sizes: { min: 200, max: 480 },
  panels: [{
    id: 'notes',
    title: 'Notes',
    area: 'bottom',
    mount(host) {
      const p = host.ownerDocument.createElement('p');
      p.textContent = 'Chauffez d’abord la théière.';
      host.append(p);
      return () => p.remove();
    },
  }],
  onChange: (layout) => console.log(layout),
});

const grid = createGrid<Tea>(document.getElementById('teas')!, {
  rows: [{ id: 'e1', tea: 'Pin fumé', minutes: 4 }],
  columns: [
    { id: 'tea', header: 'Thé' },
    { id: 'minutes', header: 'Minutes', type: 'number' },
  ],
  getRowId: (t) => t.id,
  messages: { ...FR, text: { ...FR.text, ...FR_DOCK.text, ...FR_COLUMNS.text } },
  features: [columnsChooser(), panels],
});

panels.api(grid)?.show('notes');

Démo

Le choix des colonnes et les filtres partagent la zone de fin en onglets : faites glisser le bord de la zone pour la redimensionner.

Voir aussi

• Volets latéraux : les deux volets et les vôtres, pas à pas.
• columnsChooser et filtersPanel : les volets fournis avec DzGrid.
• gridState : la disposition gardée avec l’état.