Tool Panel Buttons

Summary

The area at the top of the AdapTable ToolPanel Component can display a group of Buttons
Similar to ToolPanels, these can be of 2 types:
- Module Buttons - open the relevant Module Page in the Settings Panel
- Custom Buttons - provided by users at design-time and containing bespoke functionality

ToolPanel Buttons are buttons which are placed at the top of the AdapTable ToolPanel Component.

They can be either:

Module Buttons - shipped with AdapTable and open the relevant Module Page in the Settings Panel
Custom Buttons - supplied by users at design-time and can display any content which is required

Note

By default, AdapTable displays no ToolPanel Buttons at start-up, but this can be changed at design-time (through Initial State) or at runtime (in the ToolPanel section of the Settings Panel).

ToolPanel Module Buttons

Fork Fork

This example contains 3 Module Buttons: Layout, CellSummary, Dashboard

Configuring ToolPanel Buttons

ToolPanel Buttons are defined at design-time in 2 different ways:

Module Buttons are supplied in Initial Adaptable State
Custom Buttons are provided through ToolPanel Options

customButtons

AdaptableButton[<ToolPanelButtonContext>]

Custom Buttons to display in the Adaptable Tool Panel Component

AdaptableButton[<ToolPanelButtonContext>]

These are custom buttons to display in the Adaptable Tool Panel Component.

Each button is of type Adaptable Button which is used in multiple places in AdapTable.

As with all Adaptable Buttons, the button can be styled to user requirements with many properties and functions available to configure visibility, styling, onClick and other features.

Find Out More

See the Adaptable Buttons documentation for full details on configuring buttons

All these functions receive as context a ToolPanelButtonContext object which contains one toolPanelState property:

Property	Description
toolPanelState	Current ToolPanel State
adaptableContext	Custom application Context provided in `AdaptableOptions.adaptableContext`

const adaptableOptions: AdaptableOptions = {
  toolPanelOptions: {
    customButtons: [
      {
        label: 'Query Editor',
        icon: {
          src: 'https://img.icons8.com/zoom-in.png',
        },
        onClick: (
          button: AdaptableButton<ToolPanelButtonContext>,
          context: ToolPanelButtonContext
        ) => {
          // Perform an action here
        },
      },
    ],
  },
};

Developer Guide

Providing ToolPanel Buttons

// Show the Custom Sort and Export Module Buttons
const initialState: InitialState = {
  ToolPanel: {
    ModuleButtons: ['CustomSort', 'Export'],
  },
};

Display Module Buttons - through Initial Adaptable State

Use the ModuleButtons property of Tool Panel Initial State to specify which Modules Buttons should be displayed.

const adaptableOptions: AdaptableOptions = {
  toolPanelOptions: {
    customButtons: [
      {
        label: 'Query Editor',
        icon: {
          src: 'https://img.icons8.com/zoom-in.png',
        },
        onClick: (
          button: AdaptableButton<ToolPanelButtonContext>,
          context: ToolPanelButtonContext
        ) => {
          // Perform an action here
        },
      },
    ],
  },
};

Display Custom Buttons - through ToolPanel Options

Additionally supply your own bespoke Buttons via the customButtons property of Tool Panel Options.

Each button is of type Adaptable Button which is used in multiple places in AdapTable.

You can set how and whether the Button appears and what happens when it is clicked.

Deep Dive

Configuring Custom Buttons in the AdapTable ToolPanel Component

As with all Adaptable Buttons, the button can be styled to user requirements with many properties and functions available to configure visibility, styling, onClick and other features.

Find Out More

See the Adaptable Buttons documentation for full details on configuring buttons

All these functions receive as context a ToolPanelButtonContext object which just contains one property:

Property	Description
toolPanelState	Current ToolPanel State
adaptableContext	Custom application Context provided in `AdaptableOptions.adaptableContext`

Property	Description
customToolPanel	The Custom ToolPanel which contains the button
adaptableContext	Custom application Context provided in `AdaptableOptions.adaptableContext`

ToolPanel Custom Buttons

Fork Fork

This Demo shows 3 Custom Buttons in the Tool Panel:
- one which links to Super Mario website
- one which opens the Layout Editor
- one which fires an Alert

import {
  AdaptableButton,
  AdaptableOptions,
  ToolPanelButtonContext,
} from '@adaptabletools/adaptable';
import {WebFramework} from './rowData';

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Custom ToolPanel Buttons',
  toolPanelOptions: {
    customButtons: [
      {
        icon: {
          style: {height: 30, width: 30},
          src: 'https://img.icons8.com/glyph-neue/64/000000/super-mario.png',
        },
        onClick: (
          button: AdaptableButton<ToolPanelButtonContext>,
          context: ToolPanelButtonContext
        ) => {
          Object.assign(document.createElement('a'), {
            target: '_blank',
            href: 'https://supermarioemulator.com/',
          }).click();
        },
      },
      {
        label: 'Layout Editor',
        tooltip: (
          button: AdaptableButton<ToolPanelButtonContext>,
          context: ToolPanelButtonContext
        ) => {
          return 'Edit Current Layout';
        },
        icon: {
          // style: { height: 30, width: 30 },
          src: 'https://img.icons8.com/glyph-neue/64/000000/zoom-in.png',
        },
        buttonStyle: {
          variant: 'outlined',
          // tone: 'accent',
        },
        onClick: (
          button: AdaptableButton<ToolPanelButtonContext>,
          context: ToolPanelButtonContext
        ) => {
          context.adaptableApi.layoutApi.showLayoutEditor();
        },
      },
      {
        label: 'Alert',
        tooltip: 'Show Alert',
        buttonStyle: {
          variant: 'raised',
          tone: 'accent',
        },
        onClick: (
          button: AdaptableButton<ToolPanelButtonContext>,
          context: ToolPanelButtonContext
        ) => {
          context.adaptableApi.alertApi.showAlertInfo(
            'CustomToolPanelButton',
            'Styled button & icon'
          );
        },
      },
    ],
  },
  initialState: {
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          TableColumns: [
            'name',
            'language',
            'github_stars',
            'license',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'github_watchers',
            'open_issues_count',
            'closed_issues_count',
            'open_pr_count',
            'closed_pr_count',
            'has_projects',
            'has_pages',
            'week_issue_change',
          ],
          Name: 'Standard Layout',
        },
      ],
    },
  },
};

AdapTable Resources

Adaptable Buttons

PreviousCustom Tool Panels NextConfiguring Tool Panel

Framework: