Spreadsheet

import { useState } from "react";
import { Spreadsheet } from "@widgetkit/spreadsheet-react";
import "@widgetkit/spreadsheet-react/styles.css";
import type { CellMap } from "@widgetkit/spreadsheet-react";

export function App() {
  const [cells, setCells] = useState<CellMap>({
    A1: "Name",  B1: "Score",
    A2: "Alice", B2: 95,
    A3: "Bob",   B3: 87,
    A4: "Total", B4: "=SUM(B2:B3)",
  });

  return (
    <Spreadsheet
      cells={cells}
      onCellsChange={setCells}
      rows={10}
      cols={4}
    />
  );
}

// Cells starting with "=" are evaluated as formulas
const cells: CellMap = {
  A1: 100, B1: 200, C1: 300,
  A2: "=SUM(A1:C1)",                         // 600
  A3: "=AVERAGE(A1:C1)",                     // 200
  A4: '=IF(A2>500, "High", "Low")',          // "High"
  A5: '=CONCAT("Total: ", A2)',              // "Total: 600"
  A6: '=IFERROR(A1/0, "Div error")',         // "Div error"
};

// Supported functions
// Math:   SUM, AVERAGE, MIN, MAX, ABS, ROUND, FLOOR, CEILING, SQRT, POWER, MOD
// Logic:  IF, AND, OR, NOT, IFERROR
// Text:   CONCAT, LEN, UPPER, LOWER, TRIM, LEFT, RIGHT, MID
// Info:   ISBLANK, ISNUMBER, ISTEXT

import type { CellFormat, MergeRegion } from "@widgetkit/spreadsheet-react";

const formats: Record<string, CellFormat> = {
  A1: { bold: true, background: "#1e293b", color: "#ffffff" },
  B2: { italic: true, color: "#3b82f6" },
  C3: { numberFormat: "currency" },               // $1,234.56
  D4: { numberFormat: "percent", decimalPlaces: 1 }, // 42.0%
};

// A1 spans 3 columns
const merges: Record<string, MergeRegion> = {
  A1: { colSpan: 3, rowSpan: 1 },
};

<Spreadsheet
  cells={cells}
  formats={formats}
  merges={merges}
  onFormatsChange={setFormats}
  onMergesChange={setMerges}
/>

import { useRef } from "react";
import { Spreadsheet } from "@widgetkit/spreadsheet-react";
import type { SpreadsheetHandle } from "@widgetkit/spreadsheet-react";

export function App() {
  const ref = useRef<SpreadsheetHandle>(null);

  return (
    <>
      <button onClick={() => ref.current?.scrollToCell("Z50")}>Scroll to Z50</button>
      <button onClick={() => ref.current?.setSelection("B2")}>Select B2</button>
      <button onClick={() => ref.current?.startEdit("A1")}>Edit A1</button>
      <button onClick={() => console.log(ref.current?.exportCsv())}>Export CSV</button>

      <Spreadsheet ref={ref} defaultCells={{ A1: "Hello" }} />
    </>
  );
}

import { useState } from "react";
import { Spreadsheet } from "@widgetkit/spreadsheet-react";
import "@widgetkit/spreadsheet-react/styles.css";
import type { CellMap, CellFormat, MergeRegion } from "@widgetkit/spreadsheet-react";

const cells: CellMap = {
  A1: "Product Catalog — 2024",

  A2: "Product",    B2: "Category", C2: "Price", D2: "Units Sold",
  E2: "Revenue",    F2: "Cost",     G2: "Profit", H2: "Margin %",

  A3: "Pro Keyboard",    B3: "Hardware",  C3: 129, D3: 412,
  A4: "Wireless Mouse",  B4: "Hardware",  C4: 49,  D4: 873,
  A5: "Note-taking App", B5: "Software",  C5: 9,   D5: 3204,
  A6: "Task Manager",    B6: "Software",  C6: 12,  D6: 2871,
  // ...more rows

  // Revenue = Price × Units
  E3: "=C3*D3", E4: "=C4*D4", E5: "=C5*D5", E6: "=C6*D6",

  // Profit = Revenue − Cost
  G3: "=E3-F3", G4: "=E4-F4", G5: "=E5-F5", G6: "=E6-F6",

  // Margin % = Profit ÷ Revenue
  H3: "=G3/E3", H4: "=G4/E4", H5: "=G5/E5", H6: "=G6/E6",

  // Totals
  A7: "Totals",
  D7: "=SUM(D3:D6)", E7: "=SUM(E3:E6)",
  F7: "=SUM(F3:F6)", G7: "=SUM(G3:G6)",
  H7: "=G7/E7",
};

const formats: Record<string, CellFormat> = {
  A1: { bold: true, background: "#1e293b", color: "#ffffff" },
  A2: { bold: true, background: "#f1f5f9" },
  // ... header formatting for B2–H2

  C3: { numberFormat: "currency" },
  E3: { numberFormat: "currency" },
  G3: { numberFormat: "currency", color: "#16a34a" },
  H3: { numberFormat: "percent", decimalPlaces: 1 },
  // ... same for each row

  G7: { bold: true, numberFormat: "currency", color: "#16a34a", background: "#f0fdf4" },
  H7: { bold: true, numberFormat: "percent",  decimalPlaces: 1, color: "#16a34a", background: "#f0fdf4" },
};

const merges: Record<string, MergeRegion> = {
  A1: { colSpan: 8, rowSpan: 1 }, // title spans all columns
};

export function App() {
  const [currentCells,   setCurrentCells]   = useState<CellMap>(cells);
  const [currentFormats, setCurrentFormats] = useState(formats);
  const [currentMerges,  setCurrentMerges]  = useState(merges);

  return (
    <Spreadsheet
      cells={currentCells}
      formats={currentFormats}
      merges={currentMerges}
      rows={30}
      cols={10}
      maxHeight={420}
      autoExpandRows
      resizableCols
      onCellsChange={setCurrentCells}
      onFormatsChange={setCurrentFormats}
      onMergesChange={setCurrentMerges}
    />
  );
}

type CellValue = string | number | null;
type CellMap  = Record<string, CellValue>;

type NumberFormat = 'general' | 'number' | 'currency' | 'percent' | 'date';

interface CellFormat {
  bold?:          boolean;
  italic?:        boolean;
  color?:         string;            // CSS color
  background?:    string;            // CSS color
  numberFormat?:  NumberFormat;
  decimalPlaces?: number;
}

interface MergeRegion {
  colSpan: number;
  rowSpan: number;
}

// Imperative handle — access via ref
interface SpreadsheetHandle {
  scrollToCell: (ref: string) => void;
  setSelection: (ref: string) => void;
  startEdit:    (ref: string) => void;
  exportCsv:    () => string;
  getCells:     () => CellMap;
}