What is the best way to change the row background color in an ng-prime datatable with dynamically changing columns?

Is there a way to dynamically change row colors in a table when a row is updated successfully?

<p-dataTable emptyMessage="{{tbldatamsg}}" 
      [value]="dataset" scrollable="true" 
      [style]="{'overflow':'hidden!important'}"  
      [responsive]="true" [stacked]="stacked" [filters]="GlobalFilterValue" [rows]="20" sortMode="multiple" [(selection)]="selectedRow"
       selectionMode="multiple"
      [resizableColumns]="true" columnResizeMode="expand" 
      [paginator]="true"
      [globalFilter]="gb" 
      [rowsPerPageOptions]="[10,15,20,25]"
        appendTo="body" #dt>
        <p-column styleClass="checkbox ui-resizable-column" [style]="{'width': 'auto'}" selectionMode="multiple"></p-column>
        <p-column *ngFor="let col of cols;let j=index;"
         [style]="{'width':'130px','display':col.display}" 
          [field]="col.field" 
         [header]="col.header"
         [sortable]="true" 
         [filter]="true" filterPlaceholder="Search" (mouseleave)="hoveredIndex=null" filterPlaceholder="Search"
          appendTo="body">
        </p-column>
   </p-dataTable>
htmlcssangularprimeng-datatable

Answer №1

Resolved I successfully implemented the data table attribute and passed the function name.

[rowStyleClass]="lookupRowStyleClass"

.HTML

<p-dataTable emptyMessage="{{tbldatamsg}}" 
      [value]="dataset" scrollable="true" 
      [style]="{'overflow':'hidden!important'}" 
      [rowStyleClass]="lookupRowStyleClass"     
      [responsive]="true" [stacked]="stacked" [filters]="GlobalFilterValue" [rows]="20" sortMode="multiple" [(selection)]="selectedRow"
       selectionMode="multiple"
      [resizableColumns]="true" columnResizeMode="expand" 
      [paginator]="true" 
      [globalFilter]="gb" 
      [rowsPerPageOptions]="[10,15,20,25]"
        appendTo="body" #dt>
        <p-column styleClass="checkbox ui-resizable-column" [style]="{'width': 'auto'}" selectionMode="multiple"></p-column>
        <p-column *ngFor="let col of cols;let j=index;"
         [style]="{'width':'130px','display':col.display} " 
          [field]="col.field" 
         [header]="col.header"
         [sortable]="true" 
         [filter]="true" filterPlaceholder="Search" (mouseleave)="hoveredIndex=null" filterPlaceholder="Search"
          appendTo="body">
        </p-column>
   </p-dataTable>

.ts

 /* Function for setting CSS for updated rows */
  lookupRowStyleClass(rowData) {
    return rowData['modified']==='U' ?'ui-widget-updated-row':'ui-widget-NoUpdated-row';
  }

.scss

//Styling for Updated row
::ng-deep .ui-datatable tbody > tr.ng-star-inserted.ui-widget-updated-row{
    background-color:$updated-row-color;
}

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

Error message in JS and HTML is totally bizarre

My expertise in JavaScript is very limited, so the terms I use might not be entirely accurate. However, I'll do my best to explain the issue at hand. I'm facing a peculiar problem... I've been attempting to modify someone else's JS scr ...

javascriptjqueryhtmlcssapi

Ways to stop the click event from being triggered in JQuery

There is a single toggle switch that, when clicked, switches ON and a popup with close and OK buttons appears. However, if the toggle is clicked again, it switches OFF and disappears. The specific requirement is that with every click where the toggle switc ...

javascripthtmljquerycss

SASS only recognizes classes with an ampersand symbol, the root class is not included

Can a sass/css class with an ampersand be used in conjunction with VueJS effectively? I've noticed that the CSS attribute assigned on the ampersand works, but the root element itself isn't detected by the browser. <style lang="scss" scoped> ...

cssvue.jssass

Hide and show submenus with jQuery while ensuring that the initial submenu remains visible, along with the main menu

I am struggling to figure out how to make the first message active by default along with its corresponding menu selection in my navbar. I have implemented a show/hide functionality on the main menu click, but currently only the menu is being set as active ...

javascriptjqueryhtmlcss

Navigate through input fields while they are hidden from view

Picture this scenario: <div> <input tabindex="1"> </div> <div style="display:none"> <input tabindex="2"> </div> <div> <input tabindex="3"> </div> As I attempt to tab through these input f ...

javascriptjqueryhtmlinputtabindex

"Having trouble with Set-Cookie Response Header not setting the cookie? It could be due to

My webpage is located at: http://localhost:4201/login When a user clicks on login, it sends a request to: http://localhost:4201/api/login/authenticate This request is then proxied to: The response from the proxy contains a set-cookie header with the f ...

