# 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

```typescript
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?` | <code><a href="/grid/plugins/shell/interfaces/shellheaderconfig/">ShellHeaderConfig</a></code> | Shell header bar configuration |
| `toolPanel?` | <code><a href="/grid/plugins/shell/interfaces/toolpanelconfig/">ToolPanelConfig</a></code> | Tool panel configuration |
| `toolPanels?` | <code><a href="/grid/plugins/shell/interfaces/toolpaneldefinition/">ToolPanelDefinition</a>[]</code> | 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?` | <code><a href="/grid/plugins/shell/interfaces/headercontentdefinition/">HeaderContentDefinition</a>[]</code> | 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`](/grid/plugins/shell/interfaces/shellheaderconfig.md) for header options
- [`ToolPanelConfig`](/grid/plugins/shell/interfaces/toolpanelconfig.md) for tool panel options