React Custom Toolbar

AdapTable Version:

Framework:

AdapTable React

Custom Components

Summary

Developers using AdapTable React can provide Custom Toolbars in the Dashboard
This is done by leveraging ReactFrameworkComponent

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

Caution

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

export const SlideToggle = (props: SlideToggleProps) => {
  const {
    defaultValue = false,
    onText = 'ON',
    onColor = 'var(--ab-color-success)',
    offText = 'OFF',
    offColor = 'var(--ab-color-info)',
    onToggleChange,
  } = props;

  const [toggleValue, setToggleValue] = useState(defaultValue);

  return (
    <>
      <label className="switch">
        <input
                className="switch-input"
                type="checkbox"
                checked={toggleValue}
                onChange={() => {
                  const newValue = !toggleValue;
                  setToggleValue(newValue);
                  onToggleChange(newValue);
                }}
        />
        <span
                className="switch-label"
                data-on={onText}
                data-off={offText}
                style={{background: toggleValue ? onColor : offColor}}></span>
        <span className="switch-handle"></span>
      </label>
    </>     
  );
};

1

Create the React Component

This is a standard React Component of type ReactFrameworkComponent.

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 (
            <SlideToggle 
              onText={'Pivot'}
              offText={'Standard'}
              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:

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

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 more

dashboardOptions: {
      customToolbars: [
        {
          name: 'LayoutToggle',
          title: 'Current layout',
          frameworkComponent: ({adaptableApi}) => {
            return (
              <SlideToggle
                onText={'Pivot'}
                offText={'Standard'}
                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 (
              <SlideToggle
                defaultValue={true}
                onColor={'#a52a2a'}
                offColor={'var(--ab-color-text-on-primary)'}
                onToggleChange={(toggleValue: boolean) => {
                  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}) => {
            return <CustomQuickSearch adaptableApi={adaptableApi} />;
          },
        },
      ]
    }

PreviousCustom Components NextTool Panel