Display a pivot table without horizontal scrollbar

Question

Hi, I use vue pivot table component to display a table. But there is a horizontal scrollbar in it. Please see below picture:

How to get rid of the horizontal scrollbar? I can do it in pivot chart component but not in pivot table component. This is how I do it in pivot chart component:

      chartSettings: {
        enableMultipleAxis: true,
        chartSeries: { type: 'StackingColumn' },
        zoomSettings: {
          enableScrollbar: false, /* remove the horizontal scrollbar */
          toolbarItems: ['Zoom', 'ZoomIn', 'ZoomOut', 'Pan', 'Reset']
        }
      },

Thanks for any help.

Manikandan Murugesan · Answer

Hi Meidika, 
 
Kindly set column width for each column by using the “columnRender” event in the pivot table to remove the horizontal scrollbar. Please refer to the following code example. 
 
Code Example: 




gridSettings: { 
        columnWidth: 140, 
        columnRender: this.columnRender.bind(this), 
      }, 
 
columnRender: function (args) { 
      let width = this.$refs.pivotview.ej2Instances.element.offsetWidth - 200; 
      let columnWidth = width / (args.columns.length - 1); 
      for (var i = 1; i < args.columns.length; i++) { 
        args.columns[i].width = columnWidth; 
      } 
    } 
 
 
Meanwhile, we have prepared a sample for your reference. Please find it from below link. 
Sample: https://codesandbox.io/s/upbeat-snowflake-y2jft?file=/src/components/HelloWorld.vue 
 
Please let us know if you have any concerns. 
 
Regards, 
Manikandan