FancyGrid Documentation

Docs

API

React Grid Component

React is one the most popular JavaScript framework.
Almost all JavaScript libraries do some component wrapper for frameworks (React, Angular, Vue), we either.
To do component for React is simple thing.
Let us start from 2 samples of wrapper for FancyGrid on JSFiddle.
Link on sample React Grid Component
Link on sample React Form Component

If these 2 samples are complex for you than we advice to spend several hours with React Tutorial from official site QUICK START.
You can run them on JSFiddle that avoid complex issues with webpack and other tools.

If you feel ok with React than let us start

Add FancyGrid to Your Project

For the purposes of this tutorial, we are going to scaffold a react app with create-react-app. Don't worry if your project has a different configuration. FancyGrid and the React wrapper are distributed as NPM packages, which should work with any common React project module bundler setup. Let's follow the create-react-app instructions - run the following commands in your terminal:


npx create-react-app my-app
cd my-app
npm start

npx comes with npm 5.2+ and higher, see instructions for older npm versions

If everything goes well, npm start has started the web server and conveniently opened a browser pointing to localhost:3000.

As a next step, let's add the FancyGrid NPM package. run the following command in my-app (you may need a new instance of the terminal):


npm install --save fancygrid fancygrid-react

After a few seconds of waiting, you should be good to go. Let's get to the actual coding! Open src/App.js in your favorite text editor and change its contents to the following:


import React, { Component } from 'react';
import { FancyGridReact } from 'fancygrid-react';

class App extends Component {
    constructor(props) {
        super(props);
    }

    render() {
      return (
        <div>
          <FancyGridReact
			config={this.getConfig()}>
          </FancyGridReact>
        </div>
      );
    }
	
	getConfig() {
	  return {
	    height: 400,
		width: 500,
		columns: [{
          index: 'company',
		  title: 'Company',
		  type: 'string',
		  width: 100
		}, {
		  index: 'name',
		  title: 'Name',
		  type: 'string',
		  width: 100
		}, {
		  index: 'surname',
		  title: 'Sur Name',
		  type: 'string',
		  width: 100
		}, {
		  index: 'age',
		  title: 'Age',
		  type: 'number',
		  width: 100
        }],
        data: [
          {name: 'Ted', surname: 'Smith', company: 'Electrical Systems', age: 30},
		  {name: 'Ed', surname: 'Johnson', company: 'Energy and Oil', age: 35},
		  {name: 'Sam', surname: 'Williams',  company: 'Airbus', age: 38},
		  {name: 'Alexander', surname: 'Brown', company: 'Renault', age: 24},
		  {name: 'Nicholas', surname: 'Miller', company: 'Adobe', age: 33}
        ]
	  }
	}
}

export default App;

If everything is correct, we should see a simple grid with several rows.
Let's go over the App.js changes we made.


import { FancyGridReact } from 'fancygrid-react';

The line above imports the FancyGridReact component.
For simplicity we can do like this:


import { Grid } from 'fancygrid-react';

FancyGrid React package contains 3 full and 3 short names of components:
FancyGridReact, FancyFormReact, FancyTabReact and Grid, Form, Tab.
In next samples we will use short version.

Continue study the sample.


render() {
  return (
    <div>
      <FancyGridReact
		config={this.getConfig()}>
      </FancyGridReact>
    </div>
 );
}

Inside the container, we place an FancyGridReact component with the configuration object (config) that runs method getConfig.
We place all grid options in one param for simplicity but it is possible to define each property seperately.
Let us change code a bit.


import React, { Component } from 'react';
import { Grid } from 'fancygrid-react';

class App extends Component {
    constructor(props) {
        super(props);
    }

    render() {
      return (
        <div>
          <Grid
			height={400}
			width={500}
			columns={this.getColumns()}
			data={this.getData()}>
          </Grid>
        </div>
      );
    }
	
	getColumns() {
	  return [{
		  index: 'company',
		  title: 'Company',
		  type: 'string',
		  width: 100
		}, {
		  index: 'name',
		  title: 'Name',
		  type: 'string',
		  width: 100
		}, {
		  index: 'surname',
		  title: 'Sur Name',
		  type: 'string',
		  width: 100
		}, {
		  index: 'age',
		  title: 'Age',
		  type: 'number',
		  width: 100
		}];
	}
	
