Multiple tables on the same page generate an error

[dev4201]

Great work on the component! Hi, I'm wondering if someone came across the same issue, having two tables on the same page with different data sources.

Here is the abbreviated error I receive when rendering the page:

zone.js:390 ViewWrappedError_nativeError: Error: Error in ./GroupDetailComponent class GroupDetailComponent - inline template:90:36 caused by: Expression has changed after it was checked. Previous value: ''. Current value: '[object Object],[object Object]

Any help would be much appreciated - thank you!

[dev4201]

A followup to my issue... I wrapped each table in a separated component and imported them to the same page and all works great.

[mariuszfoltak]

I think it should works without problems, but I'll check it

[fpmk]

It works perfect, please post code of your tables

[ashishkhanna]

If I am using [mfData]="anyothervariable" other than [mfData]="data" then table is not populating. I am a beginner so might be a silly mistake

        <table class="table table-striped" [mfData]="profiles | dataFilter : profileFilterQuery" #mf="mfDataTable" [mfRowsOnPage]="10">
            <thead>
                <tr>
                    <th style="width: 35%">
                        <mfDefaultSorter by="name">Profile Name</mfDefaultSorter>
                    </th>
                    <th style="width: 35%">
                        <mfDefaultSorter by="email">Source System</mfDefaultSorter>
                    </th>
                    <th style="width: 30%">
                        <mfDefaultSorter by="age">Active Flag</mfDefaultSorter>
                    </th>

                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let item of mf.profiles">
                    <td>{{item.name}}</td>
                    <td>{{item.email}}</td>
                    <td class="text-right">{{item.age}}</td>

                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="4">
                        <mfBootstrapPaginator [rowsOnPageSet]="[5,10,15]"></mfBootstrapPaginator>
                    </td>
                </tr>
            </tfoot>
        </table>

[kabsila]

+1 this issue

[mariuszfoltak]

To [mfData] you should bind variable with your data. For each datatable in component you need assign DataTable directive to new template variable, e.g.:

<table [mfData]="firstArray" #first="mfDataTable">
  ...
  <tr *ngFor="let item of first.data">
  ..
</table>
<table [mfData]="secondArray" #second="mfDataTable">
  ...
  <tr *ngFor="let item of second.data">
  ..
</table>

[kabsila]

It work, Thank you.

[ashishkhanna]

Thanks for your quick help, it works component is really great. Can you please add a search filter also or help me to search across table, as of now it search only name field

Regards Ashish Khanna +91 945 627 0133

On Mon, Nov 28, 2016 at 11:06 AM, kabsila notifications@github.com wrote:

It work, Thank you.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/mariuszfoltak/angular2-datatable/issues/50#issuecomment-263187204, or mute the thread https://github.com/notifications/unsubscribe-auth/AEB1DJpCxyZCKO5-1cwwAX2XZzPqT42Aks5rCmhPgaJpZM4Kvd0t .

[kabsila]

@Ashish I think it depend on your pipe.

[AndersMygind]

@mariuszfoltak I used your solution to have multiple tables, but how do you make sorting work for multiple tables? #

[AndersMygind]

Sorting works fine for multiple tables. It was my code, that was broken see #81