A TableSheet consists of various components, each with their own unique functionalities and customizations.

Tablesheet Panel

A TableSheet panel consists of the View name and the field names. Field names can also consist of calculated fields and related fields.

You can select which columns are shown or hidden in the TableSheet view as well as drag a field to adjust its order in the fields collection. By default, the panel only shows the column captions.

If the captions are missing then the field names are shown. You can also set the showSource option to "all" to show field names beside the captions.

The following code example shows how to create a tablesheet panel.

//init a table sheet panel
var host = document.getElementById("panel");
panel = new GC.Spread.Sheets.TableSheet.TableSheetPanel("myPanel", sheet, host);

The TableSheetPanel class provides methods such as attach, detach, and destroy, to interact with a TableSheet panel in runtime.

The following code sample shows how to work with different TableSheetPanel class methods.

// Init a table sheet panel
var host = document.getElementById("panel");
panel = new GC.Spread.Sheets.TableSheet.TableSheetPanel("myPanel", sheet, host);

// Attach a table sheet into current table sheet panel.
panel.attach(tableSheet);
// Detach a table sheet from current table sheet panel.
panel.detach();
// Destroy current table sheet panel.
panel.destroy();

Group Panel

A panel consists of a group area as well. This area provides the option to add group items, summary items and slice items.

You can group items by dragging the column items from the field area to the group area. Double-click the caption to modify the caption of group item.

Similarly you can remove a group item by dragging it from the group area to any other area, or click the remove button in the group item.

Adding Summary and Slice Items

You can create a summary item by clicking the "Add summary item" button and input custom formula. The summary item provides the option to add slice items by inputting the slice field. You can remove the slice by clearing the slice item formula.

Filter Dialog

Tablesheet supports Excel-like filter dialog including text, number, and date conditions. It also includes sorting options such as ascending and descending sort.

You can control the visibility of each part in the tablesheet filter dialog if you do not need the checklist or some parts of filter dialog. To know more about sort and filter, refer to the Sort and Filter topic.

Status Bar

Tablesheet supports adding data and custom items in status bar. Selecting different ranges of cells shows the relevant information in the status bar.

For example, the image below shows a status bar which displays the selected column count in a tablesheet.

To learn how to add custom items in the status bar, refer to Status Bar.

Context Menu

Tablesheet supports context menu in different areas of the view such as viewport or corner, row and column header.

Each area provides different menu items such as pin/unpin, show/hide, and cut/copy/paste options.

Viewport or Corner

Column Header

Row Header