Angular Custom Toolbar

AdapTable Version:

Framework:

AdapTable Angular

Custom Components

Summary

Developers using AdapTable Angular can provide Custom Toolbars in the Dashboard
This is done by leveraging AngularFrameworkComponent

This page explains how to create Custom Toolbars with bespoke content while using AdapTable Angular.

Hint

This is only required if you wish to provide bespoke Angular component(s) in the Custom Toolbar
If you want to display AdapTable Buttons in the Custom Toolbar, the AdapTable TypeScript workflow will suffice

Developer Guide

Providing a Custom Toolbar in AdapTable Angular

@Component({
  selector: 'slide-toggle',
  template: `
    <label class="switch">
      <input
        class="switch-input"
        type="checkbox"
        [checked]="active"
        (change)="onToggle()" />
      <span
        class="switch-label"
        [attr.data-on]="onText"
        [attr.data-off]="offText"
        [style.background]="active ? onColor : offColor"></span>
      <span class="switch-handle"></span>
    </label>
  `,
  styles: [
    `
      // [...]
    `,
  ],
})
export class SlideToggleComponent {
  active = false;

  onText = 'ON';
  onColor = 'var(--ab-color-success)';

  offText = 'OFF';
  offColor = 'var(--ab-color-info)';

  constructor(@Inject(ADAPTABLE_API) private adaptableApi: AdaptableApi) {}

  onToggle() {
    this.active = !this.active;
    this.onChange(this.active);
  }

  onChange(toggleValue: boolean) {
    // overwritten in onSetup()
  }
}

Define the Template Component

In this example we are providing a SlideToggle button, which is a standard Angular Component.

The implementation that we provide is entirely generic and reusable, as the I/O params are set via the onSetup() function in the frameworkComponent.

const adaptableOptions: AdaptableOptions = {
  dashboardOptions: {
    customToolbars: [
      {
        name: 'LayoutToggle',
        title: 'Current layout',
        frameworkComponent: {
          type: SlideToggleComponent,
          // configure custom content & behaviour
          onSetup: ({adaptableApi}): Partial<SlideToggleComponent> => {
            return {
              onText: 'Pivot',
              offText: 'Standard',
              onChange: toggleValue => {
                if (toggleValue) {
                  adaptableApi.layoutApi.setLayout('Pivot Cols Layout');
                } else {
                  adaptableApi.layoutApi.setLayout('Standard Layout');
                }
              },
            };
          },
        },
      },
      // [...]
   ],
  }
}

Reference and Create Custom Toolbar in Dashboard Options

Import the Component and create a Custom Toolbar definition.

In the definition do 2 things:

reference the Component in the type property (of frameworkComponent)
provide custom implementation of Component via the onSetup() function

initialState: {
  Dashboard: {
    Tabs: [ 
      { 
        Name: 'Demo', Toolbars: ['LayoutToggle'] 
      } 
    ]
  }
}

Reference Toolbar in Initial Adaptable State

Reference the Custom Toolbar in AdapTable's Dashboard.

Use the value supplied as the name property in Dashboard Options:

You can set the Custom Toolbar as:

a Dashboard Tab; or
a Pinned Toolbar

In this demo we provide 3 Custom Toolbars:
- a SlideToggle button switching between standard and pivot layout
- a CustomQuickSearch toolbar which is disabled when in pivot mode
- a SlideToggle button enabling/disabling the gradient style for the GitHub Stars column
The Layout toggle and Gradient Style toggle re-use the same toggle component but with different configurations.

Expand to see more

