Skip to main content
WebGPUnot applicable

ColumnPanel

from v9.3

This live example uses PanelManager and panel containers directly, without deck.gl.

ColumnPanel wraps multiple child panels into one vertically stacked panel.

Usage​

Use ColumnPanel when several small panels should read like one grouped card or sidebar section.

import {ColumnPanel, type ColumnPanelProps} from '@deck.gl-community/panels';

The example assumes two content panels, summaryPanel and detailsPanel, with those IDs.

new ColumnPanel({id: 'details', title: 'Details', panels: [summaryPanel, detailsPanel]});

Props​

type ColumnPanelProps = PanelProps & {
  panels: ReadonlyArray<Panel>;
  id?: string;
  title?: string;
  theme?: PanelTheme;
};

See Also​

Remarks​

  • Preserves all child panels in order and keeps them visible at the same time.
  • Produces one composite panel for boxes, sidebars, modals, full-screen containers, or nested layouts.

Child arrays define display order. Give each child a distinct, stable ID. See state and updates for controlled values, local defaults, and refreshing definitions. PanelTheme is described in Panel Themes.