Using Adaptable Components

How to import the Adaptable components

import { components } from '@adaptabletools/adaptable-infinite-react';

const { Select, Button } = components;

Here's a very simple example of how you can use the Select component to create a dropdown.

Using the Select component

In this example, we show how you can use the Select component to create a dropdown that allows you to switch between different views.

This also how to leverage useAdaptableState and useAdaptableApi to make your view switcher read data and be in sync with the Adaptable state.

The following components are available:

Using the Select component

The Select component needs the following properties:

options: {label, value}[] - a list of options to display in the dropdown. Each option needs a label and a value prop. Optionally you can also provide a disabled prop.
value - the currently selected value in the dropdown
onValueChange(value) - the callback prop that will be called when the user selects a new value in the dropdown.

For a full list of props, please refer to the Select Props