	getData() {
	  return [
		  {name: 'Ted', surname: 'Smith', company: 'Electrical Systems', age: 30},
		  {name: 'Ed', surname: 'Johnson', company: 'Energy and Oil', age: 35},
		  {name: 'Sam', surname: 'Williams',  company: 'Airbus', age: 38},
		  {name: 'Alexander', surname: 'Brown', company: 'Renault', age: 24},
		  {name: 'Nicholas', surname: 'Miller', company: 'Adobe', age: 33}
		];
	}
}

export default App;

What did we change?

Shot component name.


import { Grid } from 'fancygrid-react';

Multi properties instead of one(config).


render() {
  return (
	<div>
	  <Grid
		height={400}
		width={500}
		columns={this.getColumns()}
		data={this.getData()}>
	  </Grid>
	</div>
  );
}

And 2 methods that just return arrays of columns and data.

Next, let us add them, enable sorting for all columns, add row selecting and row trackOver.
Now our render method will looks like:


render() {
  return (
	<div>
	  <Grid
		selModel='rows'
		theme='gray'
		height={400}
		width={500}
		defaults={{sortable: true}}
		trackOver={true}
		columns={this.getColumns()}
		data={this.getData()}>
	  </Grid>
	</div>
  );
}

Also it needs to add one more column for row selection.


getColumns() {
  return [{
	  type: 'select'
	},{
	  index: 'company',
	  title: 'Company',
	  type: 'string',
	  width: 100

The final result will be like this:


import React, { Component } from 'react';

import { Grid } from 'fancygrid-react';

class App extends Component {
    constructor(props) {
        super(props);
    }

    render() {
      return (
        <div>
          <Grid
		    selModel='rows'
			theme='gray'
			height={400}
			width={500}
			defaults={{sortable: true}}
			trackOver={true}
			columns={this.getColumns()}
			data={this.getData()}>
          </Grid>
        </div>
      );
    }
	
	getColumns() {
	  return [{
		  type: 'select'
	    },{
		  index: 'company',
		  title: 'Company',
		  type: 'string',
		  width: 100
		}, {
		  index: 'name',
		  title: 'Name',
		  type: 'string',
		  width: 100
		}, {
		  index: 'surname',
		  title: 'Sur Name',
		  type: 'string',
		  width: 100
		}, {
		  index: 'age',
		  title: 'Age',
		  type: 'number',
		  width: 100
		}];
	}
	
	getData() {
	  return [
		  {name: 'Ted', surname: 'Smith', company: 'Electrical Systems', age: 30},
		  {name: 'Ed', surname: 'Johnson', company: 'Energy and Oil', age: 35},
		  {name: 'Sam', surname: 'Williams',  company: 'Airbus', age: 38},
		  {name: 'Alexander', surname: 'Brown', company: 'Renault', age: 24},
		  {name: 'Nicholas', surname: 'Miller', company: 'Adobe', age: 33}
		];
	}
}

export default App;

Events and API

To manipulate grid it requires to get link on it.
Read more about method here Methods.
To use events it requires to set param events.
So let us try.


render() {
  return (
	<div>
	  <Grid
	    title='My Grid'
	    id='myGrid'
		selModel='rows'
		theme='gray'
		height={400}
		width={500}
		defaults={{sortable: true}}
		trackOver={true}
		events={this.getEvents()}
		columns={this.getColumns()}		
		data={this.getData()}>
	  </Grid>
	</div>
  );
}

getEvents() {
  return [{
    init: this.onGridInit
  }];
}

onGridInit = (grid) => {
  setTimeout(function(){
    grid.setTitle('New Title');
  }, 1000);
}

In the code above we will change grid title in 1 second since grid was initialized.

Getting link on grid

Very often it requires to get link grid to use methods.
For that it requires to import object Fancy, set id for widget.


import { Fancy, Grid } from 'fancygrid-react';
...
render() {
  return (
	<div>
	  <Grid
	    id='myGrid'
		...
	  </Grid>
	</div>
  );
}

...

//Somewhere in the code.
const grid = Fancy.getWidget('myGrid');
grid.setTitle('New Title');

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 src/App.js and import modules.


import { Fancy, Grid } from 'fancygrid-react';

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.