Learn how to can bind local and remote data to the Syncfusion Vue Spreadsheet component. This video also shows you how to bind data to the individual cells in a sheet and change the data source dynamically with a button click.
The Vue Spreadsheet, an Excel viewer, is a feature-rich component for web applications for organizing and analyzing data in tabular format, like Microsoft Excel. It provides all the common spreadsheet features, including data binding, selection, freeze panes, editing, formatting, protection, resizing, sorting, importing, and exporting Excel documents.
The Vue Spreadsheet is designed and optimized for loading large amounts of data into a worksheet and viewing it on demand with the help of row and column virtualization. A worksheet is a collection of cells arranged in rows and columns that lets you save, format, and work with data.
You can create, delete, and rename worksheets, as well as customize the headers, gridlines, and sheet visibility in our Vue Spreadsheet. Local data binding uses a JavaScript object array as the data source for the Spreadsheet. To bind local data, assign a JavaScript object array to the dataSource property. This approach is useful when you want to work with data directly within your Vue application. Remote data binding allows you to fetch data from an external service or API. To bind remote data, use an instance of DataManager and provide the service endpoint URL. The dataSource property is assigned the DataManager instance, which handles data retrieval and communication with the remote source.
The Spreadsheet control can bind the data to individual cells in a sheet. To achieve this, use the value property. Vue Spreadsheet allows users to format cells and numbers, and allows conditional formatting to format a cell or range of cells based on the conditions applied. The component provides a wide range of formulas with cross-sheet reference support and a rich UI that comes with a built-in calculation engine that performs formula calculations.
Tutorial video: https://www.syncfusion.com/tutorial-videos
Download an example from GitHub: https://github.com/SyncfusionExamples/how-to-bind-data-to-the-vue-spreadsheet-component
Top comments (0)