nosajhpled/tabulator_template.html

## tabulator_template.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="" content="">

    <title>Tabulator Template</title>


    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">


    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <!-- CSS -->

    <style type="text/css">

    </style>


</head>
<body>


<h1>Tabulator Template</h1>
<div id="filters">
Filter Parameters<br>
<button id="addFilter" v-on:click="addFilter">Add Filter</button><button id="clearFilters" v-on:click="clearFilters">Clear Filter</button><br>

<span v-for="(row,index) in filterRow">
<label>Field: </label><select id="filterField" v-model="row.field"><option v-for="fieldName in fieldNames" v-bind:value="fieldName.value">{{fieldName.text}}</option></select>
<label>Type:</label><select id="filterType" v-model="row.type"><option v-for="filterType in filterTypes" v-bind:value="filterType.value">{{filterType.text}}</option></select>
<label>Value:</label><input id="filterValue" type="text" placeholder="value to filter" v-model="row.value">
<a v-on:click="removeFilter(index);" style="cursor: pointer">Remove</a>
<br>
</span>
<br>
<button id="filterData" v-on:click="filterData">Filter</button>
{{filterRow}}


</div>
<div id="dataTable"></div>


<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

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

  var app = new Vue({
    el: '#filters',
    data:{
      filterTypes:[
      {value: '=', text:'='},
      {value: '<', text:'<'},
      {value: '<=', text:'<='},
      {value: '>', text:'>'},
      {value: '>=', text:'>='},
      {value: '!=', text:'!='},
      {value: 'like', text:'like'}
      ],
      fieldNames:[
      {value:'', text:''},
      {value:'id', text:'ID'},
      {value:'string', text:'String'},
      {value:'date', text:'Date'},
    ],
    filterRow:[]
    },
    methods: {
      addFilter: function(){
        this.filterRow.push({
          field:"",
          type:"",
          value:""
        });
      },
      removeFilter: function(index) {
                    this.filterRow.splice(index, 1);
                    table.setFilter(this.$data.filterRow);
                },
      filterData: function(){
        table.setFilter(this.$data.filterRow);
      },
      clearFilters: function(){
        table.clearFilter();
      }
    }
  })

//define some sample data
 var tabledata =
 [
 {
   "id":1,
   "string":"String",
   "date":"05/22/2019",
 },
 {
   "id":2,
   "string":"String2",
   "date":"05/23/2019",
 },
 {
   "id":3,
   "string":"String3",
   "date":"05/24/2019",
 },
 {
   "id":4,
   "string":"String4",
   "date":"05/25/2019",
 },
 {
   "id":5,
   "string":"String5",
   "date":"05/26/2019",
 },
 ] ;


//create Tabulator on DOM element with id "example-table"
var table = new Tabulator("#dataTable", {

 	data:tabledata, //assign data to table
 	layout:"fitColumns", //fit columns to width of table (optional)
 	columns:[ //Define Table Columns

    {title:"ID", field:"id",sorter:"number"},
    {title:"String", field:"string",sorter:"string"},
	 	{title:"Date", field:"date",sorter:"date"},
 	],
  initialSort:[{column:"id",dir:"desc"}],
});
</script>


<!-- Keep all JS at bottom -->

<script type="text/javascript">
</script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta name="description" content="">
	<meta name="" content="">

	<title>Tabulator Template</title>


	<!-- Fonts -->
	<link rel="dns-prefetch" href="//fonts.gstatic.com">
	<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">


	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

	<!-- CSS -->

	<style type="text/css">

	</style>


	</head>
	<body>


	<h1>Tabulator Template</h1>
	<div id="filters">
	Filter Parameters<br>
	<button id="addFilter" v-on:click="addFilter">Add Filter</button><button id="clearFilters" v-on:click="clearFilters">Clear Filter</button><br>

	<span v-for="(row,index) in filterRow">
	<label>Field: </label><select id="filterField" v-model="row.field"><option v-for="fieldName in fieldNames" v-bind:value="fieldName.value">{{fieldName.text}}</option></select>
	<label>Type:</label><select id="filterType" v-model="row.type"><option v-for="filterType in filterTypes" v-bind:value="filterType.value">{{filterType.text}}</option></select>
	<label>Value:</label><input id="filterValue" type="text" placeholder="value to filter" v-model="row.value">
	<a v-on:click="removeFilter(index);" style="cursor: pointer">Remove</a>
	<br>
	</span>
	<br>
	<button id="filterData" v-on:click="filterData">Filter</button>
	{{filterRow}}


	</div>
	<div id="dataTable"></div>



	<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

	<script src="https://cdn.jsdelivr.net/npm/vue"></script>

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

	var app = new Vue({
	el: '#filters',
	data:{
	filterTypes:[
	{value: '=', text:'='},
	{value: '<', text:'<'},
	{value: '<=', text:'<='},
	{value: '>', text:'>'},
	{value: '>=', text:'>='},
	{value: '!=', text:'!='},
	{value: 'like', text:'like'}
	],
	fieldNames:[
	{value:'', text:''},
	{value:'id', text:'ID'},
	{value:'string', text:'String'},
	{value:'date', text:'Date'},
	],
	filterRow:[]
	},
	methods: {
	addFilter: function(){
	this.filterRow.push({
	field:"",
	type:"",
	value:""
	});
	},
	removeFilter: function(index) {
	this.filterRow.splice(index, 1);
	table.setFilter(this.$data.filterRow);
	},
	filterData: function(){
	table.setFilter(this.$data.filterRow);
	},
	clearFilters: function(){
	table.clearFilter();
	}
	}
	})

	//define some sample data
	var tabledata =
	[
	{
	"id":1,
	"string":"String",
	"date":"05/22/2019",
	},
	{
	"id":2,
	"string":"String2",
	"date":"05/23/2019",
	},
	{
	"id":3,
	"string":"String3",
	"date":"05/24/2019",
	},
	{
	"id":4,
	"string":"String4",
	"date":"05/25/2019",
	},
	{
	"id":5,
	"string":"String5",
	"date":"05/26/2019",
	},
	] ;



	//create Tabulator on DOM element with id "example-table"
	var table = new Tabulator("#dataTable", {

	data:tabledata, //assign data to table
	layout:"fitColumns", //fit columns to width of table (optional)
	columns:[ //Define Table Columns

	{title:"ID", field:"id",sorter:"number"},
	{title:"String", field:"string",sorter:"string"},
	{title:"Date", field:"date",sorter:"date"},
	],
	initialSort:[{column:"id",dir:"desc"}],
	});
	</script>



	<!-- Keep all JS at bottom -->

	<script type="text/javascript">
	</script>
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
	</body>
	</html>