petdance/Trying tabulator

## Trying tabulator
<!DOCTYPE html>
<html>
    <head>
        <title> </title>
    </head>
    <body>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/3.5.2/css/tabulator.min.css" rel="stylesheet">
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/3.5.2/js/tabulator.min.js"></script>
        <div>
            START OF TABLE
            <hr>
            <table id="example-table">
                I'm just a table
            </table>
            <hr>
            END OF TABLE
        </div>

        <script type="text/javascript">
                <!-- //
    $( function() {
        alert('I am starting');
        var tableData =    [
            {id:1, name:"Billy Bob", age:"12", gender:"male", height:1, col:"red", dob:"", cheese:1},
            {id:2, name:"Mary May", age:"1", gender:"female", height:2, col:"blue", dob:"14/05/1982", cheese:true},
            {id:3, name:"Christine Lobowski", age:"42", height:0, col:"green", dob:"22/05/1982", cheese:"true"},
            {id:4, name:"Brendon Philips", age:"125", gender:"male", height:1, col:"orange", dob:"01/08/1980"},
            {id:5, name:"Margret Marmajuke", age:"16", gender:"female", height:5, col:"yellow", dob:"31/01/1999"},
            {id:6, name:"Billy Bob", age:"12", gender:"male", height:1, col:"red", dob:"", cheese:1},
            {id:7, name:"Mary May", age:"1", gender:"female", height:2, col:"blue", dob:"14/05/1982", cheese:true},
            {id:8, name:"Christine Lobowski", age:"42", height:0, col:"green", dob:"22/05/1982", cheese:"true"},
            {id:9, name:"Brendon Philips", age:"125", gender:"male", height:1, col:"orange", dob:"01/08/1980"},
            {id:10, name:"Margret Marmajuke", age:"16", gender:"female", height:5, col:"yellow", dob:"31/01/1999"},
        ];
        $("#example-table").tabulator({
            data:tableData,
            columns:[
                {title:"Name", field:"name", sorter:"string", width:200, editor:true},
                {title:"Age", field:"age", sorter:"number", align:"right", formatter:"progress"},
                {title:"Gender", field:"gender", sorter:"string", cellClick:function(e, cell){console.log("cell click")},},
                {title:"Height", field:"height", formatter:"star", align:"center", width:100},
                {title:"Favourite Color", field:"col", sorter:"string"},
                {title:"Date Of Birth", field:"dob", sorter:"date", align:"center"},
                {title:"Cheese Preference", field:"cheese", sorter:"boolean", align:"center", formatter:"tickCross"},
            ],
        });
    } );
});
// -->
            </script>
    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title> </title>
	</head>
	<body>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/3.5.2/css/tabulator.min.css" rel="stylesheet">
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/3.5.2/js/tabulator.min.js"></script>
	<div>
	START OF TABLE
	<hr>
	<table id="example-table">
	I'm just a table
	</table>
	<hr>
	END OF TABLE
	</div>

	<script type="text/javascript">
	<!-- //
	$( function() {
	alert('I am starting');
	var tableData = [
	{id:1, name:"Billy Bob", age:"12", gender:"male", height:1, col:"red", dob:"", cheese:1},
	{id:2, name:"Mary May", age:"1", gender:"female", height:2, col:"blue", dob:"14/05/1982", cheese:true},
	{id:3, name:"Christine Lobowski", age:"42", height:0, col:"green", dob:"22/05/1982", cheese:"true"},
	{id:4, name:"Brendon Philips", age:"125", gender:"male", height:1, col:"orange", dob:"01/08/1980"},
	{id:5, name:"Margret Marmajuke", age:"16", gender:"female", height:5, col:"yellow", dob:"31/01/1999"},
	{id:6, name:"Billy Bob", age:"12", gender:"male", height:1, col:"red", dob:"", cheese:1},
	{id:7, name:"Mary May", age:"1", gender:"female", height:2, col:"blue", dob:"14/05/1982", cheese:true},
	{id:8, name:"Christine Lobowski", age:"42", height:0, col:"green", dob:"22/05/1982", cheese:"true"},
	{id:9, name:"Brendon Philips", age:"125", gender:"male", height:1, col:"orange", dob:"01/08/1980"},
	{id:10, name:"Margret Marmajuke", age:"16", gender:"female", height:5, col:"yellow", dob:"31/01/1999"},
	];
	$("#example-table").tabulator({
	data:tableData,
	columns:[
	{title:"Name", field:"name", sorter:"string", width:200, editor:true},
	{title:"Age", field:"age", sorter:"number", align:"right", formatter:"progress"},
	{title:"Gender", field:"gender", sorter:"string", cellClick:function(e, cell){console.log("cell click")},},
	{title:"Height", field:"height", formatter:"star", align:"center", width:100},
	{title:"Favourite Color", field:"col", sorter:"string"},
	{title:"Date Of Birth", field:"dob", sorter:"date", align:"center"},
	{title:"Cheese Preference", field:"cheese", sorter:"boolean", align:"center", formatter:"tickCross"},
	],
	});
	} );
	});
	// -->
	</script>
	</body>
	</html>