Custom Row Group
Enrolled: month
/ 12
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.
- Default RowGroup: no special code needed. It uses
from NgxPanemuTable. No footer by default.DefaultRowGroupRenderer - Custom Template: It uses
however the content is replaced withDefaultRowGroupRenderer 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 anng-template
. - Custom Content Component: It still uses
however the content is a component implementingDefaultRowGroupRenderer
interface. It is more reusable than usingRowGroupContentComponent 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 ;
}
- Custom Component: It uses custom component implements
. You have total control to theRowGroupComponent td
elements and what to show in them. However, it is required to set the display css property tocontents
.
: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
or
RowGroupComponent ensure to set the
RowGroupFooterComponent :host
css display property tocontents
.
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
or
as needed in the
as can be seen in below example.