ES6/TypeScript 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.

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

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

Production

FancyGrid consists of modules. It helps much to keep bundle size small.
But for production it requires to execute extra complex steps.

If you installed FancyGrid over npm and uses ES6/TypeScript than this section is for you.
By default FancyGrid includes core small module that auto-detects which modules will be used.
Than modules will be loaded from path that was provided in Fancy.MODULESDIR.
By default Fancy.MODULESDIR is equal to https://cdn.fancygrid.com/modules/ You can study about modules by this link Modules.

JavaScript Modules

You would need to get list of all modules that are used. For that open run open Web Console in browser and run this.
Fancy.getModulesList();
You would get something like that: ["paging", "server-data", "sort", "grouping", "filter", "tree", "dom", "ajax", "menu", "form", "grid"]. Now, open file where you include grid and import modules.

import Fancy from 'fancygrid';

import 'fancygrid/client/modules/sort.min';
import 'fancygrid/client/modules/dom.min';
import 'fancygrid/client/modules/edit.min';
import 'fancygrid/client/modules/grid.min';
import 'fancygrid/client/modules/selection.min';
import 'fancygrid/client/modules/menu.min';
import 'fancygrid/client/modules/exporter';
import 'fancygrid/client/modules/excel.min';

If you would need to debug the code, than remove .min from modules.

i18n

On case you use localization that you would need to include lang module.
Add this line.

import 'fancygrid/client/modules/i18n/de';

CSS file

The next thing to do is including css file.
For that after including modules add this lines.

import 'fancygrid/client/fancy.min.css';
Fancy.stylesLoaded = true;

The first line is including css file.
The second one is stoping FancyGrid from loading styles file by self.

That's it.