Interface for a class Workbook
EmitType<BeforeCellFormatArgs>
Triggers before the cell format applied to the cell.
<div id='Spreadsheet'></div>new Spreadsheet({
beforeCellFormat: (args: BeforeCellFormatArgs) => {
}
...
}, '#Spreadsheet'); EmitType<BeforeCellUpdateArgs>
Triggers before changing any cell properties.
<div id='Spreadsheet'></div> new Spreadsheet({
beforeCellUpdate: (args: BeforeCellUpdateArgs) => {
}
...
}, '#Spreadsheet');Triggers before opening an Excel file.
<div id='Spreadsheet'></div>new Spreadsheet({
beforeOpen: (args: BeforeOpenEventArgs) => {
}
...
}, '#Spreadsheet');Triggers before saving the Spreadsheet as Excel file.
<div id='Spreadsheet'></div>new Spreadsheet({
beforeSave: (args: BeforeSaveEventArgs) => {
}
...
}, '#Spreadsheet');Triggers when the opened Excel file fails to load.
<div id='Spreadsheet'></div>new Spreadsheet({
openFailure: (args: OpenFailureArgs) => {
}
...
}, '#Spreadsheet');Triggered every time a request is made to access cell information.
<div id='Spreadsheet'></div>new Spreadsheet({
queryCellInfo: (args: CellInfoEventArgs) => {
}
...
}, '#Spreadsheet'); EmitType<SaveCompleteEventArgs>
Triggers after saving the Spreadsheet as Excel file.
<div id='Spreadsheet'></div>new Spreadsheet({
saveComplete: (args: SaveCompleteEventArgs) => {
}
...
}, '#Spreadsheet'); number
Specifies active sheet index in workbook.
<div id='Spreadsheet'></div>new Spreadsheet({
activeSheetIndex: 2
...
}, '#Spreadsheet'); boolean
It allows to enable/disable AutoFill functionalities.
boolean
It allows you to apply styles (font size, font weight, font family, fill color, and more) to the spreadsheet cells.
boolean
It allows you to insert the chart in spreadsheet.
boolean
It allows you to apply conditional formatting to the sheet.
boolean
It allows you to apply validation to the spreadsheet cells.
boolean
It allows you to delete rows, columns and sheets from spreadsheet.
boolean
It allows you to add new data or update existing cell data. If it is false, it will act as read only mode.
boolean
It allows to enable/disable filter and its functionalities.
boolean
It allows to enable/disable find and replace with its functionalities.
boolean
It allows to enable/disable freeze pane functionality in spreadsheet.
boolean
It allows to enable/disable Hyperlink and its functionalities.
boolean
It allows you to insert the image in spreadsheet.
boolean
It allows you to insert rows, columns and sheets in to the spreadsheet.
boolean
It allows you to merge the range of cells.
boolean
It allows formatting a raw number into different types of formats (number, currency, accounting, percentage, short date, long date, time, fraction, scientific, and text) with built-in format codes.
boolean
It allows you to open an Excel file (.xlsx, .xls, and .csv) in Spreadsheet.
boolean
It allows you to save Spreadsheet with all data as Excel file (.xlsx, .xls, and .csv).
boolean
It allows to enable/disable sort and its functionalities.
Configures the auto fill settings.
<div id='Spreadsheet'></div>new Spreadsheet({
autoFillSettings: {
fillType: 'FillSeries',
showFillOptions: true
}
...
}, '#Spreadsheet');
The autoFillSettings `fillType` property has FOUR values and it is described below:
* CopyCells: To update the copied cells of the selected range.
* FillSeries: To update the filled series of the selected range.
* FillFormattingOnly: To fill the formats only for the selected range.
* FillWithoutFormatting: To fill without the format of the selected range.Specifies the cell style options.
<div id='Spreadsheet'></div>new Spreadsheet({
...
cellStyle: { fontWeight: 'bold', fontSize: 12,
fontStyle: 'italic', textIndent: '2pt'
backgroundColor: '#4b5366', color: '#ffffff'
},
...
}, '#Spreadsheet');Specifies the name for a range and uses it in formula for calculation.
<div id='Spreadsheet'></div>new Spreadsheet({
...
definedNames: [{ name: 'namedRange1', refersTo: 'Sheet1!A1:B5' }],
...
}, '#Spreadsheet'); boolean
Enable or disable persisting component’s state between page reloads.
boolean
Enable or disable rendering component in right to left direction.
string | number
Defines the height of the Spreadsheet. It accepts height as pixels, number, and percentage.
<div id='Spreadsheet'></div>new Spreadsheet({
height: '550px'
...
}, '#Spreadsheet'); boolean
Specifies to protect the workbook.
string
Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.
string
Specifies the service URL to open excel file in spreadsheet.
string
Specifies the password.
string
Specifies the service URL to save spreadsheet as Excel file.
Configures sheets and its options.
<div id='Spreadsheet'></div>new Spreadsheet({
sheets: [{
name: 'First Sheet',
range: [{ dataSource: data }],
rows: [{
index: 5,
cells: [{ index: 4, value: 'Total Amount:' },
{ formula: '=SUM(F2:F30)', style: { fontWeight: 'bold' } }]
}]
}, {
name: 'Second Sheet',
columns: [{ width: 180 }, { index: 4, width: 130 }]
}]
...
}, '#Spreadsheet'); boolean
It shows or hides the formula bar and its features.
boolean
It shows or hides the ribbon in spreadsheet.
boolean
It shows or hides the sheets tabs, this is used to navigate among the sheets and create or delete sheets by UI interaction.
string | number
Defines the width of the Spreadsheet. It accepts width as pixels, number, and percentage.
<div id='Spreadsheet'></div>new Spreadsheet({
width: '550px'
...
}, '#Spreadsheet');