---
title: Overview
position: 1
seo_title: Overview of the Spreadsheet Component
seo_description: Learn about the basic features of the Telerik and Kendo UI
  Spreadsheet component, explore the elements in its anatomy, and check out the
  extensive set of available options in its live demo.
---
## Spreadsheet Overview

The Spreadsheet component is a UI element that allows the user to display and edit data in a tabular format. It emulates the functionality of traditional spreadsheet software for entering, editing, and analyzing data in rows and columns directly in the application or website. This component includes features such as resizing, calculating formulas, importing, and exporting files, making it a powerful tool for data management and analysis. Its intuitive grid layout and interactive functions make it an essential element in applications where detailed data processing is required.

### Live Demo

<LiveDemo data='{"links":[{"text":"Angular","url":"https://www.telerik.com/kendo-angular-ui/components/spreadsheet/"},{"text":"Blazor","url":"https://demos.telerik.com/blazor-ui/spreadsheet/overview"},{"text":"jQuery","url":"https://demos.telerik.com/kendo-ui/spreadsheet/index"},{"text":"React","url":"https://www.telerik.com/kendo-react-ui/components/spreadsheet/"},{"text":"Vue","url":"https://www.telerik.com/kendo-vue-ui/components/spreadsheet-wrapper/"},{"text":"ASP.NET Core","url":"https://demos.telerik.com/aspnet-core/spreadsheet"},{"text":"ASP.NET MVC","url":"https://demos.telerik.com/aspnet-mvc/spreadsheet"}],"demo":"components/spreadsheet/overview"}'></LiveDemo>

### Anatomy

The anatomy of the Spreadsheet summarizes the visual and functional elements of the component. The main elements include various bars and a spreadsheet pane, where data is displayed in a grid layout of rows and columns.

The next image shows the anatomy of a Spreadsheet and includes the following elements:

<BlueprintImage data='{"description":"","labels":[{"text":"Menu bar"},{"text":"Toolbar"},{"text":"Action bar"},{"text":"Name editor combobox"},{"text":"Formula bar"},{"text":"Spreadsheet pane"},{"text":"Spreadsheet top corner"},{"text":"Spreadsheet column header"},{"text":"Spreadsheet row header"},{"text":"Sheets bar"},{"text":"Preview icon buttons"},{"text":"Status bar"},{"text":"Zoom controls"}]}'>![A Telerik and Kendo UI Spreadsheet component and its elements including menu bar, toolbar, action bar, name editor comboox, formula bar, spreadsheet pane, spreadsheet top corner, spreadsheet column header, spreadsheet row header, sheets bar, preview icon buttons, status bar and zoom controls.](images/components-spreadsheet-overview-anatomy.png "Anatomy and elements of a Telerik and Kendo UI Spreadsheet component")</BlueprintImage>

### Framework-Specific Documentation

For specific information about the component, refer to its official product documentation:

<Wrap>
<ExternalResource data='{"title":"Kendo UI for Angular Spreadsheet","description":"Find more information about the Kendo UI for Angular Spreadsheet in the official product documentation of the component.","url":"http://www.telerik.com/kendo-angular-ui/components/spreadsheet/"}'>![Kendo UI for Angular logo.](/images/angular-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for Blazor Spreadsheet","description":"Find more information about the Telerik UI for Blazor Spreadsheet in the official product documentation of the component.","url":"https://docs.telerik.com/blazor-ui/components/spreadsheet/overview"}'>![Telerik UI for Blazor logo.](/images/blazor-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Kendo UI for jQuery Spreadsheet","description":"Find more information about the Kendo UI for jQuery Spreadsheet in the official product documentation of the component.","url":"https://docs.telerik.com/kendo-ui/controls/spreadsheet/overview"}'>![Kendo UI for jQuery logo.](/images/jquery-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"KendoReact Spreadsheet","description":"Find more information about the KendoReact Spreadsheet in the official product documentation of the component.","url":"http://www.telerik.com/kendo-react-ui/components/spreadsheet/"}'>![Kendo UI for React logo.](/images/react-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Kendo UI for Vue Spreadsheet","description":"Find more information about the Kendo UI for Vue Spreadsheet in the official product documentation of the component.","url":"http://www.telerik.com/kendo-vue-ui/components/spreadsheet/"}'>![Kendo UI for Vue logo.](/images/vue-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for ASP.NET Core Spreadsheet","description":"Find more information about the Telerik UI for ASP.NET Core Spreadsheet component.","url":"https://docs.telerik.com/aspnet-core/html-helpers/data-management/spreadsheet/overview"}'>![Telerik UI for ASP.NET Core logo.](/images/core-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for ASP.NET MVC Spreadsheet","description":"Find more information about the Telerik UI for ASP.NET MVC Spreadsheet component.","url":"https://docs.telerik.com/aspnet-mvc/html-helpers/data-management/spreadsheet/overview"}'>![Telerik UI for ASP.NET MVC logo.](/images/mvc-logo.svg)</ExternalResource>

</Wrap>