Integration with SpreadJS Components

DataManager provides the structured data model consumed by advanced SpreadJS components.

It does not render UI or handle interaction.

Instead, components bind to structured tables or views defined in the Workbook’s DataManager.

Integration Pattern

The integration follows a consistent model:

1. Access the Workbook’s DataManager

2. Define a table

3. Optionally configure schema and relationships

4. Create a view (when required)

5. Bind the view or table to a component

Different components consume the model in different ways, but all rely on the same DataManager instance.

TableSheet

TableSheet binds to a view.

const dataManager = spread.dataManager();

// Define a table
const table = dataManager.addTable("Employees", {
    data: [
        { id: 1, name: "John" },
        { id: 2, name: "Jane" }
    ]
});

// Create a view
const view = table.addView("employeeView", [
    { value: "id", caption: "ID" },
    { value: "name", caption: "Name" }
]);

await view.fetch();

// Bind to TableSheet
const tableSheet = spread.addSheetTab(
    0,
    "Employees",
    GC.Spread.Sheets.SheetType.tableSheet
);

tableSheet.setDataView(view);

TableSheet consumes a view projection of the table.

All structural logic remains inside DataManager.

See the TableSheet documentation for component configuration details.

GanttSheet

GanttSheet binds to a hierarchical view.

const dataManager = spread.dataManager();

const taskTable = dataManager.addTable("Tasks", {
    data: [
        { id: 1, name: "Planning", parentId: null },
        { id: 2, name: "Execution", parentId: 1 }
    ],
    schema: {
        hierarchy: {
            type: "Parent",
            column: "parentId"
        },
        columns: {
            id: { isPrimaryKey: true }
        }
    }
});

const view = taskTable.addView("taskView", [
    { value: "name", caption: "Task Name" }
]);

await view.fetch();

const ganttSheet = spread.addSheetTab(
    0,
    "Gantt",
    GC.Spread.Sheets.SheetType.ganttSheet
);

ganttSheet.bindGanttView(view);

Hierarchy configuration is defined in the schema.

GanttSheet renders the hierarchical structure.

See the GanttSheet documentation for component configuration details.

ReportSheet

ReportSheet binds directly to a table using data bindings.

const dataManager = spread.dataManager();

const orders = dataManager.addTable("Orders", {
    data: [
        { orderId: 1001, customer: "A" },
        { orderId: 1002, customer: "B" }
    ]
});

await orders.fetch();

const reportSheet = spread.addSheetTab(
    0,
    "Report",
    GC.Spread.Sheets.SheetType.reportSheet
);

const template = reportSheet.getTemplate();

template.setTemplateCell(1, 0, {
    type: "List",
    binding: "Orders[orderId]"
});

reportSheet.refresh();

ReportSheet consumes structured table data through binding expressions.

See the ReportSheet documentation for component configuration details.

Data Chart

Data Chart uses table data for visualization.

const dataManager = spread.dataManager();

const price = dataManager.addTable("Price", {
    data: [
        { product: "ItemA", price: 100 },
        { product: "ItemB", price: 120 }
    ]
});

await price.fetch();

const sheet = spread.getActiveSheet();

const chart = sheet.dataCharts.add("chart", 10, 10, 400, 300);

chart.setChartConfig({
    tableName: "Price",
    plots: [{
        type: GC.Spread.Sheets.DataCharts.DataChartType.column,
        encodings: {
            values: [{ field: "price" }],
            category: { field: "product" }
        }
    }]
});

The chart references the table by name.

DataManager remains the source of structured data.

See the Data Charts documentation for component configuration details.

Shared Data Model

Because DataManager belongs to the Workbook:

• Multiple components share the same tables

• A single table can support multiple views

• Updates propagate across bound components

This ensures consistent data behavior across the application.

Responsibility Boundary

DataManager is responsible for:

• Table structure

• Schema rules

• Relationships

• Hierarchy configuration

• Calculation and synchronization

Components are responsible for:

• Rendering

• Layout

• Interaction

• Component-specific commands

Each component provides its own documentation for UI configuration and advanced features.

Converting Worksheet Tables to Data Tables

In addition to defining tables directly through the DataManager API, SpreadJS allows you to convert an existing worksheet table into a DataManager table.

This enables a traditional sheet table to participate in the structured data modeling system, including:

• Schema configuration

• View creation

• Component binding

• Data relationships

The conversion process:

• Creates a new DataManager table

• Binds the original worksheet table to it

• Moves data management responsibility to the DataManager

After conversion, the worksheet table acts as a view of the underlying DataManager table.

Programmatic conversion is supported through dedicated APIs, and Designer also provides a visual conversion workflow.

For detailed conversion rules, constraints, and examples, see Convert from/to Data Table.