Introduction
A Javascript library to build data grids in your dashboard.
Installation
Using CDN
https://cdn.fusioncharts.com/fusiongrid/latest/fusiongrid.js
https://cdn.fusioncharts.com/fusiongrid/latest/fusiongrid.css
Using npm
npm install fusiongrid
Documentation
https://github.com/fusioncharts/dev_centre_docs/tree/FusionGrid-Docs/fusiongrid
Usage
import FusionGrid from 'fusiongrid';
import 'fusiongrid/dist/fusiongrid.css';
// 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();
Starting the Dev Server
npm install
npm run build
or
yarn install
yarn build
Rollup server is started on npm run watch.