Tutorials

Basic Grid

Screencast

You can study this sample over screencast.

Data

First of all you need data for your sample.
If you don't have real data, you can try to do manually or generate over some services like Mockaroo.
So we have generated data. 

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]"
}];

Container

Next let's prepare HTML page with container where to render grid 

<html>
  <head>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>

Include library from CDN

Let's include FancyGrid from CDN. 

<html>
  <head>
    <script src="/fancygrid/fancy.min.js"></script>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>

Include simple grid

We will include library in document ready event container

document.addEventListener("DOMContentLoaded", function() {
  ...
});
In grid we will define width, height, columns, renderTo and data.

Column properties

Let us do our columns resizable and draggable.
For that we need to add properties resizable: true and draggable to columns. 

columns: [{
  index: 'name',
  resizable: true,
  draggable: true,
  title: 'Name'
}, {
  index: 'surname',
  resizable: true,
  draggable: true,
  title: 'SurName'
}, {
  index: 'country',
  resizable: true,
  draggable: true,
  title: 'Country'
}, {
  index: 'position',
  resizable: true,
  draggable: true,
  title: 'Position'
}, {
  index: 'email',
  resizable: true,
  draggable: true,
  title: 'Email'
}]
That do not repeat for every column properties there is grid param defaults. 

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'
}]