Configuring the minimum width in the Angular PivotView component

26 Mar 20253 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:

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { PivotViewAllModule, PivotFieldListAllModule } from '@syncfusion/ej2-angular-pivotview'
import { Component, OnInit, ViewChild } from '@angular/core';
import { IDataOptions, IDataSet, PivotView } from '@syncfusion/ej2-angular-pivotview';
import { Pivot_Data } from './datasource';

@Component({
  imports: [
    PivotViewAllModule,
    PivotFieldListAllModule
  ],
  standalone: true,
  selector: 'app-container',
  template: `<div style="height: 480px;"><ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]=dataSourceSettings  width='250' (load)="load($event)"></ejs-pivotview></div>`
})
export class AppComponent implements OnInit {
  public dataSourceSettings?: IDataOptions;

  @ViewChild('pivotview', { static: false })
  public pivotGridObj?: PivotView;

  load(args: any): void {
    if (this.pivotGridObj) {
      this.pivotGridObj.minWidth = 250;
    }
  }

  ngOnInit(): void {
    this.dataSourceSettings = {
      dataSource: Pivot_Data as IDataSet[],
      expandAll: false,
      enableSorting: 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: [],
    };
  }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));