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

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 \
 -e CHOKIDAR_USEPOLLING=true \
 reactgrid-dev

Licensing

ReactGrid is published under the MIT License (MIT).

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

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Authors

Silevis Software

````