### Install Dependencies

Source: https://github.com/iddan/react-spreadsheet/blob/master/website/docs/04-contributing.md

Clone the repository, navigate to the project directory, and install dependencies using Yarn.

```bash
git clone https://github.com/iddan/react-spreadsheet.git;
cd react-spreadsheet;
yarn install;
```

--------------------------------

### Install React Spreadsheet

Source: https://context7.com/iddan/react-spreadsheet/llms.txt

Install the package and its peer dependencies using npm or yarn.

```bash
npm install react react-dom scheduler react-spreadsheet
# or
yarn add react react-dom scheduler react-spreadsheet
```

--------------------------------

### Install Dependencies

Source: https://github.com/iddan/react-spreadsheet/blob/master/website/README.md

Installs project dependencies using Yarn. Run this command after cloning the repository.

```bash
yarn
```

--------------------------------

### Start Local Development Server

Source: https://github.com/iddan/react-spreadsheet/blob/master/website/README.md

Starts a local development server that reflects changes live without requiring a restart. Opens the website in a browser automatically.

```bash
yarn start
```

--------------------------------

### Install React Spreadsheet with npm

Source: https://github.com/iddan/react-spreadsheet/blob/master/readme.md

Use this command to install the necessary packages for React Spreadsheet using npm.

```bash
npm install react react-dom scheduler react-spreadsheet
```

--------------------------------

### Install React Spreadsheet with yarn

Source: https://github.com/iddan/react-spreadsheet/blob/master/readme.md

Use this command to install the necessary packages for React Spreadsheet using yarn.

```bash
yarn add react react-dom scheduler react-spreadsheet
```

--------------------------------

### Install react-spreadsheet with npm

Source: https://github.com/iddan/react-spreadsheet/blob/master/website/docs/01-get-started.md

Use this command to add react-spreadsheet to your project if you are using npm.

```bash
npm install scheduler react-spreadsheet
```

--------------------------------

### Install react-spreadsheet with yarn

Source: https://github.com/iddan/react-spreadsheet/blob/master/website/docs/01-get-started.md

Use this command to add react-spreadsheet to your project if you are using yarn.

```bash
yarn add scheduler react-spreadsheet
```

--------------------------------

### Custom Cell Rendering with DataViewer in React Spreadsheet

Source: https://context7.com/iddan/react-spreadsheet/llms.txt

Replace the default cell viewer with a custom React component by passing it to the `DataViewer` prop. This example renders star ratings.

```tsx
import Spreadsheet,
  DataViewerProps,
  CellBase,
  createEmptyMatrix,
  Matrix,
} from "react-spreadsheet";

type RatingCell = CellBase<number>;

const StarViewer = ({ cell }: DataViewerProps<RatingCell>) => {
  const stars = cell?.value ?? 0;
  return <span>{"★".repeat(stars)}{"☆".repeat(5 - stars)}</span>;
};

const data: Matrix<RatingCell> = [
  [{ value: 4 }, { value: 2 }],
  [{ value: 5 }, { value: 3 }],
];

const App = () => (
  <Spreadsheet data={data} DataViewer={StarViewer} />
);
```

--------------------------------

### Create Custom Formula Parser in React Spreadsheet

Source: https://context7.com/iddan/react-spreadsheet/llms.txt

Override formula behavior by providing a custom parser factory via the `createFormulaParser` prop. This example disables the built-in SUM function.

```tsx
import Spreadsheet,
  createFormulaParser,
  Matrix,
  CellBase,
} from "react-spreadsheet";

// Disable the built-in SUM function
const customCreateFormulaParser = (data: Matrix<CellBase>) =>
  createFormulaParser(data, { SUM: undefined });

const App = () => (
  <Spreadsheet
    data={[[{ value: 1 }, { value: 2 }]]}
    createFormulaParser={customCreateFormulaParser}
  />
);
```

--------------------------------

### Enable Built-in Formula Evaluation in React Spreadsheet

Source: https://context7.com/iddan/react-spreadsheet/llms.txt

