Angular Custom Tool Panel

Summary

Developers using AdapTable Angular can provide Custom ToolPanels in the Adaptable Tool Panel Component
This is done by leveraging AngularFrameworkComponent

AdapTable Angular allows developer to provide custom Tool Panels in an "Angular" way.

These Tool Panels are then added by AdapTable into the AdapTable Tool Panel component .

Developer Guide

Providing a Custom Tool Panel 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 = {
  toolPanelOptions: {
    customToolPanels: [
      {
        name: 'LayoutToggle',
        title: 'Current layout',
        frameworkComponent: {
          type: SlideToggleComponent,
          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 the Tool Panel in Tool Panel Options

Reference the Component created in Step 1 to the customToolPanels collection in Tool Panel Options.

This has 3 properties:

name - how it is referenced in AdapTable
title - what is shown as the Tool Panel's title
frameworkComponent - the Component to be added

initialState: {
  ToolPanel: {
    ToolPanels: [
      {
        Name: 'LayoutToggle',
        VisibilityMode: 'expanded',
      }
      // [...]
    ]
  }
}

Set Tool Panel as Expanded (optional)

Optionally we can configure the Tool Panel to display as expanded by default, via Tool Panel State

Angular Components: Custom Tool Panels

Fork Fork

In this demo we provide 3 Custom Tool Panels:
- 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

toolPanelOptions: {
    customToolPanels: [
      {
        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 Tool Panel Demo',
  toolPanelOptions: {
    customToolPanels: [
      {
        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: {
    ToolPanel: {
      ToolPanels: [
        {
          Name: 'LayoutToggle',
          VisibilityMode: 'expanded',
        },
        {
          Name: 'CustomQuickSearch',
          VisibilityMode: 'expanded',
        },
        {
          Name: 'StyledColumnToggle',
          VisibilityMode: 'expanded',
        },
        {
          Name: 'Alert',
        },
        {
          Name: 'BulkUpdate',
        },
        {
          Name: 'CellSummary',
        },
        {
          Name: 'Dashboard',
        },
      ],
    },
    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',
      },
    },
  },
};

PreviousToolbar NextSettings Panel

Framework: