Installation

npm install @aabegg/table

TableSettings

Der TableSettingsService muss im AppModule eingebunden werden.

import { NgModule } from '@angular/core';
import { TableSettingsService } from '@aabegg/table';

@NgModule({
  declarations: [],
  imports: [],
  providers: [TableSettingsService]
})
export class AppModule { }

Funktionen

• clickhandler (Einstellung für den Context-Clickhandler - click oder contextmenu)
• init(Array) (Setzt die Standard-Werte der Tabellen - Benutzer unabhängig)
• update(Array) (Aktuallisiert die Werte)

Table

Das TableModule muss im AppModule (MainModule) eingebunden werden.

import { NgModule } from '@angular/core';
import { TableModule } from '@aabegg/table';

@NgModule({
  declarations: [],
  imports: [TableModule],
  providers: []
})
export class AppModule { }

Folgende Directiven stehen danach zur Verfügung:

• NgTableFor
• TableFilterSelect
• TableFilterInput
• TableSort
• TableContextComponent

NgTableFor

Die NgTableFor Direktive wird fast identisch angewandt wie die normale ngFor Direktive.

<table>
  <tbody>
    <tr *ngTableFor="let employee of (data | async)?.data; rowHeight: itemheight; context: tableContext">
      <td style="width: 50%;">{{employee.name}}</td>
      <td style="width: 50%;">{{employee.firstname}}</td>
    </tr>
  </tbody>
</table>

NgForTable hat folgende Attribute:

• rowHeight (Die ausgewählte Zeilenhöhe - 43, 55, 80)
• context (Die Referenz zum Context-Menu)

TableContext

Der table-context Komponent ist wie folgt aufgebaut:

<table-context #tableContext>
  <ng-template let-employee="context">

    <button (click)="menuclick(employee)" md-menu-item>
      <md-icon>dialpad</md-icon>
      <span>{{employee.name}} {{employee.firstname}}</span>
    </button>
    
  </ng-template>
</table-context>

Das aktive Menu hat immer Zugriff auf die context-Variable. Diese entspricht immer dem angeklickten Item.

Sortierung

Für die Sortierung einer Spalte müssen zwei Attribut-Direktiven angewandt werden:

• sortField="name" (Entspricht dem Namen des Feldes in der Datenbank)
• sortTable="demotable" (Entspricht dem Name der zu sortierenden Tabelle)

Diese Direktiven können an ein th-Tag der Überschrift angebracht werden.

Beispiel:

<th sortField="name" sortTable="demotable" i18n="Überschrift Demotabelle">Name</th>

Filterung Input

Für die Filterung einer Spalte müssen zwei Attribut-Direktiven angewandt werden:

• filterInput="name" (Entspricht dem Namen des Feldes in der Datenbank)
• filterTable="demotable" (Entspricht dem Name der zu sortierenden Tabelle)

Diese Direktiven können an ein input angebracht werden.

Beispiel:

<th><input filterInput="name" filterTable="demotable" type="text"/></th>

Filterung Select

Für die Filterung einer Spalte mit einem Select-Menü, müssen drei Attribut-Direktiven angewandt werden:

• filterSelect="department" (Entspricht dem Namen des Feldes in der Datenbank)
• filterTable="demotable" (Entspricht dem Name der zu sortierenden Tabelle)
• (FilterSaved)="savedDepartment = $event" (Wird ausgelöst wenn ein gefilterter Wert zuvor in den Tabelleneinstellungen gespeichert wurde)

Beispiel:

<th>
  <md-select filterSelect="department" filterTable="demotable" (filterSaved)="savedDepartment = $event" [ngModel]="savedDepartment">
    <md-option value="" i18n>Alle</md-option>
    <md-option value="Administration" i18n>Administration</md-option>
    <md-option value="Verkauf" i18n>Verkauf</md-option>
    <md-option value="Entwicklung" i18n>Entwicklung</md-option>
  </md-select>
</th>

Versionen

1.0.0

• Initiale Version