Customizing table header sort icons in PrimeNG 15.4+: A step-by-step guide

The most recent update in PrimeNG brought about a change in the way sort icons are implemented. Previously, they used an i tag with CSS classes which could be customized easily using my company's icons:

https://i.sstatic.net/f0Nrq.png

However, the new method involves using a template with an SVG:

https://i.sstatic.net/zfxb3.png

While I found instructions on how to override icons like drop-arrow in a menu in their release notes:

When it comes to p-sorticon, there are 3 different icons that could be displayed based on the sort state of the column. How can I utilize the new template approach for replacing table sort icons? I haven't been able to find any documentation on this.

cssangularprimengp-tableprimeicons

Answer №1

After much deliberation, we finally have the solution:

  <ng-template pTemplate="sorticon" field="col.field" let-sortOrder>
    <SortAltIcon *ngIf="sortOrder === 0">
      <span><i class="p-sortable-column-icon pi pi-fw pi-sort-alt" aria-hidden="true"></i></span>
    </SortAltIcon>
    <SortAmountUpAltIcon *ngIf="sortOrder === 1" [styleClass]="'p-sortable-column-icon'">
      <span><i class="p-sortable-column-icon pi pi-fw pi-sort-amount-up-alt" aria-hidden="true"></i></span>
    </SortAmountUpAltIcon>
    <SortAmountDownIcon *ngIf="sortOrder === -1" [styleClass]="'p-sortable-column-icon'">
      <span><i class="p-sortable-column-icon pi pi-fw pi-sort-amount-down" aria-hidden="true"></i></span>
    </SortAmountDownIcon>
  </ng-template>

Feel free to customize the icon classes within the i tag to suit your preference, or opt for an SVG of your choice.

Answer №2

To globally achieve this effect in your style.scss file, you can use the following CSS code:

    sortalticon {
        display: none;
    }

    sortamountupalticon::before {
        content: "\2193";
    }

    sortamountdownicon::before {
        content: "\2191";
    }

    sortamountupalticon,
    sortamountdownicon {
        svg {
            display: none;
        }
    }

    sortamountupalticon::before,
    sortamountdownicon::before {
        font-size: 1rem;
        margin-top: -10px;
        margin-left: 0;
        color: var(--blue3);
    }

Answer №3

Special thanks to Sriman Pathy for the helpful tip on implementing global css. Simply add the following code snippet to your style.css or custom-theme.css file:

:root {
    sortalticon {
        display: none;
    }

    sortamountupalticon::before {
        content: "\2193";
    }

    sortamountdownicon::before {
        content: "\2191";
    }

    sortamountupalticon,
    sortamountdownicon {
        svg {
            display: none;
        }
    }

    sortamountupalticon::before,
    sortamountdownicon::before {
        font-size: 1rem;
        margin-top: -10px;
        margin-left: 0;
        color: var(--blue3);
        margin-left: .3em;
        font-weight: 300;
    }
}

I've also discovered that you can apply this css directly within the component using the following syntax with :host ::ng-deep:

:host {
::ng-deep {
    sortalticon {
        display: none;
    }

    sortamountupalticon::before {
        content: "\2193";
    }

    sortamountdownicon::before {
        content: "\2191";
    }

    sortamountupalticon,
    sortamountdownicon {
        svg {
            display: none;
        }
    }

    sortamountupalticon::before,
    sortamountdownicon::before {
        font-size: 1rem;
        margin-top: -10px;
        margin-left: 0;
        color: var(--blue3);
        margin-left: .3em;
        font-weight: 300;
    }
  }
}

Finally, don't forget to include the HTML tag:

<p-sortIcon field="field_name_here"><p-sortIcon>

Answer №4

To begin, you should first choose the HTML element instead of the icon, and then make some adjustments to the content URL.

I acquired an SVG from FontAwesome.

... a certain SVG file from FontAwesome.

Next, I had to encode it on a website like this one:

That's where I obtained the CSS-ready result from.

This process led to the final outcome, which is showcased in my CSS file.

