react-spreadsheet

Index

Classes

• EmptySelection
• EntireAxisSelection
• EntireColumnsSelection
• EntireRowsSelection
• EntireSelection
• EntireWorksheetSelection
• InvalidIndexError
• PointRange
• RangeSelection
• Selection

Functions

• DataEditor
• DataViewer
• Spreadsheet
• createEmptyMatrix

Type Aliases

• CellBase
• CellComponent
• CellComponentProps
• CellDescriptor
• ColumnIndicatorComponent
• ColumnIndicatorProps
• CornerIndicatorComponent
• CornerIndicatorProps
• DataEditorComponent
• DataEditorProps
• DataViewerComponent
• DataViewerProps
• Dimensions
• HeaderRowComponent
• HeaderRowProps
• Matrix
• Mode
• Point
• Props
• RowComponent
• RowIndicatorComponent
• RowIndicatorProps
• RowProps
• TableComponent
• TableProps

Type Aliases

CellBase

CellBase<Value>: { DataEditor?: DataEditorComponent<CellBase<Value>>; DataViewer?: DataViewerComponent<CellBase<Value>>; className?: string; readOnly?: boolean; value: Value }

The base type of cell data in Spreadsheet

---

Type parameters

• Value = any

Type declaration

• optionalDataEditor?: DataEditorComponent<CellBase<Value>>

  Custom component to render when the cell is edited, if not defined would default to the component defined for the Spreadsheet

• optionalDataViewer?: DataViewerComponent<CellBase<Value>>

  Custom component to render when the cell is viewed, if not defined would default to the component defined for the Spreadsheet

• optionalclassName?: string

  Class to be given for the cell element

• optionalreadOnly?: boolean

  Whether the cell should not be editable

• value: Value

  The value of the cell

CellComponent

CellComponent<Cell>: React.ComponentType<CellComponentProps<Cell>>

Type of the Spreadsheet Cell component

---

Type parameters

• Cell: CellBase = CellBase

CellComponentProps

CellComponentProps<Cell>: { DataViewer: DataViewerComponent<Cell>; activate: (point: Point) => void; active: boolean; column: number; copied: boolean; data: Cell | undefined; dragging: boolean; evaluatedData: Cell | undefined; mode: Mode; row: number; select: (point: Point) => void; selected: boolean; setCellData: (cell: Cell) => void; setCellDimensions: (point: Point, dimensions: Dimensions) => void }

Type of Spreadsheet Cell component props

---

Type parameters

• Cell: CellBase = CellBase

Type declaration

• DataViewer: DataViewerComponent<Cell>

  The DataViewer component to be used by the cell

• activate: (point: Point) => void

  • • (point: Point): void

    • Activate the cell at the given point

      ---

      Parameters

      • point: Point

      Returns void

• active: boolean

  Whether the cell is active

• column: number

  The column of the cell

• copied: boolean

  Whether the cell is copied

• data: Cell | undefined

  The data of the cell

• dragging: boolean

  Whether the user is dragging

• evaluatedData: Cell | undefined

  The evaluated data of the cell

• mode: Mode

  The mode of the cell

• row: number

  The row of the cell

• select: (point: Point) => void

  • • (point: Point): void

    • Select the cell at the given point

      ---

      Parameters

      • point: Point

      Returns void

• selected: boolean

  Whether the cell is selected

• setCellData: (cell: Cell) => void

  • • (cell: Cell): void

    • Set data of the cell

      ---

      Parameters

      • cell: Cell

      Returns void

• setCellDimensions: (point: Point, dimensions: Dimensions) => void

  • • (point: Point, dimensions: Dimensions): void

    • Set the dimensions of the cell at the given point with the given dimensions

      ---

      Parameters

      • point: Point

      • dimensions: Dimensions

      Returns void

CellDescriptor

CellDescriptor<Cell>: { data: Cell | undefined } & Point

A cell with it’s coordinates

@deprecated

the component does not use cell descriptors anymore. Instead it passes cell point and cell value explicitly.

---

Type parameters

• Cell

ColumnIndicatorComponent

ColumnIndicatorComponent: React.ComponentType<ColumnIndicatorProps>

Type of the ColumnIndicator component

ColumnIndicatorProps

ColumnIndicatorProps: { column: number; label?: React.ReactNode | null; onSelect: (column: number, extend: boolean) => void; selected: boolean }

Type of the Spreadsheet ColumnIndicator component props

---

Type declaration

• column: number

  The column the indicator indicates

• optionallabel?: React.ReactNode | null

  A custom label for the indicator as provided in columnLabels

