FancyGrid

Build v1.7.96

FancyGrid - JavaScript grid library with charts integration and server communication.

Install

bower

bower install fancygrid

npm

npm install fancygrid

CDN

https://cdn.fancygrid.com/fancy.min.js
https://cdn.fancygrid.com/fancy.min.css

Quick Start

Include a reference to the FancyGrid library

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

The FancyGrid object is now accessible. Happy griding!

<div id="grid"></div>
<script>
document.addEventListener("DOMContentLoaded", function() {

new FancyGrid({
  renderTo: 'grid',
  width: 300,
  height: 200,
  data: [
    {name: 'Nick', age: 30},
    {name: 'Fred', age: 25},
    {name: 'Mike', age: 35}
  ],  
  columns: [{
    index: 'name',
    title: 'Name',    
    type: 'string'
  },{
    type: 'number',
    index: 'age',
    title: 'Age'
  }]
});

});
</script>

Load FancyGrid as a 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 to install FancyGrid over npm/bower.

// 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
});

Load FancyGrid as an ES6 module

Since FancyGrid supports CommonJS, it can be loaded as an ES6 module with the use of transpilers. Two common transpilers are Babel and TypeScript. These have different interpretations of a CommonJS module, which affects your syntax. 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

Include a reference to the FancyGrid library

<script>
Fancy.enableCompo();
</script>
<fancy-grid id="myGrid" data-title="New Grid" data-width="400" data-height="300">
  <fancy-columns>
   [{
     index: 'name',
     title: 'Name',    
     type: 'string'
   },{
     type: 'number',
     index: 'age',
     title: 'Age'
   }]
  </fancy-columns>
  <fancy-data>
    [
      {name: 'Nick', age: 30},
      {name: 'Fred', age: 25},
      {name: 'Mike', age: 35}
    ]
  </fancy-data>
</fancy-grid>

Package Directory

The package includes the following:

|   README.md
├── client
│   ├── fancy.full.min.js
│   ├── fancy.min.js
│   ├── fancy.min.css
│   ├── modules
├── src
│   ├── js
│   ├── less
│   ...

Debug

In case you want to debug FancyGrid there are several approaches.

Debug files

Include css file /client/fancy.css
Include js file /src/js/load-all.js
After that set

Fancy.MODULESLOAD = false;

Debug full build

Include css file /client/fancy.css
Include js file /src/js/fancy.full.js

Debug with auto-loading modules

Include css file /client/fancy.css
Include js file /src/js/fancy.js
Set modules path

Fancy.MODULESDIR = '/client/modules/';
Fancy.DEBUG = true;

Custom build

Debug build

grunt debug

Release build

grunt release

Support

If you need any assistance or would like to report any bugs found in FancyGrid, please contact us at [email protected]