DataViewsJS React Component

Supports React version 15.0.0 or higher.

The DataViewsJS control can be integrated with the DataViewsJS component for React in React JSX syntax. A DataViewsJS React component is a wrapper for the DataViewsJS control it represents. The Component creates a DataViewJS control behind the scenes, and provides a reference to the control instance via the dataView property. The Component also allows you to configure the control options and events declaratively in the React JSX syntax.

DataViewsJS React component is shipped as a separate npm @grapecity/dataviews.react package. The latest version of the package can be installed from npm by executing the following command from NodeJS command prompt:

npm install @grapecity/dataviews.react

See this topic for more details about DataViewsJS npm packages.

After that, you can import React component using ESM import statements. For example, the below import statement imports the DataViewsJS React component:

import DataView from '@grapecity/dataviews.react';

Importing DataViewsJS React Component

With this setup, you can import DataViewsJS React module and use the component it provides. For example, the below code adds a DataViewsJS component with grid layout to App component's JSX:

jsx harmony
import React from 'react';
import DataView from '@grapecity/dataviews.react';
import '@grapecity/dataviews.grid'; // to apply default grid layout
import { getData } from './data';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: getData(),
    };
  }
  render() {
    return <DataView data={this.state.data} />;
  }
}

Please see DataView component for referring the properties and events supported by the component.

The "onCreate" Event

DataViewsJS React component includes an "onCreate" event which is raised after the control is initialized. You can use this event to perform further initalization in addition to setting up the properties in JSX. For example:

jsx harmony
import React from 'react';
import DataView from '@grapecity/dataviews.react';
import '@grapecity/dataviews.grid'; // to apply default grid layout

class App extends React.Component {
  constructor(props) {
    super(props);

    this.initDataView = this.initDataView.bind(this);
  }

  render() {
    return (
      <div>
        <DataView onCreate={this.initDataView} />
      </div>
    );
  }

  initDataView(dataView) {
    // expand some nodes manually
    dataView.data.nodes.forEach(node => {
      node.collapsed = false;
    });

    dataView.invalidate();
  }
}

Creating DataViewsJS Control in Code

DataViewsJS component for React is intended to be used in React JSX. If you want to create a DataViewsJS control in code, you should use a DataViewsJS control from a core module for this purpose, instead of a React component. For example, this code creates a DataViewsJS control in code:

import DataView from '@grapecity/dataviews.core';

let data = [];
let dataView = new DataView('#host_element', data);

Note: To import DataViewsJS control, we use '@grapecity/dataviews.core' module instead of '@grapecity/dataviews.react'.