Cells prefixed with '=' are automatically evaluated. Use the `onEvaluatedDataChange` prop to get the evaluated data.

```tsx
import Spreadsheet, { CellBase, Matrix } from "react-spreadsheet";

const data: Matrix<CellBase> = [
  [{ value: 10 }, { value: 20 }, { value: "=SUM(A1:B1)" }],
  [{ value: 5 }, { value: 15 }, { value: "=A2+B2" }],
  [{ value: "" }, { value: "" }, { value: "=SUM(C1:C2)" }],
  // C1 → 30, C2 → 20, C3 → 50
];

const App = () => (
  <Spreadsheet
    data={data}
    onEvaluatedDataChange={(evaluated) => console.log(evaluated)}
  />
);
```

--------------------------------

### Per-Cell Custom Components in React Spreadsheet

Source: https://context7.com/iddan/react-spreadsheet/llms.txt

Override global `DataViewer` and `DataEditor` for specific cells by defining them directly on the cell object in the data matrix. This example uses bold viewer and uppercase editor for a specific cell.

```tsx
import Spreadsheet,
  CellBase,
  DataViewerProps,
  DataEditorProps,
  createEmptyMatrix,
  Matrix,
} from "react-spreadsheet";
import * as MatrixUtils from "react-spreadsheet";

type MyCell = CellBase<string>;

const BoldViewer = ({ cell }: DataViewerProps<MyCell>) => (
  <strong>{cell?.value}</strong>
);

const UpperEditor = ({ cell, onChange }: DataEditorProps<MyCell>) => (
  <input
    autoFocus
    value={cell?.value ?? ""}
    onChange={(e) => onChange({ ...cell, value: e.target.value.toUpperCase() })}
  />
);

const base = createEmptyMatrix<MyCell>(3, 3);
// inject custom components into cell at row 0, column 0
const data: Matrix<MyCell> = base.map((row, ri) =>
  row.map((cell, ci) =>
    ri === 0 && ci === 0
      ? { value: "Special", DataViewer: BoldViewer, DataEditor: UpperEditor }
      : cell
  )
);

const App = () => <Spreadsheet data={data} />;
```

--------------------------------

### Custom Cell Editing with DataEditor in React Spreadsheet

Source: https://context7.com/iddan/react-spreadsheet/llms.txt

Replace the default cell editor with a custom React component via the `DataEditor` prop. This example uses a range slider for editing numbers.

```tsx
import Spreadsheet,
  DataEditorProps,
  CellBase,
  createEmptyMatrix,
} from "react-spreadsheet";

type NumberCell = CellBase<number>;

const SliderEditor = ({ cell, onChange }: DataEditorProps<NumberCell>) => (
  <input
    type="range"
    min={0}
    max={100}
    value={cell?.value ?? 0}
    onChange={(e) => onChange({ ...cell, value: Number(e.target.value) })}
    autoFocus
  />
);

const data = createEmptyMatrix<NumberCell>(3, 3);

const App = () => (
  <Spreadsheet data={data} DataEditor={SliderEditor} />
);
```

--------------------------------

### Deploy Website to GitHub Pages

Source: https://github.com/iddan/react-spreadsheet/blob/master/website/README.md

Builds the website and pushes it to the 'gh-pages' branch, suitable for hosting on GitHub Pages. Replace '<Your GitHub username>' with your actual username.

```bash
GIT_USER=<Your GitHub username> USE_SSH=true yarn deploy
```

--------------------------------

### Initialize Blank Grid with createEmptyMatrix

Source: https://context7.com/iddan/react-spreadsheet/llms.txt

Creates an empty `Matrix<T>` with specified rows and columns. Useful for initializing a blank spreadsheet.

```tsx
import Spreadsheet, { createEmptyMatrix, CellBase } from "react-spreadsheet";
import { useState } from "react";

type Cell = CellBase<string>;

const App = () => {
  const [data, setData] = useState<Matrix<Cell>>(
    createEmptyMatrix<Cell>(6, 4) // 6 rows, 4 columns
  );

  return <Spreadsheet data={data} onChange={setData} />;
};

```

