p-table Sort Column Styling

[aejirbjorn]

Hello,

I'd like to provide some visual distinction on a p-table to highlight the currently sorted column (the entire column, not just the header). Is there a property or some other means of determining which column is currently sorted so that a css class could be applied conditionally?

Thanks!

[aejirbjorn]

*Bump*...is there a means of determining which column a p-table is currently sorted on? I'd really like to be able to apply a style conditionally to the sorted column.

[PhilHuhn]

Hey:
Yes!
I can think of two way of knowing what column is sorted.

1) use Lazy feature. On demand onLazyLoad method gets a LazyLoadEvent, which contains the single or multiple sort fields.

2) You can access the p-table component by ViewChild and get the change of sort with onSort event:

Code: Select all

<p-table #dt id='incidents-grid' [value]='incidents' (onSort)='onSort( )'
...

Code: Select all

import { Component, OnInit, OnDestroy, ViewChild, Input } from '@angular/core';
import { Table } from 'primeng/table';
...
  @ViewChild('dt', { static: true }) dt: Table | undefined;

  onSort( ) {
    if( this.dt ) {
      console.warn( this.dt.sortField );
    }
  }

[PhilHuhn]

Hey, also check out the following...

Table Show list of active Filters
viewtopic.php?f=35&t=66932

Display of the filters in the footer via onLazyLoad event.

[aejirbjorn]

Thanks @PhilHun! That was exactly what I needed. Much appreciated.