https://github.com/fusioncharts/react-fusiongrid
https://github.com/fusioncharts/react-fusiongrid
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/fusioncharts/react-fusiongrid
- Owner: fusioncharts
- Created: 2021-09-14T09:44:16.000Z (almost 4 years ago)
- Default Branch: develop
- Last Pushed: 2024-06-21T14:07:48.000Z (about 1 year ago)
- Last Synced: 2025-01-04T04:47:40.474Z (6 months ago)
- Language: JavaScript
- Size: 1.01 MB
- Stars: 0
- Watchers: 6
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](#installation)
- [Getting Started](#getting-started)
- [Quick Start](#quick-start)
- [Working with Events](#working-with-events)
- [License](#license)
## Installation
`react-fusiongrid` can be installed via npm, yarn, or directly downloaded from the GitHub repository.
### Via npm
```bash
npm install react-fusiongrid
```
### Via Yarn
```bash
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:
```javascript
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 = () => (
);
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.
```javascript
function gridEventCallback(eventObj, dataObj) {
// Implementation here
}
```
### Attach the Callback to an Event
```javascript
```
## License
`react-fusiongrid` is available under the MIT license. The full license text is available in the LICENSE file in the GitHub repository.