Whats the best way to handle related data ids using Tabulator

Question

Using Tabulator, if you have a 'select' editor and want it to link to values 'Male' and 'Female' but underneath male and female are values from another physical database table with id values of 1 and 2 (which are different than the 'row' id), whats the best way to do something like this?

The 'select' editor has ways to specify the display of items in the drop down and a literal display of the selected value, but no place for a hidden (not displayed) underlying ID of the selected value to pass when saving the data.

We could wrap the select data values in divs with a data attribute for the selects values ids and then pass that when updating, but are not sure this is the best option considering how Tabulator works. We could also just pass the raw selected value and then look it up on the server to get the associated ID, but that seems like a lot of overhead and tightly couples the server to the client, which wouldn't work for something like a 3rd party API where we have no server control.

Any thoughts on how best to handle something like this are appreciated!

Answer 1

Finally figured this out. You need to use the lookup formatter to display the text value using the same params as the select editor. This is not obvious since none of the select editor examples in the docs show use of it. Anyway, here is a simple example showing it in both directions. Of course you would want to abstract the data out instead of literally duplicating it, but here to help show the literal use, it is duplicated:

{
    title:"Example", 
    field:"example",
    editor: "select",
    editorParams:{
        "1": "Cute",
        "2": "Fine",
        "3": "Scary",
    },
    formatter:"lookup", // display option, but store value
    formatterParams:{
        "1": "Cute",
        "2": "Fine",
        "3": "Scary",
    }
}