Configuring the Tool Panel

Setting up Tool Panel Component

There are 3 options available when configuring the sideBar property in AG Grid GridOptions:

• Setting the SideBar to true
• Providing a List of ToolPanels
• Customising the SideBar

SideBar is set to true

This is the most straightforward and uses the default AG Grid and AdapTable settings:

gridOptions.sideBar = true

When directly referenced is set to true, 2 things will happen:

• AG Grid will provide the Filters and Columns ToolPanels
• AdapTable will append the AdapTable Tool Panel

{
    id: 'adaptable',
    toolPanel: 'AdaptableToolPanel',
    labelDefault: 'AdapTable',
    labelKey: 'adaptable',
    iconKey: 'menu', // use an AG Grid icon - full list at https://www.ag-grid.com/javascript-data-grid/custom-icons/
    width: 200px, // customisable with "--ab-cmp-toolpanel__width" CSS property 
    minWidth: 200px // customisable with "--ab-cmp-toolpanel__width" CSS property 
}

List of ToolPanels

A slightly more bespoke alternative is to list which ToolPanels are required:

gridOptions.sideBar =['adaptable', 'filters']

When the user provides a list of ToolPanels, the following happens:

• AG Grid will create any AG Grid ToolPanels named in the list
• AdapTable will create the AdapTable Tool Panel (assuming that 'adaptable' is in the list)
• The ToolPanels will display in the order provided

Customised Sidebar

For more advanced scenarios a fully, customised Sidebar can be provided in AG Grid GridOptions.

gridOptions.sideBar ={
  toolPanels: [
    'filters',
    {
      id: 'adaptable', // never change this
      toolPanel: 'AdaptableToolPanel', // never change this
      labelDefault: 'AdapTable',
      iconKey: 'menu',
      width: 200,
      minWidth: 200,
      maxWidth: 300,
    }
  ],
  defaultToolPanel = 'adaptable',
  position: 'left';
}

In this scenario:

• the Tool Panels will display in the order provided
• The Adapable Tool Panel Component will be configured bsed on the properties provided

Hiding AdapTable Tool Panel

It is possible to hide the AdapTable Tool Panel but still display one or more of the AG Grid Tool Panels (and / or to provide a custom one).

There are 2 ways to hide the AdapTable Tool Panel:

• setting the Module Entitlement for Tool Panel to Hidden
• leave out adaptable from the list of Tool Panels - e.g. setting: gridOptions.sideBar =['columns', 'filters']

Hiding ToolPanels Dropdown

Option not to display the Tool Panels available at the top of the AdapTable Tool Panel Component.

// Do not show the available Tool Panels dropdown
const adaptableOptions: AdaptableOptions = {
  toolPanelOptions: {
    showToolPanelsDropdown: false,
  },
};