Comment on page
Real time collaboration
Built for real-time editing and viewing of Spreadsheets
With a supported real-time back-end, you can have a full collaborative and real-time Spreadsheet. The UI is data agnostic, so both OT and CRDT data structures are supported.
SheetGrid exposes the following prop to highlight users in the canvas grid.
const App = () => {
const currentUserId = 1
<SheetGrid
users={
[
{
userId: 1,
title: 'Foo bar',
// Active cell that will be highlighted
activeCell: { rowIndex: 2, columnIndex: 3},
// Which sheetID is currently in focus
sheetId: 1
},
{
userId: 2,
title: 'Foo bar',
activeCell: { rowIndex: 2, columnIndex: 3},
sheetId: 1
}
]
}
userId={currentUserId}
/>
}
If you are using
useSpreadsheetState hook to manage the state of Spreadsheet, Immer is the state library that is used to modify state.Immer has really good API for JSON patches that is sent over the wire for real-time collaboration. JSON patches also helps in building a robust undo/redo functionality.
onChangeHistory callback is fired when user modifies state. import { SpreadsheetProvider, CanvasGrid } from "@rowsncolumns/spreadsheet";
import { tokenize as tokenizer } from "@rowsncolumns/calculator";
import { useSpreadsheetState } from "@rowsncolumns/spreadsheet-state";
const MySpreadsheet = () => {
const {} = useSpreadsheetState({
onChangeHistory(patches) {
// Send this over the wire to Yjs, Pusher, Liveblocks etc
console.log(patches);
},
});
return (
<CanvasGrid
rowCount={1000}
columnCount={1000}
sheetId={1}
tokenizer={tokenizer}
users={[{ ... }]}
userId={}
/>
);
};
const App = () => (
<SpreadsheetProvider>
<MySpreadsheet />
</SpreadsheetProvider>
);