@coodoo/coo-table NPM

coo-table

A flexible Table for your REST-Service. Customize it to your needs as everything can be changed via Templates.

Install

npm install @coodoo/coo-table

NPM Scripts

The following npm scripts are available:

npm run start is starting the Demo Application
npm run build-lib builds the coo-table-library

Setup

Import the CooTableModule to your Project.

Import BrowserModule and BrowserAnimationsModule, if you want to use the date-filter with animations, or NoopAnimationsModule if without.

ListingService

Inject ListingService and listen for the list$-Observable for refreshing

export class ListingComponent implements OnInit {
  constructor(private listingParameters: ListingParameters, public listingService: ListingService) {}

  ngOnInit() {
    this.listingService.list$.subscribe(() => {
      this.list();
    });
  }

  list() {
    this.loading = true;
    this.service.getListing(this.listingParameters).subscribe((listingResult: ListingResult<any>) => {
      this.rows = listingResult.results;
      this.metadata = listingResult.metadata;
      this.loading = false;
    });
  }
}

Template

Use the CooTable Component in your Templates

<coo-table [rows]="rows" [metadata]="metadata" [loading]="loading">
  <ng-template #header>
    <tr>
      <th>
        <span>#</span>
        <coo-table-sorter column="id"></coo-table-sorter>
      </th>
      <th>
        <span>name</span>
        <coo-table-sorter column="name"></coo-table-sorter>
      </th>
    </tr>
  </ng-template>

  <ng-template #filters>
    <tr>
      <td><coo-table-filter-text column="id"></coo-table-filter-text></td>
      <td><coo-table-filter-text column="name"></coo-table-filter-text></td>
    </tr>
  </ng-template>

  <ng-template #row let-row="row">
    <td>{{row.id}}</td>
    <td>{{row.name}}</td>
  </ng-template>
</coo-table>

Configuration

If routeChange is set in the Config your Url QueryParams getting updated dynamically.

Translations can be set in translations in the CooTableConfig.

  ngOnInit() {
    this.cooTableConfig.translations.of = 'von';
    this.cooTableConfig.translations.entry = 'Eintrag';
    this.cooTableConfig.translations.entries = 'Einträgen';
    this.cooTableConfig.translations.searchPlaceholder = 'Suchbegriff';
  }