--------------------------------

### Build Static Website Content

Source: https://github.com/iddan/react-spreadsheet/blob/master/website/README.md

Generates the static content for the website into the 'build' directory. This output can be hosted on any static content hosting service.

```bash
yarn build
```

--------------------------------

### Run Continuous Integration Checks

Source: https://github.com/iddan/react-spreadsheet/blob/master/website/README.md

Performs linting and formatting checks, useful for integrating with CI systems like Travis CI or CircleCI.

```bash
yarn ci
```

--------------------------------

### Handle User Interactions with Event Callbacks

Source: https://context7.com/iddan/react-spreadsheet/llms.txt

Implement callback props like `onChange`, `onModeChange`, `onSelect`, `onActivate`, `onBlur`, `onCellCommit`, and `onEvaluatedDataChange` to react to user interactions within the spreadsheet.

```tsx
import Spreadsheet, {
  Matrix,
  CellBase,
  Selection,
  Mode,
  Point,
  createEmptyMatrix,
} from "react-spreadsheet";
import { useState } from "react";

const App = () => {
  const [data, setData] = useState<Matrix<CellBase>>(createEmptyMatrix(4, 4));

  return (
    <Spreadsheet
      data={data}
      onChange={(nextData) => {
        console.log("data changed", nextData);
        setData(nextData);
      }}
      onModeChange={(mode: Mode) => console.log("mode:", mode)} // "view" | "edit"
      onSelect={(selection: Selection) => console.log("selected:", selection)}
      onActivate={(point: Point) => console.log("active cell:", point)}
      onBlur={() => console.log("spreadsheet blurred")}
      onCellCommit={(prev, next, coords) =>
        console.log("cell committed", { prev, next, coords })
      }
      onEvaluatedDataChange={(evaluated) =>
        console.log("evaluated data:", evaluated)
      }
    />
  );
};

```

--------------------------------

### Basic Spreadsheet Usage

Source: https://context7.com/iddan/react-spreadsheet/llms.txt

Renders an interactive spreadsheet grid using a 2D array of CellBase objects for the `data` prop.

```tsx
import Spreadsheet from "react-spreadsheet";

const App = () => {
  const data = [
    [{ value: "Name" }, { value: "Age" }, { value: "City" }],
    [{ value: "Alice" }, { value: 30 }, { value: "New York" }],
    [{ value: "Bob" }, { value: 25 }, { value: "London" }],
  ];

  return <Spreadsheet data={data} />;
};

```

--------------------------------

### Basic Spreadsheet Component

Source: https://github.com/iddan/react-spreadsheet/blob/master/website/docs/02-usage.md

Renders a spreadsheet with initial data. The component expects an array of arrays, where each inner array represents a row and contains objects with a 'value' key. Changes to the 'data' prop will reset user modifications.

```javascript
import Spreadsheet from "react-spreadsheet";

const App = () => {
  const data = [
    [{ value: "Vanilla" }, { value: "Chocolate" }],
    [{ value: "Strawberry" }, { value: "Cookies" }],
  ];
  return <Spreadsheet data={data} />;
};
```

--------------------------------

### Spreadsheet with Custom Column and Row Labels

Source: https://github.com/iddan/react-spreadsheet/blob/master/website/docs/02-usage.md

Configures the spreadsheet with custom labels for columns and rows. If not provided, alphabetical labels are used for columns and row indices for rows.

```javascript
import Spreadsheet from "react-spreadsheet";

const App = () => {
  const columnLabels = ["Flavour", "Food"];
  const rowLabels = ["Item 1", "Item 2"];
  const data = [
    [{ value: "Vanilla" }, { value: "Chocolate" }],
    [{ value: "Strawberry" }, { value: "Cookies" }],
  ];
  return (
    <Spreadsheet
      data={data}
      columnLabels={columnLabels}
      rowLabels={rowLabels}
    />
  );
};
```

--------------------------------

