Getting started

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.tsx
import * as React from "react";
import { render } from "react-dom";
import { ReactGrid, Column, Row } from "@silevis/reactgrid";
import "@silevis/reactgrid/styles.css";

Our example requires ReactGrid component, two interfaces: Column , Row 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 wouldn’t make much sense yet. 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 prop, and the other for rows . At the top of the datatable we are going to display static cells that contain Name and Surname so we can define them now. Don’t worry about all the properties of columns and rows objects now - we’ll cover them later on.

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" }
  ]
};

Generate your rows

ReactGrid rows prop expects an array of rows that are compatible with imported rows s interface. As you see this function returns the header row and mapped people array to ReactGrid’s Rows .

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

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 steps. This is easy, and can be done like that:

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

  const rows = getRows(people);

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

Putting it all together

After having followed this guide, your App.tsx 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";

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"));

You can now start the App locally with:

npm start

Or simply play around with the interactive demo below:

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.

Prev:

Introduction

Next:

Implementing core features