Ngx-datatable: Sorting event in the template header

Created on 1 Dec 2016 · 5Comments · Source: swimlane/ngx-datatable

I have table with own header template with inputs for filtering, but i am struggling with firing the sorting event from table column header. Is it possible to fire the sort event if i have template ? I read issue #170 but it didnt help me because i cannot fire (onColumnChange) also. Could please gave me some guidelines how to fire sorting event or sort when using templates
thanks

Question

Source

JurajLigo

👍4

All 5 comments

I think this is still a issue. I have my own header template like your doing with input filter and column click for sorting. I had to manually sort the rows after the filter is done.

Chandru-B on 2 Dec 2016

This is resolved in latest. We have a sort event exposed now.

amcdnl on 15 Apr 2017

@amcdnl can you please give a working example of how to use the "exposed sort event"? I went through a few related issues, but still can't figure out how to make it work?

burjua on 21 Nov 2017

👍1

@amcdnl Hoping for more visibility on this, I'm also unable to determine how to use the "exposed sort event" mentioned above.

Ryan-Haines on 19 Dec 2017

@amcdnl nevermind, I found it.
@burjua here is an example (also available in the source code at \ngx-datatable\ngx-datatable-master\demo\sorting\sorting-server.component.ts

add (sort)="onSort($event)" to your ngx-datatable declaration

  <h3>

    Server-side Sorting

    <small>

      <a href="https://github.com/swimlane/ngx-datatable/blob/master/demo/sorting/sorting-server.component.ts" target="_blank">

        Source

      </a>

    </small>

  </h3>

  <ngx-datatable

    class="material"

    [rows]="rows"

    [columns]="columns"

    [columnMode]="'force'"

    [headerHeight]="50"

    [footerHeight]="50"

    [rowHeight]="'auto'"

    [externalSorting]="true"

    [loadingIndicator]="loading"

    (sort)="onSort($event)">

  </ngx-datatable>

</div>`

Ryan-Haines on 19 Dec 2017

👍1

Was this page helpful?

0 / 5 - 0 ratings