React-fusiongrid NPM

React FusionGrid

This official React component for FusionGrid enables easy integration of JavaScript grids into your React applications, simplifying the process of creating interactive and responsive data grids.

Installation
Getting Started
Quick Start
Working with Events
License

Installation

react-fusiongrid can be installed via npm, yarn, or directly downloaded from the GitHub repository.

Via npm

npm install react-fusiongrid

Via Yarn

yarn add react-fusiongrid

Getting Started

Prerequisites

Node.js and npm or Yarn installed globally.
FusionGrid and React installed in your project.

Quick Start

To quickly set up a grid using react-fusiongrid, follow this basic example:

import React from "react";
import FusionGrid from "fusiongrid";
import { ReactFusionGrid } from "react-fusiongrid";
import "fusiongrid/dist/fusiongrid.css";

// Initialize FusionGrid
ReactFusionGrid.fgRoot(FusionGrid);

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

const 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."],
];

const gridConfig = {
  layout: { density: "compact", autoHeight: true },
  rowOptions: {
    style: { backgroundColor: "oldlace" },
    hover: {
      enable: true,
      style: { backgroundColor: "white" },
    },
  },
};

const dataStore = new FusionGrid.DataStore();
const dataTable = dataStore.createDataTable(data, schema, { enableIndex: false });

// React component
const App = () => (
  <div className="App">
    <ReactFusionGrid width={400} height={400} data={dataTable} config={gridConfig} />
  </div>
);

export default App;

Working with Events

To manage events within your FusionGrid component, define and attach callbacks as follows:

Define the Callback

Use the gridEventCallback as standalone function or as a method in the component class.

function gridEventCallback(eventObj, dataObj) {
  // Implementation here
}

Attach the Callback to an Event

<ReactFusionGrid
  width={400}
  height={400}
  data={dataTable}
  config={gridConfig}
  fgEvent-EVENTNAME={gridEventCallback} // Replace EVENTNAME with the actual event name
/>