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>
  );
};