@southsystem/dataview

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>