# 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="spreadsheet-state" %}
[spreadsheet-state](https://docs.rowsncolumns.app/getting-started/spreadsheet-state)
{% endcontent-ref %}

{% content-ref url="headless-ui" %}
[headless-ui](https://docs.rowsncolumns.app/getting-started/headless-ui)
{% 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="../configuration/features/theming" %}
[theming](https://docs.rowsncolumns.app/configuration/features/theming)
{% endcontent-ref %}