FancyGrid Search

by Sascha

HTML

<script src="https://cdn.fancygrid.com/fancy.min.js"></script>

<div id="filter-form">

</div>

<div id="newTable"></div>

JavaScript

var grid;

document.addEventListener("DOMContentLoaded", function() {
  grid = new FancyGrid({
    title: 'Report',
    renderTo: 'newTable',
    data: data,
    filter: true,
    width: 690,
    height: 400,
    paging: true,
    trackOver: true,
    selModel: 'row',
    paging: {
      pageSize: 10,
      pageSizeData: [5, 10, 20, 50],
      refreshButton: true
    },
    defaults: {
      type: 'string',
      sortable: true
    },
    columns: [{
      index: 'theDate',
      title: 'Date',
      type: 'date',
      width: 150,
      resizable: true,

       menu: [{
           text: 'Clear Filter',
           handler: function(menu){
             var grid = FancyGrid.get('newTable');
             grid.clearFilter('theDate');
             menu.hide();
           }
         },'-',{
           text: 'Less than 30',
           handler: function(menu){
             grid.clearFilter('theDate');
             var date = new Date();
             date.setDate(date.getDate() -30);             
             grid.addFilter('theDate', date, '>');
             menu.hide();
           }
         },{      
           text: 'More than 35',
           handler: function(menu){
             grid.clearFilter('theDate');
             var date = new Date();
             date.setDate(date.getDate() -35);      
             grid.addFilter('theDate', date, '<');
             menu.hide();
           }
       }],
    }, {
      index: 'MessagesSent',
      title: 'Messages',
      width: 80,
      resizable: true
    }, {
      index: 'Clicks',
      title: 'Clicks',
      width: 150,
      resizable: true,
      type: 'number',
    }, {
      index: 'Upload',
      title: 'Upload',
      width: 150,
      resizable: true
    }, {
      index: 'UploadRate',
      title: 'Upload Rate',
      width: 150,
      resizable: true
    }, {
      index: 'enter',
      title: 'Enter',
      width: 50,
      resizable: true
    }, {
      index: 'EnterRate',
      title: 'Enter Rate',
     ...