ReactGrid MIT

Add spreadsheet-like behavior to your React app 🚀

Browse our examples & docs: 👉 reactgrid.com

Before running ReactGrid you need to have installed:

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

Install

npm i @silevis/reactgrid

Usage

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,
  ...people.map<Row>((person, idx) => ({
    rowId: idx,
    cells: [
      { type: "text", text: person.name },
      { 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 codesandbox.io

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 { ReactGrid, Column, Row, CellChange, TextCell} 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 codesandbox.io

Other examples:

• Creating custom cell template
• Sticky panes
• Chevron cell example
• Cell highlights
• Custom styles
• and a lot more here

Browser support

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

Docs

Explore ReactGrid docs: here

Licensing

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.

Authors

Silevis Software