Pivot Panel

The PivotPanel, on the right side below, is a panel that is used to add, remove, drag and move fields in the pivot table. The panel consists of PivotTable Fields, PivotTable Area and Pivot View Manager sections and can easily be customized.

Description
app.vue
index.html
styles.css
Copy to CodeMine

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:

let panel = new GC.Spread.Pivot.PivotPanel("myPivotPanel", myPivotTable, document.getElementById("panel"));

And user must set the width and height for the "panel" element.

The params of the GC.Spread.Pivot.PivotPanel constructor are 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 a PivotPanel. PivotTable supports the below APIs to deal with the relationship between PivotPanel and PivotTable.

Attaching a PivotPanel to the PivotTable:

///* function attach(pivotTable: GC.Spread.Pivot.PivotTable) :void
/**
 * @description this function will attach to a pivot table
 * @param pivotTable
 * @returns void
 */
attach (pivotTable: IPivotTable): void

Detaching the PivotPanel from the PivotTable:

///* function attach(): void
/**
 * @description this function will detach to a pivot table
 * @returns void
 */
 detach (): void

Destroying the PivotPanel:

///* function destroy (): void
/**
 * @description destroy PivotPanel
 */
destroy (): void
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 the GC.Spread.Pivot.PivotPanel constructor are 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 a PivotPanel. PivotTable supports the below APIs to deal with the relationship between PivotPanel and PivotTable. Attaching a PivotPanel to the PivotTable: Detaching the PivotPanel from the PivotTable: Destroying the PivotPanel:
<template> <div class="sample-tutorial"> <gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread"> <gc-worksheet> </gc-worksheet> <gc-worksheet> </gc-worksheet> </gc-spread-sheets> <div class="sample-panel"> <div id="panel"></div> </div> </div> </template> <script> import Vue from 'vue'; import '@mescius/spread-sheets-vue' import GC from '@mescius/spread-sheets'; import "@mescius/spread-sheets-shapes"; import "@mescius/spread-sheets-pivot-addon"; import './styles.css'; let App = Vue.extend({ name: "app", methods: { initSpread: function (spread) { this.initSheets(spread); let pivotLayoutSheet = spread.getSheet(0); this.initPivotTable(pivotLayoutSheet); }, initSheets: function (spread) { spread.suspendPaint(); let sheet = spread.getSheet(1); sheet.name("DataSource"); sheet.setRowCount(117); sheet.setColumnWidth(0, 120); sheet.getCell(-1, 0).formatter("YYYY-mm-DD"); sheet.getRange(-1,4,0,2).formatter("$ #,##0"); sheet.setArray(0, 0, pivotSales); let table = sheet.tables.add('tableSales', 0, 0, 117, 6); for(let i=2;i<=117;i++) { sheet.setFormula(i-1,5,'=D'+i+'*E'+i) } table.style(GC.Spread.Sheets.Tables.TableThemes["none"]); let sheet0 = spread.getSheet(0); sheet0.name("PivotLayout"); spread.resumePaint(); }, initPivotTable: function (sheet) { let myPivotTable = sheet.pivotTables.add("myPivotTable", "tableSales", 1, 1, GC.Spread.Pivot.PivotTableLayoutType.outline, GC.Spread.Pivot.PivotTableThemes.light8); myPivotTable.suspendLayout(); myPivotTable.options.showRowHeader = true; myPivotTable.options.showColumnHeader = true; myPivotTable.add("salesperson", "Salesperson", GC.Spread.Pivot.PivotTableFieldType.rowField); myPivotTable.add("car", "Cars", GC.Spread.Pivot.PivotTableFieldType.rowField); let groupInfo = { originFieldName: "date", dateGroups: [{ by: GC.Pivot.DateGroupType.quarters }] }; myPivotTable.group(groupInfo); myPivotTable.add("Quarters (date)", "Quarters (date)", GC.Spread.Pivot.PivotTableFieldType.columnField); myPivotTable.add("total", "Totals", GC.Spread.Pivot.PivotTableFieldType.valueField, GC.Pivot.SubtotalType.sum); let panel = new GC.Spread.Pivot.PivotPanel("myPivotPanel", myPivotTable, document.getElementById("panel")); panel.sectionVisibility(GC.Spread.Pivot.PivotPanelSection.fields + GC.Spread.Pivot.PivotPanelSection.area); myPivotTable.resumeLayout(); myPivotTable.autoFitColumn(); } }, computed: { dataSource() { return getData(); } } }); new Vue({ render: h => h(App) }).$mount('#app'); </script>
<!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/vue/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/spread/source/data/pivot-data.js" type="text/javascript"></script> <!-- SystemJS --> <script src="$DEMOROOT$/en/vue/node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app.vue'); System.import('$DEMOROOT$/en/lib/vue/license.js'); </script> </head> <body> <div id="app"></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%; }
(function (global) { System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true }, meta: { '*.css': { loader: 'css' }, '*.vue': { loader: 'vue-loader' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { '@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js', '@mescius/spread-sheets-shapes': 'npm:@mescius/spread-sheets-shapes/index.js', '@mescius/spread-sheets-pivot-addon': 'npm:@mescius/spread-sheets-pivot-addon/index.js', '@mescius/spread-sheets-vue': 'npm:@mescius/spread-sheets-vue/index.js', '@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js', 'jszip': 'npm:jszip/dist/jszip.js', 'css': 'npm:systemjs-plugin-css/css.js', 'vue': 'npm:vue/dist/vue.min.js', 'vue-loader': 'npm:systemjs-vue-browser/index.js', 'tiny-emitter': 'npm:tiny-emitter/index.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'js' }, rxjs: { defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' } } }); })(this);