Ngx-datatable: Sorting not working on using 'Template', 'Flex', on using flex for column, resizing is an issue

[ichntn]

I'm submitting a ... (check one with "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

Expected behavior

Reproduction of the problem

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

• Table version: 7.3.0
  

• Angular version: 4.0.2
  

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  

• Language: [all | TypeScript X.X | ES6/7 | ES5]

[ichntn]

I have tried all the possible solutions mentioned in previous issues, hence no luck.
Plus, the performance of the table is also an big issue.
Please suggest some approach or an fix?

[amcdnl]

Can you add a demo? or code?

[mikevandonselaar]

Make sure you put let-sort="sortFn" in your ng-template and make sure to encapsulate your content in a class with a span <span (click)="sort()">Your Content here </span>

This was the case for me. Here's a full code example of my column template:

<ngx-datatable-column name="Description"> <ng-template let-column="column" let-sort="sortFn" ngx-datatable-header-template> <span (click)="sort()">Your Content Here</i></span>Beschrijving </ng-template> </ngx-datatable-column>

[ichntn]

Thanks,
solved sorting issue by removing ngx-datatable-header template, i was using multiple column templates.
performance also got enhanced on doing so.

[ichntn]

'flex' for column, resizing the column has no effect on the table only table header gets resized not the rows.

[ichntn]

Still an issue in latest release 9.3.0.

[ichntn]

Check demo - http://swimlane.github.io/ngx-datatable/#flex
Column resizing has no effect on rows.

[ichntn]

Is there any work around to fix column resizing issue for columnmode 'flex'?

[wizarrc]

columnmode 'flex' should really fallback to force upon resize at the very least.

https://github.com/swimlane/ngx-datatable/blob/d86ee5443b937ed439258f1ebaa884dd88876b9b/src/components/datatable.component.ts#L920

// Check if columnMode is flex and fallback to force
// Fixes issue #681
if (this.columnMode === ColumnMode.flex) {
    this.columnMode = ColumnMode.force;
}
c.width = newValue;

I can submit a pull request if that fallback policy is suitable.

[mishkolesnikov]

Any updates about colomnMode flex and resize columns? For me the approach proposed by @wizarrc is absolutely suitable.

[katestearns-suplari]

Any updates on the sorting for a custom Template? I found if I add a font-awesome icon as the content to a sort-btn class it will work, but I don't want a sort for all tables. Adding sortable:false does not change this.

[arunasSlenderis]

Removing ngx-datatable-header also worked for me. Thx chintan11192

[ahsanahmad22]

@mikevandonselaar
I am trying to sort a column externally with ngx-template but getting error - ERROR TypeError: Converting circular structure to JSON. Below is my code for column-

<ngx-datatable-column scope="col" style="width: 10%" name="Program ID" prop="programId"
                                              [draggable] = "false" [resizeable]= "false">

                            <ng-template let-column="column" let-sort="sortFn" let-sortDir="sortDir" ngx-datatable-header-template>
                                    <span class="mobile-hidden" (click)="sort($event, sortDir, sortFn)">
                                        {{column.name}}
                                    </span>
                            </ng-template>
                        </ngx-datatable-column>

Could you please help to resolve the issue.

[mikevandonselaar]

@mikevandonselaar
I am trying to sort a column externally with ngx-template but getting error - ERROR TypeError: Converting circular structure to JSON. Below is my code for column-

<ngx-datatable-column scope="col" style="width: 10%" name="Program ID" prop="programId"
                                              [draggable] = "false" [resizeable]= "false">

                            <ng-template let-column="column" let-sort="sortFn" let-sortDir="sortDir" ngx-datatable-header-template>
                                    <span class="mobile-hidden" (click)="sort($event, sortDir, sortFn)">
                                        {{column.name}}
                                    </span>
                            </ng-template>
                        </ngx-datatable-column>

Could you please help to resolve the issue.

@ahsanahmad22 I'm not quite sure I can help you with this, since I haven't work with ngx-datatable in over a year. But I'm guessing this is an issue that is not necessarily ngx-datatable related (https://stackoverflow.com/questions/11616630/json-stringify-avoid-typeerror-converting-circular-structure-to-json/11616993).

I'm guessing it has something to do with either the {{column.name}} in your template or the name="Program ID" in your column template.

I'm sorry I can't help you any further

[ahsanahmad22]

@mikevandonselaar
I am trying to sort a column externally with ngx-template but getting error - ERROR TypeError: Converting circular structure to JSON. Below is my code for column-

<ngx-datatable-column scope="col" style="width: 10%" name="Program ID" prop="programId"
                                              [draggable] = "false" [resizeable]= "false">

                            <ng-template let-column="column" let-sort="sortFn" let-sortDir="sortDir" ngx-datatable-header-template>
                                    <span class="mobile-hidden" (click)="sort($event, sortDir, sortFn)">
                                        {{column.name}}
                                    </span>
                            </ng-template>
                        </ngx-datatable-column>

Could you please help to resolve the issue.

@ahsanahmad22 I'm not quite sure I can help you with this, since I haven't work with ngx-datatable in over a year. But I'm guessing this is an issue that is not necessarily ngx-datatable related (https://stackoverflow.com/questions/11616630/json-stringify-avoid-typeerror-converting-circular-structure-to-json/11616993).

I'm guessing it has something to do with either the {{column.name}} in your template or the name="Program ID" in your column template.

I'm sorry I can't help you any further

Thanks for your reply
I really appreciate it

[joeveiga]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 7 days with no activity.