Installation

In this document you will learn several approaches of including FancyGrid.
FancyGrid is plugin-free library, it has no dependencies from other libraries.
FancyGrid has integration with Angular, React, Vue, jQuery and chart libraries (HighCharts and JS SparkLines).

Include FancyGrid

Include files from CDN

Include the JavaScript files in the <head> section of your web page as shown below.
From the version 1.7.177 FancyGrid uses public CDN - jsDelivr

<script src="https://cdn.jsdelivr.net/npm/fancygrid/client/fancy.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/fancygrid/client/fancy.min.css" rel="stylesheet">

Alternatively load files from own domain

Download Latest Build and include files to your page.

<link href="/fancygrid/fancy.min.css" rel="stylesheet">
<script src="/fancygrid/fancy.min.js"></script>

FancyGrid has intelligent modules system that
auto detects and loads all needed modules by self.

If you include files from own domain than set modules dir url.


Fancy.MODULESDIR = '/fancygrid/modules/';
By default, it is set

Fancy.MODULESDIR = 'https://cdn.jsdelivr.net/npm/fancygrid/client/modules/';

Full built

Another way of including is full built.
In this case modules system will not load any module.


<link href="/fancygrid/fancy.min.css" rel="stylesheet">
<script src="/fancygrid/fancy.full.min.js"></script>

npm

Run the following command to start your download.


npm install fancygrid

Integration

JQuery

FancyGrid is integrated with jQuery.
If jQuery is included to page than FancyGrid will switch to use it's API.

In this case include JQuery on the page.
For example.


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

Angular, React, Vue, TypeScript, ES6

In this section "Getting Started" there are articles for each solution.

For Chart samples

To use chart integration include HighCharts.


<script src="http://code.highcharts.com/highcharts.js"></script>
To use sparklines download and include sparkline library(jQuery library).
http://omnipotent.net/jquery.sparkline/

Get Started

Now you are ready to use FancyGrid.
See Your first grid to get started.
`