PrimeNG TurboTable sortable column sort indicator?
Asked Answered
P

2

6

I'm trying to transition an existing PrimeNG Datatable over to the newly-released TurboTable spec, and I've been able to get everything more or less working easily, but I lost the auto-generated sort direction indicators on column headers.

Arrows on column headers

Is there a built-in solution for displaying a sort indicator based on template binding provided by p-table, or do I have to attach to the p-table's (sort) event, figure out which column is sorted and what direction, and then update my template from a component method?

Papilla answered 24/1, 2018 at 18:42 Comment(0)
I
8

There is a SortIcon component. Look at this example:

<th *ngFor="let col of columns" [pSortableColumn]="col.field">
  {{col.header}}
  <p-sortIcon [field]="col.field"></p-sortIcon>
</th>
Inwardness answered 5/2, 2018 at 10:49 Comment(1)
Thanks, I legitimately didn't see this in the documentation.Papilla
P
6

If anyone had the same problem as me - had the <p-sortIcon> tag but the icons didn't show anyway - try installing the new PrimeIcons package (npm install primeicons --save) and including its .css file as a dependency (<link rel="stylesheet" type="text/css" href="/node_modules/primeicons/primeicons.css" />).

Partan answered 19/6, 2018 at 18:0 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.