Custom Settings Panels

Summary

Developers can add bespoke panels to the Settings Panel via Settings Panel Options
Each panel supplies custom content only — there is no buttons-based variant (unlike Custom Toolbars or Tool Panels)

Developers can add custom panels to the Settings Panel.

Note

This allows users to manage AdapTable and application settings in one place

Custom panels are provided using the customSettingsPanels property in Settings Panel Options.

Deep Dive

Anatomy of a Custom Settings Panel

The CustomSettingsPanel object is defined as follows:

Property	Type	Description
frameworkComponent	`AdaptableFrameworkComponent`	Framework-specific (Angular, React or Vue) component to be rendered
icon	`AdaptableIcon`	Icon rendered inside settings-panel name, inside the navigation
name	`string`	Appears in Settings Panel Navigation. Include in `navigation` to choose placement (by default added to a `Custom Panels` group at the end).
render	`(customRenderContext:CustomRenderContext) => string \| null`	Function to provide bespoke content when NOT using a Framework wrapper

name — shown in the left-hand navigation; include in navigation groups when you define a custom order
icon — optional AdaptableIcon for the nav entry
render or frameworkComponent — bespoke panel content (one or the other, depending on flavour)

Providing Bespoke Content

Provide bespoke content with render on CustomSettingsPanel.

The function receives CustomRenderContext (phase, element, adaptableApi).

render?: (context: CustomRenderContext) => string | null;

Return HTML when phase is 'onMount'; return null on 'onDestroy' for teardown.

Developer Guide

Providing a Custom Settings Panel (Vanilla)

settingsPanelOptions: {
  customSettingsPanels: [
    {
      name: 'Application Settings',
      icon: {name: 'info'},
      render: context => {
        if (context.phase === 'onMount') {
          return `
            <h3>Application Settings</h3>
            <p>Configure application-wide options here.</p>
            <label>Number of agents: <input type="text" placeholder="Enter count" /></label>
          `;
        }
        return null;
      },
    },
  ],
  navigation: (_context, _defaultNavigation) => ({
    groups: [
      {label: 'Settings', items: ['Application Settings']},
      {label: 'Work', items: ['CalculatedColumn', 'FormatColumn']},
      {label: 'Admin', items: ['Theme']},
    ],
  }),
},

Add an entry to customSettingsPanels with name, optional icon, and render.

Set navigation order (when needed)

Use the navigation configurer to return grouped navigation — each group has a label (optional heading) and items (module or custom panel names).

Custom Settings Panel (Vanilla)

Fork Fork

An Application Settings panel uses render with CustomRenderContext lifecycle
navigation places the custom panel at the top of the Settings Panel nav (grouped layout)
On load, Settings Panel API opens that panel

Use the navigation configurer on Settings Panel Options to customise grouped navigation in the Settings Panel.

The function receives AdapTable context and a clone of the default navigation, and returns { groups: [...] } where each group has:

label — section heading (use an empty string for items without a heading)
items — module or custom panel names in display order

Configuring the Settings Panel explains how to list shipped modules, custom panels, and groupings.

Caution

Custom panels will not appear unless explicitly listed in your navigation groups
If you omit navigation, AdapTable uses the default grouped module list and appends each custom panel to a Custom Panels group at the end

AdapTable Resources

Settings Panel — overview of the Settings Panel
Settings Panel Configuration — configurating Settings Panel to provide bespoke items list
Settings Panel Options — navigation, customSettingsPanels, and related options
Building Custom Components — framework component patterns shared with Toolbars and Tool Panels

PreviousSettings Panel NextConfiguring Settings Panel