Category: UI Widgets
Updated

This solution is summarized from an archived support forum post. This information may have changed. If you notice an error, please let us know in Discord.

Table widget with select column

Issue

I have an issue with my table data displaying the select column value when edited. I want to display the label instead of the value, but I still need the value for querying. Can someone provide an example of how to store printer names and IDs in a JavaScript object to easily display the printer name in the column? I'm new to Appsmith and development.

Resolution

The solution to the issue of the select column displaying the ID instead of the label is to create a lookup table in JavaScript that maps the printer names to their IDs. This can be done by storing the data in an object with ID as the key and printer name as the value. For example:

let myPrinterLookup = {
1: "Printer A",
2: "Printer B",
3: "Printer C"
}

Then, in the select query properties, change the value to use the lookup table to display the printer name instead of the ID. For example:

{{get_printerlist.data.map(a=>({label: myPrinterLookup[a.id], value: a.id}))}}

This will display the printer name in the table instead of the ID.