AdapTable React Custom Components

Summary

There are various Custom Components that you can provide to AdapTable React
These are designed to extend and complement the main UI Components that AdapTable provides
They all use ReactFrameworkComponent which simply returns a ReactElement
The Components which can be provided include:
- Custom Toolbars in the Dashboard
- Custom ToolPanels in the Adaptable Tool Panel Component
- Custom Section in the Settings Panel
- Custom Windows & Progress Indicators

AdapTable is designed to be extensible.

We expect developers to add additional, bespoke React components to meet their requirements.

In particular there are many different types of custom content which can be provided:

Custom Toolbars - to be displayed in the Dashboard
Custom Tool Panels - to add to the AdapTable Tool Panel component
Custom Settings Panel - to place in the Settings Panel
Custom Popups - movable Custom Windows and Progress Indicators

ReactFrameworkComponent

All Custom Components which target AdapTable React leverage the ReactFrameworkComponent object.

This gives you access to the Adaptable API, and returns a ReactElement:

export type ReactFrameworkComponent = 
  ({ adaptableApi }: { adaptableApi: AdaptableApi; }) => ReactElement;

Note

In all instances the ReactFrameworkComponent function will be automatically invoked by AdapTable each time its containing element (Toolbar, Tool Panel or SettingsPanel) becomes visible
Similarly, AdapTable automatically unmounts the component when the containing element is Hidden

Using State

A common requirement is for the Adaptable Custom React Components (e.g. Custom Toolbars, Custom ToolPanels) to listen to state changes on the page and update accordingly.

Starting with AdapTable 18.1.10, the custom toolbar components have access to the React context of the app, as they are rendered in the same React tree as the rest of the app.

In order to use context, render <Adaptable.Provider /> inside your app context provider and then you can use the context values in your custom toolbar components.

const App = () => {
  const [appState, setAppState] = useState({
    //...
  });

  return <AppContext.Provider value={appState}>
  
    {/* Your custom toolbars used in Adaptable will have access to the app state */}
    <Adaptable.Provider
      gridOptions={agGridOptions}
      adaptableOptions={adaptOptions}
      modules={[...agGridModules]}
    >
      <Adaptable.UI style={{flex: 'none'}} />
      <Adaptable.AgGridReact  />
    </Adaptable.Provider>

  </AppContext.Provider>

In this demo we provide a Custom Toolbar, which allows star-rating of the app
The custom component is displayed both outside of AdaTtable as well as inside the AdapTable Dashboard, via a custom toolbar
The two places where the component is displayed share the same state
Note: the custom <AppStars /> component uses React context to access the app state

Expand to see how state was shared

const AppContext = createContext({
  appStars: 3,
  setAppStars: (value: number) => {},
});
const adaptableOptions = {
  primaryKey: 'id',
  adaptableId: 'Custom Toolbar Demo',
  dashboardOptions: {
    customToolbars: [
      {
        name: 'AppStars',
        title: 'App Stars',
        frameworkComponent: () => {
          return <AppStars />;
        },
      },
    ],
  }
  initialState: {
    Dashboard: {
      Tabs: [
        {
          Name: 'Grid Configuration',
          Toolbars: ['LayoutToggle', 'Layout', 'AppStars'],
        },
      ],
    },
    // ...
  }
}
const App = () => {
  const [appStars, setAppStars] = useState(3);
  const appState = {
    appStars,
    setAppStars,
  };
  return <AppContext.Provider value={appState}>
    <AppStars />
    <Adaptable.Provider
      gridOptions={agGridOptions}
      adaptableOptions={adaptOptions}
      modules={[...agGridModules]}
      onAdaptableReady={(adaptableReadyInfo: AdaptableReadyInfo) => {
        // save a reference to adaptable api
        adaptableApiRef.current = adaptableReadyInfo.adaptableApi;
        onAdaptableReady(adaptableReadyInfo);
      }}>
      <Adaptable.UI style={{flex: 'none'}} />
      <Adaptable.AgGridReact  />
    </Adaptable.Provider>
  </AppContext.Provider>
}

AdapTable Resources

The comprehensive React Demo illustrates how to provide custom elements (including full source code)

PreviousDemo Apps NextToolbar