Pivot Panel

In a PivotTable, fields are been arranged using the PivotTable panel. The arrangement and settings determine the final result of the PivotTable.

In the PivotPanel, there are four areas: Filters: Controls the data range of the PivotTable. Columns: Controls the column distribution of the PivotTable. Rows: Controls the row distribution of the PivotTable. Values: Controls the summary data and the summary method of the PivotTable. You can create the PivotPanel as follows: And user must set the width and height for the "panel" element. The params of GC.Spread.Pivot.PivotPanel constructor is at below: Param Type Description name string The name of pivot panel. pivotTable GC.Spread.Pivot.PivotTable The pivot panel relate to which pivot table. host HTMLDivElement Host pivot panel in this container. The PivotPanel is only a tool to control the PivotTable, and it will auto-dispose when using fromJSON. The PivotTable can work without PivotPanel. So PivotTable suppports below APIs to deal with relationship of PivotPanel and PivotTable. Attaching a PivotPanel to the PivotTable: Detaching the PivotPanel from the PivotTable: Destroying the PivotPanel:
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(_getElementById('ss'), { sheetCount: 2 }); initSpread(spread); var pivotLayoutSheet = spread.getSheet(0); var pt = initPivotTable(pivotLayoutSheet); doAutoFitColumn(pivotLayoutSheet); }; function initSpread(spread) { spread.suspendPaint(); var sheet1 = spread.getSheet(1); sheet1.name("DataSource"); sheet1.setRowCount(700); sheet1.setColumnWidth(5, 150); sheet1.setArray(0, 0, pivotSales); sheet1.tables.add('tableSales', 0, 0, 642, 6); var sheet0 = spread.getSheet(0); sheet0.name("PivotLayout"); spread.resumePaint(); } function initPivotTable(sheet) { var myPivotTable = sheet.pivotTables.add("myPivotTable", "tableSales", 1, 1, GC.Spread.Pivot.PivotTableLayoutType.outline, GC.Spread.Pivot.PivotTableThemes.dark2); myPivotTable.suspendLayout(); myPivotTable.options.showRowHeader = true; myPivotTable.options.showColumnHeader = true; myPivotTable.add("region", "Region", GC.Spread.Pivot.PivotTableFieldType.rowField); myPivotTable.add("country", "Country", GC.Spread.Pivot.PivotTableFieldType.rowField); var groupInfo = { originFieldName: "date", dateGroups: [{ by: GC.Pivot.DateGroupType.quarters }] }; myPivotTable.group(groupInfo); myPivotTable.add("date", "Qt", GC.Spread.Pivot.PivotTableFieldType.columnField); myPivotTable.add("amount", "Sum of amount", GC.Spread.Pivot.PivotTableFieldType.valueField, GC.Pivot.SubtotalType.sum); var panel = new GC.Spread.Pivot.PivotPanel("myPivotPanel", myPivotTable, document.getElementById("panel")); myPivotTable.resumeLayout(); return myPivotTable; } function doAutoFitColumn (sheet) { sheet.suspendPaint(); var colCount = sheet.getColumnCount(); for (var i = 0; i < colCount; i++) { sheet.autoFitColumn(i); } sheet.setColumnWidth(0, 20); sheet.setRowHeight(0, 20); sheet.resumePaint(); } function _getElementById(id) { return document.getElementById(id); }
<!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"> <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-pivot-addon/dist/gc.spread.pivot.pivottables.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/data/pivotSales.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 class="sample-panel"> <div id="panel"></div> </div> </div> </body> </html>
.sample-tutorial { position: relative; height: 100%; } .sample-spreadsheets { width: calc(100% - 300px); height: 100%; overflow: hidden; float: left; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow: hidden; } .sample-panel { float: right; width: 300px; padding: 12px; height: 100%; box-sizing: border-box; background: #fbfbfb; overflow: auto; } .gc-panel { padding: 10px; background-color: rgb(230, 230, 230); } #panel { position: absolute; right: 0; width: 300px; height: 100%; top: 0; } #app { height: 100%; }