Ngx-datatable: Two tables on same page throwing error when sorting.

[kevfuzz]

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here

Current behavior
If I have two tables on the same page and try sort the second table, an error is thrown. I am defining a ngx-datatable-column as I want to use a cell template.

Expected behavior
Both tables should be sortable.

Reproduction of the problem
Plunker does not seem to be working?

To create it is very simple. All I did was create two tables in the same component as follows:

<ngx-datatable [rows]="table1" [rowHeight]="'auto'" [columnMode]="'flex'">
    <ngx-datatable-column name="Customer" prop="customerNumber"> 
         </ngx-datatable-column>                
</ngx-datatable>
<ngx-datatable [rows]="table2" [rowHeight]="'auto'" [columnMode]="'flex'">
    <ngx-datatable-column name="Customer" prop="customerNumber"></ngx-datatable-column>             
</ngx-datatable>

This resulted in the following error when I click on the column header in the second table:
EXCEPTION: Error in ./DataTableBodyComponent class DataTableBodyComponent - inline template:31:12 caused by: Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'.

• Table version: 6.0.0

• Angular version: 2.3.1

• Browser: Chrome

• Language: TypeScript 2.1

Thanks,
Kevin.

[dunerunner]

+1

[ipassynk]

By any change is it possible that table1 and table 2 share that same objects? I saw a similar exception in case of shared data.

[amcdnl]

Ya, if they share the same column defs this will happen. I would have to copy columns to avoid this which would de-reference.

[ipassynk]

I don't think it is related to the shared columns. It is related to the same row objects and in particular $index that is added to the grid. It would be nice to share the row objects and have custom $index for each grid. You can check the plunk https://plnkr.co/edit/i4ayUTOuYQnFgvqbIP2m that shows two grids with with different columns objects but the same rows. open the console and start clicking on sort. See the error.

DataTableBodyComponent.html:30 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'datatable-body-row datatable-row-even'. Current value: 'datatable-body-row datatable-row-odd'.
    at viewDebugError (errors.ts:30) [angular]
    at expressionChangedAfterItHasBeenCheckedError (errors.ts:29) [angular]
    at checkBindingNoChanges (util.ts:145) [angular]
    at checkNoChangesNodeInline (view.ts:438) [angular]
    at checkNoChangesNode (view.ts:519) [angular]
    at debugCheckNoChangesNode (services.ts:387) [angular]
    at debugCheckRenderNodeFn (services.ts:330) [angular]
    at Object.eval [as updateRenderer] (DataTableBodyComponent.html:30) [angular]
    at Object.debugUpdateRenderer [as updateRenderer] (services.ts:307) [angular]
    at checkNoChangesView (view.ts:368) [angular]
    at callViewAction (view.ts:694) [angular]
    at execEmbeddedViewsAction (view.ts:670) [angular]
    at checkNoChangesView (view.ts:368) [angular]
    at callViewAction (view.ts:694) [angular]
    at ____________________Elapsed_46507_ms__At__Mon_Apr_10_2017_10_20_21_GMT_0400__EDT_ (localhost)
    at getStacktraceWithUncaughtError (VM1058 long-stack-trace-zone.js:39) [angular]
    at new LongStackTrace (VM1058 long-stack-trace-zone.js:33) [angular]
    at Object.onScheduleTask (VM1058 long-stack-trace-zone.js:104) [angular]
    at ZoneDelegate.scheduleTask (VM1039 zone.js:378) [angular]
    at Object.onScheduleTask (VM1039 zone.js:274) [angular]
    at ZoneDelegate.scheduleTask (VM1039 zone.js:378) [angular]
    at Zone.scheduleTask (VM1039 zone.js:209) [angular]
    at Zone.scheduleEventTask (VM1039 zone.js:235) [angular]
    at zoneAwareAddListener (VM1039 zone.js:1370) [angular]
    at HTMLSpanElement.addEventListener (eval at createNamedFn (VM1039 zone.js:1476), <anonymous>:3:43) [angular]
    at DomEventsPlugin.addEventListener (dom_events.ts:37) [angular]
    at EventManager.addEventListener (event_manager.ts:32) [angular]
    at DefaultDomRenderer2.listen (dom_renderer.ts:110) [angular]
    at DebugRenderer2.listen (services.ts:906) [angular]
    at ____________________Elapsed_168_ms__At__Mon_Apr_10_2017_10_20_21_GMT_0400__EDT_ (localhost)
    at getStacktraceWithUncaughtError (VM1058 long-stack-trace-zone.js:39) [angular]
    at new LongStackTrace (VM1058 long-stack-trace-zone.js:33) [angular]
    at Object.onScheduleTask (VM1058 long-stack-trace-zone.js:104) [angular]
    at ZoneDelegate.scheduleTask (VM1039 zone.js:378) [angular]
    at Object.onScheduleTask (VM1039 zone.js:274) [angular]
    at ZoneDelegate.scheduleTask (VM1039 zone.js:378) [angular]
    at Zone.scheduleTask (VM1039 zone.js:209) [angular]
    at Zone.scheduleMicroTask (VM1039 zone.js:229) [angular]
    at scheduleResolveOrReject (VM1039 zone.js:758) [angular]
    at resolvePromise (VM1039 zone.js:707) [angular]
    at unpkg.com/[email protected]/dist/zone.js:760:17 [angular]
    at Object.onInvokeTask (ng_zone.ts:253) [angular]
    at ZoneDelegate.invokeTask (VM1039 zone.js:397) [angular]
    at ____________________Elapsed_3_ms__At__Mon_Apr_10_2017_10_20_21_GMT_0400__EDT_ (localhost)
    at getStacktraceWithUncaughtError (VM1058 long-stack-trace-zone.js:39) [angular]
    at new LongStackTrace (VM1058 long-stack-trace-zone.js:33) [angular]
    at Object.onScheduleTask (VM1058 long-stack-trace-zone.js:104) [angular]
    at ZoneDelegate.scheduleTask (VM1039 zone.js:378) [angular]
    at Object.onScheduleTask (VM1039 zone.js:274) [angular]
    at ZoneDelegate.scheduleTask (VM1039 zone.js:378) [angular]
    at Zone.scheduleTask (VM1039 zone.js:209) [angular]
    at Zone.scheduleMicroTask (VM1039 zone.js:229) [angular]
    at scheduleResolveOrReject (VM1039 zone.js:758) [angular]
    at ZoneAwarePromise.then (VM1039 zone.js:847) [angular]
    at new ApplicationInitStatus (application_init.ts:47) [angular]
    at AppModuleInjector.createInternal (module.ngfactory.js [sm]:1) [angular]
    at AppModuleInjector.NgModuleInjector.create (ng_module_factory.ts:124) [angular]
    at NgModuleFactory.create (ng_module_factory.ts:97) [angular]

[pstahmer]

Seeing the same issue as @ipassynk. It also occurs if subsets of the same row collection are used in multiple tables without being deep cloned. I forked the above plunkr to show an example of this case https://plnkr.co/edit/iDzItKhvp2QcfZBMMqH4?p=preview.

[igasparetto]

What is the solution please?