Getting started – React Grid Docs

Introduction

In this guide, we're going to build a very simple React App, which will make use of ReactGrid.

Initialize a React App with ReactGrid

Let's create the basis for our App first:

npx create-react-app reactgrid-getting-started --typescript
cd reactgrid-getting-started

The only thing that's missing from our project now is ReactGrid itself. To add it to the dependencies, simply run:

npm install @silevis/reactgrid

Integrate ReactGrid into the App

Once ReactGrid is installed and ready, we can import it in the following way:

// App.js
import * as React from "react";
import { render } from "react-dom";
import { ReactGrid, Column, Row } from "@silevis/reactgrid";
import "@silevis/reactgrid/styles.css";
import "./styles.css";

Our app requires also ReactGrid component from @silevis/reactgrid and CSS styles from @silevis/reactgrid/styles.css.

Define some data to display in the grid

Although we were able to create an empty ReactGrid, it arguably wouldn't make much sense. So let's define some data first, and then feed it into ReactGrid for display. We're going to need two arrays. One for columns, and the other for rows. Don't worry about all of the properties of column and row objects now - we'll cover them later on.

const columns = [
  { columnId: "Name", width: 100 },
  { columnId: "Surname", width: 100 }
];
 
const rows = [
  {
    rowId: 0,
    cells: [
      { type: "header", text: "Name" },
      { type: "header", text: "Surname" },
    ],
  },
  {
    rowId: 1,
    cells: [
      { type: "text", text: "Thomas" },
      { type: "text", text: "Goldman" },
    ],
  },
  {
    rowId: 2,
    cells: [
      { type: "text", text: "Susie" },
      { type: "text", text: "Spencer" },
    ],
  },
  {
    rowId: 3,
    cells: [
      { type: "text", text: "" },
      { type: "text", text: "" },
    ],
  }
];

Pass the data to ReactGrid

We've got everything we need to see ReactGrid in action. It's finally time to use the ReactGrid component we imported earlier, and give it the data we defined in the previous step. This is easy, and can be done like that:

<ReactGrid
  rows={rows}
  columns={columns}
/>

Introduce data

The data we've defined so far is static. There's nothing wrong with that for the tutorial purposes, but in a real application you'll probably wantb to be able to handle dynamic data updates. Let's wrap our rows and columns inside hooks, so that we can easily update them in the future:

function App() {
  const [columns] = React.useState<Column[]>(() => [
    { columnId: "Name", width: 100 },
    { columnId: "Surname", width: 100 }
  ]);
  const [rows] = React.useState<Row[]>(() => [
    {
      rowId: 0,
      cells: [
        { type: "header", text: "Name" },
        { type: "header", text: "Surname" }
      ]
    },
    {
      rowId: 1,
      cells: [
        { type: "text", text: "Thomas" },
        { type: "text", text: "Goldman" }
      ]
    },
    {
      rowId: 2,
      cells: [
        { type: "text", text: "Susie" },
        { type: "text", text: "Spencer" }
      ]
    },
    {
      rowId: 3,
      cells: [
        { type: "text", text: "" },
        { type: "text", text: "" }
      ]
    }
  ]);
  // [...]
}

Putting it all together

After having followed this guide, your App.js file should look more or less like this:

import * as React from "react";
import { render } from "react-dom";
import { ReactGrid, Column, Row } from "@silevis/reactgrid";
import "@silevis/reactgrid/styles.css";
import "./styles.css";
 
function App() {
  const [columns] = React.useState<Column[]>(() => [
    { columnId: "Name", width: 100 },
    { columnId: "Surname", width: 100 }
  ]);
  const [rows] = React.useState<Row[]>(() => [
    {
      rowId: 0,
      cells: [
        { type: "header", text: "Name" },
        { type: "header", text: "Surname" }
      ]
    },
    {
      rowId: 1,
      cells: [
        { type: "text", text: "Thomas" },
        { type: "text", text: "Goldman" }
      ]
    },
    {
      rowId: 2,
      cells: [
        { type: "text", text: "Susie" },
        { type: "text", text: "Spencer" }
      ]
    },
    {
      rowId: 3,
      cells: [
        { type: "text", text: "" },
        { type: "text", text: "" }
      ]
    }
  ]);
 
  return (
    <ReactGrid
      rows={rows}
      columns={columns}
    />
  );
}
 
export default App;

You can now start the App locally with:

npm start

Or simply play around with the interactive demo below:

Code


  interface Person {
  name: string;
  surname: string;
}

const getPeople = (): Person[] => [
  { name: "Thomas", surname: "Goldman" },
  { name: "Susie", surname: "Quattro" },
  { name: "", surname: "" }
];

const getColumns = (): Column[] => [
  { columnId: "name", width: 150 },
  { columnId: "surname", width: 150 }
];

const headerRow: Row = {
  rowId: "header",
  cells: [
    { type: "header", text: "Name" },
    { type: "header", text: "Surname" }
  ]
};

const getRows = (people: Person[]): Row[] => [
  headerRow,
  ...people.map<Row>((person, idx) => ({
    rowId: idx,
    cells: [
      { type: "text", text: person.name },
      { type: "text", text: person.surname }
    ]
  }))
];

function App() {
  const [people] = React.useState<Person[]>(getPeople());

  const rows = getRows(people);
  const columns = getColumns();

  return <ReactGrid rows={rows} columns={columns} />;
}

render(<App />, document.getElementById("root"));

Preview

Summary

You should now have a basic understanding of what ReactGrid is and how it can be used. Continue to the next page for more advanced usage examples.

UncertainCompatible Implementing core features