Appearance

The Kendo UI for Angular PivotGrid component consists of three main tables holding the column headers, row headers, and the aggregated data values.

Column Width

By default, the PivotGrid tables have fixed layout, meaning all available space is distributed evenly between all columns.

Column Headers Width

The default width of all columns in the column headers table and their corresponding columns in the aggregated values table is 200px. To customize the columns width, use the columnHeadersWidth option.

The following example demonstrates how to customize the width of the columns in the column headers and values tables.

Row Headers Width

To customize the default fixed layout of the row headers table, overwrite the built-in CSS as demonstrated in our runnable documentation demos:

Copy Codeencapsulation: ViewEncapsulation.None,
styles: [`
    .k-pivotgrid-row-headers table.k-pivotgrid-table {
        table-layout: auto;
    }
`]

Suggested Links

• API Reference of the PivotGridComponent
• Data Binding Local Directive
• Data Binding OLAP Directive
• Creating Custom Styles with ThemeBuilder