Autocomplete

Basic

Editable

Disabled

Creatable

It is possible to create a new options when there is no matching with the entered value.

To activate this feature, set the canCreate props to true. The created value will then be passed to the onCreate callback.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 import React, { useState } from 'react'; import CellRender from '../../../../../../src/components/VirtualTable/cells'; import { TYPE_CELL } from '../../../../../../src/components/VirtualTable/constants/typeCell'; import Cell from '../Cell'; import Wrapper from '../Wrapper'; function CellAutocompleteCreate({ columnProps }) { const [state, setState] = useState('fr'); const [options, setOptions] = useState( [{ label: 'Français', value: 'fr' },{ label: 'English', value: 'en' }, { label: 'Deutsche', value: 'de' }]); const handleCreate = async (label) => { const value = await prompt(`Set value for "${label}"`); if (value) { setOptions((previous) => [ ...previous, { label, value } ]); setState(value); } } return ( <Wrapper> <Cell> <CellRender typeCell={TYPE_CELL.AUTOCOMPLETE} vtContext={{ state: 'PERMANENT_EDIT' }} column={{ options, onCreate: handleCreate, ...columnProps }} data={{ language: state }} dataKey="language" onChange={setState} /> </Cell> </Wrapper> ) } export default CellAutocompleteCreate;

Clearable

Give the possibility to empty the value by setting the disableClearable props at false.

Editable

Disabled

Multiple

Allow the user to select more than one value by setting the multiple props at true.

Editable

Français

Disabled

Français

Read only

Props

Name	Type	Required	Default	Description
canCreate	bool	No	false	If true, a Create "..." option appears when no option matches the current value.
disableClearable	bool	No	true	If true, the input can't be cleared.
multiple	bool	No	false	If true, the user can select multiple values.
isResetOnEscape	bool	No	false	If true, "Escape" reset value
onCreate	func	No		Callback fired when a new option is created with canCreate set to true. It receives three arguments: the new value, the current row data and a callback to update the whole row data.
optionList	func | array	No	[]	Deprecated. Use the options prop.
options	func | array	No	[]	Function called or array used to populate the suggestions list.