<html>
  <head>
	<script   src="https://code.jquery.com/jquery-2.2.4.min.js"   integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="   crossorigin="anonymous"></script>
	<script   src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"   integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E="   crossorigin="anonymous"></script>

    <link rel="stylesheet" href="https://cdn.rawgit.com/olifolkerd/tabulator/master/tabulator.css">
    <script type="text/javascript" src="https://cdn.rawgit.com/olifolkerd/tabulator/master/tabulator.js"></script>
  </head>
  <body>
    <div id="example-table"></div>
  </body>
</html>


#example-table{
  width:100%;  
  font-family:sans-serif;
}
$("#example-table").tabulator({
  height:"300px",
  fitColumns:true,
  movableCols:true,
  movableRows:true,
  tooltips:true,
  columns:[
    {title:"Name", field:"name", sorter:"string", editable:true},
        {title:"Task Progress", field:"progress", sorter:"number", align:"left", formatter:"progress", editable:true},
        {title:"Gender", field:"gender", width:100, sorter:"string", editable:true},
        {title:"Rating", field:"rating", formatter:"star", align:"center", sorter:"number", width:100, editable:true},
        {title:"Favourite Color", field:"col", width:120, sorter:"string", sortable:false, editable:true},
        {title:"Date Of Birth", field:"dob", width:130, sorter:"date", align:"center"},
        {title:"Driver", field:"car", width:80,  align:"center", formatter:"tickCross", sorter:"boolean", editable:true},
  ],
});

var sampleData= [
    {id:1, name:"Oli Bob", progress:12, gender:"male", rating:1, col:"red", dob:"", car:1, lucky_no:5, cheese:"Cheader"},
  {id:2, name:"Mary May", progress:1, gender:"female", rating:2, col:"blue", dob:"14/05/1982", car:true, lucky_no:10, cheese:"Gouda"},
  {id:3, name:"Christine Lobowski", progress:42, gender:"female", rating:0, col:"green", dob:"22/05/1982", car:"true", lucky_no:12, cheese:"Manchego"},
  {id:4, name:"Brendon Philips", progress:100, gender:"male", rating:1, col:"orange", dob:"01/08/1980", lucky_no:18, cheese:"Brie"},
  {id:5, name:"Margret Marmajuke", progress:16, gender:"female", rating:5, col:"yellow", dob:"31/01/1999", lucky_no:33, cheese:"Cheader"},
]

$("#example-table").tabulator("setData", sampleData);

$(window).resize(function(){
  $("#example-table").tabulator("redraw");
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.