css Question posted in
Some basic documentation can be found here.

Css – How can I change a color of row by index

I have a table with cell editing using primeng which the data its completed by a API, so the table never has the same quantity of rows and the same order. I want to change the row color to red if the word size is wrong or green if the size is correct.

I think I need to take the index of the edited row and then change the color.

<p-table [value]="valProd" responsiveLayout="scroll" (onEditInit)="onEditInit($event)" (onEditCancel)="onCancelInit($event)"> 
  <ng-template pTemplate="header"> 
    <tr> 
     <th>Name</th> 
     <th>Value</th> 
     <th>Size</th> 
    </tr> 
  </ng-template> 
   <ng-template pTemplate="body" let-valProd let-rowData> 
      <tr> 
      <td>
        <p-cellEditor>
         <ng-template pTemplate="output">
           {{ rowData.Name}}
         </ng-template>
       </p-cellEditor>
     </td>
         <td [pEditableColumn]="rowData.Value" pEditableColumnField="rowData.Value"> 
          <p-cellEditor [ngStyle]="{'background': colorTry}"> 
           <ng-template pTemplate="input"> 
            <input pInputText 
              type="text" 
              [(ngModel)]="rowData.Value" 
              name="value"
              (change)="checkWriteValue(rowData.Value, rowData.Size, rowData.HasFixedLength, rowData.Name)"
                                (keydown.enter)="checkWriteValue(rowData.Value, rowData.Size, rowData.HasFixedLength, rowData.name)"
> 
          </ng-template> 
          <ng-template pTemplate="output" id="pruebainput"> 
            {{rowData.Value}}
          </ng-template> 
        </p-cellEditor> 
      </td> 

      <td>
        <p-cellEditor>
         <ng-template pTemplate="output">
           {{ rowData.Size}}
         </ng-template>
       </p-cellEditor>
     </td>
   </tr> 
 </ng-template> 
</p-table>

I tried using the ngstyle but all the rows are painted. I need to work with them independently.

The purpose is when the cells ends the edit pressing enter or losing the focus, check the size of the word, then if the size is correct change de row background to green or red. It is possible have more than one in the same color.

Tags:

2

Answers


  1. 0

    Well, if you are using react, one workaround would be to have an array with minimum of 50 colors for example.
    Then you loop through the data and create rows dynamically and for each row you add inline style with background color based on that index.

    const colors = ['#a2a2a2','#e2e2e2','#515151',...];

data.map((item,i)=>(
<row style={{backgroundColor:colors[i]}}></row>
));

    But, if you have are using javascript you can use css :nth-child. and add background color for each row.

    Login or Signup to reply.
  2. 0

    I guess you can try to do it on pure CSS. Because of PrimeNG has embedded validation (see the screenshot), just catch it.

    Your CSS should be similar to as below (sorry, hasn’t checked):

    tr {
  background: green;
}

tr:has(.ng-dirty.ng-invalid) {
  background: red;
}

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search