Vue Custom Tool Panel

Summary

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

AdapTable Vue allows developer to provide custom Tool Panels in a "Vue" way.

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

Vue Components as 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 the code provided

toolPanelOptions: {
    customToolPanels: [
      {
        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}),
      },
    ]
  }

PreviousToolbar NextSettings Panel