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

跟風遠走 提交于 2021-01-07 06:21:18

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!