Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

@silevis/reactgrid

3.1.2 • Public • Published

ReactGrid MIT MIT license npm downloads Gitter

Add spreadsheet-like behavior to your React app.

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 } 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";
 
interface IApp {
    columns: Column[];
    rows: Row[];
}
 
function App() {
  const [state, setState] = useState<IApp>(() => ({
    columns: [
      { columnId: "Name", width: 100 },
      { columnId: "Surname", width: 100 }
    ],
    rows: [
      {
        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={state.rows}
      columns={state.columns}
    />
  );
}

Handling changes

To be able to change any value inside the grid you have to implement your own handler. There is a basic handler code:

const handleChanges = (changes: CellChange[]) => {
  const newState = { ...state };
  changes.forEach(change => {
    const changeRowIdx = newState.rows.findIndex(el => el.rowId === change.rowId);
    const changeColumnIdx = newState.columns.findIndex(el => el.columnId === change.columnId);
    newState.rows[changeRowIdx].cells[changeColumnIdx] = change.newCell;
  });
  setState(newState);
};

Then update ReactGrid's component props:

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

Open live demo on codesandbox.io

Docs

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

Author

Silevis Software

Silevis

Install

npm i @silevis/reactgrid

DownloadsWeekly Downloads

17

Version

3.1.2

License

MIT

Unpacked Size

223 kB

Total Files

171

Last publish

Collaborators

  • avatar