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.

Table of Contents

• 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
/>

License

react-fusiongrid is available under the MIT license. The full license text is available in the LICENSE file in the GitHub repository.