# How to style individual rows based on custom validation of the c8y-data-grid table in Angular

**URL:** <https://community.cumulocity.com/t/how-to-style-individual-rows-based-on-custom-validation-of-the-c8y-data-grid-table-in-angular/4097>\
**Category:** Forum\
**Tags:** cumulocity\
**Created:** [July 27, 2023, 10:34am UTC](https://community.cumulocity.com/t/how-to-style-individual-rows-based-on-custom-validation-of-the-c8y-data-grid-table-in-angular/4097 "2023-07-27T10:34:33Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![ranjithkumar\_m](https://avatars.discourse-cdn.com/v4/letter/r/9f8e36/32.png) [@ranjithkumar\_m](https://community.cumulocity.com/u/ranjithkumar_m)\
**Post date:** [July 27, 2023, 10:34am UTC](https://community.cumulocity.com/t/how-to-style-individual-rows-based-on-custom-validation-of-the-c8y-data-grid-table-in-angular/4097/1 "2023-07-27T10:34:33Z")

</div>

I have a c8y-data-grid table with data displayed, but I couldn’t add background color (RED) to a particular row of custom validation.

Could you please help and give me the solutions?

 ![image](https://europe1.discourse-cdn.com/flex005/uploads/cumulocity/original/3X/3/a/3ab76d5a6172d15e4b844501361720975dafa371.png)

---

<div class="post-metadata">

**Author:** ![ranjithkumar\_m](https://avatars.discourse-cdn.com/v4/letter/r/9f8e36/32.png) [@ranjithkumar\_m](https://community.cumulocity.com/u/ranjithkumar_m)\
**Post date:** [July 31, 2023, 12:07pm UTC](https://community.cumulocity.com/t/how-to-style-individual-rows-based-on-custom-validation-of-the-c8y-data-grid-table-in-angular/4097/3 "2023-07-31T12:07:17Z")

</div>

Hi,  
Anyone know how to add style to rows using c8y-data-grid in Angular? I’m stuck here; could you please assist me?

---

<div class="post-metadata">

**Author:** ![Tristan\_Bastian](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/tristan_bastian/32/18259_2.png) [@Tristan\_Bastian](https://community.cumulocity.com/u/Tristan_Bastian)\
**Post date:** [July 31, 2023, 12:36pm UTC](https://community.cumulocity.com/t/how-to-style-individual-rows-based-on-custom-validation-of-the-c8y-data-grid-table-in-angular/4097/4 "2023-07-31T12:36:30Z")

</div>

Hi,

as of now there is no option to set the styling of individual rows within the data grid.  
If you are using your own cell renderer components, you could probably style the individual cells and so more or less the whole row.

Regards,  
Tristan

---

<div class="post-metadata">

**Author:** ![ranjithkumar\_m](https://avatars.discourse-cdn.com/v4/letter/r/9f8e36/32.png) [@ranjithkumar\_m](https://community.cumulocity.com/u/ranjithkumar_m)\
**Post date:** [July 31, 2023, 4:02pm UTC](https://community.cumulocity.com/t/how-to-style-individual-rows-based-on-custom-validation-of-the-c8y-data-grid-table-in-angular/4097/5 "2023-07-31T16:02:58Z")

</div>

The below-mentioned code. I have used it to display my table with data in HTML.

The below-mentioned code. I have used it to display my table with data in HTML. Here, status based, I need to highlight rows with a background color of red or blue. and row-click event-based prediction on another page.

Is it possible? while using c8y-data-grid or any other options?

```auto
 <c8y-data-grid
      [title]="title"
      [columns]="columns"
      [rows]="data"
      [pagination]="pagination"
      [actionControls]="ActionControl"
      [selectable]="selectable"
      (itemsSelect)="onItemsSelect($event)"
      (onConfigChange)="onConfigChange($event)"
      (onFilter)="onFilter($event)">
        <c8y-column name="currStatus">
          <ng-container *c8yCellRendererDef="let currStat">
            <span [ngClass]="currStat['value']!=null && currStat['value']!=null? currStat['value']['warning'] :''">
              {{ currStat.value.status? currStat.value.status :'-'}} </span>           
          </ng-container>
        </c8y-column>
        </c8y-column> 
  </c8y-data-grid>

```

---

<div class="post-metadata">

**Author:** ![system](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/system/32/31990_2.png) [@system](https://community.cumulocity.com/u/system)\
**Post date:** [January 27, 2024, 4:03pm UTC](https://community.cumulocity.com/t/how-to-style-individual-rows-based-on-custom-validation-of-the-c8y-data-grid-table-in-angular/4097/6 "2024-01-27T16:03:55Z")

</div>

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.