Build v1.7.176
FancyGrid - JavaScript grid library with charts integration and server communication.
bower install fancygrid
npm install fancygrid
https://cdn.fancygrid.com/fancy.min.js
https://cdn.fancygrid.com/fancy.min.css
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>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
});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.
import Fancy from 'fancygrid';
// Generate the grid
Fancy.Grid({
// config
});
// Generate the form
new Fancy.Form({
//config
});
// Generate the tabs
new Fancy.Tab({
//config
});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
});The package includes the following:
| README.md
├── client
│ ├── fancy.full.min.js
│ ├── fancy.min.js
│ ├── fancy.min.css
│ ├── modules
├── src
│ ├── js
│ ├── less
│ ...
In case you want to debug FancyGrid there are several approaches.
Include css file /client/fancy.css
Include js file /src/js/load-all.js
After that set
Fancy.MODULESLOAD = false;
Include css file /client/fancy.css
Include js file /src/js/fancy.full.js
Include css file /client/fancy.css
Include js file /src/js/fancy.js
Set modules path
Fancy.MODULESDIR = '/client/modules/';
Fancy.DEBUG = true;
grunt debug
grunt release
If you need any assistance or would like to report any bugs found in FancyGrid, please contact us at [email protected]
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent