View Basics

Creating a View

Use addView on a table:

var view = table.addView(
    name,
    columnInfos?,
    includeDefaultColumns?,
    options?
);

Parameters

• name - The unique name of the view within the table.

• columnInfos - An array of field names or column configuration objects.

• includeDefaultColumns - When column information is omitted, default table columns are included.

• options - Additional view-level configuration.

Example

Assume the table contains:

var sampleData = [
    { Id: 1, Name: "John Doe", Score: 85 },
    { Id: 2, Name: "Jane Smith", Score: 92 }
];

Create the table:

var myTable = dataManager.addTable("myTable", {
    data: sampleData
});

Create a view:

var myView = myTable.addView("myView", [
    { value: "Id", caption: "ID", width: 60 },
    { value: "Name", width: 150 },
    { value: "Score", width: 80 }
]);

This view:

• Includes only selected fields

• Renames Id to ID

• Controls column layout

If no columns are specified, the view includes all default columns of the host table.

Initializing a View

After creating a view, you should call:

view.fetch();

This step initializes the view data and prepares it for use.

The method returns a Promise:

view.fetch().then(function () {
    tableSheet.setDataView(view);
});

If the underlying data source needs to be refreshed, use:

view.fetch(true);

Calling fetch() ensures the view reflects the latest state of its host table before binding or data access.

Binding a View to a Sheet

A View serves as the structured data source for UI components.

Bind to TableSheet

view.fetch().then(function () {
    tableSheet.setDataView(view);
});

Bind to GanttSheet

view.fetch().then(function () {
    ganttSheet.bindGanttView(view);
});

The sheet renders data according to the structure defined by the view.

Managing Views

Each table maintains a collection of views.

You can create multiple views to represent different layouts of the same table data.

Add a View

table.addView("summaryView");

Remove a View

table.removeView("summaryView");

Removing a view does not affect the underlying table data.

Managing Columns in a View

Columns can be adjusted after a view is created.

Add a Column

view.addColumn("Email");

Add a Column with Configuration

view.addColumn({
    value: "Email",
    caption: "Email Address",
    width: 200
});

Remove a Column

view.removeColumn("Email");

Get Columns

view.getColumn();     // all columns
view.getColumn(1);    // specific column

These operations modify only the structure of the view, not the underlying table schema.