.customToggler2 ::ng-deep chevronrighticon { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='18' viewBox='0 0 576 512'%3E%3C!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--%3E%3Cpath d='M64 0C28.7 0 0 28.7 0 64V352c0 35.3 28.7 64 64 64H240l-10.7 32H160c-17.7 0-32 14.3-32 32s14.3 32 32 32H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H346.7L336 416H512c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64H64zM512 64V288H64V64H512z'/%3E%3C/svg%3E"); }

.customToggler2 ::ng-deep chevrondownicon { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='18' viewBox='0 0 576 512'%3E%3C!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--%3E%3Cpath d='M64 0C28.7 0 0 28.7 0 64V352c0 35.3 28.7 64 64 64H240l-10.7 32H160c-17.7 0-32 14.3-32 32s14.3 32 32 32H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H346.7L336 416H512c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64H64zM512 64V288H64V64H512z'/%3E%3C/svg%3E"); }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Create a screen divided into two separate sections using horizontal split dividers

Trying to figure out how to set a div in HTML and then have a second div take up the remaining space. It seems like it should be simple, but I'm struggling with it. I'd like to have a div with a fixed height and then have another div take up the ...

htmlcss

Tips for customizing the background color and image of a toaster

Looking to modify the background color and image based on the else condition (toaster.error) success: function (data) { if (data.message != ""){ toastr.success(data.message); ...

javascripthtmlcssstylesangular-toastr

Is the first child component of Material UI Stack not properly aligned?

Is there a CSS issue that needs fixing? I am working on creating a vertical list of checkboxes with labels using the <Stack /> component from Material UI. I have tried implementing this in the sandbox provided (check out demo.tsx): https://codesandb ...

cssreactjsmaterial-ui

Tips for displaying specific information using Javascript depending on the input value of an HTML form

I am working on an HTML form that includes a dropdown list with four different names to choose from. window.onload = function(){ document.getElementById("submit").onclick = displaySelectedStudent; } function displaySelectedStu ...

javascripthtmlcssstringforms

I want to use Angular and TypeScript to play a base64 encoded MP3 file

I am attempting to play a base64 encoded mp3 file in an Angular application. I have a byteArray that I convert to base64, and it seems like the byte array is not corrupted because when I convert it and paste the base64 string on StackBlitz https://stackbli ...

htmlangulartypescripthtml5-audio

Determine if a condition is met in Firebase Observable using scan() and return the

Within Firebase, I have objects for articles structured like this: articles UNIQUE_KEY title: 'Some title' validUntil: '2017-09-29T21:00:00.000Z' UNIQUE_KEY title: 'Other title' validUntil: '2017-10-29T21:00:00 ...

angulartypescriptfirebase-realtime-databaseobservableangularfire

What is the best way to align HTML elements in a single row?

I have the following code snippet... <div class="header"> <div class="mainh"> <div class="table"> <ul> <li><a>smth</a></li> ...

htmlcssalignmenthtml-liststext-align

Issues with NgRx testing - NullInjectorError: Service provider not found

When attempting to write unit tests for effects, I encountered the error NullInjectorError: No provider for StationsListService!. The code in my stations.effects.ts file looks like this: @Injectable() export class StationsListEffects { constructor(priva ...

angularunit-testingngrxngrx-storengrx-effects

The float right attribute doesn't stay contained within the box; instead, it drifts outside the box

I've been struggling to keep this box fixed at the top of the browser, but I'm facing an issue with the positioning on the right side. I can't seem to figure out how to solve it, so I'm reaching out for some help. #StickyBar #RightSide ...

csshtml

Can one assess a private method within a class?

Within my Ionic 3 (Angular 4) application, I am working with the following code snippet: this.$observable.subscribe(success => { if (success) { this.toastCtrl.create({ message: 'message, duration: 3000, position: 'midd ...

angularunit-testingkarma-jasmine

Issue with Angular 7: In a ReactiveForm, mat-select does not allow setting a default option without using ngModel

I have a Angular 7 app where I am implementing some reactive forms. The initialization of my reactive form looks like this: private initFormConfig() { return this.formBuilder.group({ modeTransfert: [''], modeChiffrement: [' ...

javascriptangulartypescriptangular-materialangular-reactive-forms

Convert coordinates from X and Y within a rotated ImageOverlay to latitude and longitude

After going over all the details in Projection's documentation and conducting various trial and error tests, I have hit a roadblock in finding a solution to this particular issue. All the solutions I have come across assume the x and y coordinates ar ...

javascriptangulartypescriptleafletangular-leaflet-directive

Display a video modal upon page load, allowing users the option to click a button to reopen the modal

Looking for a way to make a video modal automatically open on page load and allow users to reopen it by clicking a button? Here's a snippet of code that might help you achieve that: HTML <html> <head> <link rel="stylesheet ...

javascripthtmlcssbootstrap-4bootstrap-modal

Scale transformation - I am aiming for it to exceed the limits, yet it remains contained within

Currently, I am working on enhancing my carousel by implementing a zoom effect when hovering over the images. However, I have encountered an issue where the image gets hidden within the div container and doesn't overflow as expected. I tried adjusting ...

javascriptcssreactjsnext.jssass

Encountering problems with Node Sass versions while trying to import custom scss files into app.js

I've encountered several articles on stack that didn't quite solve my issues. The problem arose when I tried to import a custom SCSS file into my React app.js to override bootstrap theme colors. Here are the style imports in my App.js: import &q ...

cssnode.jsreactjssassnode-sass

Designing scroll boxes that are not continuous and tracking the time spent in each section

I'm seeking assistance with a unique challenge involving the creation of scroll boxes for use in a Qualtrics survey and tracking the time spent viewing different sections of text within them. Specifically, I aim to design a scroll box featuring two p ...

javascriptjqueryhtmlcss

Reduce / condense text that is overflowing

Take a look at the image I've attached. The text is overflowing outside the div, and I want to collapse it with a "Read more" link at the end. Users should be able to click on the "Read more" link to expand the text. I'm currently working on a p ...

javahtmlcsswebmern

Using the responsive design mode may not accurately reflect the mobile user experience

Recently, I've been working on designing a new cover for my book using HTML and CSS. After completing the design, I previewed it in Responsive Design mode on both Firefox and Google Chrome. However, when I tried to view the website on my phone (a Gala ...

htmlcssresponsive-design

Curious as to why body.scrollTop functions differently in Google Chrome and Firefox compared to Microsoft Edge

Up until recently, the code body.scrollTop was functioning correctly in my Chrome browser. However, I've noticed that now it is returning 0 in both Firefox and Chrome, but still giving the proper value in Microsoft Edge. Is there anyone who can assis ...

javascripthtmlcss

What is the best way to ensure that images appear in a square format?

Lately, I've been experimenting with the alpha version of bootstrap 4 for a project. No matter how hard I try, I can't seem to get uploaded images of different sizes to display as squares when displayed. Do you remember how Instagram used to onl ...

cssimagetwitter-bootstraptwitter-bootstrap-4