TypeScript icon, indicating that this package has built-in type declarations

    3.1.21 • Public • Published

    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: 👉 reactgrid.com

    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[] => [
      ...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 {
    } 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 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




    npm i @silevis/reactgrid

    DownloadsWeekly Downloads






    Unpacked Size

    1.4 MB

    Total Files


    Last publish


    • patryk0493