groupShow

Which columns a collapsible group keeps when it folds.

Type	'open' | 'closed'
Default	not set
Live update (update())	Yes — give the columns again (update({ columns }))
Declared in	packages/core/src/columns/defs.ts

What it does

A column group with collapsible: true opens and closes with a button in its header (Enter or Space on it). Its columns marked groupShow: 'open' show only while it is open, those marked 'closed' only while it is closed; the others always. Without groupShow, a column shows in both. Under a group that does not open and close, it is ignored.

Group header rows need the spans() feature, and the button the groups() feature from @dzgrid/dom/groups (texts -columns). The group’s open: false starts it closed.

Example

import { createGrid, type GridMessages } from '@dzgrid/dom';
import { spans } from '@dzgrid/dom/spans';
import { groups } from '@dzgrid/dom/groups';
import { EN_COLUMNS } from '@dzgrid/dom/locales/en-columns';
import { EN } from '@dzgrid/dom/locales/en';

type Station = { id: string; name: string; tempMin: number; tempMax: number; rain: number };

const messages: GridMessages = { ...EN, text: { ...EN.text, ...EN_COLUMNS.text } };

createGrid<Station>(document.getElementById('stations')!, {
  rows: [{ id: 's1', name: 'Cape Lumen', tempMin: 4, tempMax: 17, rain: 2.5 }],
  columns: [
    { id: 'name', header: 'Station' },
    {
      id: 'weather',
      header: 'Weather',
      collapsible: true,
      children: [
        { id: 'tempMin', header: 'Min °C', type: 'number', groupShow: 'open' },
        { id: 'tempMax', header: 'Max °C', type: 'number' },
        { id: 'rain', header: 'Rain (mm)', type: 'number', groupShow: 'open' },
      ],
    },
  ],
  getRowId: (r) => r.id,
  messages,
  features: [spans(), groups()],
});

Live demo

The group’s button folds Weather to its Max °C column.

See also

• hidden.
• Columns.