Configuring the minimum width in the Vue Pivot Table component

The Vue Pivot Table component provides the minWidth property to define the minimum width threshold for the component. This configuration ensures the pivot table maintains optimal usability and prevents layout issues when the container size decreases below the specified minimum width value.

Default minimum width behavior

The pivot table automatically sets appropriate default minimum width values based on its current configuration:

Configuration Default Minimum Width Purpose
With Grouping Bar enabled 400 pixels Accommodates grouping bar UI elements and drag-drop functionality
Without Grouping Bar 310 pixels Provides sufficient space for basic pivot table operations

Setting custom minimum width

To customize the minimum width according to specific layout requirements, configure the minWidth property with the desired pixel value:

<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/tailwind3.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/tailwind3.css";
</style>