React Spreadsheet Component with support for multiuser collaboration in realtime. Integrates well with okdb and includes multi-user collaboration features.
Install from npm:
$ npm install okdb-spreadsheet --save
- Import main component and styles into your project:
import OkdbSpreadsheet from 'okdb-spreadsheet';
import "okdb-spreadsheet/lib/styles.css";
- Prepare your data for the spreadsheet:
const data = [
[
{ readOnly: true, value: '' },
{ value: 'Expences', readOnly: true },
{ value: 'Q1', readOnly: true },
{ value: 'Q2', readOnly: true },
{ value: 'Q3', readOnly: true },
{ value: 'Q4', readOnly: true },
],
[
{ readOnly: true, value: 1 },
{ value: ""},
{ value: ""},
{ value: ""},
{ value: ""},
{ value: ""},
],
[
{ readOnly: true, value: 1 },
{ value: ""},
{ value: ""},
{ value: ""},
{ value: ""},
{ value: ""},
]
];
- Include the Spreadsheet component.
<OkdbSpreadsheet
data={data}
onCellsChanged={changes => {
const newGrid = grid.map(row => [...row]);
changes.forEach(({ cell, row, col, value }) => {
newGrid[row][col] = { ...grid[row][col], value };
});
// put newGrid into the local component state
setData(newGrid);
// notify other pariticipants about data changes
okdb.put(DATA_TYPE, DOCUMENT_ID, newGrid);
}}
onSelect={(selection) => {
// save new selection locally
setLocalSelection(selection);
// notify other participants about selection change
okdb.sendPresence({
...selection,
});
}}
/>
See Okdb Spreadsheet Sample for more details and integration with okdb for collaboration features like lock-free data replication, collaborative mouse pointers and cursors.