JSFiddle - React, Tailwind, and code Playground

by FancyGrid Inc.

HTML

<script src="https://cdn.jsdelivr.net/npm/fancygrid/client/fancy.min.js"></script>

<div id="container"></div>
<button onclick="addFilter()" style="margin-top: 10px;">
  Add filter
</button>
<button onclick="clearFilter()" style="margin-top: 10px;">
  Clear filter
</button>

JavaScript

var grid;
function addFilter(){
  grid.addFilter('age', 30, '<=');
}

function clearFilter(){
  grid.clearFilter('age', '<=');
}

document.addEventListener("DOMContentLoaded", function() {
  grid = new FancyGrid({
    title: 'Paging',
    renderTo: 'container',
    width: 550,
    height: 500,
    data: data,
    paging: true,
    filter: true,
    defaults: {      
      resizable: true,
      draggable: true
    },
    columns: [{
      index: 'name',
      title: 'Name'
    }, {
      index: 'surname',
      title: 'SurName'
    }, {
      index: 'age',
      title: 'Age'
    }, {
      index: 'country',
      title: 'Country'
    }, {
      index: 'position',
      title: 'Position'
    }, {
      index: 'email',
      title: 'Email'
    }]
  });
});


var data = [{
  "name": "Elizabeth",
  "surname": "Woods",
  "id": 1,
  "country": "USA",
  "position": "Software Tester",
  "email": "elizabeth.woods@fancygrid.com",
  "age": 28
}, {
  "name": "Ryan",
  "surname": "Phillips",
  "id": 2,
  "country": "Singapore",
  "position": "Software Tester",
  "email": "ryan.phillips@fancygrid.com",
  "age": 23
}, {
  "name": "Grace",
  "surname": "Thomson",
  "id": 3,
  "country": "Netherlands",
  "position": "Ruby Developer",
  "email": "grace.thomson@fancygrid.com",
  "age": 35
}, {
  "name": "Jose",
  "surname": "Martin",
  "id": 4,
  "country": "Luxembourg",
  "position": "Angular Developer",
  "email": "jose.martin@fancygrid.com",
  "age": 32
}, {
  "name": "Luis",
  "surname": "Smith",
  "id": 5,
  "country": "Denmark",
  "position": "Frontend Developer",
  "email": "luis.smith@fancygrid.com",
  "age": 30
}, {
  "name": "Ed",
  "surname": "Baker",
  "id": 6,
  "country": "Norway",
  "position": "QA Engineer",
  "email": "ed.baker@fancygrid.com",
  "age": 35
}, {
  "name": "Sophia",
  "surname": "Hamilton",
  "id": 7,
  "country": "Netherlands",
  "position": "Java Developer",
  "email": "sophia.hamilton@fancygrid.com",
  "age": 42
}, {
  "name": "Christopher",
 ...