Add a DataRange using the designer

Add a DataRange using the designer

Posted by: Jean.s on 28 December 2025, 9:32 am EST

• 

  Jean.s

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 28 December 2025, 9:32 am EST

  Hi,
  
  I saw that it is possible to add a DataRange to a sheet through the API.
  
  How is it possible to do the same thing using the Designer?

  Best Regard

• 

  chirag.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 29 December 2025, 1:33 am EST

  Hi Jean,

  Data Range in SpreadJS is a runtime, code-driven feature and is designed to be created and managed through the API only, not via the Designer UI.

  A Data Range relies on a custom IDataProvider implementation, which contains executable business logic (value access, styling, events, undo/redo, serialization hooks, etc.). Because this logic must be provided in JavaScript and cannot be fully serialized as static sheet state, Data Ranges fall outside the scope of what the Designer can author or configure.

  The intended usage pattern is:

  1. Design the worksheet layout visually using the Designer.
  2. Load the exported sheet JSON at runtime.
  3. Programmatically attach Data Ranges to the required ranges using sheet.dataRanges.add() along with a custom IDataProvider.

  This separation is by design. So while Data Ranges are fully supported in SpreadJS, they are currently API-only and cannot be created or managed directly through the Designer UI.

  Kind Regards,
  
  Chirag

  References:

  1. Docs | Worksheet Data Range: https://developer.mescius.com/spreadjs/docs/features/worksheet/worksheet-data-range
  2. Demos | Basic Data Range: https://developer.mescius.com/spreadjs/demos/features/data-range/basic#demo_source_name