title: How do I integrate checkboxes with v-data-table - Vuetify
body: <p>I have a simple V-data-table. I am trying to add checkboxes for each row in the table.</p>
  
  <p>My table looks like this.</p>
  
  <pre><code>&lt;v-data-table :headers="headers" :items="rows"item-key="name" :search="search"&gt;
      &lt;template v-slot:item="props"&gt;
          &lt;tr &gt;
              &lt;td v-for="(prop, key) in props.item" :key="key" @click="onClickItem(key, props.item[key])"&gt;
                  {{props.item[key]}}     
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;!-- Some icons for editing rows --&gt;        
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/template&gt; 
      &lt;template v-slot:top&gt;
           &lt;!-- A dialog box for editing rows --&gt;
      &lt;/template&gt;
  &lt;/v-data-table&gt;
  </code></pre>
  
  <p>I tried to use the <a href="https://vuetifyjs.com/en/components/data-tables/" rel="nofollow noreferrer">official guide</a> for doing this, however all my rows get shifted to the right by 1 position &amp; I only see only one checkbox even though I have multiple rows, that too, on the header!
  How should I proceed?</p>