I want to add a pinned header summary row that displays the aggregate values of all columns in a single row. This summary row should always stay pinned directly below the column headers — similar to a pinned row — and remain unaffected by actions like sorting, filtering, or data updates.
Additionally, it should:
Stay fixed right under the header when vertically scrolling the grid.
Be horizontally scrollable along with the rest of the grid content.
Automatically adjust its cell widths based on the corresponding column sizes.
Has anyone implemented something similar or found a clean workaround using igx-grid (Angular)?
igx-grid
For more information about pinned rows, please refer to the video below:
https://drive.google.com/file/d/1vRedbUN8U8rIP2Axzshc2iqfU3jZgCf7/view?usp=sharing
You can achieve a pinned header summary row in IgxGrid by using the built-in summaries feature and combining it with pinned rows.
Here’s the general approach:
Enable summaries on the columns you want:
<igx-column field="price" [hasSummary]="true"></igx-column>
Use a custom summary class if you want specific summary logic (like totals, averages, etc.):
import { IgxSummaryResult, IgxSummaryOperand } from 'igniteui-angular'; export class CustomSummary extends IgxSummaryOperand { operate(data: any[]): IgxSummaryResult[] { return [ { key: 'sum', label: 'Total', summaryResult: data.reduce((a, b) => a + b, 0) } ]; } }
Pin the summary row to the top by using the igxGrid.pinRow() method inside ngAfterViewInit() or a lifecycle event once the grid is rendered.
igxGrid.pinRow()
ngAfterViewInit()
this.grid.pinRow('summaryRowId');
If you need a static header-style summary row (not scrollable with data), you can use a custom header template combined with summary values computed from your data — that gives you more layout control.
Example:
<igx-grid [data]="data"> <ng-template igxGridToolbarCustomContent> <div class="summary-header"> <span>Total: {{ totalPrice }}</span> </div> </ng-template> </igx-grid>