PivotTable Layout

SpreadJS PivotTables provide three kinds of layouts: Compact Form, Outline Form and Tabular Form. Try changing the layout in the demo below with the dropdown menu to see how that layout changes.

There are 3 layouts for PivotTables. Compact Form Outline Form Tabular Form By default, the layout is Compact Form. For the each layout type: Compact Form 1.Row Labels In Compact Form, each Row label is in a separate row. The Row field label is always above the labels for the inner fields. Each Row label is slightly indented from the field above it, to differentiate the fields. The Row labels cannot be repeated. The indentation can be changed in PivotTable Options, on the Layout & Format tab 2.Row Fields In Compact Form, all the Row fields are in a single column. There is a generic heading, Row Labels, in the Row Field column. 3.Subtotals In Compact Form, Subtotals can be shown at the Top or Bottom of each group. This setting affects all the Row fields. For Column fields, Subtotals are always shown at the Bottom. The Row label remains at the top, even if Subtotals are at the bottom. Outline Form 1.Row Labels In Outline Form, each Row label is in a separate row. The Row field label is always above the labels for the inner fields. The Row labels can be repeated. 2.Row Fields In Outline Form, each Row field is in a separate column. Each Row field shows its name in the column heading. 3.Subtotals In Outline Form, Subtotals can be shown at the Top or Bottom of each group. This setting affects all the Row fields. For Column fields, Subtotals are always shown at the Bottom. Tabular Form 1.Row Labels In Tabular Form, Row labels for the outer fields are on the same row as the first label for the related inner fields. The Row labels can be repeated. 2.Row Fields In Tabular Form, each Row field is in a separate column. Each Row field shows its name in the column heading. 3.Subtotals In Tabular Form, Subtotals can only be shown at the Bottom of each group. This setting affects all the Row fields. For Column fields, Subtotals are always shown at the Bottom. User can get and set the layout type of the PivotTable. And the PivotTableLayoutType is the enumerumation defined below:
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); bindEvent(spread, pt); }; 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); 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 bindEvent (spread, pt) { _getElementById("layoutType").addEventListener("change", () => { if (spread) { var type = parseInt(document.getElementById("layoutType").value, 10); pt.layoutType(type); doAutoFitColumn(spread.getSheet(0)); } }); } 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="options-container"> <div class="option-row"> Try changing the layout type: <select id="layoutType"> <option value="0">compact</option> <option value="1" selected>outline</option> <option value="2">tabular</option> </select> </div> </div> </div> </body> </html>
.sample-tutorial { position: relative; height: 100%; } .sample-spreadsheets { width: calc(100% - 210px); height: 100%; overflow: hidden; float: left; } .options-container { float: right; width: 210px; padding: 12px; height: 100%; box-sizing: border-box; background: #fbfbfb; overflow: auto; } .option-row { font-size: 14px; padding: 5px; margin-top: 10px; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } #app { height: 100%; }