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

ReactGrid allows you to create custom data grids inside your ReactJS application while providing a spreadsheet-like look and feel.

Before run you need to have installed:

"react": "^16.13.1",
"react-dom": "^16.13.1"

Installation

1. Install ReactGrid from npm repository

npm i @silevis/reactgrid

2. Import ReactGrid component

import { ReactGrid } from "@silevis/reactgrid";

3. Import css styles

Import file from node_modules directory. This file is necessary to correctly displaying.

import "@silevis/reactgrid/lib/assets/core.css";

4. 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/lib/assets/core.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: 2,
        cells: [{ type: "text", text: "" }, { type: "text", text: "" }]
      }
    ]
  }));

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

4. Render your component

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Open example on codesandbox.io

Docs

Browse docs: click

Licensing

ReactGrid is distributed under MIT license.

Author

Silevis Software