Custom Row Group

Above example shows how to customize row grouping component.

1. Default RowGroup: no special code needed. It uses DefaultRowGroupRenderer from NgxPanemuTable. No footer by default.
2. Custom Template: It uses DefaultRowGroupRenderer however the content is replaced with ng-template. The button to expand the row is kept as is. The pagination is hidden by a flag. Also in this example, it has a footer from an ng-template.
3. Custom Content Component: It still uses DefaultRowGroupRenderer however the content is a component implementing RowGroupContentComponent interface. It is more reusable than using ng-template above.

import { NgIf } from '@angular/common';
import { Component, Input, OnInit } from '@angular/core';
import { RowGroup, RowGroupContentComponent } from 'ngx-panemu-table';

@Component({
  template: `
  <div class="flex items-center">
    @if (rowGroup.data.value == 'true') {
      <span class="material-symbols-outlined text-2xl text-green-600">
        {{rowGroup.data.value == 'true' ? 'check_circle' : 'help_outline'}}
      </span> <span class="text-green-600">Verified</span>
    } @else {
      <span class="material-symbols-outlined text-2xl text-yellow-600">
        {{rowGroup.data.value == 'true' ? 'check_circle' : 'help_outline'}}
      </span>
      <span class="text-yellow-600">Unverified</span>
    }
  </div>
  `,
  standalone: true,
  imports: [NgIf]
})
export class BooleanRowGroupContentComponent implements RowGroupContentComponent {
  rowGroup!: RowGroup;
}

4. Custom Component: It uses custom component implements RowGroupComponent. You have total control to the td elements and what to show in them. However, it is required to set the display css property to contents.

:host {
    display: contents;
}

import { CommonModule } from '@angular/common';
import { Component, Input, OnInit } from '@angular/core';
import { GroupCellPipe, PanemuPaginationComponent, RowGroup, RowGroupComponent } from 'ngx-panemu-table';

@Component({
  templateUrl: 'country-row-group.component.html',
  standalone: true,
  imports: [CommonModule, GroupCellPipe, PanemuPaginationComponent],
  styles: `
  :host {
    display: contents;
  }
  `
})

export class CountryRowGroup implements OnInit, RowGroupComponent {
  colSpan!: number;
  rowGroup!: RowGroup;
  expandAction!: (group: RowGroup) => void;
  parameter?: any;
  
  disableInteraction = false;


  constructor() { }

  ngOnInit() {
    this.disableInteraction = this.parameter?.alwaysExpanded ?? false;
  }
}

When creating custom RowGroupComponent or RowGroupFooterComponent ensure to set the :host css display property to contents.

All Expanded Groups

It is possible to display data all at once with grouping as a way to categorize the data. In this scenario, we need to structure the table rows manually. Insert RowGroup or RowGroupFooter as needed in the TableData.rows as can be seen in below example.