React Spreadsheet - Tutorial Videos

Learn how easily you can create and configure the Syncfusion React Spreadsheet using the create-react-app command, then organize and analyze data in a tabular format. This video also explains how to configure a few of the control's basic features like selection, editing, formatting, resizing, applying formula, importing, and exporting Excel documents.

Download Example: Getting Started with the React Spreadsheet

Learn how easily you can bind data to the React Spreadsheet component of Syncfusion. In this demo, remote data is bound by assigning service url as an instance of the DataManager to the datasource property under the ranges of sheet. The Syncfusion Data Manager acts as an interface between the service endpoint and the Spreadsheet component. This video also explains how to bind cell data and change the data source dynamically.

Download Example: Binding Data to the React Spreadsheet

Learn how easily you can open an excel file in our React Spreadsheet component and save it in different file formats. In this demo, you will learn how to open an Excel file on initial load, configure server, send and receive custom params, and user APIs.

Download Example: Opening and Saving Excel Files in the React Spreadsheet

Learn how easily you can create a worksheet and edit a cell in React Spreadsheet component of Syncfusion. You will learn how to add, delete, rename sheets, and hide header, grid lines, and sheets. You will also learn how to edit cell, save cells, and cancel editing.

Download Example: Creating and Editing Worksheets in the React Spreadsheet

Learn how easily you can work with cell ranges in the Syncfusion React Spreadsheet component. You will see how to wrap text, merge two or more cells, apply data validation, and auto fill data in a cell range. You will also learn how to clear formatting, hyperlinks, formulas, and contents.

Download Example: Working with Cell Ranges in the React Spreadsheet

Learn how easy it is to work with formulas in the Syncfusion React Spreadsheet component. The Spreadsheet component provides a built-in calculation library that supports commonly used formulas. This video demonstrates the use of formulas to analyze a company's stock value for a certain period. You will learn how to set formulas through the data source and using the Formula tab in the Spreadsheet ribbon, how to add user-defined functions, and how to work with named ranges in formulas.

Download Example: Working with Formulas in the React Spreadsheet

Learn how easy it is to apply formats to a cell range in the Syncfusion React Spreadsheet component. You will learn how to format numbers in a cell range and apply cell formatting options like font sizes. This video demonstrates the use of conditional formats with preset colors, data bars, color scales, and icons scales.

Download Example: Formatting Cell Ranges in the React Spreadsheet

Learn how easy it is to freeze rows and columns in the React Spreadsheet Component of Syncfusion using the "Gross Salary calculation" as an example. In this demo, you will see the frozen rows and columns in place when scrolling the sheet content vertically or horizontally.

Download Example: Freezing Rows and Columns in the React Spreadsheet

Learn how to insert an image in the React Spreadsheet component of Syncfusion. In this video, the image has been inserted in the specific cell position by using the image property. You can also insert an image by using the insertImage method. To enable or disable this feature use the allowImage property in Spreadsheet. You can change the height and width of the image by resizing it and move it to another position with drag and drop functionality.

Download Example: Inserting Images in the React Spreadsheet

Learn how easy it is to insert a chart in the Syncfusion React Spreadsheet component. In this video, a chart has been inserted in a specific cell position by using the chart property. You can also insert a chart by using the insertChart method. To enable or disable this feature, use the allow-Chart property in the Spreadsheet component. You can change the height and width of the chart by resizing it and moving it to another position by dragging and dropping it.

Download Example: Inserting Charts in the React Spreadsheet

Learn how easy it is to protect a sheet in the React Spreadsheet component of Syncfusion. You will also learn how to unlock cell range in a protected sheet and protect an entire sheet or workbook with a password and how to unprotect them. To enable or disable this feature, use the isProtected property. You can also protect a sheet by using the protectSheet method.

Download Example: Protecting Worksheets in the React Spreadsheet