http://swimlane.github.io/ngx-datatable/
Instalación
npm i @swimlane/ngx-datatable --save --legacy-peer-deps
Agregar en
tsconfig.json (dentro de compilerOptions)
"strictPropertyInitialization":
false
Esto es para evitar un error de tipos que da, busqué en google y parece que lo
resuelven así, no me gusta demasiado, pero por ahora déjalo de este modo.
En
app.module.ts
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
imports: [
...
...
NgxDatatableModule
]
En el .html
<input
type="text"
style="padding: 8px;
margin: 15px auto; width: 30%;"
placeholder="Filtrar..."
(keyup)="updateFilter($event)"
/>
<div>
<ngx-datatable #table [rows]="rows"
[columns]="columns"> </ngx-datatable>
</div>
En el .ts
import { Component, ViewChild } from '@angular/core';
import { DatatableComponent } from '@swimlane/ngx-datatable';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
@ViewChild(DatatableComponent) table: DatatableComponent;
rows = [
{ name: 'Austin', gender: 'Male', company: 'Swimlane'
},
{ name: 'Dany', gender: 'Male', company: 'KFC' },
{ name: 'Molly', gender: 'Female', company: 'Burger
King' }
];
temp = this.rows;
columns = [{ prop: 'name' }, { name: 'Gender' }, { name:
'Company' }];
updateFilter(event: any) {
const val = event.target.value.toLowerCase();
const temp = this.temp.filter(function (d) {
return d.name.toLowerCase().indexOf(val)
!== -1 || !val ||
d.gender.toLowerCase().indexOf(val) !== -1 ||
d.company.toLowerCase().indexOf(val) !== -1;
});
this.rows
= temp;
this.table.offset
= 0; //ir a 1er página luego de hacer cualquier cambio
}
}
