title: Angular - How to show array of arrays in a datagrid?
body: <p>I am using project clarity for angular datagrid. My datastructure is like this.
  It's array of array where inner array is dynamic. It can have different key value pair for each row like shown below.</p>
  
  <pre><code>answers: Answer[] = 
  [  
     {  
        qId:"dg45",
        answers:[  
           {  
              question:'900ea552-ef68-42cc-b6a6-b8c4dff10fb7',
              section:'A',
              subsection:'B',
              answer:32,
              type:'Powers Schneider'
           },
           {  
              question:'880381d3-8dca-4aed-b207-b3b4e575a15f',
              section:'A',
              answer:25
           },
           {  
              question:'87b47684-c465-4c51-8c88-3f1a1aa2671b',
              answer:32,
              type:'Boyer Stanley'
           }
        ]
     }
  ]
  </code></pre>
  
  <p>I am showing it in datagrid such as qId is main row and after clicking on main row it expands to tree view which shows answers.
  But I am able to show in expected format as given below. I need to show each answer in a separate row as row and column.</p>
  
  <pre><code>&lt;clr-datagrid [style.height.px]="fixedHeight ? 458 : null" [(clrDgSelected)]="selected"&gt;
    &lt;clr-dg-column&gt;qId&lt;/clr-dg-column&gt;
  
    &lt;clr-dg-row *clrDgItems="let answer of answers" [clrDgItem]="answer"&gt;
      &lt;clr-dg-cell&gt;{{answer.qId}}&lt;/clr-dg-cell&gt;
  
      &lt;!-- Example using a wrapper component --&gt;
      &lt;!--&lt;detail-wrapper *clrIfExpanded ngProjectAs="clr-dg-row-detail" class="datagrid-row-flex"&gt;&lt;/detail-wrapper&gt;--&gt;
      &lt;clr-dg-row-detail *clrIfExpanded [clrDgReplace]="replace"&gt;
  
        &lt;clr-dg-row *ngFor="let a of answer.answers" [clrDgItem]="answers"&gt;
        // I need to show it this way
        //     question:'900ea552-ef68-42cc-b6a6-b8c4dff10fb7',section:'A',subsection:'B',answer:32,type:'Powers Schneider'
        //     question:'880381d3-8dca-4aed-b207-b3b4e575a15f',section:'A',answer:25
        //     question:'87b47684-c465-4c51-8c88-3f1a1aa2671b',answer:32,type:'Boyer Stanley'
  
        &lt;/clr-dg-row&gt;
      &lt;/clr-dg-row-detail&gt;
  
    &lt;/clr-dg-row&gt;
  &lt;/clr-datagrid&gt;
  </code></pre>