Can Tabulator autocomplete be set up per cell? Not column?

I need to have have two autocompletes in my Tabulator definition. A user will select an employee – first autocomplete – then when he moves to select a contract – second column the autocomplete must be linked to the value selected in the first column.

To my knowledge Tabulator does not have such feature. So I was thinking that upon clicking the “contract” cell that column definition – autocomplete definition – would be updated. I cannot make it work because the function updateDefinition is buggy. It creates new column instead of updating its definition.

Working jsFiddle

  table.on("cellEditing", function(cell){
        //e - the click event object
        //cell - cell component
       updateTitle(cell)
})
table.on("cellClick", function(e, cell){
  updateTitle(cell)
})

function updateTitle(cell){
  var field = cell.getField()
  if (field == "contract" || field =="id"){
    var column = cell.getColumn()
    var name = cell.getRow().getData().name
    console.log(field)   
    console.log(name)
    column.updateDefinition({title:"Updated Title"}) 
  }
}

I am using MaterializeCSS and its autocomplete but I do not know how to use it inside Tabulator. And if it is actually a good idea.

Could you please suggest the best solution?

Answer

In your example you still want to have a different auto complete per column, you just want to make the values of “contract” autocomplete dependent on the value of the “name” column.

You can pass a function into the editorParams option instead of an object, that function will be triggered every time the editor is opened, and should return the params object for the editor.

Using this you can make a function that will changed the values prop of the editor params based on the value of the name cell. in this example we will asume these values are stored in a simple contracts lookup list for a name of each user, but you can look this up however you like

{title:"contract", field:"contract", editor:"autocomplete", editorParams: function(cell){
     var contracts = {
        bob:["A", "B", "C"],
        jim:["D", "E", "F"],
     };

    return {
        values: contracts[cell.getData().name] //set values list based on name cell value
    }
}},