Datatable with Editable Drop Down - differing value and label values

[gmatthews]

Hi

We are using Primereact 3.1.1 and I have a Drop Down as part of an editable Datatable.

I can get the control to display but I have differing value and label descriptions, i.e. the value of the drop down is an ID and the label is the actual text description - my issue is that the ID is being displayed in the grid cell and not the description.

In the documentation here: "https://www.primefaces.org/primereact/#/datatable/edit" the example given for the brands array is with value and label the same.

Does this functionality work with differing value and label values?

Thanks
Gary

[IgnisMX]

I had the same problem, that is because Column component render value to display, you use the same field in column and in dropdown. Dropdown only return a value if you don't use optionLabel property. You should use optionLabel and dropdown will return a object like this { label : "BMW", value: 1}, you should save a label and display it in column.
Something like this.

Code: Select all

this.state = {
cars:{
name:"",
car: null,
}
}

onCarValueChange(value){
	//value is something like this { label : "BMW", value: 1},
	//this is a copy of cars
	const cars = {...this.state.cars };
	//this is the value that you will display
	cars.name = value.value;
	//cars.car will store entire object and you should it to access to id or value
	cars.car = value;
	this.setState(cars);
}

editorDropdown(){
//this.state.cars.car will store object
return <Dropdown value= {this.state.cars.car} 
            options={myOptions} optionLabel="label" placeholder="Select a Car"
                onChange={(e) => this.onCarValueChange(e.target.value)}>
            </Dropdown>
}

render(){
	return(
		//some code here
		//you display label stored in name property of your object
		<Column field="name" header="Name Car" 
                        editor={this.editorDropdown}}
                        />
	);
}

[mert.sincan]

+1 Thanks @IgnisMX !