FancyGrid / FancyGrid

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

Home Page:https://fancygrid.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

FancyGrid

FancyGrid is frozen

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

Build v1.7.176

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

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 support@fancygrid.com

About

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

https://fancygrid.com

License:Other


Languages

Language:JavaScript 85.2%Language:CSS 7.5%Language:Less 7.3%