<div class="row"> <!-- column --> <div class="col-lg-12"> <div class="card"> <div class="card-body"> <h4 class="card-title">Filter Option</h4> <h5 class="card-subtitle">This is the filerable Data table</h5> <form class="w-50 m-b-30"> <input type='text' class="form-control" placeholder='Type to filter the name column...' (keyup)='updateFilter($event)' /> </form> <ngx-datatable #table class='material' [columns]="columns" [columnMode]="'force'" [headerHeight]="50" [footerHeight]="50" [rowHeight]="'auto'" [limit]="10" [rows]='rows'> </ngx-datatable> </div> </div> <div class="card"> <div class="card-body"> <h4 class="card-title">Editing Option</h4> <h5 class="card-subtitle">This is the editing Data table option you can double click on text</h5> <ngx-datatable #mydatatable class="material" [headerHeight]="50" [limit]="5" [columnMode]="'force'" [footerHeight]="50" [rowHeight]="'auto'" [rows]="rows"> <ngx-datatable-column name="Name"> <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-value="value" let-row="row"> <span title="Double click to edit" (dblclick)="editing[rowIndex + '-name'] = true" *ngIf="!editing[rowIndex + '-name']"> {{value}} </span> <input autofocus (blur)="updateValue($event, 'name', rowIndex)" *ngIf="editing[rowIndex+ '-name']" type="text" [value]="value" /> </ng-template> </ngx-datatable-column> <ngx-datatable-column name="Gender"> <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-row="row" let-value="value"> <span title="Double click to edit" (dblclick)="editing[rowIndex + '-gender'] = true" *ngIf="!editing[rowIndex + '-gender']"> {{value}} </span> <select *ngIf="editing[rowIndex + '-gender']" (change)="updateValue($event, 'gender', rowIndex)" [value]="value"> <option value="male">Male</option> <option value="female">Female</option> </select> </ng-template> </ngx-datatable-column> <ngx-datatable-column name="Age"> <ng-template ngx-datatable-cell-template let-value="value"> {{value}} </ng-template> </ngx-datatable-column> </ngx-datatable> </div> </div> </div> </div>