### Enable Dark Mode Theme

Source: https://context7.com/iddan/react-spreadsheet/llms.txt

Enables dark-mode styling for the spreadsheet component by passing the `darkMode` boolean prop.

```tsx
import Spreadsheet, { createEmptyMatrix } from "react-spreadsheet";

const App = () => (
  <Spreadsheet
    data={createEmptyMatrix(4, 4)}
    darkMode={true}
  />
);

```

--------------------------------

### SpreadsheetRef - Imperative Cell Activation

Source: https://context7.com/iddan/react-spreadsheet/llms.txt

Use a React ref to programmatically activate (focus) a specific cell using the `activate` method.

```APIDOC
## `SpreadsheetRef` — Imperative Cell Activation

Use a React ref to programmatically activate (focus) a specific cell.

```tsx
import { useRef, useState } from "react";
import Spreadsheet, { SpreadsheetRef, Point, createEmptyMatrix } from "react-spreadsheet";

const App = () => {
  const ref = useRef<SpreadsheetRef>(null);
  const [point, setPoint] = useState<Point>({ row: 0, column: 0 });

  return (
    <div>
      <label>
        Row: <input type="number" value={point.row} onChange={(e) => setPoint((p) => ({ ...p, row: +e.target.value }))} />
      </label>
      <label>
        Col: <input type="number" value={point.column} onChange={(e) => setPoint((p) => ({ ...p, column: +e.target.value }))} />
      </label>
      <button onClick={() => ref.current?.activate(point)}>Activate</button>
      <Spreadsheet ref={ref} data={createEmptyMatrix(5, 5)} />
    </div>
  );
};
```
```

--------------------------------

### Controlled Spreadsheet with onChange

Source: https://context7.com/iddan/react-spreadsheet/llms.txt

Drives the spreadsheet using React state and reacts to user edits via the `onChange` callback, which provides the full updated matrix.

```tsx
import { useState } from "react";
import Spreadsheet, { Matrix, CellBase } from "react-spreadsheet";

const App = () => {
  const [data, setData] = useState<Matrix<CellBase>>([
    [{ value: "Vanilla" }, { value: "Chocolate" }, { value: "" }],
    [{ value: "Strawberry" }, { value: "Cookies" }, { value: "" }],
  ]);

  const handleChange = (nextData: Matrix<CellBase>) => {
    console.log("Data changed:", nextData);
    setData(nextData);
  };

  return <Spreadsheet data={data} onChange={handleChange} />;
};

```

--------------------------------

### Event Callbacks

Source: https://context7.com/iddan/react-spreadsheet/llms.txt

React Spreadsheet provides a rich set of callback props for reacting to user interactions such as data changes, mode changes, selections, cell activation, blur events, cell commits, and evaluated data changes.

```APIDOC
## Event Callbacks

React Spreadsheet provides a rich set of callback props for reacting to user interactions.

```tsx
import Spreadsheet,
  {
    Matrix,
    CellBase,
    Selection,
    Mode,
    Point,
    createEmptyMatrix,
  } from "react-spreadsheet";
import { useState } from "react";

const App = () => {
  const [data, setData] = useState<Matrix<CellBase>>(createEmptyMatrix(4, 4));

  return (
    <Spreadsheet
      data={data}
      onChange={(nextData) => {
        console.log("data changed", nextData);
        setData(nextData);
      }}
      onModeChange={(mode: Mode) => console.log("mode:", mode)} // "view" | "edit"
      onSelect={(selection: Selection) => console.log("selected:", selection)}
      onActivate={(point: Point) => console.log("active cell:", point)}
      onBlur={() => console.log("spreadsheet blurred")}
      onCellCommit={(prev, next, coords) =>
        console.log("cell committed", { prev, next, coords })
      }
      onEvaluatedDataChange={(evaluated) =>
        console.log("evaluated data:", evaluated)
      }
    />
  );
};
```
```

--------------------------------

### Imperatively Activate Cells with SpreadsheetRef

Source: https://context7.com/iddan/react-spreadsheet/llms.txt

