Aller au contenu
DzGrid

Volets latéraux

Deux volets viennent avec DzGrid : le choix des colonnes (columnsChooser() de @dzgrid/dom/columns-panel : chercher, afficher, masquer et ordonner les colonnes ; textes -columns, CSS columns-panel.css) et le volet des filtres (filtersPanel() de @dzgrid/dom/filters-panel : le filtre de chaque colonne dans une seule liste ; textes -filters-panel, CSS filters-panel.css). Sans dock, le choix des colonnes s’ouvre en boîte de dialogue et le volet des filtres se tient sur son propre côté.

dock() de @dzgrid/dom/dock leur donne, ainsi qu’à vos propres volets, une place à côté des lignes ou sous elles (textes -dock, CSS dock.css) : les zones start et end (à côté des lignes, côtés logiques) et bottom. Chaque zone se redimensionne par son bord (aussi avec les flèches), se replie en bandeau, se ferme, ou passe dans une autre zone ; deux volets dans une même zone deviennent des onglets.

Les deux volets partagent la zone de fin en onglets : cochez Préparée le dans le choix des colonnes pour l’afficher, glissez le bord de la zone pour la redimensionner.

 
import { createGrid, type GridMessages } from '@dzgrid/dom';
import { dock } from '@dzgrid/dom/dock';
import { columnsChooser } from '@dzgrid/dom/columns-panel';
import { filtersPanel } from '@dzgrid/dom/filters-panel';
import { filters } from '@dzgrid/dom/filters-base';
import { columnMenu } from '@dzgrid/dom/column-menu';
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';
import { FR_FILTERS } from '@dzgrid/dom/locales/fr-filters';
import { FR_FILTERS_PANEL } from '@dzgrid/dom/locales/fr-filters-panel';
import { FR_COLUMN_MENU } from '@dzgrid/dom/locales/fr-column-menu';
import '@dzgrid/theme/dzgrid.css';
import '@dzgrid/theme/dock.css';
import '@dzgrid/theme/columns-panel.css';
import '@dzgrid/theme/filters-panel.css';
import '@dzgrid/theme/menu.css';


type Potion = { id: string; name: string; colour: string; doses: number };


const messages: GridMessages = {
  ...FR,
  text: { ...FR.text, ...FR_DOCK.text, ...FR_COLUMNS.text, ...FR_FILTERS.text, ...FR_FILTERS_PANEL.text, ...FR_COLUMN_MENU.text },
};


const chooser = columnsChooser();
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 = 'Agiter avant emploi.';
      host.append(p);
      return () => p.remove();
    },
  }],
  onChange: (layout) => console.log('dock déplacé', layout),
});


const grid = createGrid<Potion>(document.getElementById('potions')!, {
  rows: [{ id: 'p1', name: 'Brume en bouteille', colour: 'gris', doses: 3 }],
  columns: [{ id: 'name', header: 'Potion' }, { id: 'colour', header: 'Couleur' }, { id: 'doses', header: 'Doses', type: 'number' }],
  getRowId: (p) => p.id,
  messages,
  features: [filters(), chooser, filtersPanel(), columnMenu({ use: { chooser } }), panels],
});


panels.api(grid)?.show('notes');
panels.api(grid)?.move('filters', 'start');
  • Les identifiants des volets : columns (le choix des colonnes), filters (le volet des filtres), et les identifiants de vos propres volets.
  • open: { id: area } affiche un volet à cet endroit dès le départ ; sinon le choix des colonnes attend à la fin qu’on l’ouvre (« Choisir les colonnes » dans le menu de colonne, ou chooser.api(grid)?.open()), et vos volets attendent dans leur area (end par défaut) jusqu’à api.show(id).
  • Le mount(host) de votre volet construit son contenu et peut rendre une fonction de nettoyage.
  • api : show, hide, move, collapse, resize, layout(), setLayout(layout). Avec la fonction état, la place de chaque volet est enregistrée avec le reste de l’état de la grille.
  • Une fenêtre flottante (zone float) est prévue, pas encore là : elle est refusée avec un avertissement.

Chaque option de dock() est sur sa page.