- SpreadJS Overview
- Getting Started
- JavaScript Frameworks
- Best Practices
- Features
- SpreadJS Designer
- SpreadJS Designer VSCode Plugin
- Tutorials
-
SpreadJS Designer Component
- Getting Started
- Quick Start
- Theme
- Designer Interface
- JavaScript Frameworks
- Template-Based Workbook Initialization
- Customizations
-
Work in Designer Component
- AutoSum Functions
- Set Range Template Cell
- Name Box
- Select Cells Using Go To
- Find and Replace
- Edit Font Size
- Edit Font Family
- Manage Conditional Formatting Rules
- Shape Selection Pane
- Automatic Outline
- Format Painter
- Table Slicer
- Data Source
- TableSheet
- GanttSheet Designer
- ReportSheet Designer
- Data Chart Designer
- Text to Columns
- Remove Duplicates
- Pivot Table
- Dockable Side Panel
- Command Palette
- Transform Cells with LAMBDA Formula
- Threaded Comments Panel
- What-If Analysis
- Insert Function Dialog
- Named Cell Templates
- Insert Pictures in Designer
- Toolbar Ribbon
- API Documentation
- SpreadJS Collaboration Server
- Touch Support
- Formula Reference
- Import and Export Reference
- Events
- API Documentation
- Release Notes
Data Source
Modern SpreadJS components such as TableSheet, GanttSheet, ReportSheet, and Data Chart are built on top of structured data models.
Before these components can be used effectively, the underlying data must be defined, organized, and configured.
The Data Source panel in SpreadJS Designer provides a centralized environment for building and managing that data model.
It allows you to:
Define structured tables
Configure schema and column behavior
Establish relationships between tables
Enable hierarchical data
Apply validation and formatting rules
Preview and verify data configuration
All settings configured here map directly to the runtime Data Manager.
Designer does not create a separate data system — it provides a visual layer for defining the same table structures and behaviors available programmatically.
Why Use Data Source
The Data Source panel enables you to:
Prepare structured data for advanced components such as TableSheet and GanttSheet
Define relational data models for multi-table scenarios
Configure hierarchy for tree-structured data
Validate and inspect data before runtime binding
Reuse defined tables across multiple SpreadJS components
Once a table is configured, it can:
Be bound directly to TableSheet or GanttSheet
Be used as a data source for ReportSheet
Drive Data Chart visualizations
Be inserted into a standard worksheet and converted into a table
Serve as a foundation for PivotTable analysis
This makes Data Source a central data modeling tool within SpreadJS.
Data Source Workflow
The Data Source panel is organized into four functional areas:
Managing Tables – Manage the lifecycle of tables, including creation, renaming, deletion, switching between tables, and converting existing worksheet tables into managed data tables.
Configuring Table Data Source – Configure how a table connects to its data source and behaves at runtime, including local or remote mode, request endpoints, synchronization settings, submission behavior, and row or column operation policies.
Managing Columns – Define and manage column structure and behavior, including data types, schema settings, validation rules, styling, relationships, and hierarchy configuration.
Previewing Data – Verify the configured table in a read-only preview that reflects schema settings, calculated columns, and visual indicators.
Together, these sections guide you through defining a table, configuring its data connectivity and runtime behavior, refining its column structure, and validating the final configuration.