JavaScript grid library with charts integration and server communication
npm install fancygrid
npm install fancygrid
`
#### CDN
`
https://cdn.jsdelivr.net/npm/fancygrid/client/fancy.min.css
https://cdn.jsdelivr.net/npm/fancygrid/client/fancy.min.js
`
Quick Start
Include a reference to the FancyGrid library
`html
`
The FancyGrid object is now accessible. Happy griding!
`html
`
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.
$3
`js
import Fancy from 'fancygrid';
// Generate the grid
Fancy.Grid({
// config
});
// Generate the form
new Fancy.Form({
//config
});
// Generate the tabs
new Fancy.Tab({
//config
});
`
$3
`js
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
});
`
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.
$3
Include css file `/client/fancy.css`
Include js file `/src/js/load-all.js`
After that set
`
Fancy.MODULESLOAD = false;
`
$3
Include css file `/client/fancy.css`
Include js file `/src/js/fancy.full.js`
$3
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
$3
`
grunt debug
`
$3
`
grunt release
``