A TableSheet has an interactive TableSheet Panel.
Create a TableSheet Panel:
The group panel is a part of the TableSheet panel. Users can change the panel options to customize the visibility of the field area and group area.
Users can use the group panel to add group items, summary items and slice items.
Users can also delete, edit, change and reorder the items.
/*REPLACE_MARKER*/
/*DO NOT DELETE THESE COMMENTS*/
window.onload = function() {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 0 });
initSpread(spread);
};
function initSpread(spread) {
spread.suspendPaint();
spread.options.autoFitType = GC.Spread.Sheets.AutoFitType.cellWithHeader;
//init a data manager
var dataManager = spread.dataManager();
var ordersTable = dataManager.addTable("ordersTable", {
data: orderDataSource,
schema: {
type: "csv",
columns: {
OrderDate: { dataType: "date" },
ShipDate: { dataType: "date" },
Quantity: { dataType: "number" },
Amount: { dataType: "number" }
}
}
});
//init a table sheet
var sheet = spread.addSheetTab(0, "TableSheet1", GC.Spread.Sheets.SheetType.tableSheet);
sheet.setDefaultRowHeight(40, GC.Spread.Sheets.SheetArea.colHeader);
sheet.options.allowAddNew = false; //hide new row
//bind a view to the table sheet
ordersTable.fetch().then(function () {
var myView = ordersTable.addView("myView", [
{ value: "OrderID", width: 100, style:{formatter:"O00000"} },
{ value: "Product", width: 200 },
{ value: "Quantity", width: 100 },
{ value: "OrderDate", width: 100 },
{ value: "ShipDate", width: 100 },
{ value: "Amount", width: 100 },
{ value: "Office", width: 100 },
{ value: "Category", width: 150 }
]);
sheet.setDataView(myView);
//init a table sheet panel
var host = document.getElementById("panel");
var panel = new GC.Spread.Sheets.TableSheet.TableSheetPanel("myPanel", sheet, host);
sheet.groupBy([
{
caption: "Category", field: "Category", width: 120, style: {backColor: "#D0CECE"}, summaryFields: [
{
caption: "Σ(Quantity)",
formula: "=SUM([Quantity])",
slice: {field: "Office", width: 70, style: {backColor: "#D9E1F2"}},
width: 102,
style: {backColor: "#D9E1F2"}
},
{
caption: "μ(Amount)",
formula: "=AVERAGE([Amount])",
slice: {field: "=YEAR([@OrderDate])", width: 80, style: {backColor: "#E2EFDA", formatter: "$ #,##0.00"}},
width: 100,
style: {backColor: "#E2EFDA", formatter: "$ #,##0.00"}
}
]
}
]);
});
spread.resumePaint();
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<!-- Promise Polyfill for IE, https://www.npmjs.com/package/promise-polyfill -->
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-tablesheet/dist/gc.spread.sheets.tablesheet.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/data/orderDataSource.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="sample-tutorial">
<div id="ss" class="sample-spreadsheets"></div>
<div id="panel" class="container"></div>
</div>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0;
}
.sample-spreadsheets {
width: calc(100% - 303px);
height: 100%;
overflow: hidden;
float: left;
}
.container {
width: 300px;
height: 100%;
float: left;
border: 1px solid lightgrey;
}
