Angular Master Detail Grid
source link: https://marco.dev/2018/07/24/angular-master-detail-table/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Example online
https://av-components.scapp.io
Source code
https://github.com/marco76/av-components
Autoconfigurable Data Grid with detail
In one project I had the opportunity to develop a Data Grid with expandable rows. We used the standard Angular Material as base for the development.
The original DataTable don’t support expandable rows, with a bit of research and many trial and error we succeeded to build a pretty good component.
With a very ambitious approach we decided to automatically generate the forms of the grid (dates, booleans, selects, texts) using an optional JSON configuration object.
The component don’t seem to attract a lot of interest outside of the project. I think that not many projects are based on Angular Material. Material is not easy to implement compared to other frameworks/guidelines/libraries and don’t give a lot of freedom to the developer.
I personally enjoy using it for company solutions but I’m not sure I would choose Material for a public website.
If somebody is blocked trying to solve the same problem here he can find some code fragments.
Call on the cell that open the template:
onDetailGrid(row: any, data: string, column: AvTableColumnConfig) {
row.selectedTemplate = this.gridTemplate;
if (typeof row.isExpanded === 'undefined') {
row.isExpanded = false;
}
row.isExpanded = !row.isExpanded;
row.selectedColumn = data;
}
Definition of the template in the html:
<ng-template #panelTemplate let-element>
<div class="mat-row mat-row-detail" [@detailExpand] style="overflow: hidden">
<av-table-detail-panel [data]="dataColumns" [item]="element" *ngIf="detailData">
</av-table-detail-panel>
</div>
</ng-template>
<ng-template #gridTemplate let-element>
<div class="mat-row detail-table-container" [@detailExpand] style="overflow: hidden">
<av-table-detail-table [data]="element[element.selectedColumn]"
[configuration]="getDetailConfiguration(element.selectedColumn)"
*ngIf="detailData">
</av-table-detail-table>
</div>
</ng-template>
Author
Marco Molteni
Marco Molteni Blog
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK