Benutzerdefinierte Vorlage für Angular (2) Materialtabelle (mat-Tabelle)

Question

Empfohlene Verwendung von mat-table generiert die folgende Elemente Struktur:

<mat-table> 
    <mat-header-row>...</mat-header-row> 

    <mat-row>...</mat-row> 
    ... 
    <mat-row>...</mat-row> 
</mat-table> 

Gibt es eine Möglichkeit, die Nutzung einiger benutzerdefinierten Vorlage, um zu zwingen, zu wickeln regelmäßige Zeilenelemente in einige übergeordnete Elemente (z. B. div), um sie von einem Kopfzeilenelement zu trennen (um den Tabellenkörper scrollbar zu machen)? Ergebnis sollte so etwas wie:

<mat-table> 
    <mat-header-row>...</mat-header-row> 

    <div> 
    <mat-row>...</mat-row> 
    ... 
    <mat-row>...</mat-row> 
    </div> 
</mat-table> 

Die einzige Lösung, die ich eine Komponente benutzerdefinierte Tabelle wie heraus ist:

@Component({ 
    selector: 'my-cool-table', 
    template: ` 
     <ng-container headerRowPlaceholder></ng-container> 
     <div> 
      <ng-container rowPlaceholder></ng-container> 
     </div>`, 
    host: { 
    'class': 'mat-table', 
    }, 
    styleUrls: [ 
    'my_cool_table.css', 
    ], 
    encapsulation: ViewEncapsulation.None, 
    changeDetection: ChangeDetectionStrategy.OnPush, 
}) 
export class MyCoolTable<T> extends CdkTable<T> {} 

Aber es gibt einige negative Aspekte wie Vererbung von Matte-Tisch-Stylesheets. Also die Frage ist: Ist es möglich, benutzerdefinierte Vorlage für Mat-Tabelle direkt zu verwenden?

Answer 1

Leider können Sie das nicht funktionieren. Sie arbeiten daran, Stick-Header-Unterstützung zu ihrem Tisch hinzuzufügen.

Ich habe mit dieser Bibliothek viel Glück hat, die die Funktionalität enthält, die Sie suchen: https://github.com/swimlane/ngx-datatable