• onSelect: (column: number, extend: boolean) => void

  • • (column: number, extend: boolean): void

    • Callback to be called when the column is selected

      ---

      Parameters

      • column: number

      • extend: boolean

      Returns void

• selected: boolean

  Whether the entire column in selected

CornerIndicatorComponent

CornerIndicatorComponent: React.ComponentType<CornerIndicatorProps>

Type of the CornerIndicator component

CornerIndicatorProps

CornerIndicatorProps: { onSelect: () => void; selected: boolean }

Type of the Spreadsheet CornerIndicator component props

---

Type declaration

• onSelect: () => void

  • • (): void

    • Callback to select the entire table

      ---

      Returns void

• selected: boolean

  Whether the entire table is selected

DataEditorComponent

DataEditorComponent<Cell>: React.ComponentType<DataEditorProps<Cell>>

Type of the Spreadsheet DataEditor component

---

Type parameters

• Cell: CellBase = CellBase

DataEditorProps

DataEditorProps<Cell>: DataComponentProps<Cell> & { exitEditMode: () => void; onChange: (cell: Cell) => void }

Type of the Spreadsheet DataEditor component props

---

Type parameters

• Cell: CellBase = CellBase

DataViewerComponent

DataViewerComponent<Cell>: React.ComponentType<DataViewerProps<Cell>>

Type of the Spreadsheet DataViewer component

---

Type parameters

• Cell: CellBase = CellBase

DataViewerProps

DataViewerProps<Cell>: DataComponentProps<Cell> & { evaluatedCell: Cell | undefined; setCellData: (cell: Cell) => void }

Type of the Spreadsheet DataViewer component props

---

Type parameters

• Cell: CellBase = CellBase

Dimensions

Dimensions: { height: number; left: number; top: number; width: number }

Dimensions of an element

---

Type declaration

• height: number

  The element’s height in pixels

• left: number

  The distance of the element from it’s container left border in pixels

• top: number

  The distance of the element from it’s container top border in pixels

• width: number

  The element’s width in pixels

HeaderRowComponent

HeaderRowComponent: React.ComponentType<HeaderRowProps>

Type of the HeaderRow component

HeaderRowProps

HeaderRowProps: React.PropsWithChildren<{}>

Type of the Spreadsheet HeaderRow component props

Matrix

Matrix<T>: (T | undefined)[][]

A two-dimensional array of given type T in rows and columns

---

Type parameters

• T

Mode

Mode: view | edit

The spreadsheet’s write mode

Point

Point: { column: number; row: number }

A cell coordinates in the spreadsheet

---

Type declaration

• column: number

  The cell’s column

• row: number

  The cell’s row

Props

Props<CellType>: { Cell?: Types.CellComponent<CellType>; ColumnIndicator?: Types.ColumnIndicatorComponent; CornerIndicator?: Types.CornerIndicatorComponent; DataEditor?: Types.DataEditorComponent<CellType>; DataViewer?: Types.DataViewerComponent<CellType>; HeaderRow?: Types.HeaderRowComponent; Row?: Types.RowComponent; RowIndicator?: Types.RowIndicatorComponent; Table?: Types.TableComponent; className?: string; columnLabels?: string[]; createFormulaParser?: Types.CreateFormulaParser; darkMode?: boolean; data: Matrix.Matrix<CellType>; hideColumnIndicators?: boolean; hideRowIndicators?: boolean; onActivate?: (active: Point.Point) => void; onBlur?: () => void; onCellCommit?: (prevCell: null | CellType, nextCell: null | CellType, coords: null | Point.Point) => void; onChange?: (data: Matrix.Matrix<CellType>) => void; onEvaluatedDataChange?: (data: Matrix.Matrix<CellType>) => void; onKeyDown?: (event: React.KeyboardEvent) => void; onModeChange?: (mode: Types.Mode) => void; onSelect?: (selected: Selection) => void; rowLabels?: string[]; selected?: Selection }

The Spreadsheet component props

---

Type parameters

• CellType: Types.CellBase

Type declaration

• optionalCell?: Types.CellComponent<CellType>

  The Spreadsheet’s cell component.

• optionalColumnIndicator?: Types.ColumnIndicatorComponent

  Component rendered above each column.

• optionalCornerIndicator?: Types.CornerIndicatorComponent

  Component rendered in the corner of row and column indicators.

• optionalDataEditor?: Types.DataEditorComponent<CellType>

  Component rendered for cells in edit mode.

• optionalDataViewer?: Types.DataViewerComponent<CellType>

  Component rendered for cells in view mode.

• optionalHeaderRow?: Types.HeaderRowComponent

  The spreadsheet’s header row component

