Search results

Changing the Pivot Table component's minimum height in React Pivot Table component

30 Sep 2022 / 1 minute to read

The minHeight property allows you to change the minimum height for the pivot table control. For the pivot table control, the default minimum height is 300px.

Source
Preview
index.jsx
index.tsx
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Inject, PivotViewComponent } from '@syncfusion/ej2-react-pivotview';
import { pivotData } from './datasource';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.dataSourceSettings = {
            columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
            dataSource: pivotData,
            expandAll: false,
            filters: [],
            drilledMembers: [{ name: 'Country', items: ['France'] }],
            formatSettings: [{ name: 'Amount', format: 'C0' }],
            rows: [{ name: 'Country' }, { name: 'Products' }],
            values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }]
        };
    }
    dataBound() {
        if (this.pivotObj) {
            this.pivotObj.minHeight = 200;
        }
    }
    render() {
        return <PivotViewComponent ref={d => this.pivotObj = d} id='PivotView' height={200} dataSourceSettings={this.dataSourceSettings} dataBound={this.dataBound.bind(this)}><Inject services={[CalculatedField, FieldList]}/>
    </PivotViewComponent>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('pivotview'));
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { IDataOptions, IDataSet, Inject, PivotViewComponent } from '@syncfusion/ej2-react-pivotview';
import { pivotData } from './datasource';
class App extends React.Component<{}, {}>{
  public dataSourceSettings: IDataOptions = {
    columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
    dataSource: pivotData as IDataSet[],
    expandAll: false,
    filters: [],
    drilledMembers: [{ name: 'Country', items: ['France'] }],
    formatSettings: [{ name: 'Amount', format: 'C0' }],
    rows: [{ name: 'Country' }, { name: 'Products' }],
    values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }]
  };
  public pivotObj: PivotViewComponent;
  dataBound(): void {
    if(this.pivotObj) {
      this.pivotObj.minHeight = 200;
    }
  }
  render() {
    return <PivotViewComponent  ref={d => this.pivotObj = d!} id='PivotView' height={200} dataSourceSettings={this.dataSourceSettings} dataBound={this.dataBound.bind(this)}><Inject services={[CalculatedField, FieldList]}/>
    </PivotViewComponent>
  }
};
ReactDOM.render(<App />, document.getElementById('pivotview'));