Latest Build

cdn.fancygrid.com/fancygrid-latest.zip

Source

Include files from CDN

<link href="https://cdn.fancygrid.com/fancy.min.css" rel="stylesheet">
<script src="https://cdn.fancygrid.com/fancy.min.js"></script>

Modules Path

If you include library from self domain and have bug than check that set Fancy.MODULESDIR
By default Fancy.MODULESDIR is equal to https://cdn.fancygrid.com/modules/

Full build

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

If do not include style link on css file than it will be auto-loaded from Fancy.MODULESDIR

npm

npm install fancygrid

Bower

bower install fancygrid

CommonJS module

FancyGrid is using an UMD module pattern, as a result it has support for CommonJS.
The following example presumes you are using npm/bower to install FancyGrid.

// Load FancyGrid
var Fancy = require('fancygrid');

// Generate the grid
new Fancy.Grid({
  //config
});

// Generate the form
new Fancy.Form({
  //config
});

// Generate the tabs
new Fancy.Tab({
  //config
});

ES6/TypeScript module

Since FancyGrid supports CommonJS, it can be loaded as an ES6 module with the use of transpilers.
The following examples presumes you are using npm to install FancyGrid.

//Babel
import Fancy from 'fancygrid';

// Generate the grid
Fancy.Grid({
  // config
});

// Generate the form
new Fancy.Form({
  //config
});

// Generate the tabs
new Fancy.Tab({
  //config
});

//TypeScript
import * as Fancy from 'fancygrid';

// Generate the grid
Fancy.Grid({
  // config
});

// Generate the form
new Fancy.Form({
  //config
});

// Generate the tabs
new Fancy.Tab({
  //config
});

Component version

After including library files include this.

<script>
Fancy.enableCompo();
</script>

AngularJS directive

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

Angular

React

Vue