Choose an item Overview

Overview and Install FusionGrid

Overview

FusionGrid provides a data grid component that is highly customizable and blends nicely with your website or mobile application. This data grid allows you to display millions of records with filtering, sorting, and grouping capabilities.

It is lightweight and customizable, and it works with both web and mobile applications. It allows you to build data grids in dashboards with the same simplicity and elegance as FusionCharts. The goal of FusionGrid is to provide an intuitive, clean, easy-to-use, and fully responsive data grid solution that works seamlessly on all modern browsers. FusionGrid offers unparalleled flexibility and power with blazing speed and superior quality with an array of features under its belt.

How FusionGrid Works

FusionGrid is an enterprise-class, JavaScript-based data grid component created to deliver a fast and feature-rich data visualization experience. FusionGrid comes along with some of the following features:

In this article, we will walk you through the necessary steps to add FusionGrid to an existing JavaScript project. In this tutorial, we will be rendering an automobile ranking grid.

Installing FusionGrid

You can install 'fusiongrid' via the CDN/local directory or using npm.

Install using CDN#

To install FusionGrid, let’s include the JavaScript files and CSS from CDN/local directory. 

https://cdn.fusioncharts.com/fusiongrid/latest/fusiongrid.js
https://cdn.fusioncharts.com/fusiongrid/latest/fusiongrid.css
Were you able to implement this?

Install using npm#

Open the terminal and follow the example below:

npm install fusiongrid
Were you able to implement this?

Using FusionGrid#

After installation we are ready to start of first grid. Define a schema and gather your data.

Grid preparation#

The following is a step by step example on how to start your grid.

<!doctype html>
<html>
  <head>
        <!-- FusionGrid JS files -->
    <script src="https://cdn.fusioncharts.com/fusiongrid/latest/fusiongrid.js"></script>
    <link rel="stylesheet" href="https://cdn.fusioncharts.com/fusiongrid/latest/fusiongrid.css">
  </head>
  <body>
    <h1>Hello from FusionGrid!</h1>
  </body>
</html>
Were you able to implement this?

Next, let’s add an 'HTML' div along with 'width' and 'height' styles. This div will be used as a container to render the grid.

<!doctype html>
<html>
  <head>
        <!-- FusionGrid JS files -->
    <script src="https://cdn.fusioncharts.com/fusiongrid/latest/fusiongrid.js"></script>
    <link rel="stylesheet" href="https://cdn.fusioncharts.com/fusiongrid/latest/fusiongrid.css">
  </head>
  <body>
    <h1>Hello from FusionGrid!</h1>
    <div id="grid-container" style="width: 100%; height: 450px;"></div>
  </body>
</html>
Were you able to implement this?

FusionGrid uses FusionDataStore, an in-browser tabular data storage. Like most of the grid libraries, instead of asking you to convert your data to ‘our format’, FusionDataStore lets you define your own data schema and pass the data to FusionGrid accordingly. The following is an example of the automobile ranking grid.

Let’s start by defining the schema.

var schema = [
  {
    name: 'Rank',
    type: 'number',
  },
  {
    name: 'Model'
  },
  {
    name: 'Make'
  },
  {
    name: 'Units Sold',
    type: 'number'
  },
  {
    name: 'Assembly Location'
  }
];
Were you able to implement this?

Next, let’s define the data based on the above schema.

