> For the complete documentation index, see [llms.txt](https://docs.rowsncolumns.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.rowsncolumns.app/configuration/api/spreadsheetprovider.md).

# SpreadsheetProvider

Each Spreadsheet instance should be wrapped in a SpreadsheetProvider component so that each instance will have its own set of props and internal state.

## useSpreadSheet hook

Children of SpreadsheetProvider will have access to `useSpreadsheet` hook that exposes several internal functions a developer can access.

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

const MySpreadsheet = () => {

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

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

## Multiple Spreadsheets

You can render multiple Spreadsheet UI's in a single page, each able to work independently or together. It is left to your imagination.

You can share `tables, charts, embeds` across multiple sheets or even sheets and sheetData.

Each Spreadsheet should be wrapped in `<SpreadsheetProvider />` to isolate internal state, such as `formulaMode`, cell editor states, cell selection states etc.

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

const SpreadsheetA = () => {
  return (
    <SpreadsheetProvider>
      <CanvasGrid />
    </SpreadsheetProvider>
  )
}
const SpreadsheetB = () => {
  return (
    <SpreadsheetProvider>
      <CanvasGrid />
    </SpreadsheetProvider>
  )
}

const App = () => {
  return (
    <>
      <SpreadsheetA />
      <SpreadsheetB />
    </>
  )
}
```