Custom Column
To create custom column, specify the value of
to your own component or an ng-template
.
/ 266
F female | Philippines | |||||||
M male | Kazakhstan | |||||||
M male | United States | |||||||
F female | Philippines | |||||||
M male | Indonesia | |||||||
F female | Kazakhstan | |||||||
M male | China | |||||||
F female | Greece | |||||||
M male | Netherlands | |||||||
M male | Sweden | |||||||
F female | Cuba | |||||||
M male | Philippines | |||||||
M male | Brazil | |||||||
F female | Macedonia | |||||||
F female | Peru | |||||||
F female | Russia | |||||||
F female | Mongolia | |||||||
M male | Georgia | |||||||
M male | Indonesia | |||||||
F female | Indonesia | |||||||
F female | Jamaica | |||||||
M male | Russia | |||||||
F female | Ukraine | |||||||
M male | Ukraine | |||||||
F female | Sweden | |||||||
F female | China | |||||||
M male | China | |||||||
M male | China | |||||||
M male | Sweden | |||||||
F female | Argentina | |||||||
M male | Philippines | |||||||
F female | China | |||||||
M male | China | |||||||
F female | France | |||||||
F female | China | |||||||
F female | France | |||||||
M male | China | |||||||
F female | Thailand | |||||||
M male | Poland | |||||||
F female | China | |||||||
F female | Philippines | |||||||
M male | China | |||||||
M male | Brazil | |||||||
M male | Indonesia | |||||||
M male | Macedonia | |||||||
M male | France | |||||||
M male | Ukraine | |||||||
F female | Oman | |||||||
F female | Iran | |||||||
F female | Morocco | |||||||
M male | Poland | |||||||
M male | Armenia | |||||||
F female | Bulgaria | |||||||
M male | France | |||||||
F female | Colombia | |||||||
M male | Afghanistan | |||||||
F female | Russia | |||||||
F female | Vietnam | |||||||
F female | Philippines | |||||||
F female | China | |||||||
F female | Japan | |||||||
M male | Portugal | |||||||
M male | Poland | |||||||
M male | Ivory Coast | |||||||
M male | Hungary | |||||||
F female | Bulgaria | |||||||
F female | Mexico | |||||||
F female | Vietnam | |||||||
M male | China | |||||||
F female | France | |||||||
M male | China | |||||||
F female | China | |||||||
F female | Russia | |||||||
M male | Spain | |||||||
F female | Ivory Coast | |||||||
F female | China | |||||||
F female | Senegal | |||||||
F female | Ukraine | |||||||
M male | Indonesia | |||||||
F female | Russia | |||||||
M male | Albania | |||||||
M male | Poland | |||||||
M male | Czech Republic | |||||||
M male | Syria | |||||||
F female | Kyrgyzstan | |||||||
F female | China | |||||||
M male | Croatia | |||||||
M male | Poland | |||||||
F female | China | |||||||
F female | China | |||||||
M male | China | |||||||
F female | Philippines | |||||||
M male | Panama | |||||||
M male | China | |||||||
M male | Denmark | |||||||
M male | China | |||||||
M male | China | |||||||
M male | China | |||||||
F female | Czech Republic | |||||||
F female | China |
Above example has 3 custom columns:
- Gender column. It uses
ng-template
defined in the html file. - Country column. It uses Angular component. When its button is clicked, the table will be filtered by corresponding country.
filter-country-cell.component.ts
filter-country-cell.component.html
import { Component, Input } from '@angular/core';
import { CellComponent , CellFormatterPipe , CellRenderer , PropertyColumn } from 'ngx-panemu-table';
type onClick<T> = (value: any, field: string, row?: T) => void;
@Component({
templateUrl: 'filter-country-cell.component.html',
standalone: true,
imports: [CellFormatterPipe ]
})
export class FilterCountryCellComponent<T> implements CellComponent <T> {
row!: T;
column!: PropertyColumn <T>;
parameter?: { onClick: onClick<T> };
click() {
this.parameter?.onClick(this.row[this.column.field], this.column.field.toString(), this.row);
}
static create<T>(onClick: onClick<T>): CellRenderer {
return {
component: FilterCountryCellComponent,
parameter: { onClick }
}
}
}
- Action column. It uses
ng-template
and is sticky to the right.