A React component for building spreadsheet-like grids

npm i @silevis/reactgrid

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

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

import React, { useState } from "react";
import ReactDOM from "react-dom";
import { ReactGrid } from "@silevis/reactgrid";
import "./../node_modules/@silevis/reactgrid/dist/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}
      license={"non-commercial"}
    />
  );
}

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