javascriptangularauthenticationcookiessetcookie

Angular and React: A Comparison of Their Binding Mechanisms

As I embark on my journey with React, I've grasped the concept of binding "this" in React. However, I'm puzzled about how Angular manages "this". React class Product extends React.Component { a= "mdb" constructor(props) { super( ...

javascriptreactjsangularthis

The function of jQuery's .prop('defaultSelected') appears to be unreliable when used in Internet Explorer 9

Below is the code I am currently using: $selects = $('select'); $selects.val( $selects.prop('defaultSelected')); The purpose of this code is to reset the values of all select elements on my webpage. However, I am facing an issue in IE ...

javascriptjqueryhtmlbackbone.js

Using ngIf in Angular and eliminating components in Angular 6

Currently, I am faced with the challenge of removing the header and footer components in one specific component, but I'm unsure about how to proceed. In my approach, I consider the app component as the index.html component. Whenever I create a new com ...

htmlangular

Align text columns to the right within flexible rows

I'm currently constructing a grid using flexbox, but I've encountered some border and padding issues leading me to devise the following HTML structure: https://jsfiddle.net/rqmdxcjo/ <div class="flex"> <div class="flex ...

htmlcssflexbox

Tips for adjusting the header color in materialize framework?

I've been working on a web template and I'm looking to customize the color displayed in the Android browser (maybe using JS?). The default color is blue. How can I go about changing it? https://i.sstatic.net/RxLbS.jpg Appreciate any help! ...

javascriptcssmaterial-designmaterialize

Token does not contain the necessary claim nbf (not before) for access while utilizing Firebase Microsoft Sign-in to retrieve data from MicrosoftGraph

I currently have a mobile application structured with Angular on the front-end and a Node.js server on the backend. We have successfully integrated Google Cloud's Identity Providers for users to sign in using Google and/or Microsoft accounts. While ...

node.jsangularfirebasefirebase-authenticationazure-ad-msal

Mobile responsiveness issue with basic bootstrap navigation bar not collapsing

After trying everything possible, I am still unable to resolve my issue and it is leaving me puzzled. MY ISSUE Simplifying my page, I used the example from w3schools for a responsive navbar. When resizing the browser window, the navbar collapses correctl ...

jquerycsshtmltwitter-bootstrap

The issue of a malfunctioning Customized Bootstrap Carousel when used with flex and gap is causing

I have created a unique bootstrap carousel where instead of displaying one div, I showcase three (one in the middle and half of each on the sides). The issue arises when I add borders to my divs and attempt to create spacing between them using display: fle ...

csssassbootstrap-5

Learn how to utilize the onload function to execute JavaScript within a search bar, effectively eliminating the keyword "script" from the input

Could use some help here. I have a project due tomorrow and I'm lost on how to proceed. <body onload="loadImage()">; <script> "function loadImage() { alert("Image is loaded"); }" </script> I am attempting to substitute the alert(1) ...

javascriptjquerypythonhtml

There are no markers or popups currently displayed on the map

Utilizing the ngx-leaflet plugin for leaflet, I have established the base layers and integrated a listener for the leafletMapReady event. Within my handler, I attempted to add both a marker and a customized popup. The handler code is displayed below: init ...

javascriptangularleafletngx-leaflet

The deletion request using the form in Express is experiencing issues and not functioning properly

When attempting to delete data from a database using a form in node.js and express, I am encountering issues with the deletion process. It seems that there are only two methods available - get and post - and no specific delete method. router.js code rout ...

javascripthtmlnode.jsexpress

"Troubleshooting a CSS Bug on a PHP Dynamic Web

I have a PHP web page that is dynamic. localhost/ctd/index.php Everything is working fine, except when I add a forward slash like this: localhost/ctd/index.php/ The CSS does not load. Is this a CSS bug or PHP issue? Here is the full code of index.php: ...

phphtmlcss

Expanding the width of a Datatables within a Bootstrap modal

While working on my modal, I encountered an issue with the width of Datatables. Despite trying to adjust it to fit the modal size, it appears like this: https://i.sstatic.net/bLvIJ.png Below is the jQuery code calling the Datatables: function retrieveTa ...

javascriptjqueryhtmltwitter-bootstrapdatatables

Is the CanActivate Observable for boolean values malfunctioning or should I use EventEmitter.asObservable() instead in Angular2?

Check out my code using Observable and EventEmitter here: http://plnkr.co/edit/HV2sWd?p=preview Even with publishReplay, I'm still facing issues :( I have a feeling it has something to do with EventEmitter.asObservable() Can you help me figure out ...

angularrxjsangular2-routing