Ngx-datatable get CSS of rows

Question

My goal is to apply a class to a row when I click on a button inside the row.

I've define some buttons inside a column as you can see below:

contactlist.component.html

<ngx-datatable #ngxtable [messages]="messages" [rows]="contacts"
[rowHeight]="env.ngx.datatableRowHeight" [headerHeight]="env.ngx.datatableHeaderHeight" [columnMode]="env.ngx.columnModeFlex" [ngClass]="env.ngx.datatableClass" class="datatableSmall">
    <ngx-datatable-column name="name" [flexGrow]="4">
        <ng-template let-column="column" ngx-datatable-header-template>
            <span>Nombre</span>
        </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column *ngIf="!isSmallScreen" name="phone" [flexGrow]="2">
        <ng-template let-column="column" ngx-datatable-header-template>
            <span>Telf</span>
        </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column *ngIf="!isSmallScreen" name="cellPhone" [flexGrow]="2">
        <ng-template let-column="column" ngx-datatable-header-template>
            <span>Móvil</span>
        </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column *ngIf="!isSmallScreen" name="mail" [flexGrow]="4">
        <ng-template let-column="column" ngx-datatable-header-template>
            <span>Correo</span>
        </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column name="Acciones" sortable="false" [flexGrow]="3">
        <ng-template let-row="row" let-rowIndex="rowIndex" let-value="value" ngx-datatable-cell-template>
            <ion-button *ngIf="!editMode" fill="clear" size="small" (click)="edit(row, rowIndex)">
                <ion-icon slot="icon-only" name="create" color="black"></ion-icon>
            </ion-button>
            <ion-button *ngIf="!editMode" fill="clear" size="small" (click)="remove(row.id)">
                <ion-icon slot="icon-only" name="remove-circle-outline" color="black"></ion-icon>
            </ion-button>
        </ng-template>
    </ngx-datatable-column>
</ngx-datatable>

With the functions defined inside .ts I'm able to get the rows values but never access to the classess applied to the row.

I got th reference to the Datatable object by:

  @ViewChild('ngxtable', {static: false})
  private ngxTable: DatatableComponent;

But I can't see any reference to the rows styles.

Rafael Osuna Dominguez Rafael Osuna Dominguez · Accepted Answer · 2020-01-11T22:50:23

Ok, find a solution.

There's no need to get any reference to the datatable. Ngx Datatable has an option [rowClass] that admit a function to apply a style under certain conditions.

In my case:

<ngx-datatable #ngxtable [messages]="messages" [rows]="contacts"  [rowClass]="isEditingRow"

And in the .ts

  isEditingRow = (row) => {
    return {
      'selectedEditMode': (() => { return row.id === this.editingRowId })()
    };
  }

Ngx-datatable get CSS of rows

1 Answers