• Material 3
  • Fluent
  • Fluent 2
  • Bootstrap 5
  • Tailwind CSS
  • High Contrast
  • Fluent 2 High Contrast
Preferences
Mode Selection
Touch
Mouse
Theme Selection
Theme Mode
Localization
*Translated by Google Translator.
Currency

This sample demonstrates the Spreadsheet component and its features such as editing, formulas, formatting, importing, and exporting.

DEMO
DOCUMENTATION
SOURCE

The Spreadsheet component is used to organize and analyze data in tabular format. It has a built-in calculation library that supports most commonly used formulas. Excel workbook files can be imported and exported by providing the openUrl and saveUrl property.

Data binding can be achieved by setting a list objects or an instance of Data Manager to the dataSource property under the ranges of sheet. The cellFormat and numberFormat methods are used to apply format to a range of cells in the dataBound event.

Key Features

  • Data binding - Populate worksheets by binding data from JavaScript objects, arrays, or DataManager sources.
  • Formula calculation - Perform calculations using the built-in calculation engine that supports commonly used Excel formulas and functions.
  • Cell and number formatting - Apply styles, alignment, currency, date, and custom number formats to enhance data presentation.
  • Import and export support - Open, edit, and save Excel workbook files while preserving worksheet data and formatting.
  • Excel-like spreadsheet experience - Organize, analyze, and manage tabular data with familiar spreadsheet features and interactions.

Learn how to bind data, apply format, calculate formulas, and import or export Excel files using the Spreadsheet component features demonstrated in this sample.

Documentation Links

More Resource