I'm using primeng's p-table in angular and i want to add a column filter to filter time/duration, but i just found date or datetime, no precise solution.

<p-columnFilter type="date" [field]="col.field" display="menu">

I'm not getting an exact time/duration column filter.

I'm using primeng's p-table in angular and i want to add a column filter to filter time/duration, but i just found date or datetime, no precise solution.

<p-columnFilter type="date" [field]="col.field" display="menu">

I'm not getting an exact time/duration column filter.

• angular
• primeng
• primeng-table

• Could you create a stackblitz with the data to know what is the data and setup you are working with. – Naren Murali Commented Nov 20, 2024 at 10:48

1 Answer 1

Can you please try creating a custom filter? Something like below:

component.ts

• The customDurationFilter function takes two arguments: value (the cell value) and filter (the filter value).
• It splits both the value and filter strings into parts (hours, minutes, seconds) and compares them. If all parts match, it returns true; otherwise, it returns false.

import { Component } from '@angular/core';

@Component({
  selector: 'app-my-table',
  templateUrl: './my-tableponent.html',
  styleUrls: ['./my-tableponent.css']
})
export class MyTableComponent {
  data: any[] = [
    { duration: '00:04:53' },
    { duration: '00:03:20' },
    // Add more data here
  ];

  customDurationFilter(value: string, filter: string): boolean {
    if (!filter) {
      return true;
    }
    const filterParts = filter.split(':').map(part => parseInt(part, 10));
    const valueParts = value.split(':').map(part => parseInt(part, 10));

    for (let i = 0; i < filterParts.length; i++) {
      if (filterParts[i] !== valueParts[i]) {
        return false;
      }
    }
    return true;
  }
}

Replace data with your table datasource. And then, in

component.html

• Use the p-columnFilter component with type="custom" and filterFunction set to the custom filter function.
• The matchMode is set to 'custom' to indicate that a custom filter function is being used.

<p-table [value]="data">
  <ng-template pTemplate="header">
    <tr>
      <th pSortableColumn="duration">
        Duration
        <p-columnFilter type="custom" [field]="'duration'" [matchMode]="'custom'" [filterFunction]="customDurationFilter" display="menu"></p-columnFilter>
      </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-rowData>
    <tr>
      <td>{{ rowData.duration }}</td>
    </tr>
  </ng-template>
</p-table>