ngx-datatable detail row not expanding

Question

I am attempting to create a ngx-datatable that I can reuse everywhere to keep styling and how editing, etc work.

Most everything works but I cannot figure out why I cannot get the details row to expand properly.

Here is the common table component html/template:

common-table.component.html

<div>
  <h3>Results</h3>
  <ngx-datatable 
    #myTable
    class="material expandable"
    [rows]="data"
    [columns]="columns"
    [columnMode]="'force'"
    [headerHeight]="50"
    [footerHeight]="50"
    [rowHeight]="'auto'"
    [externalPaging]="hasServerPaging"
    [count]="tablePaging.count" 
    [offset]="tablePaging.offset" 
    [limit]="tablePaging.limit" 
    (page)='setPage($event)'>
    <ngx-datatable-row-detail *ngIf="hasDetails" [rowHeight]="rowDetailHeight" #myDetailRow [template]="rowDetails" (toggle)="onDetailToggle($event)">
    </ngx-datatable-row-detail>
  </ngx-datatable>

</div>

The parent component contains the definitions for the columns and templateRefs to pass around:

search-results.component.html

<ng-template #rowDropDownTemplate let-row="row" ngx-datatable-cell-template>
  <a [class.datatable-icon-right]="!row.$$expanded" [class.datatable-icon-down]="!row.$$expanded" title="Expand/Collapse Details"
    (click)="toggleExpandRow(row)">
        </a>
</ng-template>

<ng-template #rowDetailsTemplate let-row="row" ngx-datatable-row-detail-template>
  <div class="uk-grid">
    <div class="uk-width-1-2">
      left-side data
    </div>
    <div class="uk-width-1-2">
      right-side data
  </div>
</ng-template>

<app-common-table *ngIf="results && results.length > 0" 
  [tablePaging]="tablePaging" 
  [columns]="columns" 
  [data]="tableData" 
  [rowDetails]="rowDetailsTemplate" 
  [rowDetailHeight]="200"
  [hasServerPaging]="true" 
  (onPaging)="onPaging($event)">
</app-common-table>

Just for possible issues in the code, here is how the columns are being set: search-results.component.ts

private setColumns(): void {
    this._columns = [];

    let templateTest: TemplateRef<any>;

    let dropDownColumn: TableColumn = {
      width: 50,
      resizeable: false,
      sortable: false,
      draggable: false,
      canAutoResize: false,
      cellTemplate: this.rowDropDownTemplate,
    }
    this._columns.push(dropDownColumn);

    let nameColumn: TableColumn = {
      name: "Name",
      width: 120
    };
    this._columns.push(nameColumn);

    let positionsColumn: TableColumn = {
      name: "Positions",
      width: 200
    };
    this._columns.push(positionsColumn);

    let experienceColumn: TableColumn = {
      name: "Experience",
      width: 80
    };
    this._columns.push(experienceColumn);

    let leveleColumn: TableColumn = {
      name: "Level",
      width: 80
    };
    this._columns.push(leveleColumn);

    let educationeColumn: TableColumn = {
      name: "Education",
      width: 80
    };
    this._columns.push(educationeColumn);

  }

The data appears and so does the icon to expand the details row. Events fire and show the row data, but nothing is shown.

Any help would be greatly appreciated!!

Answer 1

I suspect your toggleExpandRow method is wrong

I would do it like this:

app.common-table.ts

export class AppCommonTableComponent {
  @ViewChild('myTable') myTable: any;

parent.component.ts

@ViewChild(AppCommonTableComponent) commonTable: AppCommonTableComponent;

toggleExpandRow(row) {
  console.log('Toggled Expand Row!', row);
  this.commonTable.myTable.rowDetail.toggleExpandRow(row);
}

And you should fix your rowDropDownTemplate template. It should be

[class.datatable-icon-right]="!row.$$expanded" [class.datatable-icon-down]="row.$$expanded"

If you want to get the right classes

Plunker Example