The minHeight
property allows you to change the minimum height for the pivot table control. For the pivot table control, the default minimum height is 300px.
<template>
<div id="app">
<ejs-pivotview :dataSourceSettings="dataSourceSettings" :height="height" :showFieldList="showFieldList" :dataBound="ondataBound"> </ejs-pivotview>
</div>
</template>
<script>
import Vue from "vue";
import { PivotViewPlugin, FieldList } from "@syncfusion/ej2-vue-pivotview";
import { pivotData } from './pivotData.js';
Vue.use(PivotViewPlugin);
export default {
data () {
return {
dataSourceSettings: {
dataSource: pivotData,
expandAll: false,
allowLabelFilter: true,
allowValueFilter: true,
drilledMembers: [{ name: 'Country', items: ['France'] }],
columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
rows: [{ name: 'Country' }, { name: 'Products' }],
formatSettings: [{ name: 'Amount', format: 'C0' }],
filters: []
},
height: 200,
showFieldList: true
}
},
methods: {
ondataBound: function() {
let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
pivotGridObj.minHeight = 200;
}
},
provide: {
pivotview: [FieldList]
}
}
</script>
<style>
@import "@syncfusion/ej2-vue-pivotview/styles/material.css";
</style>
{% endraw %}