Angular List - Customize Group Headers

You can define a groupTemplate to customize group headers. Without a groupTemplate, group headers display the text of the key field in bold font.

HTML
TypeScript
  • <dx-list
  • [dataSource]="listDataSource"
  • [grouped]="true"
  • groupTemplate="group"
  • itemTemplate="item">
  • <div *dxTemplate="let itemObj of 'item'">
  • <p style="margin:0px">{{itemObj.name}} | {{itemObj.count}}</p>
  • </div>
  • <div *dxTemplate="let groupObj of 'group'">
  • <p>{{groupObj.key}} | {{groupObj.overallCount}}</p>
  • </div>
  • </dx-list>
  • import { DxListModule } from "devextreme-angular";
  • import DataSource from "devextreme/data/data_source";
  • // ...
  • export class AppComponent {
  • fruitsVegetables = [{
  • key: "Fruits",
  • items: [
  • { name: "Apples", count: 10 },
  • { name: "Oranges", count: 12 },
  • { name: "Lemons", count: 15 }
  • ]
  • }, {
  • key: "Vegetables",
  • items: [
  • { name: "Potatoes", count: 5 },
  • { name: "Tomatoes", count: 9 },
  • { name: "Turnips", count: 8 }
  • ]
  • }];
  • listDataSource = new DataSource({
  • store: fruitsVegetables,
  • map: function(groupedItem) {
  • let overallCount = 0;
  • groupedItem.items.forEach(function(item) {
  • overallCount += item.count;
  • })
  • return Object.assign(groupedItem, { overallCount: overallCount });
  • }
  • });
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxListModule
  • ],
  • // ...
  • })

View Demo

See Also