PrimeVue Datatable: how to use different primeVue icon for sort control

Question

Instead of

pi-sort-alt, pi-sort-amount-up-alt, pi-sort-amount-down

would like to use

pi-sort, pi-sort-up, pi-sort-down

I think I can replace the content using css but wanted to check if there is a better way.

There seems to be a header slot in column (<Column><template #header>...</template></Column>) but it's not working properly for me. Might be an idea for a feature request... github.com/primefaces/primevue/issues — some-user
– some-user, Commented Sep 15, 2022 at 13:26

jadedQuail · Accepted Answer · 2024-07-25 15:12:13Z

3

It's the slot "sorticon" and the parameter "sortOrder" can be used to identify which sorting state the column is in (0 for unsorted, 1 for sorted "up" and -1 for sorted "down")

Documentation: https://primevue.org/datatable/#api.column.slots.sorticon

Here's an example:

<Column field="sample" header="Sample" sortable>
    <template #sorticon="{ sortOrder }">
        <i v-if="sortOrder === 0" class="pi pi-sort-alt" />
        <i v-else-if="sortOrder === 1" class="pi pi-arrow-up" />
        <i v-else-if="sortOrder === -1" class="pi pi-arrow-down" />
    </template>
</Column>

answered Jul 25, 2024 at 15:12

jadedQuail

1273 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

PrimeVue Datatable: how to use different primeVue icon for sort control

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related