Tutorial Intro

ezgrid React DataGrid is shipped in 3 packages

@ezgrid/grid-core
@ezgrid/grid-react
@ezgrid/grid-export

Getting Started

What you'll need

This tutorial assumes you have a basic React app set up. If you don't, you can follow the React tutorial to get started.

Demo Console

In case you wish to just get up and running in a sandbox environment, you can use our demo console to get started.

Adding ezgrid React DataGrid to your project

Install ezgrid React DataGrid

npm install @ezgrid/grid-core @ezgrid/grid-react @ezgrid/grid-export

Note: If you're using Yarn, you can use yarn add instead of npm install.

You can type this command into Command Prompt, Powershell, Terminal, or any other integrated terminal of your code editor.

The command also installs all necessary dependencies you need to run ezgrid React DataGrid.

Note: If you do not have requirements for the export functionality, you can skip the @ezgrid/grid-export package. It is not required for the basic functionality of the grid. The installation of the export package will also install jsPDF and FileSaver, which are required for the export functionality as well as exceljs, which is required for the excel export functionality. If you need to customize the export functionality, we recommend you download the source code and embed it into your project, since its very minimal and you can easily customize it to your needs. The source code can be found here. It will call into methods defined in @ezgrid/grid-core, which you should already have installed.

Start your site

Run the development server:

npm run start

The npm run start command builds your website locally and serves it through a development server, ready for you to view at http://localhost:3000/, depending on your configuration.

Open your main file, and add the following import statements:

import { createColumn } from "@ezgrid/grid-core";
import { ReactDataGrid } from "@ezgrid/grid-react";

Next, you will need to import the CSS files for ezgrid React DataGrid. You can do this by adding the following import statements:

import "@ezgrid/grid-core/styles.css"
import "@ezgrid/grid-core/icons.css"

Depending on how your webpack is configured you may need to require the files instead of importing them. You can do this by adding the following code:

require("@ezgrid/grid-core/styles.css")
require("@ezgrid/grid-core/icons.css")

If you are on React v17, you may receive an error like below: Cannot find module '\jsx\node_modules\react\jsx-runtime' imported from \jsx\index.mjs Did you mean to import react/jsx-runtime.j You can resolve this by modifying your webpack config as below:

config.resolve.alias= {
        ...config.resolve.alias,
        "react/jsx-dev-runtime": "react/jsx-dev-runtime.js",
        "react/jsx-runtime": "react/jsx-runtime.js"
      }

You can find a complete running example with React 17 and MUI 4 here

tip

Note: You can just directly reference the CSS files in your HTML file as well. You can find the CSS files in the node_modules/@ezgrid/grid-core folder. We actually recommend you do this, since you can then easily update the CSS files in the future without having to worry about your customizations being overwritten.

Note: If you are planning to use our Material Adapter, then you don't need to import the icons.css file. The Material Adapter will use corresponding Material Icons instead.

At this point, you can start using ezgrid React DataGrid in your project.

You can add the following code to your render method, or in your functional component:

Live Editor

function App() {
  return (
    <ReactDataGrid
      style={{ height: "300px", width: "100%" }}
      gridOptions={{
        dataProvider: [
          {
            id: 1,
            firstName: "John",
            lastName: "Doe",
            age: 30,
            birthDate: new Date(1980, 1, 1),
          },
          {
            id: 2,
            firstName: "Jane",
            lastName: "Doe",
            age: 25,
            birthDate: new Date(1985, 1, 1),
          },
        ],
        uniqueIdentifierOptions: {
          useField: "id",
        },
        columns: [
          createColumn("id", "string", "Id"),
          createColumn("firstName", "string", "First Name"),
          createColumn("lastName", "string", "Last Name"),
          createColumn("age", "number", "Age"),
          createColumn("birthDate", "date", "Birth Date"),
        ],
      }}
    ></ReactDataGrid>
  );
}

function App() {
  return (
    <ReactDataGrid
      style={{ height: "300px", width: "100%" }}
      gridOptions={{
        dataProvider: [
          {
            id: 1,
            firstName: "John",
            lastName: "Doe",
            age: 30,
            birthDate: new Date(1980, 1, 1),
          },
          {
            id: 2,
            firstName: "Jane",
            lastName: "Doe",
            age: 25,
            birthDate: new Date(1985, 1, 1),
          },
        ],
        uniqueIdentifierOptions: {
          useField: "id",
        },
        columns: [
          createColumn("id", "string", "Id"),
          createColumn("firstName", "string", "First Name"),
          createColumn("lastName", "string", "Last Name"),
          createColumn("age", "number", "Age"),
          createColumn("birthDate", "date", "Birth Date"),
        ],
      }}
    ></ReactDataGrid>
  );
}

Result

Imports

Throughout this tutorial, we will be using the a number of imports, like createColumn in the above example. Most of these imports are from the @ezgrid/grid-core package, but some are from the @ezgrid/grid-react package. As you copy and paste code from this tutorial, make sure you import the necessary imports for the code you are copying. Depending on your editor, the editor may automatically import the necessary imports for you.

A few thigs to note here:

The gridOptions object is the main configuration object for the grid. It contains all the information the grid needs to render itself.
The dataProvider is an array of objects. Each object represents a row in the grid. The grid will automatically create columns for each property in the object.
The uniqueIdentifierOptions is an object that contains the information about how to uniquely identify each row in the grid. In this case, we are using the id property of each object in the dataProvider array.
The columns array contains the columns that will be displayed in the grid. In this case, we are creating columns for each property in the dataProvider array. The dataField property is the name of the property in the dataProvider array that the column will be bound to. We use a helper function to create the columns, but you can also create the columns manually.

You will also notice a few things about the grid:

There is a Settings icon in the top left corner of the grid. This is the grid's settings menu. You can use this menu to configure the grid to your needs.
There are icons inside each column header. These are the drag, resize, sort and column menu icons. You can use these icons to drag and drop columns, resize columns, sort columns and open the column menu. The icons can be customized by modifying the styles.css file. We recommend you copy the css declarations from the styles and icons.css file into your own css file and modify them to your needs. This way, you can easily update the icons.css file in the future without having to worry about your customizations being overwritten.

The css classes in the styles.css file for the header icons are:

ezgrid-dg-header-multi-sort::after
ezgrid-dg-header-drag::after
ezgrid-dg-header-resize::after
ezgrid-dg-header-multi-sort::after

While there is a separate section in the documentation for CSS Customizations, we wanted to give you a quick overview of how to customize the grid's appearance by modifying the CSS files, as will cover in a future section.

Tutorial Intro

Getting Started​

What you'll need​

Adding ezgrid React DataGrid to your project​

Install ezgrid React DataGrid​

Start your site​

Getting Started

What you'll need

Adding ezgrid React DataGrid to your project

Install ezgrid React DataGrid

Start your site