DataGridXL & React

Creating a React app

If you don't already have a React app, let's first create one! There are several ways to do so. A common one is Create React App. Open your command prompt and type the following command:

npx create-react-app my-app

Once the default app (named "my-app") has been created, navigate to its directory and run npm start.

cd my-app
npm start

A new browser window should open automatically that opens the local path localhost:3000. If a browser does not open, enter this path manually in your browser window and hit enter. This is what you should see:

Adding DataGridXL

It's time to add DataGridXL. Use this command to install DataGridXL 2:

npm install @datagridxl/datagridxl2

Inside of the src/App.js file, import the newly installed DataGridXL. We're also going to need useRef and useEffect hooks from React, so import those too.

import React, { useRef, useEffect } from 'react';
import DataGridXL from "@datagridxl/datagridxl2";

Make your App.js return the following HTML/JSX. Add a ref attribute to your div and give it a height. We'll use this div as the container for your DataGridXL instance.

return (
  <div className="App">
    <div ref={dgxlRef} style={{height: '400px'}}/>
  </div>
);

Your App.js should now look like this.

import './App.css';

import React, { useRef, useEffect } from 'react';
import DataGridXL from "@datagridxl/datagridxl2";

function App() {

  const dgxlRef = useRef(null);

  // similar to componentDidMount and componentDidUpdate
  useEffect(() => {

    if(!dgxlRef.current.grid){

      // create only once
      dgxlRef.current.grid = new DataGridXL(dgxlRef.current);

    }
  
  }, null)

  return (
    <div className="App">
      <div ref={dgxlRef} style={{height: '400px'}}/>
    </div>
  );
}

export default App;

View this example in Codesandbox.