FancyGrid TrackOver

by FancyGrid Inc.

HTML

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

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

JavaScript

document.addEventListener("DOMContentLoaded", function() {
  var grid = new FancyGrid({
    renderTo: 'container',
    title: 'TrackOver',
    width: 615,
    height: 400,
    data: data,
    trackOver: true,
    tbar: [{
      type: 'segbutton',
      multiToggle: true,
      items: [{
        text: 'Cell',
        enableToggle: true,
        handler: function(b) {
          grid.setTrackOver('cell', !b.pressed);
        }
      }, {
        text: 'Column',
        enableToggle: true,
        handler: function(b) {
          grid.setTrackOver('column', !b.pressed);
        }
      }, {
        text: 'Row',
        enableToggle: true,
        pressed: true,
        handler: function(b) {
          grid.setTrackOver('row', !b.pressed);
        }
      }]
    }],
    defaults: {
      type: 'string',
      width: 100,
      sortable: true,
      resizable: true,
      ellipsis: true
    },
    columns: [{
      index: 'id',
      title: 'Id',
      width: 50,
      type: 'number'
    }, {
      index: 'company',
      title: 'Company',
    }, {
      index: 'name',
      title: 'Name'
    }, {
      index: 'surname',
      title: 'Sur Name'
    }, {
      index: 'age',
      title: 'Age',
      width: 50,
      type: 'number'
    }, {
      index: 'knownledge',
      title: 'Knownledge'
    }, {
      index: 'position',
      title: 'Position'
    }]
  });
});

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