tabulator autocomplete that updates another cell - tabulator

Question

I'm trying to use tabulator as follows:
Pull a set of key->values from a database that contains items similar to:
'JohnSmith' -> 'Name is john smith'
'AndrewSmith' -. Name is 'andrew smith'
column1
contains an 'autocompete' list that pulls from the keys above. Entering say 'smith' would allow me to select one of the two keys
column2
on selecting the correct option, the cell would be populated with the correct 'Name is...' value
I've tried a number of options, including:
using a 'cellEdited' callback on the autocomplete cell
adding a mutator that updates the second cell
adding an onrendered function to a formatter
I suspect I'm just missing something via javascript, but hoping someone can point me in the right direction.

Answer 1

You haven't specified which Tabulator version you are using but starting with version 5.0 cellEdited callback has changed to an event. Therefore, you can now use:
table.on("cellEdited", function() {
//do something
})
Here is a working example:
var people = [{
key: 'John Smith',
value: 'Name is john smith'
},
{
key: 'Andrew Smith',
value: 'Name is andrew smith'
}
]
var tableData = [{
name: "Oli",
nameIs: "Name is Oli Bob"
}]
var table = new Tabulator("#example-table", {
height: '100%',
layout: "fitColumns",
data: tableData,
columns: [{
title: "Name",
field: "name",
editor: 'autocomplete',
editorParams: {
showListOnEmpty: true,
freetext: true,
allowEmpty: true,
searchFunc: (term, values) => {
const matches = []
people.forEach(person => {
const name = person.key
const nameIs = person.value
if (name.toLowerCase().startsWith(term.toLowerCase())) {
matches.push(name)
}
})
return matches
},
values: false
}
},
{
title: "Name Is",
field: "nameIs"
}
]
})
table.on("cellEdited", (cell) => {
const name = cell.getValue()
const row = cell.getRow()
const nameIs = people.filter(p => p.key == name)[0].value
row.update({
"nameIs": nameIs
})
})
<link href="https://unpkg.com/tabulator-tables/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables/dist/js/tabulator.min.js"></script>
<div id="example-table"></div>