Table Show list of active Filters

[kingbe01]

Is there any way like you can do with Kendo's Grid to show a list of the filters that have been applied to the data table? I know I can loop through the object keys to get key and the value but the key can be a value that means nothing to the user. It would be nice if you could grab the col.field and the col.header data for the attached filter. Example below showing what Kendo table does.

https://www.dropbox.com/s/1qhstlzba1h9e ... r.png?dl=0

[PhilHuhn]

Hey:

I'm a fellow PrimeNG developer. Any feature requests can be made at their GitHub site. You can also view their source code.

https://github.com/primefaces/primeng/issues

Phil

[kingbe01]

OK so this does not exist yet I assume. I will create a Feature Request.

[PhilHuhn]

Hey:

Are you using lazy feature? If yes then you can use the LazyLoadEvent to create one.

Phil

[kingbe01]

Will that allow me to use the name in the header and not the field? Most time the field names mean nothing to the front end user.

[kingbe01]

And yes using lazy load

[PhilHuhn]

Hey, My attempt:

Code: Select all

  filters: string[] = [];
  ...
  /*
  */
  formatFilters( event: LazyLoadEvent ): string[] {
    const filterStrings: string[] = [];
    for ( let prop in event.filters ) {
      let filterField: string = prop;
      let filterMeta = event.filters[filterField];
      if (Array.isArray(filterMeta)) {
        for (let meta of filterMeta) {
          if( meta.value !== null ) {
            const field: string = this.displayTitle( filterField );
            filterStrings.push( `${field} (${meta.matchMode}) ${meta.value}` );
          }
        }
      }
    }
    console.warn( filterStrings );
    return filterStrings;
  }
  /*
  */
  displayTitle( s: string ) {
    return s.replace(/(^|[_-])([a-z])/g, (a, b, c) => c.toUpperCase())
      .replace(/([a-z])([A-Z])/g, (a, b, c) => `${b} ${c}`
  ) }
  /*
  */
  getNoteTypesLazy( event: LazyLoadEvent ) {
    this.filters = this.formatFilters( event );
  ...

I placed it in my header/cpation, but it could be placed in the footer/summary:

Code: Select all

  <ng-template pTemplate='caption'>
    <div><h3>Note Types</h3></div>
    <div>
      <ul>
        <li *ngFor='let filter of filters'>
          {{ filter }}
        </li>
        </ul>
    </div>
  </ng-template>

Note Types

• Note Type Desc (startsWith) I

• Note Type Short Desc (startsWith) I

Or this:

Code: Select all

<ng-template pTemplate='caption'>
  <div><h3>Note Types</h3></div>
  <div>
    <div *ngFor='let filter of filters' style='border-left: 3px solid #cd2653;'>
      &nbsp;{{ filter }}
    </div>
  </div>
</ng-template>

[kingbe01]

Thank you for posting this solution. I had done something similar but it still did not help as I really need the header for display purposes. Below is an example of my column array.

{ field: 'Active', header: 'Status', columnType: 'picker', options: this.trueFalseSelect, visible: true, type: 'boolean' },
{ field: 'Type', header: 'Type', columnType: 'picker', options:this.customStandardSelect, visible: true},
{ field: 'Description', header: 'Description', columnType: 'text', visible: true },
{ field: 'ShowAllowOneTimeContribution', header: 'One-Time Contribution', columnType: 'picker', options:this.trueFalseSelect, visible: true }

We have several instances where the data naming in the backend does not help as much as the header description.

[PhilHuhn]

Declare an associative array. Not all columns need to be defined, but only the ones to be translated. This can be done at least two ways.

Code: Select all

interface AssocArray { [key: string]: string }

  trans: AssocArray = {
    'Active': 'Status',
    'ShowAllowOneTimeContribution': 'One-Time Contribution'
  };

or without custom interface:

Code: Select all

  trans: any = { };
  ...
    this.trans['Active'] = 'Status'
    this.trans['ShowAllowOneTimeContribution'] = 'One-Time Contribution'

Inject/pass the translation table into the method for testability.

Code: Select all

  getNoteTypesLazy( event: LazyLoadEvent ) {
    this.filters = this.formatFilters( event, this.trans );

The formatFilters method needs to change to the following:

Code: Select all

  formatFilters( event: LazyLoadEvent, translation: AssocArray ): string[] {
    const filterStrings: string[] = [];
    for ( const prop in event.filters ) {
      if( prop !== '' ) {
        const filterField: string = prop;
        const filterMeta = event.filters[filterField];
        if ( Array.isArray( filterMeta ) ) {
          for ( const meta of filterMeta ) {
            if( meta.value !== null ) {
              let field: string = translation[ filterField ];
              if( field === undefined ) {
                field = this.displayTitle( filterField );
              }
              filterStrings.push( `${field} (${meta.matchMode}) ${meta.value}` );
            }
          }
        }
      }
    }
    return filterStrings;
  }

[trademanager]

I spent a lot of time looking for a solution to thiskrunker problem. Great to find your comment. Thanks.