Skip to content
Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.

ReactGrid MIT

Add spreadsheet-like behavior to your React app 🚀

MIT license Build Status reactgrid

MIT license npm version

Sample app

Browse our examples & docs: 👉

Before running ReactGrid you need to have installed:

  • react": "^16.13.1"
  • react-dom: "^16.13.1"


npm i @silevis/reactgrid


In this particullar example we will display data in the same way like in a standard datatable. Of course you can still place yours cells anywhere, but now we will focus on the basics.

Import ReactGrid component

import { ReactGrid, Column, Row } from "@silevis/reactgrid";

Import CSS styles

Import basic CSS styles. This file is necessary to correctly display ReactGrid.

import "@silevis/reactgrid/styles.css";

Create a cell matrix

It's a good idea to separate up our data (people list) from ReactGrid interface (especially Row and Column). We encourage you to use Typescript features to prevent you from the possibly inconsistent data.

interface Person {
  name: string;
  surname: string;

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

In the next step we have defined an array of ReactGrid's Columns stored in getColumns function. If you are interested how to do more complex operations related with columns like resizing or reordering, please browse our 👉 docs

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

At the top of the datatable we are going to display static cells that contain Name and Surname so we can define them now.

const headerRow: Row<HeaderCell> = {
  rowId: "header",
  cells: [
    { type: "header", text: "Name" },
    { type: "header", text: "Surname" },

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

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

The last step is wrapping it all up in the App component. People were stored inside people variable as React hook. ReactGrid component was fed with generated rows structure and previously defined columns

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

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

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

Open live demo on

Handling changes

Our code is currently read-only. To be able to change any value inside the grid you have to implement your own handler.

Let's start with updating imports:

import {
} from "@silevis/reactgrid";

Then define the function that applies changes to data and returns its copy. We expect that incoming changes affect TextCell, so the changes were marked by a following interface: CellChange<TextCell>[]. Given that information, we find the row and the column affected by each change, and then replace an appropriate cell text with a new one.

const applyChangesToPeople = (
  changes: CellChange<TextCell>[],
  prevPeople: Person[]
): Person[] => {
  changes.forEach((change) => {
    const personIndex = change.rowId;
    const fieldName = change.columnId;
    prevPeople[personIndex][fieldName] = change.newCell.text;
  return [...prevPeople];

It's time to update the App component. As you see the handleChanges function updates only data by setting updated people from applyChangesToPeople function.

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

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

  const handleChanges = (changes: CellChange<TextCell>[]) => {
    setPeople((prevPeople) => applyChangesToPeople(changes, prevPeople));

  return (
    <ReactGrid rows={rows} columns={columns} onCellsChanged={handleChanges} />

Open live demo on

Other examples:

Browser support

Edge Edge Firefox Firefox Chrome Chrome Safari Safari iOS Safari iOS/iPadOs Safari Samsung Samsung internet Opera Opera
80+ 61+ 57+ 13.1+ 13+ 9+ 45+


Explore ReactGrid docs: here

For devs

Buiding image with docker 🐳:

docker build -t reactgrid-dev .

Running the container:

docker run \
 -it \
 --rm \
 -v ${PWD}:/app \
 -v /app/node_modules \
 -p 3000:3000 \


ReactGrid is available in two versions, MIT (this package) which serve the full interface but is limited in functionality and PRO which is a fully functional version. You can compare versions here.

(c) 2020 Silevis Software Sp. z o.o.


Silevis Software