0.4.13 • Published 5 years ago
@southsystem/dataview v0.4.13
Dataview Module
// ./app.module.ts
@NgModule({
imports: [
// ...
SSTDataviewModule,
]
})
export class DataModule { }
// ./user.component.ts
import { SSTPaginationType, Pagination } from '@southsystem/dataview';
public infinitePagination = SSTPaginationType.infinite;
public headers = [
{ label: 'Name', value: 'name', sortable: true },
{ label: 'Email' }
{ label: 'Category', value: 'name', sortable: true }
];
public sortTypes = [
{ label: 'Alphabetic', sort: 'title', orderBy: 'ASC' },
{ label: 'Name', sort: 'name', orderBy: 'ASC' }
];
mountHttpGet(): (params: HttpParams) => Observable<Pagination<any[]>> {
return (params: HttpParams) => {
return this.httpClient.get<Pagination<any[]>>('/api/v1/users', { params });
}
}
<!-- ./user.component.html -->
<sst-dataview-table
[headers]="headers"
[getHttpObservable]="mountHttpGet()">
<ng-template #display let-user>
<td>{{user.name}}</td>
<td>{{user.email}}</td>
<td>{{user.category}}</td>
</ng-template>
</sst-dataview-table>
<sst-dataview-cards
[paginationType] = "infinitePagination"
[cols]="3"
[sortTypes]="sortTypes"
[getHttpObservable]="mountHttpGet()">
<ng-template #display let-user>
<div class="card-body">
<h3 class="card-title">{{user.name}}</h3>
<h6 class="card-subtitle mb-2 text-muted">{{user.email}}</h6>
<div>
<span class="badge badge-primary">{{user.category}}</span>
</div>
</div>
</ng-template>
</sst-dataview-cards>
0.4.13
5 years ago
0.4.12
5 years ago
0.4.11
5 years ago
0.4.10
5 years ago
0.4.9
5 years ago
0.4.8
5 years ago
0.4.7
5 years ago
0.4.6
5 years ago
0.4.5
5 years ago
0.4.4
5 years ago
0.4.3
5 years ago
0.4.2
5 years ago
0.4.1
5 years ago
0.4.0
5 years ago
0.3.2
5 years ago
0.3.1
5 years ago
0.3.0
5 years ago
0.2.3
5 years ago
0.2.2
5 years ago
0.2.1
5 years ago
0.2.0
5 years ago
0.1.0
5 years ago
0.0.2
5 years ago
0.0.1
5 years ago