var data = [
  [1, "F-Series", "Ford", 896526, "Claycomo, Mo."],
  [2, "Pickup", "Ram", 633694, "Warren, Mich."],
  [3, "Silverado", "Chevrolet", 575600, "Springfield, Ohio"],
  [4, "RAV4", "Toyota", 448071, "Georgetown, Ky."],
  [5, "CR-V", "Honda", 384168, "Greensburg, Ind."],
  [6, "Rogue", "Nissan", 350447, "Smyrna, Tenn."],
  [7, "Equinox", "Chevrolet", 346048, "Arlington, Tex."],
  [8, "Camry", "Toyota", 336978, "Georgetown, Ky."],
  [9, "Civic", "Honda", 325650, "Greensburg, Ind."],
  [10, "Corolla", "Toyota", 304850, "Blue Springs, Miss."],
  [11, "Accord", "Honda", 267567, "Marysville, Ohio"],
  [12, "Tacoma", "Toyota", 248801, "San Antonio, Tex."],
  [13, "Grand Cherokee", "Jeep", 242969, "Detroit, Mich."],
  [14, "Escape", "Ford", 241338, "Louisville, Ky."],
  [15, "Highlander", "Toyota", 239438, "Princeton, Ind."],
  [16, "Sierra", "GMC", 232325, "Flint, Mich."],
  [17, "Wrangler", "Jeep", 228032, "Toledo, Ohio"],
  [18, "Altima", "Nissan", 209183, "Smyrna, Tenn."],
  [19, "Cherokee", "Jeep", 191397, "Belvidere,     Ill."],
  [20, "Sentra", "Nissan", 184618, "Canton, Miss."],
];
Were you able to implement this?

Notice the order of data in the array items. It follows the same order as defined in the schema: Rank, Model, Make, Units Sold, Assembly Location. If you decide to shuffle the order of properties in the schema, then your data should also reflect in the same way. Now that we have defined the schema and data, let’s pass it to FusionDataStore by creating a data table:

var dataStore = new FusionGrid.DataStore();
var dataTable = dataStore.createDataTable(data, schema, {
  enableIndex: false
});
Were you able to implement this?

Rendering the Grid#

Now, that we have all the dependencies ready, we render our grid as shown below.

// Preparing the schema and data

var schema = [
    {
        name: 'Rank',
        type: 'number',
    }, {
        name: 'Model'
    },
    {
        name: 'Make'
    },
    {
        name: 'Units Sold',
        type: 'number'
    },
    {
        name: 'Assembly Location'
    }
];

 var data = [
    [1, "F-Series", "Ford", 896526, "Claycomo, Mo."],
    [2, "Pickup", "Ram", 633694, "Warren, Mich."],
    [3, "Silverado", "Chevrolet", 575600, "Springfield, Ohio"],
    [4, "RAV4", "Toyota", 448071, "Georgetown, Ky."],
    [5, "CR-V", "Honda", 384168, "Greensburg, Ind."],
    [6, "Rogue", "Nissan", 350447, "Smyrna, Tenn."],
    [7, "Equinox", "Chevrolet", 346048, "Arlington, Tex."],
    [8, "Camry", "Toyota", 336978, "Georgetown, Ky."],
    [9, "Civic", "Honda", 325650, "Greensburg, Ind."],
    [10, "Corolla", "Toyota", 304850, "Blue Springs, Miss."],
    [11, "Accord", "Honda", 267567, "Marysville, Ohio"],
    [12, "Tacoma", "Toyota", 248801, "San Antonio, Tex."],
    [13, "Grand Cherokee", "Jeep", 242969, "Detroit, Mich."],
    [14, "Escape", "Ford", 241338, "Louisville, Ky."],
    [15, "Highlander", "Toyota", 239438, "Princeton, Ind."],
    [16, "Sierra", "GMC", 232325, "Flint, Mich."],
    [17, "Wrangler", "Jeep", 228032, "Toledo, Ohio"],
    [18, "Altima", "Nissan", 209183, "Smyrna, Tenn."],
    [19, "Cherokee", "Jeep", 191397, "Belvidere, Ill."],
    [20, "Sentra", "Nissan", 184618, "Canton, Miss."],
];

// Getting the grid-container
var container = document.getElementById('grid-container-for-card');

// Passing data through DataStore
var dataStore = new FusionGrid.DataStore();
var dataTable = dataStore.createDataTable(data, schema, {
    enableIndex: false
});
var grid = new FusionGrid(container, dataTable, {});

// Render the grid
grid.render();
Were you able to implement this?

See Your Grid#

Automobile Ranking

Next Steps#

After you have installed FusionGrid for the framework of your choice, refer to the following tutorials to get started with grids: