JSON file


The simplest way to load data from server is file on server.


First of all you need file on server.
Let us do file staff.json with following content.

  "data": [
    {"id": 1, "name": "Taylor", "surname": "Davis", "country": "Netherlands", "position": "DevOps", "email": "[email protected]"},
	{"id": 2, "name": "Isabella", "surname": "Scott", "country": "Australia", "position": "PHP Developer", "email": "[email protected]"}
    {"id": 3, "name": "Chloe", "surname": "Woods", "country": "Sweden", "position": "C++ Developer", "email": "[email protected]"}
	{"id": 4, "name": "Ivan", "surname": "Richardson", "country": "Singapore", "position": "C++ Developer", "email": "[email protected]"}
    {"id": 5, "name": "Ivan", "surname": "Brown", "country": "Taiwan", "position": "Data Science Engineer", "email": "[email protected]"}
    {"id": 6, "name": "Ella", "surname": "Brown", "country": "Sweden", "position": "ASP.NET Developer", "email": "[email protected]"},
    {"id": 7, "name": "Elizabeth", "surname": "Scott", "country": "USA", "position": "iOS Developer", "email": "[email protected]"},
    {"id": 8, "name": "Peter", "surname": "Johnson", "country": "Taiwan", "position": "C++ Developer", "email": "[email protected]"},
    {"id": 9, "name": "Randy", "surname": "Martin", "country": "Netherlands", "position": "C++ Developer", "email": "[email protected]"},
    {"id": 10, "name": "Michael", "surname": "Phillips", "country": "UK", "position": "Software Tester", "email": "[email protected]"},
    {"id": 11, "name": "Ed", "surname": "Brown", "country": "San Marino", "position": "Python Developer", "email": "[email protected]"},
    {"id": 12, "name": "Luis", "surname": "Richardson", "country": "Netherlands", "position": "Software Tester", "email": "[email protected]"},
    {"id": 13, "name": "Ed", "surname": "Johnson", "country": "Australia", "position": "ASP.NET Developer", "email": "[email protected]"},
    {"id": 14, "name": "Gavin", "surname": "Garcia", "country": "Belgium", "position": "DevOps", "email": "[email protected]"},
    {"id": 15, "name": "Taylor", "surname": "Howard", "country": "Taiwan", "position": "JavaScript Developer", "email": "[email protected]"},
    {"id": 16, "name": "Orlando", "surname": "Scott", "country": "Ireland", "position": "Frontend Developer", "email": "[email protected]"},
    {"id": 17, "name": "Chloe", "surname": "Taylor", "country": "Finland", "position": "Java Developer", "email": "[email protected]"},
    {"id": 18, "name": "Jacob", "surname": "Hill", "country": "Japan", "position": "Python Developer", "email": "[email protected]"},
    {"id": 19, "name": "Paula", "surname": "Scott", "country": "Netherlands", "position": "Data Science Engineer", "email": "[email protected]"},
    {"id": 20, "name": "Lily", "surname": "Miller", "country": "Austria", "position": "JavaScript Developer", "email": "[email protected]"}

Client side code

Let's prepare HTML and js code

  <link href="https://cdn.fancygrid.com/fancy.min.css" rel="stylesheet">
  <script src="https://cdn.fancygrid.com/fancy.min.js"></script>
	document.addEventListener("DOMContentLoaded", function() {
	  new FancyGrid({
		renderTo: 'container',
		width: 550,
		height: 500,
		data: {
		  proxy: {
		    url: 'staff.json'
		selModel: 'cell',
		cellTrackOver: true,
		defaults: {      
		  resizable: true,
		  sortable: true,
		  draggable: true
		columns: [{
		  index: 'name',
		  title: 'Name'
		}, {
		  index: 'surname',
		  title: 'SurName'
		}, {
		  index: 'country',
		  title: 'Country'
		}, {
		  index: 'position',
		  title: 'Position'
		}, {
		  index: 'email',
		  title: 'Email'
    <div id="container"></div>

Live Sample

Load JSON file