New to KendoReact? Start a free 30-day trial

SpreadsheetProps

Interface

Definition

Package:@progress/kendo-react-spreadsheet

Properties

className?

string

Sets additional classes to the Spreadsheet.

Example:

jsx

<Spreadsheet className="custom-class" />

defaultProps?

SpreadsheetOptions

Represents the default props of the Spreadsheet.

Example:

jsx

<Spreadsheet defaultProps={{ toolbar: true }} />

onChange?

(event: SpreadsheetChangeEvent) => void

Triggered when a value in the Spreadsheet has been changed.

Parameters:eventSpreadsheetChangeEvent

Example:

jsx

<Spreadsheet onChange={(event) => console.log(event.range)} />

onChangeFormat?

(event: SpreadsheetChangeEvent) => void

Triggered when the range format is changed from the UI.

Parameters:eventSpreadsheetChangeEvent

Example:

jsx

<Spreadsheet onChangeFormat={(event) => console.log(event.range)} />

onExcelExport?

(event: SpreadsheetExcelExportEvent) => void

Fires when the user clicks the Export to Excel toolbar button.

Parameters:eventSpreadsheetExcelExportEvent

Example:

jsx

<Spreadsheet onExcelExport={(event) => console.log(event.workbook)} />

onExcelImport?

(event: SpreadsheetExcelImportEvent) => void

Fired when the user clicks the Open toolbar button.

Parameters:eventSpreadsheetExcelImportEvent

Example:

jsx

<Spreadsheet onExcelImport={(event) => console.log(event.file)} />

onSelect?

(event: SpreadsheetSelectEvent) => void

Triggered when the Spreadsheet selection is changed.

Parameters:eventSpreadsheetSelectEvent

Example:

jsx

<Spreadsheet onSelect={(event) => console.log(event.range)} />

style?

CSSProperties

Specifies the styles that will be applied to the wrapping element.

Example:

jsx

<Spreadsheet style={{ height: '500px' }} />

boolean | SpreadsheetTab[]

A Boolean value which indicates if the toolbar will be displayed. It also allows customizing the tabs' content.

Default:

true

Example:

jsx

<Spreadsheet toolbar={false} />
<Spreadsheet toolbar={[{ text: "Custom Tab", tools: [CustomToolComponent] }]} />

webMcp?

boolean | WebMcpProps

Enables browser-native AI agent tools via Web MCP (Chrome 146+).

Pass true for defaults or an object for fine-grained control. AI agents are multilingual — dataName accepts any language.

Example:

tsx

// Boolean: generic "spreadsheet" label
<Spreadsheet webMcp />

// Config object: explicit name
<Spreadsheet webMcp={{ dataName: 'budget' }} />