Cell selection and trackover

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", function() {
  new FancyGrid({
    renderTo: 'container',
    width: 550,
    height: 500,
    data: data,
    selModel: 'cell',
    cellTrackOver: true,
    defaults: {      
      resizable: true,
      sortable: true,
      draggable: true
    },
    columns: [{
      index: 'name',
      title: 'Name'
    }, {
      index: 'surname',
      title: 'SurName'
    }, {
      index: 'position',
      title: 'Position'
    }, {
      index: 'email',
      title: 'Email'
    },{
      type: 'combo',
      index : 'country',
      label: 'Country',
      name: 'country',
      data: [
        {index: 0, country: 'USA'},
        {index: 1, country: 'Canada'}
      ],
      displayKey: 'country',
      valueKey: 'index',
      editable:true
    }]
  });
});

var data = [{
  "name": "Mia",
  "surname": "Moore",
  "id": 1,
  "country": "USA",
  "position": "Software Tester",
  "email": "mia.moore@fancygrid.com"
}, {
  "name": "David",
  "surname": "Johnson",
  "id": 2,
  "country": "Canada",
  "position": "Frontend Developer",
  "email": "david.johnson@fancygrid.com"
}];