Range API in Vue Spreadsheet API component

Configures the range processing for the spreadsheet.

<div id='Spreadsheet'></div>

let spreadsheet: Spreadsheet = new Spreadsheet({
     sheets: [{
                 name: 'First Sheet',
                 ranges: [{ dataSource: defaultData }],
                 rows: [{
                         index: 30,
                         cells: [{ index: 4, value: 'Total Amount:' },
                                 { formula: '=SUM(F2:F30)', style: { fontWeight: 'bold' } }]
                 }]
...
});
spreadsheet.appendTo('#Spreadsheet');

Properties

address

string

Specifies the address for updating the dataSource or template.

Defaults to ‘A1’

dataSource

Object[] | DataManager

Specifies the data as JSON / Data manager to the sheet.

Defaults to null

fieldsOrder

string[]

By default, when a sheet is bound to a data source, columns are assigned to data source fields sequentially. This means that the first data field is assigned to Column A, the second to Column B, and so on. You can customize these assignments by specifying the field names in the desired column order using the ‘fieldsOrder’ property.

Defaults to null

query

Query

Defines the external Query that will be executed along with data processing.

Defaults to null

showFieldAsHeader

boolean

Show/Hide the field of the datasource as header.

Defaults to true

startCell

string

Specifies the start cell from which the datasource will be populated.

Defaults to ‘A1’

template

string | Function

Template helps to compiles the given HTML String (or HTML Element ID) into HtML Element and append to the Cell.

Defaults to ”