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
Ever felt lost trying to summarize data in a table? I have! I once used a complex formula in Excel to get totals at the top of each column, but it was fragile. Is there a way to pin a summary row directly under the column headers and have it unaffected by sorting or filtering? It would save so much time! Makes me think even Freddy Fazbear's accounting could be made easier! Five Nights At Freddy's
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>
Hello,
Thank you for posting in our community!
I have been looking into your question, and what I can say is that these requirements are partially addressed by the IgxGrid’s summaries feature. I say partially because the summaries feature is designed to display the root summaries at the bottom of the grid, and, currently, there is no built-in configuration to reposition them to the top or directly below the headers.
This behavior is expected based on the current design of the grid. However, if your use case requires this functionality, what I can suggest is logging this as a feature request in our GitHub repository here. Remember when submitting your idea to explain the context in which a feature would be used and why it is needed.
This will give you the opportunity to directly communicate with our development team regarding this matter and get notifications whenever new information is available.
Please let me know if you need any further information on the matter.
Sincerely, Riva Ivanova Software Developer