Edit in JSFiddle

var data = [
  {name: 'Ted', surname: 'Smith',email: '[email protected]', company: 'Electrical Systems', age: 30},
  {name: 'Ed', surname: 'Johnson', email: '[email protected]', company: 'Energy and Oil', age: 35},
  {name: 'Sam', surname: 'Williams', email: '[email protected]', company: 'Airbus', age: 38},
  {name: 'Alexander', surname: 'Brown',email: '[email protected]', company: 'Renault', age: 24},
  {name: 'Nicholas', surname: 'Miller', email: '[email protected]', company: 'Adobe', age: 33},
  {name: 'Andrew', surname: 'Thompson', email: '[email protected]', company: 'Google', age: 28},
  {name: 'Ryan', surname: 'Walker', email: '[email protected]', company: 'Siemens', age: 39},
  {name: 'John', surname: 'Scott', email: '[email protected]', company: 'Cargo', age: 45},
  {name: 'James', surname: 'Phillips', email: '[email protected]', company: 'Pro bugs', age: 30},
  {name: 'Brian', surname: 'Edwards', email: '[email protected]', company: 'IT Consultant', age: 23},
  {name: 'Jack', surname: 'Richardson', email: '[email protected]', company: 'Europe IT', age: 24},
  {name: 'Alex', surname: 'Howard', email: '[email protected]', company: 'Cisco', age: 27},
  {name: 'Carlos', surname: 'Wood', email: '[email protected]', company: 'HP', age: 36},
  {name: 'Adrian', surname: 'Russell', email: '[email protected]', company: 'Micro Systems', age: 31}
];

document.addEventListener("DOMContentLoaded", function() {
 
  new FancyGrid({
    title: 'Validation',
    renderTo: 'container',
    width: 600,
    height: 400,
    data: data,
    defaults: {
      type: 'string',
      sortable: true,
      editable: true,
      resizable: true,
      vtype: 'notempty'
    },
    clicksToEdit: 1,
    columns: [{
      index: 'company',
      flex: 1,
      title: 'Company'
    }, {
      index: 'name',
      title: 'Name'
    }, {
      index: 'surname',
      title: 'Sur Name'
    }, {
      index: 'email',
      title: 'Email',
      width: 150,
      vtype: 'email'
    }, {
      index: 'age',
      title: 'Age',
      width: 50,
      type: 'number',
      vtype: {
        before: ['notempty', 'notnan'],
        type: 'range',
        min: 20,
        max: 70
      }
    }]
  });
 
});

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

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

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