Datatable with Editable Drop Down - differing value and label values

UI Components for React
Post Reply
Posts: 1
Joined: 29 Apr 2019, 09:41

29 Apr 2019, 09:54


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: "" the example given for the brands array is with value and label the same.

Does this functionality work with differing value and label values?


Posts: 3
Joined: 21 Mar 2019, 09:25

05 Sep 2019, 01:38

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 = {
car: null,

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

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

		//some code here
		//you display label stored in name property of your object
		<Column field="name" header="Name Car" 

Posts: 4142
Joined: 29 Jun 2013, 12:38

09 Sep 2019, 16:45

+1 ;) Thanks @IgnisMX !

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 0 guests