React

The GridView React component allows integrating the MindFusion.DataViews API into React applications. It is a wrapper component for the Grid control, handles the rendering and
keeps its DOM in sync with React’s virtual DOM. Grid properties can be set from JSX, and grid events can be handled through JSX syntax as well.

JSX

import dv from '@mindfusion/dataviews';
import { GridView } from '@mindfusion/dataviews-react';
...
var columns = [
    new dv.GridColumn("index", dv.IntegerType, false),
    new dv.GridColumn("name", dv.StringType),
    new dv.GridColumn("registered", dv.DateType),
] 
var model = new dv.ArrayModel(dataArray, columns, "index");
this.state = { model: model };
...
<GridView
    id='view'
    model={this.state.model}
    {...props}
    onRowCreating={(grid, args) => this.onGridRowCreating(grid, args)}
    onRowDeleting={(grid, args) => this.onGridRowDeleting(grid, args)} />

GridView can be installed from the @mindfusion/dataviews-react package on npm:

npm i @mindfusion/dataviews-react