Open dialogue from edit action button in Teradata Covalent data-table

Question

I am using TeraData Covalent's datatable in my angular project. The template I used had the following options for action buttons.

actionButtons: any[] = [
    {
        'title': "View",
        'icon': "visibility",
        'url': "/business-opps/contacts/view"
    },
    {
        'action':'update',
        'title': "Update",
        'icon': "edit",
    },
    {
        'action': 'delete',
        'title': "Delete",
        'icon': "delete",
        'url': ""
    }
]

Instead of giving a url i want to open a dialogue or maybe pass a function name.

My html for data-table is:

<datatable *ngIf="eodReports" 
    [dataList]="eodReports" 
    [columns]="dtColumns" 
    [actionButtons]="actionButtons"
    [totalRecords]="totalRecords" 
    [sortBy]="'date'"
    (deleteRecord)="deleteRecord($event)"
    (nextPage)="nextPage($event)"
    (filterRecords)="filterRecords($event)" >
</datatable>

Answer 1

The above component is not an input into the td-data-table. The Covalent data table can accept a custom cell template though.

<table td-data-table>
  <th td-data-table-column>
    <md-icon>comment</md-icon>
    <span>Comments</span>
  </th>
  <th td-data-table-column
      *ngFor="let column of columns"
      [numeric]="column.numeric">
    {{column.label}}
  </th>
  <tr td-data-table-row *ngFor="let row of basicData">
    <td td-data-table-cell (click)="openPrompt(row, 'comments')">
      <button md-button [class.mat-accent]="!row['comments']">{{row['comments'] || 'Add Comment'}}</button>
    </td>
    <td td-data-table-cell *ngFor="let column of columns" [numeric]="column.numeric">
      {{column.format ? column.format(row[column.name]) : row[column.name]}}
    </td>
  </tr>
</table>

In this example, the TdDialogService is used to trigger the propmt but you could also a custom dialog.

import { ITdDataTableColumn } from '@covalent/core';
import { TdDialogService } from '@covalent/core';
...
})
export class Demo {
  data: any[] = [
    { sku: '1452-2', item: 'Pork Chops', price: 32.11 },
    { sku: '1421-0', item: 'Prime Rib', price: 41.15 },
  ];
  columns: ITdDataTableColumn[] = [
    { name: 'sku', label: 'SKU #', tooltip: 'Stock Keeping Unit' },
    { name: 'item', label: 'Item name' },
    { name: 'price', label: 'Price (US$)', numeric: true, format: v => v.toFixed(2) },
  ];

  constructor(private _dialogService: TdDialogService) {}

  openPrompt(row: any, name: string): void {
    this._dialogService.openPrompt({
      message: 'Enter comment?',
      value: row[name],
    }).afterClosed().subscribe((value: any) => {
      if (value !== undefined) {
        row[name] = value;
      }
    });
  }
}