PivotPanel

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.filter.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.chart.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.olap.min.js"></script>
<div id="pivotPanel">
</div>
<div id="pivotPanelGrid"></div>
<div>

CSS

.wj-pivotpanel {
    width: 400px;
}

.wj-pivotgrid {
    background: inherit;
    width: auto;
    margin-left: 40px;
}

body {
    margin: 40px;
}

h3 {
	margin-top: 20px;
}

JavaScript

onload = function() {

    wijmo.culture.olap.PivotFieldEditor.weighBy = 'Weighted Average:';
    wijmo.culture.olap.PivotFieldEditor.summary = 'Aggregation:';

    wijmo.olap.PivotFieldEditor.controlTemplate = `<div>
	<div class="wj-dialog-header" tabindex="-1"><span wj-part="g-dlg"></span> <span wj-part="sp-bnd"></span></div>
	<div class="wj-dialog-body">
		<table style="table-layout:fixed">
			<tr>
				<td wj-part="g-hdr"></td>
				<td>
					<div wj-part="div-hdr"></div>
				</td>
			</tr>
			<tr class="wj-separator">
				<td wj-part="g-agg"></td>
				<td>
					<div wj-part="div-agg"></div>
				</td>
			</tr>
			<tr class="wj-separator">
				<td wj-part="g-shw"></td>
				<td>
					<div wj-part="div-shw"></div>
				</td>
			</tr>
			<tr>
				<td wj-part="g-wfl"></td>
				<td>
					<div wj-part="div-wfl"></div>
				</td>
			</tr>
			<tr>
				<td wj-part="g-srt"></td>
				<td>
					<div wj-part="div-srt"></div>
				</td>
			</tr>
			<tr class="wj-separator">
				<td wj-part="g-flt"></td>
				<td>
					<div><button wj-part="btn-flt-edt" class="wj-btn"></button>&nbsp;&nbsp;<button wj-part="btn-flt-clr"
							class="wj-btn"></button></div>
				</td>
			</tr>
			<tr class="wj-separator">
				<td wj-part="g-fmt"></td>
				<td>
					<div wj-part="div-fmt"></div>
				</td>
			</tr>
			<tr>
				<td wj-part="g-smp"></td>
				<td>
					<div wj-part="div-smp" readonly tabindex="-1"></div>
				</td>
			</tr>
			<tr>
				<td>
					Input:
				</td>
				<td>
        	
            	<input wj-part="my-input" type="text"
										class="wj-form-control" autocomplete="off" autocorrect="off"
										autocapitalize="off" spellcheck="false" required="">
           
				</td>
        <td>
        	<button wj-part="my-btn" class="wj-btn" type="button" >Check Value</button>
        </td>
			</tr>
		</table>
	</div>
	<div class="wj-dialog-footer"><button wj-part="btn-apply" class="wj-btn wj-hide"></button>&nbsp;&nbsp;<button
			wj-part="btn-cancel" class="wj-btn...