Vuetify: Table rows of checkboxes

Question

I'm using vuetify and trying to use either a data-table, or simple table to display rows of checkboxes and a couple of text fields.

Like this:

However, when I use v-simple-table all of the checkboxes and fields have their own lines; breaking the table.

<v-form>
 <h3>Shifts:</h3>
 <v-simple-table>
  <thead>
  <tr>
   <th>Su</th><th>M</th><th>T</th><th>W</th><th>Th</th><th>F</th><th>Sa</th><th>From:</th><th>To:</th>
  </tr>
  </thead>
  <tbody>
  <tr>
   <td>
    <v-checkbox></v-checkbox>
   </td>
   <td>
    <v-checkbox></v-checkbox>
   </td>
   <td>
    <v-checkbox></v-checkbox>
   </td>
   <td>
    <v-checkbox></v-checkbox>
   </td>
   <td>
    <v-checkbox></v-checkbox>
   </td>
   <td>
    <v-checkbox></v-checkbox>
   </td>
   <td>
    <v-checkbox></v-checkbox>
   </td>
   <td>
    <v-text-field value="9:00"></v-text-field>
   </td>
   <td>
    <v-text-field value="22:00"></v-text-field>
   </td>
  </tr>
  </tbody>
 </v-simple-table>
</v-form>

Changing v-simple-table to just table gives me the correct layout.

I wouldn't mind using a data-table, but I didn't see a way to have a row of checkboxes instead of a row of data text.

Answer 1

The v-simple-table component is a simple wrapper component around the element. Inside the component you can use all the regular table elements such as <thead>, <tbody>, <tr>, etc.

v-simple table give you some extra options which you don't have to program like fixed headers, or a dense format.

So when you use v-simple-table u still have to define table