Vuetify: card with 2 rows displayed

Question

Vuetify: card with 2 rows displayed

I attempted to add a new row to house my table component, with the intention of it occupying the entire row

Here is what I tried:

<v-col cols="12">
    <Table />
</v-col>

However, the table alignment is off

https://i.sstatic.net/HmDUy.png

The goal is to have 2 rows within a card design

First row (icon) + title & subtitle
Second row with the table

https://i.sstatic.net/f9aJJ.png

<template>
    <v-container fluid class="my-5">
        <v-row>
            <v-col cols="12">
                <v-card elevation="2" class="d-flex">
                    <!-- Icon -->
                    <v-col cols="1">
                        <v-card-title>
                            <v-btn text color="black">
                                <v-icon left x-large>{{ icon }}</v-icon>
                            </v-btn>
                        </v-card-title>
                    </v-col>

                    <!-- Title & Subtitle -->
                    <v-col cols="11">
                        <v-card-title>
                            {{ title }}
                        </v-card-title>
                        <v-card-subtitle style="color: #757575"> {{ subtitle }} </v-card-subtitle>

                        <Table />
                    </v-col>
                </v-card>
            </v-col>
        </v-row>
    </v-container>
</template>

javascript vue.js vuejs2 vue-component vuetify.js

Answer 1

Answer №1

The v-card component in Vuetify has multiple sections:

<v-card>
  <v-card-title></v-card-title>
  <v-card-subtitle></v-card-subtitle>
  <v-card-text></v-card-text> <!-- This is where you can place your table content -->
  <v-card-actions></v-card-actions>
</v-card>

Check out an example implementation of this concept here: https://codepen.io/jssDev-/pen/YzrVZjJ

Answer 2

The v-card component in Vuetify has multiple sections:

<v-card>
  <v-card-title></v-card-title>
  <v-card-subtitle></v-card-subtitle>
  <v-card-text></v-card-text> <!-- This is where you can place your table content -->
  <v-card-actions></v-card-actions>
</v-card>

Check out an example implementation of this concept here: https://codepen.io/jssDev-/pen/YzrVZjJ

Answer 3

Answer №2

You need to either create a grid inside each the card's children and use offset (example below) or create a grid inside the v-card and nest the card children in the second column that has width col-11 (not recommended as it goes outside the recommended card and card children nesting mentioned by @jssDev in the other answer).

<v-card elevation="2">
  <v-card-title>
    <v-row>
      <v-col class="col-1">
        <v-btn text>
          <v-icon left x-large>
            {{ icon }}
          </v-icon>
        </v-btn>
      </v-col>
      <v-col class="col-11 text-start">
        {{ title }}
      </v-col>
    </v-row>
  </v-card-title>

  <v-card-subtitle>
    <v-row>
      <v-col class="offset-1 col-11 text-start">
        {{ subtitle }}
      </v-col>
    </v-row>
  </v-card-subtitle>

  <v-card-text>
    <v-row>
      <v-col class="offset-1 col-11 text-start">
        <v-data-table :headers="[]" :items="[]" />
      </v-col>
    </v-row>
  </v-card-text>
</v-card>

Answer 4

You need to either create a grid inside each the card's children and use offset (example below) or create a grid inside the v-card and nest the card children in the second column that has width col-11 (not recommended as it goes outside the recommended card and card children nesting mentioned by @jssDev in the other answer).

<v-card elevation="2">
  <v-card-title>
    <v-row>
      <v-col class="col-1">
        <v-btn text>
          <v-icon left x-large>
            {{ icon }}
          </v-icon>
        </v-btn>
      </v-col>
      <v-col class="col-11 text-start">
        {{ title }}
      </v-col>
    </v-row>
  </v-card-title>

  <v-card-subtitle>
    <v-row>
      <v-col class="offset-1 col-11 text-start">
        {{ subtitle }}
      </v-col>
    </v-row>
  </v-card-subtitle>

  <v-card-text>
    <v-row>
      <v-col class="offset-1 col-11 text-start">
        <v-data-table :headers="[]" :items="[]" />
      </v-col>
    </v-row>
  </v-card-text>
</v-card>

Answer 5

Answer №3

One of the key issues to address is understanding the grid system in Vuetify.

A common best practice is to always nest a column inside a row when working with Vuetify's grid system.

Furthermore, Vuetify has its own structure for creating cards:

A v-card consists of 4 main components (which can be used multiple times each):

v-card-actions (contains action buttons like save or exit)
v-card-subtitle (provides the subtitle for the card)
v-card-text (the main text content of the card)
v-card-title (displays the title of the card)

In your specific case, you can utilize the v-card-text component to include your table, which will automatically be treated as a row containing 12 columns.

Here is an example demonstrating how to resolve your issue:

