Package Exports

@silevis/reactgrid

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@silevis/reactgrid) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

ReactGrid

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 file from node_modules directory. This file is necessary to correctly displaying.

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 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 } from "@silevis/reactgrid";
import "@silevis/reactgrid/styles.css";

function App() {
  const [state, setState] = useState(() => ({
    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}
    />
  );
}

Open live demo on stackblitz.com

Handling changes

To be able to change any value inside 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 stackblitz.com

Docs

Browse docs: here

Licensing

ReactGrid is distributed under MIT license.

Author

Silevis Software