0

Few days in a row I'm trying to create a dynamic mat-table from data that I retrieved trough HTTP. So far so good. I used this stackblitz as an example.

In template, table is generated like this..

  <ng-container *ngFor="let column of displayedColumns$.value" cdkColumnDef="{{column}}">
    <th cdk-header-cell *cdkHeaderCellDef> {{column}} </th>
    <td cdk-cell *cdkCellDef="let row"> {{row.attributes[column]}} </td>
  </ng-container>

Now, I have one issue. I want to be able to model data that I retrive before I put them on the table. For example, looking on this stackblitz data I want to be able to merge two columns 'Created' and 'State' to show them in one column called 'Status'

Or for example, I would like to modify date format before without using | date pipe in template.

Before:

| Created      | State | #     | Title
  Nov 30, 2018   open    14339   fix(cdk/stepper): exported ...

After:

| Status               | #      | Title
  Nov 30, 2018   open    14339    fix(cdk/stepper): exported ...

All this effort is to be able to create an table service in which I would pass API, and table configuration, so based on that configuration, table would be rendered... Does anyone have an idea how should I approach to this?

MaxLAB
  • 13
  • 9
  • I think you could achieve this way easier and simpler if you use ag-grid. https://www.ag-grid.com/ - It has a community edition that you can use. – Sonu Kapoor Nov 30 '18 at 23:05
  • My entire project is based on mat-table, really have no ability to change that right now. ag-grid looks really powerful, thanks for this, definitely will take a look at it for next project – MaxLAB Nov 30 '18 at 23:41
  • I understand Max. Could you just combine the columns together in the data before setting them into the table and then just use one column in the template? – Sonu Kapoor Dec 01 '18 at 05:09
  • Here is what I mean: https://stackblitz.com/edit/angular-37fgvb?file=app%2Ftable-http-example.ts – Sonu Kapoor Dec 01 '18 at 05:15
  • Sonu, this is really really helpful. Thank you for that. For an table service I was thinking to create an config in one module and pass that to a service. Something like this [stackblitz](https://stackblitz.com/edit/dynamic-tables-material-2) using _tableConfig(item) function. What do you think? – MaxLAB Dec 02 '18 at 17:17
  • You don't need a service for that. Just create a class with a static function. Then you don't event need to inject it into the constructor etc.. Its essentially a helper function to map the item into the new structure. – Sonu Kapoor Dec 03 '18 at 01:25
  • @SonuKapoor I changed the structure of example [stackblitz](https://stackblitz.com/edit/dynamic-tables-material-2?file=app%2Fapp.component.html) In app.component.ts (or any other component) I would like to create a config object that will pass to table component and based on that config render table data. I know what you mean by static function, but I'm not really sure how to use that in this example. – MaxLAB Dec 04 '18 at 19:03
  • Your config is just the structure of the column I changed, right? – Sonu Kapoor Dec 05 '18 at 03:48
  • Yes, exactly, it should be for example column name 'dateAndState' and two fields that will be merged 'item.created_at' and 'item.state'. and so on.. Something like this `config = { dateAndState: ['item.created_at', 'item.state'], title: ['item.title'] } ` Configuration structure is not really important, I just want to be able to pass that and based on it to render table data. [stackblitz](https://stackblitz.com/edit/dynamic-tables-material-2) – MaxLAB Dec 05 '18 at 08:49
  • Will get back to you today evening with a solution. – Sonu Kapoor Dec 05 '18 at 14:17
  • I think you are looking for this? https://stackblitz.com/edit/material2-beta11-vmwjpe?file=app%2Fapp.component.ts – Sonu Kapoor Dec 06 '18 at 03:39
  • Hi Sonu, so something like this [stackblitz](https://stackblitz.com/edit/dynamic-tables-material-2?file=app%2Fapp.component.ts) Do you think it's an elegant solution? – MaxLAB Dec 06 '18 at 20:32
  • Hi @MaxLab. Not really, I would prefer what was done in the previous stack I sent. I think that is a good approach and keeps your code clean and very configurable: https://stackblitz.com/edit/material2-dynamic-table?file=app/app.component.ts – Sonu Kapoor Dec 07 '18 at 16:44

0 Answers0