Custom Column

Columns Custom Column

To create custom column, specify the value of BaseColumn.cellRenderer to your own component or an ng-template.

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.