ToolPanelDefinition

Since v0.1.1

Tool panel definition registered by plugins or consumers.

Register via the shell plugin’s registerToolPanel() to add panels to the sidebar. Panels appear as collapsible sections with icons and titles.

Example

grid.getPluginByName('shell')?.registerToolPanel({
  id: 'filters',
  title: 'Filters',
  icon: '🔍',
  tooltip: 'Filter grid data',
  order: 10, // Lower = appears first
  render: (container) => {
    container.innerHTML = `
      <div class="filter-panel">
        <input type="text" placeholder="Search..." />
      </div>
    `;
    // Return cleanup function
    return () => container.innerHTML = '';
  },
  onClose: () => {
    console.log('Filter panel closed');
  },
});

Properties

Property	Type	Description
id	string	Unique panel ID
title?	string	Panel title shown in the accordion header. v3.1.0+
icon?	string	Icon for accordion section header (optional, emoji or SVG)
tooltip?	string	Tooltip for accordion section header
render	(container: HTMLElement) => void | () => void	Panel content factory - called when panel section opens
onClose?	() => void	Called when panel closes (for cleanup)
order?	number	Panel order priority (lower = first, default: 100)

Property Details

title

Panel title shown in the accordion header.

Optional — omit it when the panel’s rendered content already provides its own heading. Rendering rules for the .tbw-accordion-header row:

• Title given — the header row renders as usual (icon + title + chevron).
• No title, multiple panels registered — the header row still renders (with an empty title span) so the accordion expand/collapse chevron and toggle button remain available.
• No title, single panel — the entire header row is skipped; the panel content is shown directly.

Made optional in 3.1.0 (previously required).

---

See Also

• ShellConfig for shell configuration