Comment on page
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.
Enter your personal access token when prompted for password
npm login --scope=@rowsncolumns --registry=https://npm.pkg.github.com
To install Spreadsheet 2 locally using a package manager, run one of these commands:
yarn
npm
yarn add @rowsncolumns/spreadsheet
// Optional spreadsheet state hook
yarn add @rowsncolumns/spreadsheet-state
npm install @rowsncolumns/spreadsheet --save
// Optional spreadsheet state hook
npm install @rowsncolumns/spreadsheet-state --save
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>
)
}
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.
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>
SpreadsheetProvider isolates Spreadsheet state to its own container. If you need multiple spreadsheets in a single page, wrap each spreadsheet with the providerimport "@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 />
</>
)
}
Last modified 3d ago