Is it possible to create an angular material mat-table component with extra directives but still keep columns dynamic?

问题

Is there a way to extend a mat-table that automatically includes the matSort directive (and other custom directives that interact with the columns, like filter) and still have the content inside hold the mat-sort-header directives?

<mat-table [matSortActive]="sortActive" [matSortDirection]="sortDirection" matSort>        
    <ng-content></ng-content>
</mat-table> 

Here is an example: https://stackblitz.com/edit/angular-bxsavu.

I've tried creating a component on its own that just puts <ng-content> inside the <table> element, but that creates the error:

DwfTableComponent.html:1 ERROR Error: Missing definitions for header, footer, and row; cannot determine which columns should be rendered. at getTableMissingRowDefsError (table-errors.ts:48)

I've tried adding nothing to the entire template and just using the original CDK_TABLE_TEMPLATE (seen in the stackblitz link above), and this creates the error:

ERROR TypeError: Cannot read property 'viewContainer' of undefined at DwfMatTableExtendedComponent.CdkTable._forceRenderHeaderRows (table.ts:854)

So it seems like I can't really get any traction on making this work.

The context of this all is that our site has many tables that need to sort, but we need developers to be able to write in what columns are sortable when writing the markup. If I can get this to work for MatSort, I can then turn and apply this to my own server side filtering component that behaves very much like the MatSort feature (has a customFilter directive in the <table> element, and within the <th mat-header-cell *matHeaderCellDef> spot there is a custom-filter-header directive). And then the big piece of it will be another feature that lets the table change what cells display (links or text) when the table is "paused" -- another feature that is controlled by the wrapper but needing to affect the inside content.

There are many other features in our current "table-wrapper" (search windows, exports, paging), but this one part of it has been a constant source of confusion. There's something a little broken feeling when I can't make a component that is made of two well known components and still leaves the table structure flexible. I'm sure I'm missing some piece of it, but this would greatly reduce the repetition of code for each table we have to write.

回答1:

I've managed to get a table up and running, by using the original CDK_TABLE_TEMPLATE and extending the CdkTable found in the source code. From there, I put the MatSort directive on my own component, and fill things out like normal.

There were several bumps along the way. For starters, you have to import the CdkTableModule in your module. Next, you have to implement OnInit and call super.ngOnInit() just to get it to render. Styling then requires using the source code's table.scss, and even then, you need to tweak things just to get it to look right.

At this point, it feels like I'm roaming into hack territory, but there is traction finally, and I think after I figure out why the default sorting doesn't happen (as well as glyphs not appearing), I'll be on my way to expanding this to what I need. It's by no means ready for production, but the development has led to a quick education on angular limitations and abilities.

If anyone is curious, the same link https://stackblitz.com/edit/angular-bxsavu provides where I'm at right now.

来源：https://stackoverflow.com/questions/62961776/is-it-possible-to-create-an-angular-material-mat-table-component-with-extra-dire