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: about 9 hours ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/fancygrid/fancygrid
• Owner: FancyGrid
• License: other
• Created: 2016-07-25T07:33:26.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2024-08-22T08:32:50.000Z (5 months ago)
• Last Synced: 2024-12-23T12:04:55.234Z (18 days ago)
• Topics: angular, chart, grid, javascript, jquery, react, vue
• Language: JavaScript
• Homepage: https://fancygrid.com
• Size: 12.4 MB
• Stars: 207
• Watchers: 18
• Forks: 49
• Open Issues: 39
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# FancyGrid

Build v1.7.180

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

  

## Install

#### *npm*

```

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



document.addEventListener("DOMContentLoaded", () => {

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