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

How to use

1. Wrap your Spreadsheet in SpreadsheetProvider

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>
  )
}

Batch updating Spreadsheet values

For batch update of values, we recommend using setValues API, so only 1 undo/redo history will be added

const api = useSpreadsheetApi()

api.getSheet(2).getRange({
  startRowIndex: 1;
  endRowIndex: 2;
  startColumnIndex: 2;
  endColumnIndex: 3;
}).setValues([
  ['foo', 'bar']
  ['hello', 'world']
])

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()