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
.
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>