React Wrapper Custom Toolbars

Adaptable allows Custom Toolbars to be included in the Dashboard.

They are defined in the customToolbars property in the Dashboard Options section of Adaptable Options.

A Custom Toolbar can be given 2 sets of content:

ReactFrameworkComponent

The ReactFrameworkComponent is a function (called with an object that gives you access to the Adaptable Api) that returns a ReactElement:

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

This function will be automatically created by AdapTable each time the Toolbar becomes visible.

important

Unlike in previous versions of the React Wrapper, in AdapTable Rx (v9) there is no need to listen to any Dashboard Events to ensure the component is rendered

note

Similarly, when the containing tab is 'Hidden', AdapTable will automatically unmount the component

// Define the Component
const QuickSearchCustomComponent = (props: any) => {
const [searchText, setSearchText] = useState("");
useEffect(() => {
console.log('mount')
return () => {
// since this is just a React component,
// you can use useEffect to perform different actions on mount/unmount
console.log('unmount')
}
}, [])
return (
<div>
CUSTOM QuickSearch
<input
value={searchText}
style={{ padding: "6px 10px", marginLeft: 5 }}
onChange={(event) => {
const value = event.target.value;
setSearchText(value);
props.onSearchTextChange(value);
}}
/>
</div>
);
};
// Reference it in frameworkComponent in Custom Toolbar
const adaptableOptions: AdaptableOptions = {
dashboardOptions: {
customToolbars: [
{
name: "CustomQuickSearch",
title: "Custom Quick Search",
frameworkComponent: ({ adaptableApi }) => {
// return any valid ReactElement
return (
<QuickSearchCustomComponent
onSearchTextChange={(searchText: string) => {
adaptableApi.quickSearchApi.runQuickSearch(searchText);
}}
/>
);
},
},
],
}
}
// Reference the Custom Toolbar in Dashboard Config
const predefinedConfig: PredefinedConfig: {
Dashboard: {
Tabs: [
{
Name: 'Demo',
Toolbars: ['Layout', 'CustomQuickSearch'],
}
]
},
}

Further Information