Configuring the Status Bar

Summary

Configuration for setting up the AdapTable Status Bar

Status Bars are configured at by developers at design time.

Note

This requires configuring both AG Grid GridOptions and AdapTable's Adaptable Options

Developers are able to configure 3 main elements of the Status Bar:

how many Status Bars (if any) are displayed
where they are displayed
the initial contents of each Status Bar

Defining the Status Bar

2 steps are required when defining Adaptable Status Bars:

Register the Status Bars in the statusBar property of AG Grid GridOptions
Define the Status Bar Panels in Status Bar Initial State.

Developer Guide

Guide to Defining the AdapTable Status Bar

There are 2 steps required to include AdapTable Status Panels in the AG Grid Status Bar:

export const gridOptions: GridOptions = {
  statusBar: {
    statusPanels: [
      {statusPanel: 'agTotalRowCountComponent', align: 'left'},
      {statusPanel: 'agFilteredRowCountComponent'},
      {
        key: 'Left Panel',
        statusPanel: 'AdaptableStatusPanel',
        align: 'left',
      },
      {
        key: 'Center Panel',
        statusPanel: 'AdaptableStatusPanel',
        align: 'center',
      },
      {
        key: 'Right Panel',
        statusPanel: 'AdaptableStatusPanel',
        align: 'right',
      },
    ],
  },

Reference the Status Bars in AG Grid

In the statusBar property of Grid Options, populate the statusPanel property with a collection of StatusPanels.

Add as many AdaptableStatusPanels as required.

There are 3 properties to set:

statusPanel - should always have the value: 'AdaptableStatusPanel'
align - can be: 'left', 'right' or 'center'
key - the unique identifier for the Status Panel

Hint

You can still add AG Grid Status Panels if required

const initialState: InitialState = {
   StatusBar: {
      StatusBars: [
        {
          Key: 'Left Panel',
          StatusBarPanels: [
            'Export',
            'DataSet',
            'CellSummary',
            'Alert',
            'Layout',
          ],
        },
        {
          Key: 'Center Panel',
          StatusBarPanels: ['ColumnFilter', 'GridFilter'],
        },
        {
          Key: 'Right Panel',
          StatusBarPanels: ['QuickSearch', 'Theme',],
        },
      ],
    },
};

Provide the Status Bars in Initial Adaptable State

Define the StatusPanels in the StatusBar section.

You can provide as many Status Bars as required.

Each Status Bar has 2 properties:

Key - Use the same property for Key as used for key in Grid Options

Caution

This value is (lower case) key in AG Grid Grid Options
But (upper case) Key in Adaptable State

StatusBarPanels - a list of which Panels you want

Note

Each Module has either a dedicated Panel (e.g. Theme) or a button which opens its Settings Panel page

Status Bar replacing Dashboard

Fork Fork

This demo shows how you can use the Adaptable Status Bar to remove the Dashboard - useful when creen real estate is tight:
- Quick Search and Layout have been put in in the Status Bar (together with AG Grid Row Count)
- The Dashboard has been hidden completely

PreviousStatus Bar NextTechnical Reference