title: Dynamic table header and value using vuetify data-table
body: <p>How to implement the &quot;dynamic table header column&quot; using an array object with <strong>vuetify data table</strong>? Is it possible to do this task as like the below example:</p>
  <pre><code>    ----------------------------------------------
      | Employee Id | Time in | Time Out | Time In |
      ----------------------------------------------
      | E0001       | 8:00 am | 5:00 pm  | 8:30 am |
      ----------------------------------------------
      | E0002       | 8:00 am | 5:00 pm  |         |
      ----------------------------------------------
      | E0003       |         | 5:00 pm  | 8:00 am |
      ----------------------------------------------
  </code></pre>
  <p>The header column  <strong>Time in | Time Out | Time In</strong> are &quot;type&quot;. The logs used as header column on the example table were came from an employee array object with the highest number of it then some of the following time logs from other employee will do just follow on what specific type is display on each columns on the table.</p>
  <p>I got the first step on rocks! is to get the employee with highest array number which is the &quot;dtr&quot; array from an object. By comparing their lengths and get the values at the same time, to use it as header for table column.</p>
  <p>The main problem is, how it could be possible to display it using Vuetify Data table?</p>
  <pre><code>[
    {
       employee_id:E0001,   &lt;--- an employee with the highest array of logs 
       dtr:[
             { 
                type:&quot;timein&quot;, time:&quot;8:00 am&quot; 
             },
             { 
                type:&quot;timeout&quot;, time:&quot;5:00 pm&quot; 
             },
             { 
                type:&quot;timein&quot;, time:&quot;8:30 am&quot; 
             }
        ]
    },
    {
       employee_id:E0002,
       dtr:[
             { 
                type:&quot;timein&quot;, time:&quot;8:00 am&quot; 
             },
             { 
                type:&quot;timeout&quot;, time:&quot;5:00 pm&quot; 
             },
        ]
     },
     {
       employee_id:E0003,
       dtr:[
             { 
                type:&quot;timeout&quot;, time:&quot;5:00 pm&quot; 
             },
             { 
                type:&quot;timein&quot;, time:&quot;8:00 am&quot; 
             },
        ]
     } 
  ]
  </code></pre>