How can i mark a primeng datatable row as invalid?

Question

I am using a primeng datatable to display some data with editable cells who are triggering a function in the component to calculate values in another column of the row. Pretty simple to this point.

Now i want to mark the editable cells or the whole row as invalid, if the calculation returns a functional invalid data (i.e. decimal number).

I have no idea how to implement this.

I tried it with custom css, but every class i am trying to attach on a p-column has no effect on the row or cell.

This is my datatable:

<p-dataTable #balanceTable [(value)]="denomValueContent" sortable="false" dataKey="id" rowGroupMode="subheader" groupField="valueEach" [sortableRowGroup]="false">
                <p-header>ATS name </p-header>
                <ng-template class="rowgroupSmall" pTemplate="rowgroupheader" let-rowData>{{rowData['valueEach'] | number:'.2-2'}}</ng-template>
                <p-column selectionMode="multiple"></p-column>
                <p-column header="Denomination" field="valueEach">
                    <ng-template let-col let-currentRow="rowData" pTemplate="body">
                        <div class="textAlignmentRight fontWeightBold">{{currentRow[col.field] | number:'.2-2'}}</div>
                    </ng-template>
                </p-column>
                    <p-column type="number" header="Notes" field="notes">                                                                                                                                                                                                                                                                                                                                        
                        <ng-template let-col let-notes="rowData" pTemplate="body"  let-i="rowIndex">
                            <input pInputText class="inputDenomField bottomBorder" placeholder="0"
                                currencyMask [options]="{prefix: '', suffix: '', allowNegative: false, allowZero: true, precision: 0}"
                                (blur)="recalculateNotes(i)"
                                [(ngModel)]="notes[col.field]" 
                                [ngModelOptions]="{standalone:true}" />
                        </ng-template>
                    </p-column>
                <p-column type="number" header="Amount" field="amount">
                    <ng-template let-col let-currentRow="rowData" pTemplate="body" let-i="rowIndex">
                        <input placeholder="0.00"
                            currencyMask [options]="{prefix: '', suffix: '', allowNegative: false, allowZero: true}" 
                            pInputText class="inputDenomField bottomBorder" 
                            (blur)="recalculateAmount(i)" 
                            [(ngModel)]="currentRow[col.field]" 
                            [ngModelOptions]="{standalone:true}"
                        />
                    </ng-template>
                </p-column>
                <p-column header="Locked"></p-column>
                <p-column header="State">
                    <ng-template pTemplate="body">
                        Ok
                    </ng-template>
                </p-column>
            </p-dataTable>

The Component:

  export class EmptyAtsComponent implements OnInit {
  @ViewChild('balanceTable') balanceTable: DataTable;

  denomValueContent: DenomValueContent[] = [];
  // FIXME: id durch eingeloggten User via AuthGuard ersetzen, hier nur hardcoded zum testen, 0 oder 1 möglich
  tellerId = 0;
  constructor(private maintellerService: MaintellerService) { }

  ngOnInit() {
    this.maintellerService.getCounterCloseBalanceById(this.tellerId).then(mainteller => this.setBalance(mainteller));
  }

  setBalance(balance: TellerBalance) {
    this.denomValueContent = balance.denoms[0].content;
    console.log(this.denomValueContent);
  }

  recalculateAmount(index) {
    if (this.balanceTable.value[index].amount >= 0) {
      this.balanceTable.value[index].notes = this.balanceTable.value[index].amount / this.balanceTable.value[index].valueEach;
    } else {
      this.balanceTable.value[index].notes = undefined;
      this.balanceTable.value[index].amount = undefined;
    }
  }

  recalculateNotes(index) {
    if (this.balanceTable.value[index].notes >= 0) {
      this.balanceTable.value[index].amount = this.balanceTable.value[index].notes * this.balanceTable.value[index].valueEach;
    } else {
      this.balanceTable.value[index].amount = undefined;
      this.balanceTable.value[index].notes = undefined;
    }
  }
}

Please take note, that there isnt my custom CSS Try implemented in the above code.

Can somebody give me an advice or suggestion, how i can mark the whole row or the cell as invalid i.e. with red borders?

Thank you very much for reading.

Answer 1

You can use rowStyleClass property for that.

---

HTML

<p-dataTable [value]="cars" [rowStyleClass]="isRowValid" [editable]="true">

where isRowValid is a function declared in your component which will check if the row is valid or not and return a CSS classname.

Component

isRowValid(rowData: any) {
    return (rowData.year<=2010) ? "danger" : "success";
}

CSS ("danger" and "success" classes)

tr.danger > td {
  background-color: red;
}

tr.success > td {
  background-color: green;
}

---

Here is a working Plunker.

In that Plunker, the column Year is editable and a row is considered as valid if year field is less or equal than 2010.