ShellConfig

Shell configuration for the grid’s optional header bar and tool panels.

The shell provides a wrapper around the grid with:

• Header bar with title, toolbar buttons, and custom content
• Collapsible side panel for filters, column visibility, settings, etc.

Example

grid.gridConfig = {
  shell: {
    header: {
      title: 'Employee Directory',
    },
    toolPanel: {
      position: 'right',
      defaultOpen: 'columns', // Open by default
    },
  },
  plugins: [new VisibilityPlugin()], // Adds "Columns" panel
};

// Register custom tool panels
grid.registerToolPanel({
  id: 'filters',
  title: 'Filters',
  icon: '🔍',
  render: (container) => {
    container.innerHTML = '<div>Filter controls...</div>';
  },
});

Properties

Property	Type	Description
header?	ShellHeaderConfig	Shell header bar configuration
toolPanel?	ToolPanelConfig	Tool panel configuration
toolPanels?	ToolPanelDefinition[]	Registered tool panels (from plugins, API, or Light DOM). These are the actual panel definitions that can be opened. Set by ConfigManager during merge
headerContents?	HeaderContentDefinition[]	Registered header content sections (from plugins or API). Content rendered in the center of the shell header. Set by ConfigManager during merge

See Also

• ShellHeaderConfig for header options
• ToolPanelConfig for tool panel options