title: Angular mat-table display dynamic data from key value json in each row
body: <p>I have below json and want to render in material table in angular</p>
  <pre><code>var res = '[
    {
      &quot;DynamicName&quot;: &quot;xyz&quot;,
      &quot;DynamicLevel&quot;: &quot;xyz&quot;,
      &quot;DynamicLevel&quot;: &quot;xyz&quot;,
      &quot;DynamicLevel&quot;: &quot;xyz&quot;,
      &quot;dynamic&quot;: &quot;xyz&quot;
    },
    {
      &quot;DynamicName&quot;: &quot;xyz&quot;,
      &quot;DynamicLevel&quot;: &quot;xyz&quot;,
      &quot;DynamicLevel&quot;: &quot;xyz&quot;,
      &quot;DynamicLevel&quot;: &quot;xyz&quot;,
      &quot;dynamic&quot;: &quot;xyz&quot;
    },
    {
      &quot;DynamicName&quot;: &quot;xyz&quot;,
      &quot;DynamicLevel&quot;: &quot;xyz&quot;,
      &quot;DynamicLevel&quot;: &quot;xyz&quot;,
      &quot;DynamicLevel&quot;: &quot;xyz&quot;,
      &quot;dynamic&quot;: &quot;xyz&quot;
    }]';
  </code></pre>
  <p>In second response this json will be like below</p>
  <pre><code>var res = '[
        {
          &quot;DynamicCity&quot;: &quot;xyz&quot;,
          &quot;DynamicCountry&quot;: &quot;xyz&quot;,
          &quot;DynamicState&quot;: &quot;xyz&quot;,
          &quot;DynamicRegion&quot;: &quot;xyz&quot;,
          &quot;dynamic&quot;: &quot;xyz&quot;
        },
        {
          &quot;DynamicCity&quot;: &quot;xyz&quot;,
          &quot;DynamicCountry&quot;: &quot;xyz&quot;,
          &quot;DynamicState&quot;: &quot;xyz&quot;,
          &quot;DynamicRegion&quot;: &quot;xyz&quot;,
          &quot;dynamic&quot;: &quot;xyz&quot;
        },
        {
          &quot;DynamicCity&quot;: &quot;xyz&quot;,
          &quot;DynamicCountry&quot;: &quot;xyz&quot;,
          &quot;DynamicState&quot;: &quot;xyz&quot;,
          &quot;DynamicRegion&quot;: &quot;xyz&quot;,
          &quot;dynamic&quot;: &quot;xyz&quot;
        }]';
  </code></pre>
  <p>this data need to render in material table I have tried like this</p>
  <pre><code>// properties of the class
  displayedColumns: string[];//columns should be create dynamically
  dataSource = res;
  
      &lt;table mat-table [dataSource]=&quot;dataSource | keyvalue&quot; class=&quot;mat-elevation-z8&quot;&gt;
        &lt;ng-container matColumnDef=&quot;key&quot;&gt;
          &lt;th mat-header-cell *matHeaderCellDef&gt; {{element.key}}&lt;/th&gt;
          &lt;td mat-cell *matCellDef=&quot;let element&quot;&gt; {{element.value}} &lt;/td&gt;
        &lt;/ng-container&gt;  
      
        &lt;tr mat-header-row *matHeaderRowDef=&quot;displayedColumns&quot;&gt;&lt;/tr&gt;
        &lt;tr mat-row *matRowDef=&quot;let row; columns: displayedColumns;&quot;&gt;&lt;/tr&gt;
      &lt;/table&gt;
  
  I need output like below
  </code></pre>
  <p><a href="https://i.stack.imgur.com/3nGo6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3nGo6.png" alt="enter image description here" /></a></p>
  <p>Here, dynamic column means in each api call we get different data for this column names so it will be changed every api call so I am not able to bind it to material table.
  Please help me to solve this issue of binding json data to material table.
  reference URLs:-</p>
  <ol>
  <li><a href="https://stackoverflow.com/questions/60681835/angular-mat-table-display-dynamic-key-value-pair-in-each-row">Angular mat-table display dynamic key value pair in each row</a></li>
  <li><a href="https://www.interfacecreator.com/2018/10/angular-material-table-dynamic.html" rel="nofollow noreferrer">https://www.interfacecreator.com/2018/10/angular-material-table-dynamic.html</a></li>
  </ol>