jeudi 12 septembre 2019

Vuetify: Table rows of checkboxes

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: Using plain html

However, when I use v-simple-table all of the checkboxes and fields have their own lines; breaking the table. Using v-simple-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.




Aucun commentaire:

Enregistrer un commentaire