3

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.

Kush Patel
  • 3,685
  • 5
  • 42
  • 65

1 Answers1

1

According to this post, the error could occur when the rxjs version is not fitting the ngx-datatable version. According to the ngx-datatable package.json, they use rxjs 6.1.0 Maybe downgrading to this version could solve the problem.

besserwisser
  • 2,590
  • 3
  • 13
  • 16