Links

Imperative Spreadsheet API

As an escape hatch, we bundle an imperative API for the Spreadsheet to control spreadsheet states
Imperative API is helpful when you want to trigger state changes without having to modify spreadsheet state manually. These APIs can do multiple actions in one function call
For batch updates of large number of cells, we do not recommend the API, as each call to the API will add an entry to undo/redo history, which can cause performance issues.
For batch update, we recommend to update React state directly using setState

How to use

  1. 1.
    Wrap your Spreadsheet in SpreadsheetProvider
  2. 2.
    Make sure you have handlers for callbacks such as onChange
import React from 'react'
// Add css
import "@rowsncolumns/spreadsheet/dist/spreadsheet.min.css";
import { SpreadsheetProvider, CanvasGrid, useSpreadsheetApi } from "@rowsncolumns/spreadsheet"
const MySpreadsheet = () => {
const api = useSpreadsheetApi()
const [sheetData, setSheetData] =
useState<SheetData<CellData>>({});
const onChange = (sheetId, cell, value) => {
setSheetData(prev => {
})
}
return (
<>
<button
onClick={() => {
api.setActiveSheet(2)
api.getSheet(2)
.getRange({ rowIndex: 2, columnIndex: 2 })
.setValue("hello world")
}}
>Switch to next sheet and Update a cell</button>
<CanvasGrid onChange={onChange} />
</>
)
}
const App = () => {
return (
<SpreadsheetProvider>
<MySpreadsheet />
</SpreadsheetProvider>
)
}

Spreadsheet

getSheet(sheetId: number)
setActiveSheet(sheetId: number)
getActiveSheet()
insertSheet()

Sheet

setActiveCell(cell: CellInterface)
setSelections(selections: GridRange)
setRowHeight(rowIndex: number, dimension: number)
setColumnWidth(columnIndex: number, dimension: number)
getActiveCell()
getSelections()
getSheetId()
getRange(range: GridRange | CellInterface)
hideRow(rowIndexes: number[])
hideColumn(columnIndexes: number[])
showRow(rowIndexes: number[])
showColumn(columnIndexes: number[])
deleteRow(rowIndexes: number[])
deleteColumn(columnIndexes: number[])
insertRow(rowIndex: number, numRows = 1)
insertColumn(columnIndex: number, numColumns = 1)
moveRows(rowIndexes: number[], destinationRow: number)
moveColumns(columnIndexes: number[], destinationColumn: number)
onRequestSearch()
sortRange( selections: SelectionArea[], sortOrder: SortOrder )
sortColumn(columnIndex: number, sortOrder: SortOrder)

CellRange

setValue(text: string)
setValues(values: string[][])
clearFormatting()
setFormat(type: T, value: FormattingValue)
delete()