Covalent: Template for td-data-table-row

[i-chet]

I have a simple task to highlight row in the data-table if one of column's value matched some condition. It can be solved using Atomic components of Data Table, but in this case I need to write custom code for selection, filters and more.
Why not to add template for row like it already done for cell?

[kyleledbetter]

Yup already planned. Both are useful (cell and row)

[luchillo17]

td-data-table-cell also needs template based on column type, i tried translating from normal table to Atomic one and either it doesn't work, or i'm not setting it up correctly (most likely since no docs for Atomic templates, is even any feature like that?).

<table td-data-table
  #dataTable
>

  <th td-data-table-column
    *ngFor="let column of columns"
    [name]="column.name"
    [numeric]="column.numeric"
    [active]="column.name === 'name'"
    [sortable]="true"
    [sortOrder]="sortOrder"
    (sortChange)="sort($event)"
  >
    {{column.label}}
  </th>
  <th td-data-table-column>
    Actions
  </th>

  <tr td-data-table-row *ngFor="let row of filteredData">
    <td td-data-table-cell *ngFor="let column of columns" [numeric]="column.numeric">
      {{column.format ? column.format(row[column.name]) : row[column.name]}}
      <ng-template tdDataTableTemplate="numberInvited" let-value="value">
        <div *ngIf="value; else noEntries">
          {{value}}
        </div>
        <ng-template #noEntries>-</ng-template>
      </ng-template>
      <ng-template tdDataTableTemplate="numberOfEntries" let-value="value">
        <div *ngIf="value; else noEntries">
          {{value}}
        </div>
        <ng-template #noEntries>-</ng-template>
      </ng-template>
      <ng-template tdDataTableTemplate="numberToReview" let-value="value">
        <md-chip-list *ngIf="value; else noEntries">
          <md-chip color="primary" selected="true">
            {{value}}
          </md-chip>
        </md-chip-list>
        <ng-template #noEntries>-</ng-template>
      </ng-template>
    </td>
    <td td-data-table-cell (click)="openActions(row, 'comments')">
      <button md-button [class.mat-accent]="!row['comments']">{{row['comments'] || 'Add Comment'}}</button>
    </td>
  </tr>

</table>

For the time being had to settle with *ngSwitch:

<table td-data-table
  #dataTable
>

  <th td-data-table-column
    *ngFor="let column of columns"
    [name]="column.name"
    [numeric]="column.numeric"
    [active]="true"
    [sortable]="true"
    [sortOrder]="sortOrder"
    (sortChange)="sort($event)"
  >
    {{column.label}}
  </th>
  <th td-data-table-column
    class='text-center'
    [active]="true"
  >
    Actions
  </th>

  <tr td-data-table-row *ngFor="let row of filteredData">
    <td td-data-table-cell *ngFor="let column of columns"
      [numeric]="column.numeric"
      [ngSwitch]="column.name"
    >
      <span *ngSwitchCase="'numberInvited'">
        <div *ngIf="row[column.name]; else noEntries">
          {{row[column.name]}}
        </div>
        <ng-template #noEntries>-</ng-template>
      </span>
      <span *ngSwitchCase="'numberOfEntries'">
        <div *ngIf="row[column.name]; else noEntries">
          {{row[column.name]}}
        </div>
        <ng-template #noEntries>-</ng-template>
      </span>
      <span *ngSwitchCase="'numberToReview'">
        <md-chip-list *ngIf="row[column.name]; else noEntries">
          <md-chip color="primary" selected="true">
            {{row[column.name]}}
          </md-chip>
        </md-chip-list>
        <ng-template #noEntries>-</ng-template>
      </span>
      <span *ngSwitchDefault>
        {{column.format ? column.format(row[column.name]) : row[column.name]}}
      </span>
    </td>
    <td td-data-table-cell (click)="openActions(row, 'comments')">
      <button md-button [class.mat-accent]="!row['comments']">{{row['comments'] || 'Add Comment'}}</button>
    </td>
  </tr>

</table>

[miltonhultgren]

I would also really like to see this feature.

@kyleledbetter any idea when this might be available?

[luchillo17]

@miltonhultgren Has my ng-switch workaround been useful?

[miltonhultgren]

@luchilo17 I've done something similar to accomplish my goals for now, yes.

But I would rather use the data centric component with a few row tweaks instead as this issue requested.

[hatunoglu]

@kyleledbetter
any update :)