angularprimengprimeng-datatablep-table

How can I set the default value for a p-columnFilter in PRIMENG?


PRIMENG is a component library for Angular and I'm currently using their p-table component to dislpay data from a database. One of the columns displayed in the table contains a boolean value, and I'd like to have a default true value for that column filter.

Here's an example HTML for the table:

<p-table    class="my-table"
            [value]="(myValues$ | async)!"
            [scrollable]="true"
            scrollHeight="flex"
            [virtualScroll]="true"
            selectionMode="single">
    <ng-template pTemplate="header">
        <tr>
            <th>
                Some Boolean
                <div>
                    <!-- 
                   How can I set the filter to only show
                   items where someBoolean == true by default? 
                    -->
                    <p-columnFilter type="boolean" field="someBoolean"></p-columnFilter>
                </div>
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-val>
        <tr [pSelectableRow]="val">
            <td>
                <i class="pi" [ngClass]="{'true-icon pi-check': val.someBoolean, 'false-icon pi-times': !val.someBoolean}"></i>
            </td>
        </tr>
    </ng-template>
</p-table>

The property myValues$ is an Observable<MyValue[]> and MyValue is something like:

export interface MyValue {
    someBoolean: boolean;
}

How can I set the filter to only show items where someBoolean is true?

Someone else had the exact same question a few years back, but nobody bothered to answer so I'm asking again.

I tried looking for any default or value properties in the PRIMENG docs, but found nothing. As a bit of a workaround, I pre-sorted the data returned from the database like:

myValues$: Observable<MyValue[]> = getData().pipe(
  // Sorts by 'someBoolean' where 'true' comes before 'false'
  map(mvs => [...mvs].sort((a, b) => a.someBoolean < b.someBoolean ? 1 : -1))
);

But this of course still displays all the data (it's simply sorted). I would prefer it if I could use a default value for the column filter to only display the data where someBoolean is true.


Solution

  • Default filter state can be set using the Table.filters property:

    import { FilterMetadata } from "primeng/api";
    ...
    readonly filters: { [key in keyof MyValue]: FilterMetadata[] } = {
      someBoolean: [{ value: true, matchMode: "contains", operator: "and" }]
    };
    
    <p-table ... [filters]="filters">
      ...
    </p-table>
    

    StackBlitz