FancyGrid was founded in 2015 and during these years got clients from all over the world.
5% of Fortune 500 list is using our product and we are proud of it.
It is an honour for us that between our clients are companies: Airbus, Central Bank of Brazil, Intel, Kia Motors, PwC, SanDisk, Siemens and many others.
But the JavaScript data grid market is very competitive.
We did all on self money and could not find venture investments.
Our main competitor ag-Grid burnt out the market and now in fact is the monopolist.
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 support@fancygrid.com