<template>
  <v-card elevation="2">
      <v-card-title>
        <!-- First row of the card --> 
        <v-row>
          <!-- First column of the row (1/12)  -->
          <v-col cols="1">
            <v-btn text color="black">
              <v-icon left x-large>mdi-link</v-icon>
            </v-btn>
          </v-col>
          <!-- Second column of the row (11/12)  -->
          <v-col cols="11">
            Title of the card
          </v-col>
        </v-row>

      </v-card-title>

    <!-- Title & Subtitle -->
      <v-card-subtitle style="color: #757575">
        <!-- Second row of the card  -->
        <v-row class="justify-end">
          <!-- Column inside the row 11/12 positioned at the end of the row using the flex class justify-end -->
          <v-col cols="11">
            Subtitle of the vcard
          </v-col>
        </v-row>
      </v-card-subtitle>

      <v-card-text>
        <v-data-table
          :headers="headers"
          :items="desserts"
          :items-per-page="5"
          class="elevation-1"
        ></v-data-table>
      </v-card-text>
  </v-card>
</template>

<script>
export default {
  name: "Hello",
  data () {
    return {
      headers: [
        {
          text: 'Dessert (100g serving)',
          align: 'start',
          sortable: false,
          value: 'name',
        },
        { text: 'Calories', value: 'calories' },
        { text: 'Fat (g)', value: 'fat' },
        { text: 'Carbs (g)', value: 'carbs' },
        { text: 'Protein (g)', value: 'protein' },
        { text: 'Iron (%)', value: 'iron' },
      ],
      desserts: [ ... ]
    }
  },
}
</script>

Answer 6

One of the key issues to address is understanding the grid system in Vuetify.

A common best practice is to always nest a column inside a row when working with Vuetify's grid system.

Furthermore, Vuetify has its own structure for creating cards:

A v-card consists of 4 main components (which can be used multiple times each):

v-card-actions (contains action buttons like save or exit)
v-card-subtitle (provides the subtitle for the card)
v-card-text (the main text content of the card)
v-card-title (displays the title of the card)

In your specific case, you can utilize the v-card-text component to include your table, which will automatically be treated as a row containing 12 columns.

Here is an example demonstrating how to resolve your issue:

<template>
  <v-card elevation="2">
      <v-card-title>
        <!-- First row of the card --> 
        <v-row>
          <!-- First column of the row (1/12)  -->
          <v-col cols="1">
            <v-btn text color="black">
              <v-icon left x-large>mdi-link</v-icon>
            </v-btn>
          </v-col>
          <!-- Second column of the row (11/12)  -->
          <v-col cols="11">
            Title of the card
          </v-col>
        </v-row>

      </v-card-title>

    <!-- Title & Subtitle -->
      <v-card-subtitle style="color: #757575">
        <!-- Second row of the card  -->
        <v-row class="justify-end">
          <!-- Column inside the row 11/12 positioned at the end of the row using the flex class justify-end -->
          <v-col cols="11">
            Subtitle of the vcard
          </v-col>
        </v-row>
      </v-card-subtitle>

      <v-card-text>
        <v-data-table
          :headers="headers"
          :items="desserts"
          :items-per-page="5"
          class="elevation-1"
        ></v-data-table>
      </v-card-text>
  </v-card>
</template>

<script>
export default {
  name: "Hello",
  data () {
    return {
      headers: [
        {
          text: 'Dessert (100g serving)',
          align: 'start',
          sortable: false,
          value: 'name',
        },
        { text: 'Calories', value: 'calories' },
        { text: 'Fat (g)', value: 'fat' },
        { text: 'Carbs (g)', value: 'carbs' },
        { text: 'Protein (g)', value: 'protein' },
        { text: 'Iron (%)', value: 'iron' },
      ],
      desserts: [ ... ]
    }
  },
}
</script>

Vuetify: card with 2 rows displayed

Answer №1

Answer №2

Answer №3

Similar questions

Reveal or conceal elements with a touch of animation

Making changes to JSON format post $.get function

Tips on extracting data from an API using jQuery

What is the best way to incorporate flags in a nodejs application when using npm run-script?

Discover the easy way to provide a hyperlink for every row within a Bootstrap-vue table

What is the best way to clear the markers in monaco editor once the data has been validated?

"Sortable elements in Getuikit 3 do not trigger the 'on moved' event

How to designate a try / catch block as asynchronous in TypeScript / JavaScript?

JavaScript keydown events seem to exhibit an unusual one-second delay in triggering subsequent events after the initial event

Despite correctly declaring jquery-ui.js and numeric.js, the jQuery datepicker and numeric plugins are not working as expected

Display a loading spinner by utilizing a helper function with the React context API

I'm looking for guidance on how to properly implement onChange in this particular script. Any help with the correct syntax

Mastering MaterializeCSS: Creating a Toggle Feature for Two Notifications with a Single Button Click

Uncovering data with the power of jQuery: Metadata

"Make your slides smooth and responsive with the unslick option in slick

How can you use jQuery to add a select element dynamically and then clear the selected choice?

Error encountered when attempting to have multiple chrome.runtime.onMessage listeners - port disconnection issue

Manipulating rows [using an input field] within a table

Styling HTML elements for Google custom search API json results: Best practices

Tips for using a string as a generic type in TypeScript