title: Creating rows in a table when data is missing for some columns
body: <p>I have a javascript object that looks similar to:</p>
  
  <pre><code>    const relevantTags = {
          "tags": {
              date: {
                  day: "day",
                  month: "month",
                  year: "year"
              },
              time: {
                  hours: "hours",
                  minutes: "minutes"
              },
              adm: {
                  admId: "adm-id"
              },
              document: {
                  documentId: "document-id",
                  documentGeneratedBy: "document-generated-by",
                  approvalStatus: "approval-status"
              },
              department: {
                  departmentName: "department-name"
              }
          }
  }
  </code></pre>
  
  <p>Here the keys <code>date</code>, <code>time</code>, <code>adm</code>, <code>document</code> and <code>department</code> are table headings and the values for each table-heading object are the column values. For example, when the column heading is <code>document</code>, one of the value of it's column is <code>document-generated-by</code>. Similarly, when the column heading is <code>department</code>, one of it's column value is <code>department-name</code>. As could be seen, some columns have more values than others. </p>
  
  <p>I am trying to generate a table from this javascript object.</p>
  
  <p>I generated the table head as :</p>
  
  <pre><code> const tableHead = (
    &lt;thead&gt;
      &lt;tr&gt;
        {Object.keys(relevantTags.tags).map(pts =&gt; (
          &lt;th scope="col"&gt;{pts}&lt;/th&gt;
        ))}
      &lt;/tr&gt;
    &lt;/thead&gt;
  );
  </code></pre>
  
  <p>I am not sure how could I generate table rows/columns. How could I do this? I want to create a dynamic table, similar to the snippet I have given below:</p>
  
  <pre><code>&lt;table&gt;
    {tableHead}
    &lt;tbody&gt;
      {tableRows}
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>Note: All keys inside javascript object are dynamic and not fixed. They could be present/absent at times, depending on some configuration.</strong></p>
  
  <p>Table based on the number of columns would look similar to:</p>
  
  <p><a href="https://i.stack.imgur.com/71olA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/71olA.png" alt="enter image description here"></a></p>
  
  <p>As you could see, time column has more number of rows as compared to other columns.</p>
  
  <p>For the above data structure table would looks similar to:</p>
  
  <pre><code>date  time    adm     document              department
  
  day   hours   adm-id  document-id           department-name
  month minutes         document-generated-by
  year                  approval-status
  </code></pre>