Custom template for Angular (2) Material Table (mat-table)

Question

Recommended usage of mat-table generates the following elements structure:

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

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

Is there a way to force the usage of some custom template in order to wrap regular row elements into some parent one (e.g. div) to separate them from a header row element (in order to make table body scrollable)? Result should be something like:

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

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

The only solution I figured out is a custom table component like:

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

But there are some negative aspects like inheritance of mat-table style sheets. So the question is: is it possible to use custom template for mat-table directly?

Everest Everest · Accepted Answer · 2017-09-11T23:00:03

Unfortunately, you won't be able to get that working. They're working on adding stick header support to their table.

I've had good luck with this library that contains the functionality that you're looking for: https://github.com/swimlane/ngx-datatable

Custom template for Angular (2) Material Table (mat-table)

1 Answers