# useSpreadsheet

{% hint style="info" %}
Wrap your app in `SpreadsheetProvider` to use `useSpreadsheet` hook
{% endhint %}

```tsx
import { SpreadsheetProvider, CanvasGrid, useSpreadsheet } from "@rowsncolumns/spreadsheet";

const MySpreadsheet = () => {
  const {
    makeEditable,
    canEditCell,
    cancelEditor,
    commit,
    focusSheet,
    getCellBounds,
    getCellDimensions,
    getContentfulGridRangeAroundCell,
    getNamedRanges,
    getNextFocusableCell,
    getRowHeight,
    getSelectionsFromFormula,
    getTableColumnNames,
    getTableNames,
    onEditorKeyDown,
    scrollToCell,
    setEditorValue,
    submitEditor,
    updateSelectionStartEndReference,
    tokenizer,
  } = useSpreadsheet();
  return (
    <CanvasGrid />
  );
};

const App = () => (
  <SpreadsheetProvider>
    <MySpreadsheet />
  </SpreadsheetProvider>
);
```

| API                                | Description                                                                                                                                             |
| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `makeEditable`                     | Manually trigger a cell to be in edit mode                                                                                                              |
| `canEditCell`                      | Verify if a cell is editable, respects protected ranges                                                                                                 |
| `cancelEditor`                     | Cancels edit mode                                                                                                                                       |
| `commit`                           | Commit the in-progress edit (submit if dirty, cancel if clean). Returns `true` if there was an edit to flush. Useful from a consumer-side blur handler. |
| `focusSheet`                       | Trigger focus on the Spreadsheet                                                                                                                        |
| `getCellBounds`                    | Get relative position of a cell relative to container                                                                                                   |
| `getCellDimensions`                | Get dimension (x, y, width, height) of a cell                                                                                                           |
| `getContentfulGridRangeAroundCell` | Get range around a specific cells that has content                                                                                                      |
| `getNamedRanges`                   | Get all named ranges of a sheet                                                                                                                         |
| `getNextFocusableCell`             | Get next available cell that can be focused. Skips hidden cells, rows and columns                                                                       |
| `getRowHeight`                     | Returns row height of a rowIndex                                                                                                                        |
| `getSelectionsFromFormula`         | Get all selections from text                                                                                                                            |
| `getTableColumnNames`              | Helper function to retrieve table column names                                                                                                          |
| `getTableNames`                    | Helper function to retrieve table names                                                                                                                 |
| `onEditorKeyDown`                  | Callback when user enters value in editor                                                                                                               |
| `scrollToCell`                     | Scroll to a cell                                                                                                                                        |
| `setEditorValue`                   | Imperatively set value in the editor                                                                                                                    |
| `submitEditor`                     | Submit value of a editor                                                                                                                                |
| `updateSelectionStartEndReference` | Internal function to update selection references                                                                                                        |
| `tokenizer`                        | Tokenizer formulas to identify selections and structured references                                                                                     |
| `flash`                            | Flash a range of cells with a specified color and duration                                                                                              |
| `showCellPopover`                  | Show a popover at a specific cell location with custom content                                                                                          |
| `dispatchEvent`                    | Dispatch events to the spreadsheet grid                                                                                                                 |
| `redrawGrid`                       | Manually trigger a redraw of the grid                                                                                                                   |

## Examples

### Flash cells

Flash a range of cells to draw user attention:

```tsx
const { flash } = useSpreadsheet();

// Flash a range with yellow color for 1.5 seconds
flash?.(
  {
    startRowIndex: 2,
    endRowIndex: 3,
    startColumnIndex: 2,
    endColumnIndex: 3,
    sheetId: activeSheetId,
  },
  "#ffcc00",
  1500
);
```

### Show cell popover

Display custom content in a popover at a specific cell:

```tsx
const { showCellPopover } = useSpreadsheet();

showCellPopover?.(
  {
    rowIndex: 2,
    columnIndex: 3,
    sheetId: 1,
  },
  () => <div>Custom popover content</div>
);
```

### Redraw grid

Manually trigger a grid redraw (useful after loading custom fonts):

```tsx
const { redrawGrid } = useSpreadsheet();

loadWebFont(["Lobster"]).then(() => {
  redrawGrid?.();
});
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.rowsncolumns.app/configuration/api/usespreadsheet.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.