Latest Build

cdn.fancygrid.com/fancygrid-latest.zip

Source

FancyGrid on GitHub

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

Angular FancyGrid Component

React

React FancyGrid Component

Vue

Vue FancyGrid Component
Subscribe
Company
Product
Legal
Follow Us