New to Kendo UI for Angular? Start a free 30-day trial


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.

View Source
Change Theme:

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:

encapsulation: ViewEncapsulation.None,
styles: [`
    .k-pivotgrid-row-headers table.k-pivotgrid-table {
        table-layout: auto;