Dynamic Mat Table columns with expanded column and nested mat-table

Question

I'm creating a reusable mat-table component which accepts 2 inputs: columns metadata and table data. The columns metadata looks like:

var metadata:[
       { 
         'colName' : 'WO', 
         'expanded': false 
       },
       { 
         'colName' : 'Serial',
         'expanded': false
       },
       { 
         'colName' : 'Quantity',
         'expanded': false
       },
       { 
         'colName' : 'Nested',
         'expanded': true
       }

and the table data array is as follows:

var data:[
     { 
       'WO': '2633',
       'Serial': '1qqqr4ew',
       'Quantity': 5,
       'Nested': []
     },
     { 
       'WO': '2633',
       'Serial': '1qqqr4ew',
       'Quantity': 5,
       'Nested': [
           { 
            'nestedCol1' : 3e2,
            'nestedCol2' : 2,
            'nestedCol3' : '01/01/2019'
           },
           { 
            'nestedCol1' : 3e2,
            'nestedCol2' : 2,
            'nestedCol3' : '01/01/2019'
           },
           { 
            'nestedCol1' : 3e2,
            'nestedCol2' : 2,
            'nestedCol3' : '01/01/2019'
           }
       ]
    },
    { 
       'WO': '1234',
       'Serial': 'qa9011',
       'Quantity': 200,
       'Nested': [
           { 
            'nestedCol1' : 121,
            'nestedCol2' : 21,
            'nestedCol3' : '15/03/2019'
           },
           { 
            'nestedCol1' : 450,
            'nestedCol2' : 24,
            'nestedCol3' : '23/07/2019'
           },
           { 
            'nestedCol1' : 91,
            'nestedCol2' : 12,
            'nestedCol3' : '01/05/2019'
           }
       ]
    }
 ]

From the metadata objects array I'm constructing a main table columns definitions where a column with an 'expanded' property set to true needs to be expandable. In the expandable column I need to build a nested mat-table (where applicable) showing the nested objects array data from the data objects array corresponding property ('Nested' in this example).

The dynamic columns with 'expanded' property set to false are easily constructed and showing the data correctly, and the nested table is constructed easily also.

Is there a way to define a dynamic expandable column in the main table based on the metadata columns array definition?

There is only one expandable column definition per main table, and not all data objects have nested objects array as well.

I'm using angular v.8 with angular material v.8

What have you tired ? we need to know at least what your level in angular to know how to respond. — Abdennacer Lachiheb

All2Pie All2Pie · Accepted Answer · 2019-11-22T06:23:55

From what i can understand is that you want to dynamically add expanded true or false based on whether the data objects has nested elements or not.

You can simply iterate and check for the nested length to do that.

Dynamic Mat Table columns with expanded column and nested mat-table

1 Answers