Browse our examples & docs: ๐ reactgrid.com
Before run you need to have installed:
- react": "^16.13.1"
- react-dom: "^16.13.1"
npm i @silevis/reactgrid
import { ReactGrid, Column, Row } from "@silevis/reactgrid";
Import basic CSS styles. This file is necessary to correctly display.
import "@silevis/reactgrid/styles.css";
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";
function App() {
const [columns] = useState<Column[]>(() => [
{ columnId: "Name", width: 100 },
{ columnId: "Surname", width: 100 }
]);
const [rows] = useState<Row[]>(() => [
{
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={rows}
columns={columns}
/>
);
}
To be able to change any value inside the grid you have to implement your own handler.
Add CellChange
interface to your imports:
import { ReactGrid, Column, Row, CellChange } from "@silevis/reactgrid";
There is a basic handler code:
const handleChanges = (changes: CellChange[]) => {
setRows((prevRows) => {
changes.forEach((change) => {
const changeRowIdx = prevRows.findIndex(
(el) => el.rowId === change.rowId
);
const changeColumnIdx = columns.findIndex(
(el) => el.columnId === change.columnId
);
prevRows[changeRowIdx].cells[changeColumnIdx] = change.newCell;
});
return [...prevRows];
});
};
Then update ReactGrid's component props:
return (
<ReactGrid
rows={rows}
columns={columns}
onCellsChanged={handleChanges}
/>
)
Open live demo on codesandbox.io
- Creating custom cell template
- Sticky panes
- Chevron cell example
- Cell highlights
- Custom styles
- and a lot more here
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|---|---|
80+ | 61+ | 57+ | 13.1+ | 13+ | 9+ | 45+ |
- Next.js
At the moment we propose to use next-transpile-modules
plugin (docs).
Your next.config.js
file should looks like on the listing below:
const withCSS = require("@zeit/next-css");
const withTM = require("next-transpile-modules")([
"@silevis/reactgrid",
"@silevis/reactgrid/styles.css"
]);
module.exports = withTM(withCSS());
Explore ReactGrid docs: here
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.