FancyGrid Theme Blue

by FancyGrid Inc.

HTML

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

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

JavaScript

document.addEventListener("DOMContentLoaded", () => {
  new FancyGrid({
    theme: 'blue',
    title: 'Staff',
    renderTo: 'container',
    width: 750,
    height: 400,
    data: data,
    paging: true,
    selModel: 'rows',
    trackOver: true,
    tbar: [{
      type: 'button',
      text: 'Add',
      action: 'add'
    }, {
      type: 'button',
      text: 'Delete',
      action: 'remove'
    }],
    defaults: {
      type: 'string',
      width: 100,
      editable: true,
      sortable: true,
      ellipsis: true,
      resizable: true
    },
    columns: [{
      index: 'id',
      locked: true,
      title: 'ID',
      type: 'number',
      editable: false,
      width: 40
    }, {
      index: 'company',
      locked: true,
      title: 'Company'
    }, {
      text: 'Base Info',
      columns: [{
        index: 'name',
        title: 'Name'
      }, {
        index: 'surname',
        title: 'Sur Name'
      }, {
        index: 'age',
        title: 'Age',
        type: 'number'
      }]
    }, {
      index: 'country',
      title: 'Country',
      type: 'combo',
      width: 99,
      data: ['USA', 'Canada', 'England']
    }, {
      index: 'married',
      title: 'Married',
      type: 'checkbox',
      width: 60
    }, {
      index: 'email',
      title: 'Email',
      vtype: 'email',
      width: 150
    }]
  });
});

const data = [{
    id: 1,
    name: 'Ted',
    surname: 'Smith',
    position: 'Java Developer',
    email: 'ted.smith@gmail.com',
    company: 'Electrical Systems',
    age: 30,
    married: true,
    country: 'USA'
  },
  {
    id: 2,
    name: 'Ed',
    surname: 'Johnson',
    position: 'C/C++ Market Data Developer',
    email: 'ed.johnson@gmail.com',
    company: 'Energy and Oil',
    age: 35,
    married: true,
    country: 'Canada'
  },
  {
    id: 3,
    name: 'Sam',
    surname: 'Williams',
    position: 'Technical Analyst',
    email: 'sam.williams@gmail.com',
    company: 'Airbus',
    age: 38,
    married: true,
   ...