Initialization

Initializing SpreadSheet is as easy as importing the component in your React app. SpreadSheet will pickup the height/width of the parent container automatically. It will also resize when parent container dimensions change.

import SpreadSheet from "@rowsncolumns/spreadsheet";
return (
<SpreadSheet />
)
fx

Sheet1

Initialize Sheets

Pass sheets prop to SpreadSheet to initialize (for controlled) and initialSheets for un-controlled component

import SpreadSheet, { uuid } from "@rowsncolumns/spreadsheet";
const sheets = [
{
name: 'Sheet 1',
id: uuid(),
cells: {
1: {
1: {
text: 'Hello'
},
2: {
text: 'World'
}
}
}
},
]
return (
<SpreadSheet
initialSheets={sheets}
/>
)
fx

Sheet 1

Initialize from JSON data

Fetch and parse JSON data and convert it to sheets before passing it to SpreadSheet component

import { useState, useEffect } from 'react'
export const SheetFromJSON = () => {
const [sheets, setSheets] = useState()
useEffect(() => {
async function fetchJSON () {
const resource = await (await fetch('/data.json').then(res => res.json()))
const headers = []
const data = []
const sheet = {
name: 'Sheet 1',
cells: {},
id: 1
}
for (let i = 0; i < resource.length; i++) {
const item = resource[i]
const keys = Object.keys(item)
if (i === 0) {
for (const [index, key] of keys.entries()) {
const rowIndex = i + 1
const columnIndex = index + 1
sheet.cells[rowIndex] = sheet.cells[rowIndex] ?? {}
sheet.cells[rowIndex][columnIndex] = {
text: key,
bold: true,
}
}
}
for (const [index, key] of keys.entries()) {
const rowIndex = i + 2
const columnIndex = index + 1
sheet.cells[rowIndex] = sheet.cells[rowIndex] ?? {}
sheet.cells[rowIndex][columnIndex] = {
text: item[key]
}
}
}
setSheets([sheet])
}
fetchJSON()
}, [])
return (
<SpreadSheet
sheets={sheets}
onChange={setSheets}
/>
)
}
fx

Sheet1