Utilize a React ref with `SpreadsheetRef` to programmatically focus on a specific cell. Ensure the `ref` is correctly attached to the `Spreadsheet` component.

```tsx
import { useRef, useState } from "react";
import Spreadsheet, {
  SpreadsheetRef,
  Point,
  createEmptyMatrix,
} from "react-spreadsheet";

const App = () => {
  const ref = useRef<SpreadsheetRef>(null);
  const [point, setPoint] = useState<Point>({ row: 0, column: 0 });

  return (
    <div>
      <label>
        Row: <input type="number" value={point.row} onChange={(e) => setPoint((p) => ({ ...p, row: +e.target.value }))} />
      </label>
      <label>
        Col: <input type="number" value={point.column} onChange={(e) => setPoint((p) => ({ ...p, column: +e.target.value }))} />
      </label>
      <button onClick={() => ref.current?.activate(point)}>Activate</button>
      <Spreadsheet ref={ref} data={createEmptyMatrix(5, 5)} />
    </div>
  );
};

```

--------------------------------

### Dynamic Rows and Columns

Source: https://context7.com/iddan/react-spreadsheet/llms.txt

Mutate the data matrix to add or remove rows and columns at runtime using provided utility functions or direct state manipulation.

```APIDOC
## Dynamic Rows and Columns

Mutate the data matrix to add or remove rows and columns at runtime.

```tsx
import Spreadsheet,
  {
    createEmptyMatrix,
    Matrix,
    CellBase,
  } from "react-spreadsheet";
import * as MatrixUtils from "react-spreadsheet";
import { useState, useCallback } from "react";

type Cell = CellBase<string>;

const App = () => {
  const [data, setData] = useState<Matrix<Cell>>(createEmptyMatrix<Cell>(3, 3));

  const addRow = useCallback(() =>
    setData((d) => {
      const cols = d[0]?.length ?? 0;
      return [...d, Array(cols).fill(undefined)];
    }), []);

  const addColumn = useCallback(() =>
    setData((d) => d.map((row) => [...row, undefined])),
    []);

  const removeRow = useCallback(() =>
    setData((d) => d.slice(0, -1)), []);

  const removeColumn = useCallback(() =>
    setData((d) => d.map((row) => row.slice(0, -1))),
    []);

  return (
    <>
      <div>
        <button onClick={addRow}>+ Row</button>
        <button onClick={removeRow}>- Row</button>
        <button onClick={addColumn}>+ Column</button>
        <button onClick={removeColumn}>- Column</button>
      </div>
      <Spreadsheet data={data} onChange={setData} />
    </>
  );
};
```
```

--------------------------------

### Override SUM Formula in Custom Parser

Source: https://github.com/iddan/react-spreadsheet/blob/master/website/docs/03-formula-parser.md

Demonstrates how to create a custom formula parser that disables the SUM function by passing `undefined` for its implementation. This is useful for customizing or removing built-in formulas.

```javascript
import Spreadsheet,
{
  createFormulaParser,
  Matrix,
  CellBase,
} from "react-spreadsheet";

const customCreateFormulaParser = (data: Matrix<CellBase>)
  =>
  createFormulaParser(data, { SUM: undefined });

const MyComponent = () => {
  return (
    <Spreadsheet data={[]} createFormulaParser={customCreateFormulaParser} />
  );
};

```

--------------------------------

### Dynamically Add/Remove Rows and Columns

Source: https://context7.com/iddan/react-spreadsheet/llms.txt

Mutate the data matrix using `useState` and `useCallback` to add or remove rows and columns at runtime. Ensure the matrix structure is maintained.

