CODEWITHSUNDEEP
angularfiltergoogle-cloud-firestoreprimengprimeng-turbotable
Kyle Abens
Kyle Abens

Reputation: 273

Filter Complex Objects in PrimeNG Turbo Table

Lets say I have a table and I'm pulling in a list of clients. Maybe one of the parameters is an address object which contains parameters like city, state, zip etc. I can easily make any of those values appear in the table (E.g client.address.city) but because they are part of the address object I am unable to filter or sort by those values.

This is currently what Material 2 offers for flattening out the data, giving users the ability to filter/sort.

this.dataSource.filterPredicate = (client: Client, filter) => {
        let dataStr = client.step + client.name + client.interest.industry + client.interest.package + client.address.city + client.address.state + client.origin;
        return dataStr.toLowerCase().indexOf(filter) != -1; 
      }

How can I achieve something like this with primeng's turbo table?

Upvotes: 2

Views: 5402

Answers (2)

yehonatan yehezkel
yehonatan yehezkel

Reputation: 1248

you can easily access complex object with primeng globalfilter in this way : add on the p-table the costume attribute [globalFilterFields] and fill it with array of columns header - and what awesome is it accept dots!!! so you can go deep inside complex object

<p-table [globalFilterFields]="['notes','price','carType.name','nameOfCustomer']" >

Upvotes: -1

jmmygoggle
jmmygoggle

Reputation: 965

Until upcoming milestones try to address a related custom filter feature request, I don't think a custom filter similar to the Material 2 approach is possible.

You could transform or extend the original table data object into a PrimeNG-specific object representation of your table data where each column definition is (or additional col defs are) the flattened/concatenated/CSV (etc.) representation that you want to filter using PrimeNG DataTable/TurboTable filterMatchMode types.

You probably will not display the actual filter-friendly col def value. Instead you would render what you like from the related original table data object values inside the ng-templates that switch on the filter-friendly column def field name.

I use this approach for filtering multiple values that need to be displayed in a single table cell for a row, e.g. currency prices on a single product. I display stacked divs in the table, but allow filtering as if they are a CSV list of values.

            // This is actually PrimeNG DataTable but TurboTable approach is similar

            <ng-template *ngIf="col.field === 'csvPriceCurrencyCodes'" let-data="rowData" pTemplate="body">
                <div *ngFor="let price of data?.prices">
                    {{ price?.currency }}
                </div>
            </ng-template>

            <ng-template *ngIf="col.field === 'csvPriceAmounts'" let-data="rowData" pTemplate="body">
                <div *ngFor="let price of data?.prices">
                    {{ price?.price | delimitNumber:2 }}
                </div>
            </ng-template>

Another example is a col.field with a name like enabledProduct that I can replace with one of two CSV strings that represent a range of typical boolean values that people could type into the PrimeNG table filter input that is set to filterMatchMode contains either 0,n,no,off,false,disabled or 1,y,yes,on,true,enabled but all that is displayed visually is a giant checkmark icon for enabled items.

(I generally use the PrimeNG 'Dynamic Columns' approach listed in the docs.)

Upvotes: 2

Related Questions