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>
</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!!
hasDetails
property? And how doestoggleExpandRow
method look like? – yurzui