Installation

Install Spreadsheet 2 using your preferred package manager.

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

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

---

Install using Yarn or NPM

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

yarn

yarn add @rowsncolumns/spreadsheet

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

npm

npm install @rowsncolumns/spreadsheet --save

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

Render the Spreadsheet

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

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.

Spreadsheet state

Headless UI

Adjusting the height of the Spreadsheet

The Spreadsheet automatically takes the height of the parent container.

// 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

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

Theming