ngx-DataTable sort on a column not working Angular 4

Question

Though i'm very much new to angular, i'm facing some difficulties using ngx-DataTable. I am using simple ngx-DataTable for simple operations. The problem is on a column, sort is not working though i've declared attr as [sortable]=true. Here's code. Table Definition:

 <ngx-datatable
                [columns]="columns"
                [columnMode]="'force'"
                [headerHeight]="40"
                [footerHeight]="50"
                [rowHeight]="'auto'"
                [limit]="10"
                [rows]='contacts'>

DataTable Contains two columns and Definitions are as as follows.

    <ngx-datatable-column
                        [width]="50"
                        [resizeable]="true"
                        [sortable]="true"
                        [draggable]="true"
                        [canAutoResize]="true" name="Name">
       <ng-template let-row="row" ngx-datatable-cell-template>
          <span>{{row.first_name}}</span>
       </ng-template>
   </ngx-datatable-column>

    <ngx-datatable-column
                        [width]="50"
                        [resizeable]="true"
                        [sortable]="true"
                        [draggable]="true"
                        [canAutoResize]="true" name="Actions">
        <ng-template let-row="row" let-rowIndex="rowIndex" ngx-datatable-cell-template>
      <!--Template Here-->
        </ng-template>
   </ngx-datatable-column>

I just want to make my name column sortable. Please help me guys. Thanks in advance.

Rendering correctly. @MihaiAlexandru-Ionut. i've some other pages too in which, it is working completly. But not in this. I dont know why.. — Yash Majithiya
– Yash Majithiya, Commented Jan 17, 2018 at 11:03

Yash Majithiya · Accepted Answer · 2018-09-28 05:10:43Z

28

Well it solved. Actually it can't find the values where it can make column sort. so i just written prop='first_name' in ngx-datatable-column declaration to let it know what is being to sort, like this.

<ngx-datatable-column
    [width]="50"
    [resizeable]="true"
    [sortable]="true"
    [draggable]="true"
    [canAutoResize]="true" name="Name" prop="first_name">
</ngx-datatable-column>

edited Sep 28, 2018 at 5:10

answered Jan 17, 2018 at 13:44

Yash Majithiya

8611 gold badge8 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

emirhosseini Over a year ago

This doesn't work for me. Also why is the value of prop in single quotes instead of double quotes like everything else?!

Yash Majithiya Over a year ago

well quote doesn't matters in this. I can check the issue if you share the code. @emirhosseini

foobar443 Over a year ago

The explanation is that, by default, the prop value will be the camelcase version of the name (see the documentation swimlane.gitbook.io/ngx-datatable/api/column/inputs#prop-string) but you are using a snakecase name.

Vishnu S Babu Over a year ago

Can we create a custom sort for a particular column itself?

Niraj Tathe Over a year ago

@VishnuSBabu Yes, we can create custom sorting on column itself. We will have to use comparator property with ngx-datatable-column.

Collectives™ on Stack Overflow

ngx-DataTable sort on a column not working Angular 4

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related