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": "mia.moore@fancygrid.com"
}, {
  "name": "David",
  "surname": "Johnson",
  "id": 2,
  "country": "Belgium",
  "position": "Frontend Developer",
  "email": "david.johnson@fancygrid.com"
}, {
  "name": "Isabella",
  "surname": "Miller",
  "id": 3,
  "country": "Sweden",
  "position": "Frontend Developer",
  "email": "isabella.miller@fancygrid.com"
}, {
  "name": "Ivan",
  "surname": "West",
  "id": 4,
  "country": "San Marino",
  "position": "iOS Developer",
  "email": "ivan.west@fancygrid.com"
}, {
  "name": "Christopher",
  "surname": "Grant",
  "id": 5,
  "country": "Taiwan",
  "position": "Data Science Engineer",
  "email": "christopher.grant@fancygrid.com"
}, {
  "name": "Addison",
  "surname": "Thomson",
  "id": 6,
  "country": "Japan",
  "position": "ASP.NET Developer",
  "email": "addison.thomson@fancygrid.com"
}, {
  "name": "Ethan",
  "surname": "Brown",
  "id": 7,
  "country": "Germany",
  "position": "C# Developer",
  "email": "ethan.brown@fancygrid.com"
}, {
  "name": "Matthew",
  "surname": "Smith",
  "id": 8,
  "country": "Norway",
  "position": "ASP.NET Developer",
  "email": "matthew.smith@fancygrid.com"
}, {
  "name": "Carter",
  "surname": "Anderson",
  "id": 9,
  "country": "Belgium",
  "position": "Software Tester",
  "email": "carter.anderson@fancygrid.com"
}, {
  "name": "Ed",
  "surname": "Richardson",
  "id": 10,
  "country": "USA",
  "position": "JavaScript Developer",
  "email": "ed.richardson@fancygrid.com"
}, {
  "name": "Michael",
  "surname": "Moore",
  "id": 11,
  "country": "Iceland",
  "position": "Angular Developer",
  "email": "michael.moore@fancygrid.com"
}, {
  "name": "Luis",
  "surname": "Phillips",
  "id": 12,
  "country": "Norway",
  "position": "C# Developer",
  "email": "luis.phillips@fancygrid.com"
}, {
  "name": "Paula",
  "surname": "Brown",
  "id": 13,
  "country": "Taiwan",
  "position": "PHP Developer",
  "email": "paula.brown@fancygrid.com"
}, {
  "name": "Christopher",
  "surname": "Grant",
  "id": 14,
  "country": "Germany",
  "position": "iOS Developer",
  "email": "christopher.grant@fancygrid.com"
}, {
  "name": "Katie",
  "surname": "Moore",
  "id": 15,
  "country": "Germany",
  "position": "C# Developer",
  "email": "katie.moore@fancygrid.com"
}, {
  "name": "Sophia",
  "surname": "Lopez",
  "id": 16,
  "country": "Austria",
  "position": "Software Tester",
  "email": "sophia.lopez@fancygrid.com"
}, {
  "name": "Wyatt",
  "surname": "Martin",
  "id": 17,
  "country": "Ireland",
  "position": "Java Developer",
  "email": "wyatt.martin@fancygrid.com"
}, {
  "name": "Nevaeh",
  "surname": "Phillips",
  "id": 18,
  "country": "Switzerland",
  "position": "Angular Developer",
  "email": "nevaeh.phillips@fancygrid.com"
}, {
  "name": "William",
  "surname": "Anderson",
  "id": 19,
  "country": "Denmark",
  "position": "Scala Developer",
  "email": "william.anderson@fancygrid.com"
}, {
  "name": "Alexander",
  "surname": "Martin",
  "id": 20,
  "country": "Denmark",
  "position": "Oracle Engineer",
  "email": "alexander.martin@fancygrid.com"
}];

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