Tabulator Select

by Mahesh1312

HTML

<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>

<!-- <link href="https://unpkg.com/tabulator-tables@5.1.8/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@5.1.8/dist/js/tabulator.min.js"></script> -->

<div id="vehicles"></div>

JavaScript

var deptList = [
  {
  option: 1,
  value: "Sales"
  },
  {
  option: 2,
  value: "Service"
  },
  {
  option: 3,
  value: "Bodyshop"
  },
  {
  option: 4,
  value: "Carwash"
  }
]

var serviceList = [
  {
  dept: 1,
  option: 2,
  value: "Spot delivery (Used)",
  price: 35
  },
  {
  dept: 1,
  option: 3,
  value: "New delivery",
  price: 45
  },
  {
  dept: 1,
  option: 4,
  value: "Used delivery + Paint Protection",
  price: 80
  },
  {
  dept: 1,
  option: 5,
  value: "Showroom",
  price: 45
  },
  {
  dept: 1,
  option: 6,
  value: "Full recon (Sales)",
  price: 115
  },
]

let vehiclesList = [
  {
  dept: "Sales",
  service: "New delivery",
  },
  {
  dept: "Sales",
  service: "New delivery",
  },
  {
  dept: "Sales",
  service: "Headlight restoration (both)",
  },
  {
  dept: "Sales",
  service: "New delivery",
  },
  {
  dept: "Sales",
  service: "New delivery",
  },
  {
  dept: "Sales",
  service: "New delivery",
  },
  {
  dept: "Sales",
  service: "New delivery",
  },
  {
  dept: "Service",
  service: "Used delivery",
  },
]


const table = new Tabulator("#vehicles", {
  height: "100%",
  data: vehiclesList,
  layout: "fitData",
	columns:[
   {title:"DEPT", field:"dept", 
     width:90, hozAlign:"left", 
     editor:"list", 
     editorParams:{
       values: {1:"Sales",2:"Service",3:"Bodyshop",4:"Carwash"}
     }, 
     formatter:"lookup", 
     formatterParams:{
       1:"Sales", 2:"Service", 3:"Bodyshop", 4:"Carwash"
     }},
 	{title:"WORK Type", field:"service", editor:"list", editorParams:{values: serviceList}},

//For v5.1
	//{title:"DEPT", field:"dept", width:90, editor:"select", editorParams:{values: getDepts}},
	//{title:"WORK", field:"service", width:190, editor:"select", editorParams:{values: getServices}},
	],
});


//Get the Department list
var depts;
function callbackDepts(response) {
	depts = response;
}
	
fetch(deptList)
.then(response => {
		return response.json();
})
.then(data => callbackDepts(data));

function...