Tabulator double autocomplete

by radek

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/5.0.10/css/tabulator.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/5.0.10/js/tabulator.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/5.0.10/css/tabulator_materialize.min.css" />

<div id="example-table"></div>

JavaScript

var zam = {
        "steve":"Steve Boberson",
        "bob":"Bob Jimmerson",
    }
    
var contract = {

        "steve":
            {
            "contract1 ID":"contract1 Name",
            "contract2 ID":"contract2 Name",
            "contract3 ID":"contract3 Name",
			    },
          "bob":
            {
            "contract4 ID":"contract4 Name",
            "contract5 ID":"contract5 Name",
            "contract6 ID":"contract6 Name",
			    },
}    

var initialData = [{id:"1"},{id:"2"}]



var table = new Tabulator("#example-table", {
    data:initialData,
    columns:[
        {title:"ID", field:"id"},
        {title:"Name", field:"name", editor:"autocomplete", editorParams:{allowEmpty:true, showListOnEmpty:true, 
        
        
        values:zam
        
        }},
        {title:"contract", field:"contract", editor:"autocomplete", editorParams:{allowEmpty:true, showListOnEmpty:true, 
        
        
        values:true
        
        }},
    ],
})
console.log("loaded")

  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"}) 
  }
}