```tsx
import Spreadsheet,
  {
    createEmptyMatrix,
    Matrix,
    CellBase,
  } from "react-spreadsheet";
import * as MatrixUtils from "react-spreadsheet";
import { useState, useCallback } from "react";

type Cell = CellBase<string>;

const App = () => {
  const [data, setData] = useState<Matrix<Cell>>(createEmptyMatrix<Cell>(3, 3));

  const addRow = useCallback(() =>
    setData((d) => {
      const cols = d[0]?.length ?? 0;
      return [...d, Array(cols).fill(undefined)];
    }), []);

  const addColumn = useCallback(() =>
    setData((d) => d.map((row) => [...row, undefined])),
  []);

  const removeRow = useCallback(() =>
    setData((d) => d.slice(0, -1)), []);

  const removeColumn = useCallback(() =>
    setData((d) => d.map((row) => row.slice(0, -1))),
  []);

  return (
    <>
      <div>
        <button onClick={addRow}>+ Row</button>
        <button onClick={removeRow}>- Row</button>
        <button onClick={addColumn}>+ Column</button>
        <button onClick={removeColumn}>- Column</button>
      </div>
      <Spreadsheet data={data} onChange={setData} />
    </>
  );
};

```

--------------------------------

### Controlled Spreadsheet Component (JavaScript)

Source: https://github.com/iddan/react-spreadsheet/blob/master/website/docs/02-usage.md

Manages spreadsheet data externally using the 'onChange' prop. This allows for reacting to user changes, such as validation or persistence. The 'useState' hook is used to hold and update the data.

```javascript
import { useState } from "react";
import Spreadsheet from "react-spreadsheet";

const App = () => {
  const [data, setData] = useState([
    [{ value: "Vanilla" }, { value: "Chocolate" }, { value: "" }],
    [{ value: "Strawberry" }, { value: "Cookies" }, { value: "" }],
  ]);
  return <Spreadsheet data={data} onChange={setData} />;
};
```

--------------------------------

### Custom Column and Row Labels

Source: https://context7.com/iddan/react-spreadsheet/llms.txt

Replaces default header indicators with custom labels by passing `columnLabels` and `rowLabels` arrays.

```tsx
import Spreadsheet from "react-spreadsheet";

const App = () => {
  const data = [
    [{ value: "Alice" }, { value: 30 }, { value: "alice@example.com" }],
    [{ value: "Bob" }, { value: 25 }, { value: "bob@example.com" }],
  ];

  return (
    <Spreadsheet
      data={data}
      columnLabels={["Name", "Age", "Email"]}
      rowLabels={["Row 1", "Row 2"]}
    />
  );
};

```

--------------------------------

### Control Cell Selections with Selection Classes

Source: https://context7.com/iddan/react-spreadsheet/llms.txt

Use various Selection classes to programmatically set the selected range, rows, columns, or the entire worksheet. Initialize with `EmptySelection` to clear any selection.

```tsx
import { useState } from "react";
import Spreadsheet,
  {
    Selection,
    EmptySelection,
    RangeSelection,
    EntireRowsSelection,
    EntireColumnsSelection,
    EntireWorksheetSelection,
    PointRange,
    createEmptyMatrix,
  } from "react-spreadsheet";

const App = () => {
  const [selected, setSelected] = useState<Selection>(new EmptySelection());

  return (
    <div>
      <button onClick={() => setSelected(new EntireWorksheetSelection())}>
        Select All
      </button>
      <button onClick={() => setSelected(new EntireRowsSelection(0, 1))}>
        Select rows 0–1
      </button>
      <button onClick={() => setSelected(new EntireColumnsSelection(0, 0))}>
        Select column A
      </button>
      <button
        onClick={() =>
          setSelected(
            new RangeSelection(
              new PointRange({ row: 0, column: 0 }, { row: 1, column: 1 })
            )
          )
        }
      >
        Select A1:B2
      </button>
      <button onClick={() => setSelected(new EmptySelection())}>
        Clear selection
      </button>
      <Spreadsheet
        data={createEmptyMatrix(5, 5)}
        selected={selected}
        onSelect={setSelected}
      />
    </div>
  );
};

```

--------------------------------

### Selection API

Source: https://context7.com/iddan/react-spreadsheet/llms.txt

Programmatically read or control which cells are selected using various Selection classes like EmptySelection, RangeSelection, EntireRowsSelection, EntireColumnsSelection, and EntireWorksheetSelection.

