# Data Source

## Content

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](/spreadjs/docs/spreadjs-designer-component/spdesignerwork/data-source/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](/spreadjs/docs/spreadjs-designer-component/spdesignerwork/data-source/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](/spreadjs/docs/spreadjs-designer-component/spdesignerwork/data-source/managing-columns) – Define and manage column structure and behavior, including data types, schema settings, validation rules, styling, relationships, and hierarchy configuration.
* [Previewing Data](/spreadjs/docs/spreadjs-designer-component/spdesignerwork/data-source/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.