Skip to content
DzGrid

dock

Gives side panels a place beside or under the rows, with tabs, resizing and collapsing.

Importimport { dock } from '@dzgrid/dom/dock';
Signaturedock(o?: DockOptions): DockFeature
Textsimport { EN_DOCK } from '@dzgrid/dom/locales/en-dock';
languages: en, fr, ar
Style sheetimport '@dzgrid/theme/dock.css';
Own CSSDOCK_CSS — to add yourself with injectStyles: false
Declared inpackages/dom/src/dock/index.ts
OptionsType
openReadonly<Record<string, DockArea>>
panelsreadonly DockPanel[]
sizes{ readonly min?: number; readonly max?: number }
onChange(layout: DockState) => void

What it does

Section titled “What it does”

dock() adds three areas inside the grid’s box: start and end beside the rows (logical sides: mirrored in Arabic) and bottom under them. The columnsChooser (panel columns), the filtersPanel (panel filters) and your own panels stand there. Two panels in one area become tabs. Each area is resized by its edge, by the pointer or the arrow keys, collapsed to a strip, closed, or moved to another area with its « Place » button.

api(grid) gives show(id, area), hide(id), move(id, area), collapse(area), resize(area, px), layout() and setLayout(layout). With gridState, where each panel stands is saved with the rest of the state.

A floating window (area float) is not there yet: in open it is refused with an invalid-setting warning, and in a restored layout skipped with a state-field warning.

Options

Section titled “Options”
  • open: the panels shown at the start, and where ({ columns: 'end' }), over each panel’s own default.
  • panels: your own panels — id, title (text, or a function asked again at each paint), area (end by default; hidden there until shown, unless open names it) and mount(host), which draws the content once and may return a cleanup.
  • sizes: the limits of an area’s size in CSS px, { min, max } (160 and 800 by default); the rows always keep 160 px.
  • onChange(layout): after each change made by the user or the API, never after a restore: the layout as the state keeps it.

Example

Section titled “Example”
import { createGrid } from '@dzgrid/dom';
import { dock } from '@dzgrid/dom/dock';
import { columnsChooser } from '@dzgrid/dom/columns-panel';
import { EN } from '@dzgrid/dom/locales/en';
import { EN_DOCK } from '@dzgrid/dom/locales/en-dock';
import { EN_COLUMNS } from '@dzgrid/dom/locales/en-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 = 'Warm the pot first.';
      host.append(p);
      return () => p.remove();
    },
  }],
  onChange: (layout) => console.log(layout),
});


const grid = createGrid<Tea>(document.getElementById('teas')!, {
  rows: [{ id: 'e1', tea: 'Smoked pine', minutes: 4 }],
  columns: [
    { id: 'tea', header: 'Tea' },
    { id: 'minutes', header: 'Minutes', type: 'number' },
  ],
  getRowId: (t) => t.id,
  messages: { ...EN, text: { ...EN.text, ...EN_DOCK.text, ...EN_COLUMNS.text } },
  features: [columnsChooser(), panels],
});


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

Live demo

Section titled “Live demo”

The chooser and the filters share the end area as tabs: drag the area's edge to resize it.

See also

Section titled “See also”