Group Panel

TableSheet supports group panels to help users with group operations.

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/@grapecity/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/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/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; }