customToolbars: [
      {
        name: 'LayoutToggle',
        title: 'Current layout',
        frameworkComponent: {
          type: SlideToggleComponent,
          // configure custom content & behaviour
          onSetup: ({adaptableApi}): Partial<SlideToggleComponent> => {
            return {
              onText: 'Pivot',
              offText: 'Standard',
              onChange: toggleValue => {
                if (toggleValue) {
                  adaptableApi.layoutApi.setLayout('Pivot Cols Layout');
                } else {
                  adaptableApi.layoutApi.setLayout('Standard Layout');
                }
              },
            };
          },
        },
      },
      {
        name: 'CustomQuickSearch',
        title: 'Quick Search',
        frameworkComponent: {
          type: QuickSearchComponent,
        },
      },
      {
        name: 'StyledColumnToggle',
        title: 'GitHub Stars Gradient',
        frameworkComponent: {
          type: SlideToggleComponent,
          // configure custom content & behaviour
          onSetup: ({adaptableApi}): Partial<SlideToggleComponent> => {
            return {
              active: true,
              onColor: '#a52a2a',
              offColor: 'var(--ab-color-text-on-primary)',
              onChange: toggleValue => {
                const styledColumn =
                  adaptableApi.styledColumnApi.getStyledColumnForColumnId(
                    'github_stars'
                  );
                if (toggleValue) {
                  adaptableApi.styledColumnApi.unSuspendStyledColumn(styledColumn);
                } else {
                  adaptableApi.styledColumnApi.suspendStyledColumn(styledColumn);
                }
              },
            };
          },
        },
      },
    ]

import {AdaptableOptions} from '@adaptabletools/adaptable-angular-aggrid';
import {SlideToggleComponent} from './slide-toggle.component';
import {QuickSearchComponent} from './quick-search.component';
import {WebFramework} from './rowData';

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Custom Toolbar Demo',
  dashboardOptions: {
    showQuickSearchInHeader: false,
    customToolbars: [
      {
        name: 'LayoutToggle',
        title: 'Current layout',
        frameworkComponent: {
          type: SlideToggleComponent,
          // configure custom content & behaviour
          onSetup: ({adaptableApi}): Partial<SlideToggleComponent> => {
            return {
              onText: 'Pivot',
              offText: 'Standard',
              onChange: toggleValue => {
                if (toggleValue) {
                  adaptableApi.layoutApi.setLayout('Pivot Cols Layout');
                } else {
                  adaptableApi.layoutApi.setLayout('Standard Layout');
                }
              },
            };
          },
        },
      },
      {
        name: 'CustomQuickSearch',
        title: 'Quick Search',
        frameworkComponent: {
          type: QuickSearchComponent,
        },
      },
      {
        name: 'StyledColumnToggle',
        title: 'GitHub Stars Gradient',
        frameworkComponent: {
          type: SlideToggleComponent,
          // configure custom content & behaviour
          onSetup: ({adaptableApi}): Partial<SlideToggleComponent> => {
            return {
              active: true,
              onColor: '#a52a2a',
              offColor: 'var(--ab-color-text-on-primary)',
              onChange: toggleValue => {
                const styledColumn =
                  adaptableApi.styledColumnApi.getStyledColumnForColumnId(
                    'github_stars'
                  );
                if (toggleValue) {
                  adaptableApi.styledColumnApi.unSuspendStyledColumn(
                    styledColumn
                  );
                } else {
                  adaptableApi.styledColumnApi.suspendStyledColumn(
                    styledColumn
                  );
                }
              },
            };
          },
        },
      },
    ],
  },
  initialState: {
    Dashboard: {
      Tabs: [
        {
          Name: 'Grid Configuration',
          Toolbars: [
            'LayoutToggle',
            'Layout',
            'CustomQuickSearch',
            'StyledColumnToggle',
          ],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          Name: 'Standard Layout',
          TableColumns: [
            'name',
            'language',
            'github_stars',
            'license',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'github_watchers',
            'description',
            'open_issues_count',
            'closed_issues_count',
            'open_pr_count',
            'closed_pr_count',
            'has_projects',
            'has_pages',
            'week_issue_change',
          ],
          AutoSizeColumns: true,
        },
        {
          Name: 'Pivot Cols Layout',
          PivotColumns: ['license'],
          PivotGroupedColumns: ['language'],
          PivotAggregationColumns: [
            {ColumnId: 'github_watchers', AggFunc: 'count'},
            {ColumnId: 'github_stars', AggFunc: 'sum'},
          ],
        },
      ],
    },
    StyledColumn: {
      StyledColumns: [
        {
          ColumnId: 'github_stars',
          GradientStyle: {
            RangeValueType: 'Number',
            CellRanges: [{Min: 'Col-Min', Max: 'Col-Max', Color: '#a52a2a'}],
          },
        },
      ],
    },
    QuickSearch: {
      CellMatchStyle: {
        BackColor: '#a1c0d4',
      },
    },
  },
};

PreviousCustom Components NextTool Panel

Framework: