Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including @silevis/reactgrid with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. require("react-dom/package.json"); // react-dom is a peer dependency. var reactgrid = require("@silevis/reactgrid")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@silevis/reactgrid v3.1.5

Add spreadsheet-like behavior to your React app.

ReactGrid MIT

Add spreadsheet-like behavior to your React app 🚀

MIT license Build Status reactgrid

Gitter MIT license npm version

Sample app

Browse our examples & docs: 👉 reactgrid.com

Before run you need to have installed:

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

Install

npm i @silevis/reactgrid

Usage

Import ReactGrid component

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

Import css styles

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

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

Create a cell matrix

Time to define our data. It will be stored in React Hook. useState hook will be initialized with an object that contains two keys - columns and rows. Both of them must be valid ReactGrid objects: Columns Rows.

import React, { useState } from "react";
import ReactDOM from "react-dom";
import { ReactGrid, Column, Row } from "@silevis/reactgrid";
import "@silevis/reactgrid/styles.css";

function App() {
  const [columns] = useState<Column[]>(() => [
    { columnId: "Name", width: 100 },
    { columnId: "Surname", width: 100 }
  ]);
  const [rows] = useState<Row[]>(() => [
    {
      rowId: 0,
      cells: [
        { type: "header", text: "Name" },
        { type: "header", text: "Surname" }
      ]
    },
    {
      rowId: 1,
      cells: [
        { type: "text", text: "Thomas" },
        { type: "text", text: "Goldman" }
      ]
    },
    {
      rowId: 2,
      cells: [
        { type: "text", text: "Susie" },
        { type: "text", text: "Spencer" }
      ]
    },
    {
      rowId: 3,
      cells: [
        { type: "text", text: "" },
        { type: "text", text: "" }
      ]
    }
  ]);

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

Handling changes

To be able to change any value inside the grid you have to implement your own handler.

Add CellChange interface to your imports:

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

There is a basic handler code:

const handleChanges = (changes: CellChange[]) => {
  setRows((prevRows) => {
    changes.forEach((change) => {
      const changeRowIdx = prevRows.findIndex(
        (el) => el.rowId === change.rowId
      );
      const changeColumnIdx = columns.findIndex(
        (el) => el.columnId === change.columnId
      );
      prevRows[changeRowIdx].cells[changeColumnIdx] = change.newCell;
    });
    return [...prevRows];
  });
};

Then update ReactGrid's component props:

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

Open live demo on codesandbox.io

Other examples:

Browser support

IE / Edge EdgeFirefox FirefoxChrome ChromeSafari SafariiOS Safari iOS/iPadOs SafariSamsung Samsung internetOpera Opera
80+61+57+13.1+13+9+45+

Integrations

  • Next.js

At the moment we propose to use next-transpile-modules plugin (docs). Your next.config.js file should looks like on the listing below:

  const withCSS = require("@zeit/next-css");

  const withTM = require("next-transpile-modules")([
    "@silevis/reactgrid",
    "@silevis/reactgrid/styles.css"
  ]);

  module.exports = withTM(withCSS());  

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 fully functional version. You can compare versions here.

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

Authors

Silevis Software

Silevis

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free