Skip to content

Examples

Spreadsheet editor

Edit a caller-owned workbook locally; changes stay in the preview until its owner persists them.

Public contractsNxSpreadsheetEditor

Live preview

Live

Copyable source

Code example
TSX
import { useState } from "react";

import { createSpreadsheetWorkbook } from "@nexia/sdk";
import { NxSpreadsheetEditor } from "@nexia/sdk/host";

export function SpreadsheetEditorExample() {
    const [workbook, setWorkbook] = useState(() =>
        createSpreadsheetWorkbook("production-plan", "Production plan", [
            ["Work order", "Line", "Status"],
            ["WO-1042", "Cutting", "Running"],
            ["WO-1043", "Assembly", "Waiting"],
        ])
    );

    return (
        <NxSpreadsheetEditor
            value={workbook}
            onChange={setWorkbook}
            ariaLabel="Production plan spreadsheet"
        />
    );
}