Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/FancyGrid/FancyGrid

FancyGrid - JavaScript grid library with charts integration and server communication.
https://github.com/FancyGrid/FancyGrid

angular chart grid javascript jquery react vue

Last synced: 2 months ago
JSON representation

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

Lists

README 

        
# FancyGrid



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



```html



```

The `FancyGrid` object is now accessible. Happy griding!

```html




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'

  }]

});



});



```



## 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`.*

```js

// 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](https://babeljs.io/) and [TypeScript](https://www.typescriptlang.org/). These have different interpretations of a CommonJS module, which affects your syntax.

*The following examples presumes you are using npm to install FancyGrid.*

### Babel

```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

});

```

### TypeScript

```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.  



### 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]