ShellConfig

Since v0.1.1

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` is augmented onto gridConfig by the built-in ShellPlugin
  shell: {
    header: { title: 'Employee Directory' },
    toolPanel: {
      position: 'right',
      initialState: 'open', // Sidebar open on load
    },
  },
  plugins: [new VisibilityPlugin()], // Adds the "Columns" tool panel
};

// Register custom tool panels via the shell plugin
grid.getPluginByName('shell')?.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