DevExtreme React Grid — Basic Setup

This post is part of a series about the DevExtreme React Grid. You can find the introduction and overview to the post series by following this link.

Getting started

Most applications that use React are developed with some kind of build environment. Many introductions and tutorials exist for React, including the one on the project website, so I’m not going to reproduce this part here.

As a quick and easy way tool to create a new React based app, using a standard build environment, I recommend create-react-app.

On the basis of a React application, we have a short getting started section on the first page of the React Grid documentation. I didn’t have any trouble getting the React Grid to work correctly following these instructions, but please let me know in case you encounter any issues!

For the purposes of this blog series, I decided to prepare a few examples in JSFiddle. In each of these “Fiddles”, you can see in the External Resources section on the sidebar how I’ve added the required references. This is not a generally recommended approach for real-world applications! For demos however, it is brilliant since you can play with my samples directly.

The most basic Grid setup

My first example shows a realistic minimum configuration. You can see the Fiddle a few paragraphs below and I’ll explain the code of the demo here.

At the top of the file, you see the one line of code that would be different if I weren’t working in a Fiddle:

const { Grid, TableView, TableHeaderRow } =
  DevExpress.DXReactGridBootstrap3;

I included a comment in the Fiddle to point out the difference. Whichever syntax you use, you end up with the three elements Grid, TableView and TableHeaderRow, which are now available for use in the rest of the code. The TableHeaderRow is technically optional, but I decided to include it in my miminum setup to create a recognizable grid appearance.

class App extends React.PureComponent {

This line creates a new component called App. It is derived from the React PureComponent, the recommended base class for most React components since React version 15.3.

In the constructor of the component, I preset the component state to include a column definition and some sample data:

constructor(props) {
  super(props);
    
  this.state = {
    columns: [
      { name: 'name', title: 'Name' },
      { name: 'artist', title: 'Artist'},
      { name: 'year', title: 'Year' }
    ],
    rows: [ ... ]
  };
}

Of course your data would probably come from some other source in most real-world applications, but it is easy to see that you would only need to initialize the state in some other way to apply any real-world data retrieval technique you use.

The render function of the component retrieves the two lists columns and rows from state and then returns a JSX structure that renders the three components I loaded at the start of the code. The column and row content is included by means of the curly brace expressions, and thereby passed to the Grid element.

render() {
  const { rows, columns } = this.state;
    
  return (
    <Grid rows={rows} columns={columns}>
      <TableView />
      <TableHeaderRow />
    </Grid>
  );
}

The TableView and TableHeaderRow are plugins to the Grid, which is why they appear nested as children.

Note that the order of plugin elements is important! The TableHeaderRow could not possibly do its job if a TableView weren't available first. Keep this in mind for all plugins: order is relevant. Our documentation pages define dependencies of each plugin, right at the top of each page.

The final line of this first demo renders the App component into the HTML page. The latter contains nothing but one div: <div id="app"></div>.

Here’s the Fiddle that shows the steps of this first example. Please note that you can click the Edit in JSFiddle link in the top right corner to bring up the full editor.

Click here to return to the blog series overview

Originally published at https://community.devexpress.com/blogs/oliver/archive/2017/07/04/devextreme-react-grid-basic-setup.aspx.