React Custom Settings Panel

Summary

Developers using AdapTable React can provide Custom Settings Panels
This is done by leveraging ReactFrameworkComponent

AdapTable React allows developer to provide custom panels in the Settings Panel in a "React" way.

Developer Guide

Providing a Custom Settings Panel in AdapTable React

export const ThemeSettingsPanel = ({
  adaptableApi,
}: {
  adaptableApi: AdaptableApi;
}) => {
  const [currentTheme, setCurrentTheme] = useState(
    adaptableApi.themeApi.getCurrentTheme()
  );

  useEffect(() => {
    adaptableApi.eventApi.on('ThemeChanged', () => {
      setCurrentTheme(adaptableApi.themeApi.getCurrentTheme());
    });
  }, []);

  return (
    <>
      <h3>Custom Theme Settings Panel</h3>
      <p>Current Theme is {currentTheme}</p>
      <div className="themeToggle">
        <span>Switch to </span>
        <SlideToggle
          onText={'Light'}
          offText={'Dark'}
          onColor={'#c0ce28'}
          offColor={'#01222c'}
          onToggleChange={(toggleValue: boolean) => {
            if (toggleValue) {
              adaptableApi.themeApi.loadDarkTheme();
            } else {
              adaptableApi.themeApi.loadLightTheme();
            }
          }}
        />
      </div>
    </>
  );
};

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 = {
  settingsPanelOptions: {
    customSettingsPanels: [
        {
          name: 'Custom Theme Settings Panel',
          frameworkComponent: ({adaptableApi}) => {
            return <ThemeSettingsPanel adaptableApi={adaptableApi} />;
          },
          icon: {
            name: 'theme',
          },
        },
    ],
  },
}

2

Reference the Settings Panel in Settings Panel Options

Reference the Component created in Step 1 to the customSettingsPanels collection in Settings Panel Options.

This has 2 properties:

frameworkComponent - the Component to be added
name - how it is referenced in AdapTable

const adaptableOptions: AdaptableOptions = {
  settingsPanelOptions: {
    navigation: {
      items: [
        'Custom Theme Settings Panel',
        '-',
        'CalculatedColumn',
        'FormatColumn',
        '-',
        'Dashboard',
        'ToolPanel',
        '-',
        'Alert',     
        'Export',
      ],
    },
  },
}

3

Specify location in Settings Panel for Custom Panel (optional)

By default, the Custom Settings Panel will be placed at the end of the list of Panels in the left hand side of the window.

If that is not desired behaviour, use the navigation property of Settings Panel Options to set the desired order of Panels:

This property allows you to set the order (and visibility) of Settings Panels together with any separators.

React Components as Custom Settings Panel

Fork Fork

In this demo we provide a custom Settings Panel with a SlideToggle button switching between the (default) Light and Dark Themes
It re-uses (and customizes) the exact same SlideToggle component which was provided in the previous custom Toolbar and Tool Panel demos

Expand to see more

export const ThemeSettingsPanel = ({
  adaptableApi,
}: {
  adaptableApi: AdaptableApi;
}) => {
  const [currentTheme, setCurrentTheme] = useState(
    adaptableApi.themeApi.getCurrentTheme()
  );

  useEffect(() => {
    adaptableApi.eventApi.on('ThemeChanged', () => {
      setCurrentTheme(adaptableApi.themeApi.getCurrentTheme());
    });
  }, []);

  return (
    <>
      <h3>Custom Theme Settings Panel</h3>
      <p>Current Theme is {currentTheme}</p>
      <div className="themeToggle">
        <span>Switch to </span>
        <SlideToggle
          onText={'Light'}
          offText={'Dark'}
          onColor={'#c0ce28'}
          offColor={'#01222c'}
          onToggleChange={(toggleValue: boolean) => {
            if (toggleValue) {
              adaptableApi.themeApi.loadDarkTheme();
            } else {
              adaptableApi.themeApi.loadLightTheme();
            }
          }}
        />
      </div>
    </>
  );
};

PreviousTool Panel NextPopups