FusionGrid: Interactive JavaScript Data Grids

Introduction

FusionGrid is a highly responsive, customizable JavaScript data grid component that seamlessly integrates with the datastore used by FusionCharts. This compatibility makes FusionGrid an ideal solution for enhancing your dashboards with sophisticated data visualization capabilities.

Designed to deliver a flawless experience across all modern browsers, FusionGrid ensures your dashboards look great on any device. Start building more dynamic, interactive dashboards with FusionGrid today!

Learn more about FusionGrid and its features at our Dev Center.

Installation

Using a CDN

To quickly incorporate FusionGrid into your project, include the following links in your HTML to load FusionGrid’s JavaScript and CSS files:

<script src="https://cdn.fusioncharts.com/fusiongrid/latest/fusiongrid.js"></script>
<link rel="stylesheet" href="https://cdn.fusioncharts.com/fusiongrid/latest/fusiongrid.css">

Using npm

For Node.js based projects, you can install FusionGrid using npm:

npm install fusiongrid

Usage

Below is a basic example to get you started with FusionGrid:

import FusionGrid from 'fusiongrid';
import 'fusiongrid/dist/fusiongrid.css';

// Define the schema for the data
const schema = [
    { name: 'Rank', type: 'number' },
    { name: 'Model' },
    { name: 'Make' },
    { name: 'Units Sold', type: 'number' },
    { name: 'Assembly Location' }
];

// Sample data array
const data = [
    [1, "F-Series", "Ford", 896526, "Claycomo, Mo."],
    [2, "Pickup", "Ram", 633694, "Warren, Mich."],
    // Add additional data rows here
];

// Select the HTML container where the grid will be rendered
const container = document.getElementById('grid-container');

// Initialize the datastore and create a data table
const dataStore = new FusionGrid.DataStore();
const dataTable = dataStore.createDataTable(data, schema, { enableIndex: false });

// Initialize FusionGrid with the container and data table
const grid = new FusionGrid(container, dataTable, {});

// Render the grid
grid.render();

This code snippet demonstrates the basic steps to set up FusionGrid in your web application: importing the library, preparing the data schema, initializing the grid, and rendering it in the specified container.