@southsystem/dataview
v0.4.13
Published
```typescript // ./app.module.ts
Downloads
7
Readme
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>