How use sorting in ngx-datatable / ngx-datatable-column in Angular?

Question

I'm trying to use ngx-datatable's sort feature to perform the action like this link: https://swimlane.github.io/ngx-datatable/

However, it does not work.

I've tried without luck to use properties like:

sortable="true"
[sortType]="'multi'"
[sorts]="[{prop: 'id_pessoa', dir: 'asc'}]"

Below is the code and version of ngx-datatable:

"@swimlane/ngx-datatable": "^15.0.2"

<section class="basic-elements">
<!-- Breadcrumbs -->
<nav>
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a routerLink="/">Home</a>
        </li>
        <li class="breadcrumb-item active">
            Pessoas
        </li>
    </ol>
</nav>

<div id="mb-4" class="row mb-4">
    <div class="col-md">
        <h1 class="h2">Pessoas</h1>
    </div>
    <div class="col-md">
        <button routerLink="novo" type="button" class="btn btn-raised btn-raised btn-success btn-no-margin float-right btn-heigh2">
            + Nova Pessoa
        </button>
    </div>
</div>

<div id="mb-4" class="row mb-4">
        <div class="col-md-11">
            <input type="text" class="form-control" id="email" >
        </div>
        <div class="col-md-1">
            <button [disabled]="submittingForm " type="submit" class="btn btn-raised btn-raised btn-no-margin btn-primary float-right btn-heigh button-margin-top">
                Buscar
            </button>
        </div>
</div>

<div class="row text-left">
    <div class="col-md-12">
        <div class="card">
            <div class="card-content">
                <ngx-datatable 
                    class="bootstrap"
                    [rows]="rows"
                    [columns]="columns"
                    [columnMode]="'force'"
                    [headerHeight]="10"
                    [footerHeight]="35"
                    [rowHeight]="35"
                    [externalPaging]="true"
                    [externalSorting]="true"
                    [scrollbarH]="true"
                    [count]="page.count"
                    [offset]="page.offset"
                    [limit]="page.limit"
                    [sortType]="'multi'"
                    [sorts]="[{prop: 'id_pessoa', dir: 'asc'}]"
                    (page)="pageCallback($event)">

                    <ngx-datatable-column name="Ações" sortable="true" prop="id_pessoa" width=140>
                            <ng-template let-row="data" let-value="value" ngx-datatable-cell-template>                                  
                                <a class="btn btn-outline-primary mr-1" [routerLink]="[value,'editar']" href="javascript:void(0)">
                                    <i class="fa fa-edit" title="Editar"></i>
                                </a>
                                <a class="btn btn-outline-primary mr-1" [routerLink]="[value,'subst']" href="javascript:void(0)">
                                <i class="fa fa-exchange" title="Substituir"></i>
                                </a>
                                <a class="btn btn-outline-primary mr-1" (click)="deletePessoa(value)" href="javascript:void(0)">
                                    <i class="fa fa-trash" title="Remover"></i>
                                </a>                                    
                            </ng-template>
                        </ngx-datatable-column>                                             

                    <!--<ngx-datatable-column name="Pré-cad." prop="pre_cadastro" width=75>
                        <ng-template ngx-datatable-cell-template let-value="value">
                            <span *ngIf="value">
                                <i class="fa fa-check fa-2x"></i>
                            </span>
                            <span *ngIf="!value">
                                -
                            </span>
                        </ng-template>
                    </ngx-datatable-column>-->

                    <ngx-datatable-column *ngFor="let col of columns" [sortable]="true" [name]="col.name" [prop]="col.prop" [width]="col.width" [headerClass]="col.headerClass" [cellClass]="col.cellClass">
                    </ngx-datatable-column>
                    <ngx-datatable-column name="Inativo" prop="inativo" width=70>
                            <ng-template ngx-datatable-cell-template let-value="value">
                                <span *ngIf="value">
                                    <i class="fa fa-check fa-2x"></i>
                                </span>
                                <span *ngIf="!value">
                                    -
                                </span>
                            </ng-template>
                        </ngx-datatable-column>


                </ngx-datatable>
            </div>
        </div>
    </div>
</div>

noam621 · Accepted Answer · 2020-04-27 16:58:50Z

1

there's an output for sort called sort you can use it and make your callback function

(sort)="onSort($event)"

edited Apr 27, 2020 at 16:58

noam621

2,8561 gold badge19 silver badges28 bronze badges

answered Apr 27, 2020 at 15:59

Ahmed Khairy

717 bronze badges

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

Comments

Will Blake · Accepted Answer · 2022-05-20 17:44:41Z

0

It looks like you have [externalSorting]="true".

Try changing this to false or removing externalSorting (It defaults to false).

answered May 20, 2022 at 17:44

Will Blake

1

Collectives™ on Stack Overflow

How use sorting in ngx-datatable / ngx-datatable-column in Angular?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related