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:

Composition API (~/src/App.vue)

<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>

Options API (~/src/App.vue)

<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>