React Custom Tool Panel

Summary

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

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

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

Developer Guide

Providing a Custom Tool Panel 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 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 = {
  toolPanelOptions: {
    customToolPanels: [
    {
      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

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:

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

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

3

Set Tool Panel as Expanded (optional)

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

React 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 more

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

PreviousToolbar NextSettings Panel