FancyGrid Search

by dshilkret

HTML

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

<div id="container"></div>

JavaScript

document.addEventListener("DOMContentLoaded", function() {
  new FancyGrid({
    title: 'Column Types',
    renderTo: 'container',
    width: 690,
    height: 400,
    data: data,
    tbar: [{
      type: 'search',
      width: 350,
      emptyText: 'Search',
      paramsMenu: true,
      paramsText: 'Parameters'
    }],
    defaults: {
      type: 'string',
      width: 100,
      editable: true,
      sortable: true
    },
    clicksToEdit: 1,
    columns: [{
      index: 'id',
      locked: true,
      title: 'ID',
      type: 'number',
      editable: false,
      width: 40
    }, {
      index: 'company',
      width: 105,
      locked: true,
      title: 'Company'
    }, {
      index: 'name',
      title: 'Name'
    }, {
      index: 'surname',
      title: 'Sur Name'
    }, {
      index: 'country',
      title: 'Country',
      type: 'combo',
      data: ['USA', 'Canada', 'England']
    }, {
      index: 'age',
      width: 60,
      title: 'Age',
      type: 'number'
    }, {
      index: 'married',
      width: 70,
      title: 'Married',
      type: 'checkbox'
    }]
  });
});

var data = [{
  id: 1,
  name: 'Ted',
  surname: 'Smith',
  position: 'Java Developer',
  email: '[email protected]',
  company: 'Electrical Systems',
  age: 30,
  education: 'High School Of Cambridge',
  knownledge: 'Java, Ruby',
  married: true,
  country: 'USA'
}, {
  id: 2,
  name: 'Ed',
  surname: 'Johnson',
  position: 'C/C++ Market Data Developer',
  email: '[email protected]',
  company: 'Energy and Oil',
  age: 35,
  education: 'High School Of Cambridge',
  knownledge: 'C++',
  married: true,
  country: 'Canada'
}, {
  id: 3,
  name: 'Sam',
  surname: 'Williams',
  position: 'Technical Analyst',
  email: '[email protected]',
  company: 'Airbus',
  age: 38,
  education: 'High School Of Cambridge',
  knownledge: '',
  married: true,
  country: 'England'
}, {
  id: 4,
  name: 'Alexander',
  surname: 'Brown',
  position: 'Project Manager',
  email:...