I have few tables, sorting does work on tables without row detail. However, when I add row detail, sorting is breaking and throwing following error.
"rxjs_1.fromEvent is not a function"
My code is as follows for row detail
<div style="overflow-x: scroll;" class="bigTable" *ngIf="test_table.rows.length > 0">
<ngx-datatable #myTable
*ngIf="test_table.rows.length > 0"
class="bootstrap" [rows]="test_table.rows"
[columns]="test_table.columns"
[columnMode]="'force'"
[headerHeight]="40"
[footerHeight]="40"
[limit]="10"
[rowHeight]="'auto'"
[scrollbarH]="true"
[sorts]="[{prop: 'date_time', dir: 'desc'}]"
(page)="onPage($event)">
<ngx-datatable-row-detail [rowHeight]="50" #myDetailRow (toggle)="onDetailToggle($event)">
<ng-template let-row="row" ngx-datatable-row-detail-template>
<div>
<strong>
<a style="font-size:20px" (click)="open(content, row['event_id'])">Denial Reasons</a>
</strong>
</div>
</ng-template>
</ngx-datatable-row-detail>
<ngx-datatable-column [width]="50" [resizeable]="false" [sortable]="false" [draggable]="false" [canAutoResize]="false">
<ng-template let-row="row" let-expanded="expanded" ngx-datatable-cell-template>
<a href="javascript:void(0)"
[class.datatable-icon-right]="!expanded"
[class.datatable-icon-down]="expanded"
title="Expand/Collapse Row"
(click)="toggleExpandRow(row)">
</a>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="event_id">
<ng-template let-column="column" ngx-datatable-header-template>
ID
</ng-template>
<ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
{{row['event_id']}}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="x1" >
<ng-template let-column="column" ngx-datatable-header-template>
X1
</ng-template>
<ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
{{row['x1']}}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="x2" >
<ng-template let-column="column" ngx-datatable-header-template>
X2
</ng-template>
<ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
{{row['x2']}}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="score" >
<ng-template let-column="column" ngx-datatable-header-template>
Score
</ng-template>
<ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
{{row['score']}}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="x3">
<ng-template let-column="column" ngx-datatable-header-template>
X3
</ng-template>
<ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
{{row['x3']}}
</ng-template>
</ngx-datatable-column>
</ngx-datatable>
</div>
I am using Angular6(@angular/cli@6.0.8) with @swimlane/ngx-datatable@13.0.1 & rxjs@6.2.2.