Configuring the minimum width in the Vue Pivot Table component

7 Apr 20255 minutes to read

The pivot table component allows you to configure its minimum width using the minWidth property. This property is useful for ensuring the component maintains a consistent layout and responsiveness across different screen sizes.

When the pivot table has the Grouping Bar enabled, the minWidth property is set to 400 pixels by default to accommodate the grouping bar UI elements. Without the Grouping Bar, the minWidth property defaults to 310 pixels.

To customize the minimum width, set the minWidth property to your desired value (in pixels) as shown below:

<template>
  <div id="app">
    <ejs-pivotview id="pivotview" :dataSourceSettings="dataSourceSettings" :width="width" :showFieldList="showFieldList"
      :load="onLoad"> </ejs-pivotview>
</div>
</template >
<script setup>
import { provide } from "vue";
import { PivotViewComponent as EjsPivotview, FieldList } from "@syncfusion/ej2-vue-pivotview";
import { pivotData } from './pivotData.js';

const 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: []
};
const width = 250;
const showFieldList = true;

const onLoad = () => {
  let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
  if (pivotGridObj) {
    pivotGridObj.minWidth = 250;
  }
};

provide('pivotview', [FieldList]);

</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/material.css";
</style>
<template>
  <div id="app">
    <ejs-pivotview id="pivotview" :dataSourceSettings="dataSourceSettings" :width="width" :showFieldList="showFieldList"
      :load="onLoad"> </ejs-pivotview>
</div>
</template >
<script>
import { PivotViewComponent, FieldList } from "@syncfusion/ej2-vue-pivotview";
import { pivotData } from './pivotData.js';

export default {
  name: "App",
  components: {
    "ejs-pivotview": PivotViewComponent
  },
  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: []
      },
      width: 250,
      showFieldList: true
    }
  },
  methods: {
    onLoad: function () {
      let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
      if (pivotGridObj) {
        pivotGridObj.minWidth = 250;
      }
    }
  },
  provide: {
    pivotview: [FieldList]
  }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/material.css";
</style>