# Installation

Spreadsheet 2 is hosted in github.com, hence you have to create a personal access token to install the npm package.

### Generate personal access token

Visit <https://github.com/settings/tokens> to generate a personal access token

### Login to Github

Enter your personal access token when prompted for password

```
npm login --scope=@rowsncolumns --registry=https://npm.pkg.github.com
```

You can also generate a new personal access token and add this to your `.npmrc` file

{% code overflow="wrap" %}

```sh
//npm.pkg.github.com/:_authToken=PERSONAL_ACCESS_TOKEN_FROM_https://github.com/settings/tokens
@rowsncolumns:registry=https://npm.pkg.github.com/
```

{% endcode %}

***

## Install using Yarn or NPM

To install Spreadsheet 2 locally using a package manager, run one of these commands:

{% tabs %}
{% tab title="yarn" %}

```sh
yarn add @rowsncolumns/spreadsheet
```

```sh
// Optional spreadsheet state hook
yarn add @rowsncolumns/spreadsheet-state
```

{% endtab %}

{% tab title="npm" %}

```sh
npm install @rowsncolumns/spreadsheet --save
```

```bash
// Optional spreadsheet state hook
npm install @rowsncolumns/spreadsheet-state --save
```

{% endtab %}
{% endtabs %}

## Render the Spreadsheet

The code below will render a stateless spreadsheet in your React application.

```jsx
import React from 'react'
// Add css
import "@rowsncolumns/spreadsheet/dist/spreadsheet.min.css";
import { SpreadsheetProvider, CanvasGrid } from "@rowsncolumns/spreadsheet"

const MySpreadsheet = () => {
  const licenseKey = "will be emailed to you after purchase"
  return (
    <SpreadsheetProvider>
      <CanvasGrid licenseKey={licenseKey} />
    </SpreadsheetProvider>
  )
}
```

## Adding state

Spreadsheet 2 does not manage any state internally, It is a controlled component.

Developers can pass Spreadsheet state as props and hook into callbacks and continue updating this state externally.

{% content-ref url="/pages/Tkh9IZ8zoIKPkzF0SCal" %}
[Spreadsheet state](/getting-started/spreadsheet-state.md)
{% endcontent-ref %}

{% content-ref url="/pages/1K1LQHEUyu2ao77EyOsn" %}
[Headless UI](/getting-started/headless-ui.md)
{% endcontent-ref %}

## Adjusting the height of the Spreadsheet

The Spreadsheet automatically takes the height of the parent container.

```html
// Auto-height
<div style={{ flex: 1}}>
    <Spreadsheet />
</div>

// Fixed height
<div style={{ height: 500 }}>
    <Spreadsheet />
</div>
```

## Rending multiple spreadsheets

`SpreadsheetProvider` isolates Spreadsheet state to its own container. If you need multiple spreadsheets in a single page, wrap each spreadsheet with the provider

```tsx
import "@rowsncolumns/spreadsheet/dist/spreadsheet.min.css";
import { SpreadsheetProvider, CanvasGrid } from "@rowsncolumns/spreadsheet"

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

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

### Customising colors and themes

{% content-ref url="/pages/0G598eXeb4ZEewC1z2og" %}
[Theming](/configuration/features/theming.md)
{% endcontent-ref %}


---

# 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/getting-started/installation.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.