Vue Custom Toolbar

AdapTable Version:

Framework:

AdapTable Vue

Custom Components

Summary

Developers using AdapTable Vue can provide Custom Toolbars in the Dashboard
This is done by leveraging VueFrameworkComponent

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

Hint

This is only required if you wish to provide bespoke Vue 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 Vue

const props = defineProps({
  adaptableApi: {
    type: Object,
    required: true,
  },
});

<template>
  <label class="switch">
    <input
      class="switch-input"
      type="checkbox"
      :checked="toggleValue"
      @change="handleChange" />
    <span
      class="switch-label"
      :data-on="props.onText"
      :data-off="props.offText"
      :style="{
        background: toggleValue ? props.onColor : props.offColor,
      }"></span>
    <span class="switch-handle"></span>
  </label>
</template>

1

Create the Vue Component

This is a standard Vue Component of type VueFrameworkComponent.

It can be as complicated and configurable as required.

Developers will typically provide a reference to the Adaptable API for use when controls in the Panel are accessed.

const adaptableOptions: AdaptableOptions = {
  dashboardOptions: {
    customToolbars: [
      {
        name: 'LayoutToggle',
        title: 'Current layout',
        frameworkComponent: ({adaptableApi}) => {
          return h(SlideToggle, {
            offText: 'Standard',
            offColor: 'var(--ab-color-text-on-primary)',
            onToggleChange: (toggleValue: boolean) => {
              if (toggleValue) {
                adaptableApi.layoutApi.setLayout('Pivot Cols Layout');
              } else {
                adaptableApi.layoutApi.setLayout('Standard Layout');
              }
            },
          });
        },
      },
    ],
  },
}}

2

Create Toolbar in Dashboard Options referencing Component

Reference the Component created in Step 1 to the customToolbars collection in Dashboard Options.

This has 3 properties:

name - how it is referenced in AdapTable
title - what is shown in the Toolbar
frameworkComponent - the Component to be added

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

3

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 the code provided

dashboardOptions: {
    customToolbars: [
      {
        name: 'LayoutToggle',
        title: 'Current layout',
        frameworkComponent: ({adaptableApi}) => {
          return h(SlideToggle, {
            offText: 'Standard',
            offColor: 'var(--ab-color-text-on-primary)',
            onToggleChange: (toggleValue: boolean) => {
              if (toggleValue) {
                adaptableApi.layoutApi.setLayout('Pivot Cols Layout');
              } else {
                adaptableApi.layoutApi.setLayout('Standard Layout');
              }
            },
          });
        },
      },
      {
        name: 'StyledColumnToggle',
        title: 'GitHub Stars Gradient',
        frameworkComponent: ({adaptableApi}) => {
          return h(SlideToggle, {
            defaultValue: true,
            onColor: '#a52a2a',
            offColor: 'var(--ab-color-text-on-primary)',
            onToggleChange: toggleValue => {
              const styledColumn =
                adaptableApi.styledColumnApi.getStyledColumnForColumnId(
                  'github_stars'
                );
              if (toggleValue) {
                adaptableApi.styledColumnApi.unSuspendStyledColumn(
                  styledColumn
                );
              } else {
                adaptableApi.styledColumnApi.suspendStyledColumn(styledColumn);
              }
            },
          });
        },
      },
      {
        name: 'CustomQuickSearch',
        title: 'Quick Search',
        frameworkComponent: ({adaptableApi}) =>
          h(CustomQuickSearch, {adaptableApi}),
      },
    ],
  }

PreviousCustom Components NextTool Panel