Angular Material Table - Extend column definition to prevent code duplication

We have a custom mat table to support various features, like sort, filter, value piping, drag drop, inline editing and more. Now we want to support displaying trees in the table. It's done so far. The only problem we have is the definition of the Expand/Collapse button for tree nodes. To display the indent of tree nodes properly we can't add the buttons to their own column. This would line up all the data in the column and only indent the buttons. So we want to add the node button to the first visible column so the content of the first column gets indented and starting with the second column the data is lined up properly again.

The problem is we have different sources of metaData for columns (data and buttons) that need different logic within their template and also multiple extra column definitions like a checkbox column for the checkbox selection type or a column for special buttons for inline editing

<ng-template columnDef="checkbox">...</ng-template>

@for (dataColumns) {
<ng-template columnDef="...">...</ng-template>
}

@for (buttonColumn) {
<ng-template columnDef="...">...</ng-template>
}

<ng-template columnDef="editbuttons">...</ng-template>


Since any of the columns can be the first column since checkbox selection can be deactivated an Data-Columns and Button-Columns can be hidden we have to duplicate the logic of the button to every columnDef. Even if the encapsulate the button into a template, we still have to duplicate the logic when to show the template and also the proper indention of the header.

Is there a way to solve this without code duplication, for example by extending the existing column def like so (pseudo code)

<ng-template extendColumnDef="this.displayedColumn[0]">
<th>
<indent>
<column-def-outlet>
</th>
<td>
<expand-collapse-button>
<column-def-outlet>
</td>
</ng-template>

Continue reading...