How to use <SelectableValue><Type> from ''@grafana/data"

Grafana
1

Im trying to create a dropdown menu in the datasource plugin which should have values like ‘min,max,avg’.I tried using the <Select> tag but i’m finding difficulty in understanding how to use the
<SelectableValue><string>,because the value property from the <Select> expects a <SelectableValue><string> and not just string.
I want to know how to work with <SelectableValue><T>.

2

Hi abhinandan13. You need to pass an object to the select that implements the SelectableValue interface.

Let’s say your Select represents values which are strings. Then the SelectableValue’s value property needst to be a string.

For example, given an options set like this:

const options = [
    { label: 'First value to select', value: 'value1 },
    { label: 'Second value to select', value: 'value2'},
]

Let’s imagiine that User has selected the first value. In order for the Select to pick up this you need to pas an entire SelectableValue back to the select:

const value = { label: 'First value to select', value: 'value1 }

You can also refer for this doc for some more information https://developers.grafana.com/ui/canary/index.html?path=/docs/forms-select--basic