CODEWITHSUNDEEP
vue.jsvuetify.js
Vallo
Vallo

Reputation: 1967

Horizontal alignment in <v-data-table> from Vuetify

I have the following table in which I can't align some items such as the checkbox and the actions:

This is the table:

<v-data-table
        :headers="headers"
        :items="users"
        hide-actions
        class="elevation-1"
>
    <template slot="items" slot-scope="props">
        <td>{{ props.item.email }}</td>
        <td class="text-xs-left">{{ props.item.empresa.descripcion}}</td>
        <v-checkbox disabled v-model="props.item.isAdmin"></v-checkbox> 
        <td class="text-xs-left">{{ props.item.createdAt }}</td>
        <td class="justify-center layout px-0">
            <v-icon
                    small
                    class="mr-2"
                    @click="editItem(props.item)"
            >
                Editar
            </v-icon>
            <v-icon
                    small
                    left
                    class="mr-2"
                    @click="deleteItem(props.item)"
            >
                Eliminar
            </v-icon>
        </td>
    </template>
</v-data-table>

I need to align the v-checkbox and the v-icon.

There is no css in the <style> section.

Upvotes: 3

Views: 16508

Answers (3)

OzzyTheGiant
OzzyTheGiant

Reputation: 739

Here's a simplified snippet that iterates <td> instead of specifying each prop, using only the css class text-center instead of a whole v-layout component:

<v-data-table
  item-key="yourItemKey"
  :items="dataSet" 
  :headers="headers">

  <!-- item is the row itself with the column values -->
  <template v-slot:item="{ item }">
      <tr>
          <td v-for="(val, key) in item" :key="key" class="text-center">
              {{ val }}
          </td>
      </tr>
  </template>

</v-data-table>

Upvotes: 0

MjBVala
MjBVala

Reputation: 137

For those of you taking a simple example from the Vuetify docs like I did:

<v-card>
 <v-card-title id="balloon-title">Balloon Info - tracking [balloon ID]</v-card-title>
 <v-data-table disable-sort dense hide-default-footer :headers="headers" :items="info" item-key="name">
 </v-data-table>
</v-card>

The solution above requires you to change your entire layout. Instead, I styled the td selector like so

td {
  text-align: center !important;
}

Hope this helps!

edit- make sure this style isn't in a scoped component.

Upvotes: 1

Leonardo Santos
Leonardo Santos

Reputation: 300

Give it a try wrapping the <v-layout justify-center></v-layout> with <td></td> like the Ohgodwhy comment.

It would be like:

<v-data-table
        :headers="headers"
        :items="users"
        hide-actions
        class="elevation-1"
>
    <template slot="items" slot-scope="props">
        <td>
            <v-layout justify-center>
                {{ props.item.email }}
            </v-layout>
        </td>
        <td>
            <v-layout justify-center>
                {{ props.item.empresa.descripcion}}
            </v-layout>
        </td>
        <td>
            <v-layout justify-center>
                <v-checkbox disabled v-model="props.item.isAdmin"></v-checkbox>
            </v-layout>
        </td>
        <td>
            <v-layout justify-center>
                {{ props.item.createdAt }}
            </v-layout>
        </td>
        <td>
            <v-layout justify-center>
                <v-icon
                    small
                    class="mr-2"
                    @click="editItem(props.item)"
                >
                    Editar
                </v-icon>
                <v-icon
                    small
                    left
                    class="mr-2"
                    @click="deleteItem(props.item)"
                >
                    Eliminar
                </v-icon>
            </v-layout>
        </td>
    </template>
</v-data-table>

Upvotes: 7

Related Questions