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.

<link href="" rel="stylesheet">
<script src=""></script>

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 = '';

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>


Run the following command to start your download.

bower install fancygrid


Run the following command to start your download.

npm install fancygrid



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=""></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=""></script>
To use sparklines download and include sparkline library(jQuery library).

Get Started

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