Links

Server side data persistence

Completely agnostic to how you manage the back-end
There are various ways to persist data in the back-end, since you can use the Spreasheet in both headless and stateful way (using useSpreasheetState hook, or your own custom hook) .

Persisting using useSpreadsheetState

Spreadsheet gives you granular callbacks for every state change triggered by the user. You can call a REST or websocket API to trigger an API call to the back-end
import React, { useState } from "react";
import {
CellData,
EmbeddedChart,
EmbeddedObject,
Sheet,
CanvasGrid,
SpreadsheetProvider,
TableView,
} from "@rowsncolumns/spreadsheet";
import {
SheetData,
useSpreadsheetState,
} from "@rowsncolumns/spreadsheet-state";
import { functions } from "@rowsncolumns/functions";
export const Editor = () => {
const App = () => {
const [sheets, onChangeSheets] = useState<Sheet[]>([]);
const [sheetData, onChangeSheetData] = useState<SheetData<CellData>>({});
const [scale, onChangeScale] = useState(1);
const [charts, onChangeCharts] = useState<EmbeddedChart[]>([]);
const [embeds, onChangeEmbeds] = useState<EmbeddedObject[]>([]);
const [tables, onChangeTables] = useState<TableView[]>([]);
const {
onChange,
onInsertRow,
} = useSpreadsheetState({
sheets,
sheetData,
tables,
functions,
onChangeSheets,
onChangeSheetData,
onChangeEmbeds,
onChangeCharts,
onChangeTables,
initialColorMode: "light",
});
return (
<CanvasGrid
sheetId={1}
rowCount={100}
columnCount={100}
onChange={(sheetId, cell, value) => {
// Persit data to server
fetch("/post", {
method: "POST",
body: JSON.stringify({ action: "SET", value, cell, sheetId }),
});
// Optimistically update local UI state
onChange(sheetId, cell, value);
}}
onInsertRow={(sheetId, rowIndex) => {
// Update server
fetch("/post", {
method: "POST",
body: JSON.stringify({ action: "INSERT_ROW", sheetId, rowIndex }),
});
// Optimistic update
onInsertRow(sheetId, rowIndex);
}}
/>
);
};
return (
<SpreadsheetProvider>
<App />
</SpreadsheetProvider>
);
};