カスタムテンプレート（2）素材表（マット・テーブル）

Question

mat-tableの

推奨使用量は、次の要素構造を生成します。

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

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

ラップするために、いくつかのカスタムテンプレートの使用を強制する方法はあります通常の行要素をいくつかの親要素（例えばdiv）に挿入して、ヘッダー行要素から分離します（テーブル本体をスクロール可能にするために）？

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

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

私は考え出した唯一の解決策のようなカスタム・テーブル・コンポーネントである：

@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> {} 

しかし、マット・テーブルスタイルシートの継承のようないくつかの負の側面がある 結果のようなものでなければなりません。 質問があります：マットテーブルのカスタムテンプレートを直接使用することは可能ですか？

Answer 1

残念ながら、あなたはそれを得ることができません。彼らはテーブルにスティックヘッダーサポートを追加する作業をしています。 https://github.com/swimlane/ngx-datatable

：

は、私はあなたが探している機能が含まれています。このライブラリと幸運を持っていました