• optionalRow?: Types.RowComponent

  The Spreadsheet’s row component.

• optionalRowIndicator?: Types.RowIndicatorComponent

  Component rendered next to each row.

• optionalTable?: Types.TableComponent

  The Spreadsheet’s table component.

• optionalclassName?: string

  Class name to be added to the spreadsheet’s root element

• optionalcolumnLabels?: string[]

  Labels to use in column indicators.

  @defaultValue

  alphabetical labels.

• optionalcreateFormulaParser?: Types.CreateFormulaParser

  Function used to create the formula parser (instance of “fast-formula-parser”) used by the Spreadsheet by getting the spreadsheet’s data.

  @defaultValue

  function which creates a formula parser bound to the Spreadsheet’s data.

  @see

  • createFormulaParser
  • https://www.npmjs.com/package/fast-formula-parser

• optionaldarkMode?: boolean

  Use dark colors that complement dark mode

  @defaultValue

  false

• data: Matrix.Matrix<CellType>

  The spreadsheet’s data

• optionalhideColumnIndicators?: boolean

  If set to true, hides the column indicators of the spreadsheet.

  @defaultValue

  false.

• optionalhideRowIndicators?: boolean

  If set to true, hides the row indicators of the spreadsheet.

  @defaultValue

  false.

• optionalonActivate?: (active: Point.Point) => void

  • • (active: Point.Point): void

    • Callback called when Spreadsheet’s active cell changes.

      ---

      Parameters

      • active: Point.Point

      Returns void

• optionalonBlur?: () => void

  • • (): void

    • Callback called when the Spreadsheet loses focus

      ---

      Returns void

• optionalonCellCommit?: (prevCell: null | CellType, nextCell: null | CellType, coords: null | Point.Point) => void

  • • (prevCell: null | CellType, nextCell: null | CellType, coords: null | Point.Point): void

    • Parameters

      • prevCell: null | CellType

      • nextCell: null | CellType

      • coords: null | Point.Point

      Returns void

• optionalonChange?: (data: Matrix.Matrix<CellType>) => void

  • • (data: Matrix.Matrix<CellType>): void

    • Callback called when the Spreadsheet’s data changes.

      ---

      Parameters

      • data: Matrix.Matrix<CellType>

      Returns void

• optionalonEvaluatedDataChange?: (data: Matrix.Matrix<CellType>) => void

  • • (data: Matrix.Matrix<CellType>): void

    • Callback called when the Spreadsheet’s evaluated data changes.

      ---

      Parameters

      • data: Matrix.Matrix<CellType>

      Returns void

• optionalonKeyDown?: (event: React.KeyboardEvent) => void

  • • (event: React.KeyboardEvent): void

    • Callback called on key down inside the spreadsheet.

      ---

      Parameters

      • event: React.KeyboardEvent

      Returns void

• optionalonModeChange?: (mode: Types.Mode) => void

  • • (mode: Types.Mode): void

    • Callback called when the Spreadsheet’s edit mode changes.

      ---

      Parameters

      • mode: Types.Mode

      Returns void

• optionalonSelect?: (selected: Selection) => void

  • • (selected: Selection): void

    • Callback called when the Spreadsheet’s selection changes.

      ---

      Parameters

      • selected: Selection

      Returns void

• optionalrowLabels?: string[]

  Labels to use in row indicators.

  @defaultValue

  row index labels.

• optionalselected?: Selection

  The selected cells in the worksheet.

RowComponent

RowComponent: React.ComponentType<RowProps>

Type of the Row component

RowIndicatorComponent

RowIndicatorComponent: React.ComponentType<RowIndicatorProps>

Type of the RowIndicator component

RowIndicatorProps

RowIndicatorProps: { label?: React.ReactNode | null; onSelect: (row: number, extend: boolean) => void; row: number; selected: boolean }

Type of the Spreadsheet RowIndicator component props

---

Type declaration

• optionallabel?: React.ReactNode | null

  A custom label for the indicator as provided in rowLabels

• onSelect: (row: number, extend: boolean) => void

  • • (row: number, extend: boolean): void

    • Callback to be called when the row is selected

      ---

      Parameters

      • row: number

      • extend: boolean

      Returns void

• row: number

  The row the indicator indicates

• selected: boolean

  Whether the entire row is selected

RowProps

RowProps: React.PropsWithChildren<{ row: number }>

Type of the Spreadsheet Row component props

TableComponent

TableComponent: React.ComponentType<TableProps>

Type of the Spreadsheet Table component

TableProps

TableProps: React.PropsWithChildren<{ columns: number; hideColumnIndicators?: boolean | null }>

Type of the Spreadsheet Table component props