```APIDOC
## Selection API — `Selection` Classes

React Spreadsheet exports several selection classes for programmatically reading or controlling which cells are selected.

```tsx
import { useState } from "react";
import Spreadsheet,
  {
    Selection,
    EmptySelection,
    RangeSelection,
    EntireRowsSelection,
    EntireColumnsSelection,
    EntireWorksheetSelection,
    PointRange,
    createEmptyMatrix,
  } from "react-spreadsheet";

const App = () => {
  const [selected, setSelected] = useState<Selection>(new EmptySelection());

  return (
    <div>
      <button onClick={() => setSelected(new EntireWorksheetSelection())}>
        Select All
      </button>
      <button onClick={() => setSelected(new EntireRowsSelection(0, 1))}>
        Select rows 0–1
      </button>
      <button onClick={() => setSelected(new EntireColumnsSelection(0, 0))}>
        Select column A
      </button>
      <button
        onClick={() =>
          setSelected(
            new RangeSelection(
              new PointRange({ row: 0, column: 0 }, { row: 1, column: 1 })
            )
          )
        }
      >
        Select A1:B2
      </button>
      <button onClick={() => setSelected(new EmptySelection())}>
        Clear selection
      </button>
      <Spreadsheet
        data={createEmptyMatrix(5, 5)}
        selected={selected}
        onSelect={setSelected}
      />
    </div>
  );
};
```
```

--------------------------------

### Cell Data Model with CellBase

Source: https://context7.com/iddan/react-spreadsheet/llms.txt

Defines the base cell type, allowing for `value`, `readOnly` flag, `className`, and custom renderers. Demonstrates different cell configurations.

```tsx
import Spreadsheet, { CellBase, Matrix } from "react-spreadsheet";

type MyCell = CellBase<string | number>;

const data: Matrix<MyCell> = [
  [
    { value: "Header", readOnly: true, className: "header-cell" },
    { value: 42 },
  ],
  [
    { value: "Editable" },
    { value: 0, readOnly: false },
  ],
];

const App = () => <Spreadsheet data={data} />;

```

--------------------------------

### Controlled Spreadsheet Component (TypeScript)

Source: https://github.com/iddan/react-spreadsheet/blob/master/website/docs/02-usage.md

Implements a controlled spreadsheet in TypeScript, using 'useState' to manage the data and the 'onChange' prop to handle user modifications. Type safety is ensured with 'Matrix<CellBase>'.

```typescript
import { useState } from "react";
import Spreadsheet from "react-react-spreadsheet";

const App = () => {
  const [data, setData] = useState<Matrix<CellBase>>([
    [{ value: "Vanilla" }, { value: "Chocolate" }, { value: "" }],
    [{ value: "Strawberry" }, { value: "Cookies" }, { value: "" }],
  ]);
  return <Spreadsheet data={data} onChange={setData} />;
};
```

--------------------------------

### Spreadsheet with Read-Only Cells

Source: https://github.com/iddan/react-spreadsheet/blob/master/website/docs/02-usage.md

Marks specific cells as read-only by setting the 'readOnly: true' property within the cell's configuration. These cells cannot be edited by the user.

```javascript
import Spreadsheet from "react-spreadsheet";

const App = () => {
  const data = [
    [{ value: "Vanilla" }, { value: "Chocolate", readOnly: true }],
    [{ value: "Strawberry" }, { value: "Cookies", readOnly: true }],
  ];
  return <Spreadsheet data={data} />;
};
```

--------------------------------

### Hide Row and Column Indicators

Source: https://context7.com/iddan/react-spreadsheet/llms.txt

Hides the default row numbers and column letters by setting `hideRowIndicators` and `hideColumnIndicators` to true.

```tsx
import Spreadsheet, { createEmptyMatrix } from "react-spreadsheet";

const App = () => (
  <Spreadsheet
    data={createEmptyMatrix(4, 4)}
    hideRowIndicators
    hideColumnIndicators
  />
);

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.