Popularity
3.5
Growing
Activity
8.5
Declining
318
10
12

Monthly Downloads: 0
Programming language: TypeScript
License: MIT License
Latest version: v3.1.7

ReactGrid alternatives and similar libraries

Based on the "Editable data grid / spreadsheet" category.
Alternatively, view ReactGrid alternatives based on common mentions on social networks and blogs.

Do you think we are missing an alternative of ReactGrid or a related project?

Add another 'Editable data grid / spreadsheet' Library

README

ReactGrid MIT

Add spreadsheet-like behavior to your React app ๐Ÿš€

MIT license Build Status reactgrid

MIT license npm version

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:

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 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


*Note that all licence references and agreements mentioned in the ReactGrid README section above are relevant to that project's source code only.