Add dynamic columns in angular

Hello,
To add flexible columns in angular modes according to feedback, we can use hasSubs, isSub in columns to add columns,
For example - We can give columns value in isSub, hasSubs. hasSubs refers to having children in columns, if hasSubs is true then it will be added as multi level header.

getSnapshotLevelOneCols() {

return [

{ field: 'rowIndex', header: 'S.No', hasSubs: false, isSub: false, width: 50 },

{ field: 'projectName', header: 'Project Name', hasSubs: false, isSub: false, width: 170 },

{ field: 'yesterday', header: 'Yesterday', colspan: 4, hasSubs: true, isSub: false, width: 275 },

{ field: 'yesterdayDirectCost', header: this.directCostLiteral, hasSubs: false, isSub: true, width: 68.75 },

{ field: 'yesterdayIndirectCost', header: this.indirectCostLiteral, hasSubs: false, isSub: true, width: 68.75 },

{ field: 'yesterdayRevenue', header: 'Revenue', hasSubs: false, isSub: true, width: 68.75 },

{ field: 'yesterdayMargin', header: 'Margin', hasSubs: false, isSub: true, width: 68.75 },

{ field: 'today', header: 'Today', colspan: 4, hasSubs: true, isSub: false, width: 275 },

{ field: 'todayDirectCost', header: this.directCostLiteral, hasSubs: false, isSub: true, width: 68.75 },

{ field: 'todayIndirectCost', header: this.indirectCostLiteral, hasSubs: false, isSub: true, width: 68.75 },

{ field: 'todayRevenue', header: 'Revenue', hasSubs: false, isSub: true, width: 68.75 },

{ field: 'todayMargin', header: 'Margin', hasSubs: false, isSub: true, width: 68.75 },

{ field: 'marginDiff', header: 'Margin Difference', hasSubs: false, isSub: false, width: 85 },

];

}

We can use an HTML table or a Custom Data table.

Primeng provides a built-in table that offers many features (Browsing, Filtering, Filtering.) As described below.

The primeng table is a full-featured two-dimensional feature that can solve this problem, changing the size of the column so depending on the user's preference can change the column width to see more information and one is responsive so that the table can support smaller screen size as mobile.

<p-table [columns] = "columnDefinitions" [value] = "dataSet" [resizableColumns] = "true" [responsive] = "true">
    <by template pTemplate = "header" let-columns>
        <tr>
            <th * ngFor = "let col of columns" pResizableColumn>
                {{col.name}}
            </th>
        </tr>
    </ng-template>
    <by template pTemplate = "body" let-rowData let-columns = "columns">
        <tr>
            <td * ngFor = "let col of columns" class = "ui-resizable-column">
                              <span class = "ui-column-title"> {{col.name}} </span>

                {{rowData [col.field]}}
            </td>
        </tr>
    </ng-template>
</p-table>