Example of Remote Data Binding in React Spreadsheet Component


This sample demonstrates data binding to the Spreadsheet component with a remote service using DataManager.

More Details...


The Spreadsheet supports data binding. The dataSource property can be assigned with the instance of DataManager to bind remote data.

DataManager, which will act as an interface between the service endpoint and the Spreadsheet, requires the following minimum configuration to interact with the service endpoint properly:

  • DataManager > url : Defines the service endpoint to fetch data.
  • DataManager > adaptor : Defines the adaptor option. By default, ODataAdaptor is used for remote binding.

Adaptor is responsible for processing the response from the service endpoint and the request to it. The @syncfusion/ej2-data package provides some predefined adaptors that are designed to interact with service endpoints. They are:

  • UrlAdaptor : Use this to interact with any remote services. This is the base adaptor for all remote-based adaptors.
  • ODataAdaptor : Use this to interact with OData endpoints.
  • ODataV4Adaptor : Use this to interact with OData V4 endpoints.
  • WebApiAdaptor : Use this to interact with Web API created under OData standards.
  • WebMethodAdaptor : Use this to interact with web methods.

In this demo, remote data is bound by assigning service data as an instance of DataManager to the dataSource property under the ranges of sheet.

More information about remote data binding can be found in this documentation section.