@patryk0493/reactgrid v3.0.8-rc.12

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/dist/src/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/dist/src/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.

(c) 2020 Silevis Software

Author

Silevis Software