I’m trying to use a Select data type within a table to have a dropdown to pick a US State (e.g. CA, FL). However, we also have unique IDs in our backend for these states, so I want to have the ID as the value and the state code as the label. So a user would select a state code, but I could access the ID for any queries behind the scenes. I feel like I have it configured properly, but the column is still displayed the ID in the table even though the edit dropdown displays the state code.
Hi there!
Can you kindly share the data that is been returned from your query?
{
“data”: {
“province”: [
{
“province_id”: “b108139d-fe11-4237-adcf-ae53293be511”,
“province_code”: “AK”
},
{
“province_id”: “9bfc203b-5ae8-46e7-9151-f0db844163a4”,
“province_code”: “AR”
},
{
“province_id”: “bad523fb-7e4e-427b-8229-d98396b8a793”,
“province_code”: “AZ”
},
{
“province_id”: “b36d9595-6035-4a19-8f0d-cef6920ec373”,
“province_code”: “CA”
},
{
“province_id”: “daa7b2e2-df27-422d-972b-04df3d10a302”,
“province_code”: “CO”
},
{
“province_id”: “a3a867dd-b156-4fa5-988e-d2852f3a2e1e”,
“province_code”: “CT”
},
{
“province_id”: “5e4c0bc9-1b09-4655-af84-fa9a943e549e”,
“province_code”: “DC”
},
{
“province_id”: “19a7c57b-f55e-4c40-9343-9251c3cbe38e”,
“province_code”: “DE”
},
{
“province_id”: “d5cd5eb6-ce66-42a5-969f-5143adacb582”,
“province_code”: “FL”
},
{
“province_id”: “f732ec09-84fc-460a-bab1-1bfcc3330390”,
“province_code”: “GA”
},
{
“province_id”: “916d3045-e134-4dde-8eb3-4b7cb886503b”,
“province_code”: “HI”
},
{
“province_id”: “30f7e6c2-5f58-4645-8f01-180fc21a92be”,
“province_code”: “IA”
},
{
“province_id”: “1cc38cab-02fc-40fd-8885-7b99ca007a20”,
“province_code”: “ID”
},
{
“province_id”: “f138c9ce-80be-4d27-a951-1380ef492fca”,
“province_code”: “IL”
},
{
“province_id”: “c61e55e1-7739-4c31-9c2b-51e9ff96666f”,
“province_code”: “IN”
},
{
“province_id”: “a2bf0c60-1d15-480c-ab2d-ecb8b93a0ef0”,
“province_code”: “KS”
},
{
“province_id”: “529e69a4-e0fb-4b02-9c56-8ecc58ae5cb3”,
“province_code”: “KY”
},
{
“province_id”: “d3640f66-8939-4d77-b82d-079bf54016ba”,
“province_code”: “LA”
},
{
“province_id”: “a6e5938d-0420-4d96-9b5c-50d475a135cf”,
“province_code”: “MA”
},
{
“province_id”: “e03e9aa3-2f0e-49f7-a2f4-3e2891893651”,
“province_code”: “MD”
},
{
“province_id”: “b9b1c4ff-71d5-4a3b-b15d-47704a0bdb08”,
“province_code”: “ME”
},
{
“province_id”: “78d8000c-eadb-45cc-baf9-3bf8a402248b”,
“province_code”: “MH”
},
{
“province_id”: “a3e73fbb-fbde-4768-b66e-bcf25e3e8e2a”,
“province_code”: “MI”
},
{
“province_id”: “fc05b683-6a9b-45ac-9860-86a84a9267ad”,
“province_code”: “MN”
},
{
“province_id”: “6280c2ec-fe34-4bd0-b273-e5e01df00e1c”,
“province_code”: “MO”
},
{
“province_id”: “f0dab721-8cc7-4a52-aaff-1a9b2bd90da0”,
“province_code”: “MS”
},
{
“province_id”: “22810fb4-6a72-4312-ae57-80ca79beddde”,
“province_code”: “MT”
},
{
“province_id”: “616b46a2-4fa7-4c60-83f2-8836d454f250”,
“province_code”: “NC”
},
{
“province_id”: “0f0262e3-f236-4588-b256-710afb34a891”,
“province_code”: “ND”
},
{
“province_id”: “db51c96c-6c7b-49df-9707-b7769b6c2845”,
“province_code”: “NE”
},
{
“province_id”: “6994db02-5e2d-4fe0-81c3-27e70e4896a6”,
“province_code”: “NH”
},
{
“province_id”: “f2ec3255-c409-46ff-b1ca-6f8cbac7c4be”,
“province_code”: “NJ”
},
{
“province_id”: “c5ad3814-11c0-4be6-b7cb-f35d350cb3dc”,
“province_code”: “NM”
},
{
“province_id”: “afea5f04-3ebc-4fbc-8489-0a53e924278d”,
“province_code”: “NV”
},
{
“province_id”: “e16cdad2-b469-46d7-8e76-771f9b19ba75”,
“province_code”: “NY”
},
{
“province_id”: “6dde0110-5228-4e69-92ea-200f14b44e50”,
“province_code”: “OH”
},
{
“province_id”: “855f9c08-cc88-49b6-a3ae-452f6000c998”,
“province_code”: “OK”
},
{
“province_id”: “50b6d6ad-e0d1-4597-8a95-17eb8b2e6d8e”,
“province_code”: “OR”
},
{
“province_id”: “299ea552-572f-4f02-9d61-3ed8a54a168e”,
“province_code”: “PA”
},
{
“province_id”: “c9825d09-d315-48ce-840e-da783c12d248”,
“province_code”: “RI”
},
{
“province_id”: “1e568af1-3940-4db5-8ba6-b1ccac106833”,
“province_code”: “SC”
},
{
“province_id”: “47257b98-b84c-4b5d-bf00-642d10d2478a”,
“province_code”: “SD”
},
{
“province_id”: “9efd5d8a-2cb3-4d10-895b-1b1c3109d033”,
“province_code”: “TN”
},
{
“province_id”: “64d20dcb-87f5-487d-8915-87c4289ab996”,
“province_code”: “TX”
},
{
“province_id”: “6e0acda1-1548-4488-9c56-fee8da0af3f7”,
“province_code”: “UT”
},
{
“province_id”: “73c0f07a-4ce4-49bc-8853-13babe84f8d0”,
“province_code”: “VA”
},
{
“province_id”: “f7304148-fe58-4206-ba83-e11c210f826c”,
“province_code”: “VT”
},
{
“province_id”: “b60956ce-5d3c-4093-94ef-29a3dbcaa484”,
“province_code”: “WA”
},
{
“province_id”: “36508c05-0a0d-46d5-8939-a4edb32bbcd6”,
“province_code”: “WI”
},
{
“province_id”: “5fe18171-522f-4b2a-8b8b-472447c1ff3c”,
“province_code”: “WV”
},
{
“province_id”: “82e75224-b9dc-4286-9ed9-a6d675d1e642”,
“province_code”: “WY”
},
{
“province_id”: “491192c3-41c5-4bea-b05c-5f61e556a8a2”,
“province_code”: “ON”
},
{
“province_id”: “87af9a81-2027-43b2-8f66-1c5cd7759fdc”,
“province_code”: “CA”
}
]
}
}
Thanks for sharing this! I’ll pass it along to the team.
Hey there!
I see that in your computed value, you’re using {{currentRow['province_id']}} as the value. Can you change it to {{currentRow['province_state']}} and see if this fixes your issue?
Ya I tried that. It does fix the display of the column, but it breaks editing. When I select a new state value it doesn’t actually apply, it just reverts back to the old value. I’m guessing it’s because the edit is being applied to the “province_id” column, but then the read is coming from the “province_state” column.
Yes. That would be my suspicion as well.
Hi Laguna, any updates here?
Have you tried removing the computed value or changing it to use the province code instead?
Removing the computed value doesn’t seem to do anything (which is strange in itself - I was expecting it to no longer show anything). Switching to use province code was suggested above and I replied there. It fixes display, but breaks editing.
I see. Then I think it would be best to use something like {{ProvinceCodes.data.data.province.find(row => row.province_id === currentRow.province_id).province_code}}
That doesn’t work either … it’s the same thing as before. You’re just changing the value of the column to be the state code instead of the province_id. The whole point of having different label vs. value settings in a Select is so you can display the “label” to users but interact with the “value” behind the scenes. This works just fine for regular Select components, but seems to be broken for Select within a table.
Your suggestion did give me an idea for a workaround though. Right now I’ll just use a Select column based on the human readable state codes and then do a lookup from state_code → province_id as part of the API call that sends this data to the backend.
That sounds like a plan! It also sounds like a bug. We’ll open a bug report and share it here. Thanks for bringing this to our attention!