Tabulator

by harifrais

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/3.5.3/js/tabulator.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/3.5.3/css/tabulator.min.css">


<div id="table">



</div>

JavaScript

var multiselectEditor = function(cell, onRendered, success, cancel, editorParams){
//create and style editor
	var editor = document.createElement("select");

	editor.setAttribute("class", "select2");
	editor.setAttribute("name", "favcolor[]");
	editor.setAttribute("multiple", "multiple");
	editor.setAttribute("id", "favcolor");
	
	//create and style input												
	editor.style.width = "100%";
	
	var colorNames = cell.getRow().getData().col;
	var splittedColorNames = colorNames.split(",");
	var colorsToAccess = [];
	var colorsToAccessSelect = [];
	splittedColorNames.map(function(s) { 
		colorsToAccessSelect.push({"id":s.trim(),"text":s.trim()});
		colorsToAccess.push(s.trim());	
	});
	
	//Set value of editor to the current value of the cell
	editor.value = colorsToAccess;
	
	console.log(colorsToAccessSelect);
	
	$('#favcolor').select2({
	  closeOnSelect: false,
	  data:colorsToAccessSelect
	});

	//set focus on the select box when the editor is selected (timeout allows for editor to be added to DOM)
	onRendered(function(){
		editor.focus();
		editor.style.css = "100%";
	});

	//when the value has been set, trigger the cell to update
	function successFunc(){
		success(editor.value);
	}

	editor.addEventListener("change", successFunc);
	

	//return the editor element
	return editor;
	};
	
	


$("#table").tabulator({
  layout: "fitDataFill",
  height: "311px",
  columns: [{
      title: "Name",
      field: "name"
    },
    {
      title: "Age",
      field: "age"
    },
    {
      title: "Gender",
      field: "gender"
    },
    {
      title: "Height",
      field: "height",
      align: "center"
    },
    {
      title: "Favourite Color",
      field: "col",
      editor: multiselectEditor
    },
    {
      title: "Testing Column",
      field: "test",
      formatter: "html"
    },
  ],
});

var tableData = [{
    id: 1,
    name: "Billy Bob",
    age: "12",
    gender: "male",
    height: 1,
    col: "red,white",
    test:...