Edit in JSFiddle

document.addEventListener("DOMContentLoaded", function() {
  new FancyGrid({
    title: 'Paging',
    renderTo: 'container',
    width: 550,
    height: 500,
    data: data,
    paging: {
      pageSize: 10,
      pageSizeData: [5, 10, 20, 50]
    },
    defaults: {      
      resizable: true,
      draggable: true
    },
    columns: [{
      index: 'name',
      title: 'Name'
    }, {
      index: 'surname',
      title: 'SurName'
    }, {
      index: 'country',
      title: 'Country'
    }, {
      index: 'position',
      title: 'Position'
    }, {
      index: 'email',
      title: 'Email'
    }]
  });
});

var data = [{
  "name": "Mia",
  "surname": "Moore",
  "id": 1,
  "country": "Netherlands",
  "position": "Software Tester",
  "email": "[email protected]"
}, {
  "name": "David",
  "surname": "Johnson",
  "id": 2,
  "country": "Belgium",
  "position": "Frontend Developer",
  "email": "[email protected]"
}, {
  "name": "Isabella",
  "surname": "Miller",
  "id": 3,
  "country": "Sweden",
  "position": "Frontend Developer",
  "email": "[email protected]"
}, {
  "name": "Ivan",
  "surname": "West",
  "id": 4,
  "country": "San Marino",
  "position": "iOS Developer",
  "email": "[email protected]"
}, {
  "name": "Christopher",
  "surname": "Grant",
  "id": 5,
  "country": "Taiwan",
  "position": "Data Science Engineer",
  "email": "[email protected]"
}, {
  "name": "Addison",
  "surname": "Thomson",
  "id": 6,
  "country": "Japan",
  "position": "ASP.NET Developer",
  "email": "[email protected]"
}, {
  "name": "Ethan",
  "surname": "Brown",
  "id": 7,
  "country": "Germany",
  "position": "C# Developer",
  "email": "[email protected]"
}, {
  "name": "Matthew",
  "surname": "Smith",
  "id": 8,
  "country": "Norway",
  "position": "ASP.NET Developer",
  "email": "[email protected]"
}, {
  "name": "Carter",
  "surname": "Anderson",
  "id": 9,
  "country": "Belgium",
  "position": "Software Tester",
  "email": "[email protected]"
}, {
  "name": "Ed",
  "surname": "Richardson",
  "id": 10,
  "country": "USA",
  "position": "JavaScript Developer",
  "email": "[email protected]"
}, {
  "name": "Michael",
  "surname": "Moore",
  "id": 11,
  "country": "Iceland",
  "position": "Angular Developer",
  "email": "[email protected]"
}, {
  "name": "Luis",
  "surname": "Phillips",
  "id": 12,
  "country": "Norway",
  "position": "C# Developer",
  "email": "[email protected]"
}, {
  "name": "Paula",
  "surname": "Brown",
  "id": 13,
  "country": "Taiwan",
  "position": "PHP Developer",
  "email": "[email protected]"
}, {
  "name": "Christopher",
  "surname": "Grant",
  "id": 14,
  "country": "Germany",
  "position": "iOS Developer",
  "email": "[email protected]"
}, {
  "name": "Katie",
  "surname": "Moore",
  "id": 15,
  "country": "Germany",
  "position": "C# Developer",
  "email": "[email protected]"
}, {
  "name": "Sophia",
  "surname": "Lopez",
  "id": 16,
  "country": "Austria",
  "position": "Software Tester",
  "email": "[email protected]"
}, {
  "name": "Wyatt",
  "surname": "Martin",
  "id": 17,
  "country": "Ireland",
  "position": "Java Developer",
  "email": "[email protected]"
}, {
  "name": "Nevaeh",
  "surname": "Phillips",
  "id": 18,
  "country": "Switzerland",
  "position": "Angular Developer",
  "email": "[email protected]"
}, {
  "name": "William",
  "surname": "Anderson",
  "id": 19,
  "country": "Denmark",
  "position": "Scala Developer",
  "email": "[email protected]"
}, {
  "name": "Alexander",
  "surname": "Martin",
  "id": 20,
  "country": "Denmark",
  "position": "Oracle Engineer",
  "email": "[email protected]"
}];