Usages Custom Row Group

Custom Row Group

Enrolled: month
/ 12
Id
Name
Gender
Country
Verified
Amount
Enrolled
Last Login
Email
Apr 2023 (21)
Nov 2023 (18)
Jan 2023 (24)
Jul 2023 (25)
Dec 2023 (17)
Aug 2023 (23)
Oct 2023 (20)
Mar 2023 (27)
Jun 2023 (30)
Sep 2023 (23)
May 2023 (23)
Feb 2023 (15)

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.
boolean-row-group-content.component.ts
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;
}
  1. 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;
}
country-row-group.component.ts
country-row-group.component.html
import { CommonModule } from '@angular/common';
import { Component, 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, usePagination?: boolean) => 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.

Id
Name
Gender
Verified
Amount
Enrolled
Last Login
Email