Question 267857 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Add text to the left of a v-data-table footer

I am using a v-data-table to display items that are due each day and a corresponding colored dot icon. I want to add a key in the footer showing what each color means (Overdue, Due Today, or Upcoming). Right now I am using this code:

<v-data-table :items="reports">
  <template v-slot:item="{item}">
    ... More Code Here ...
  </template>
  <template v-slot:footer.page-text>
    <div>
      <v-icon color="secondary" size="15px" style="margin-bottom:3px;">circle</v-icon> Upcoming
      &nbsp;&nbsp;
      <v-icon color="amber" size="15px" style="margin-bottom:3px;">circle</v-icon> Due Today
      &nbsp;&nbsp;
      <v-icon color="red" size="15px" style="margin-bottom:3px;">circle</v-icon> Overdue
    </div>
  </template>
</v-data-table>

But this displays the key in between buttons on the right side, like this:
color key on the right (incorrect)
Is there any way to make the key show up on the left side of the footer?
desired color key location

Tags:

2

Answers


  1. 0

    To make the key show up on the left side of the footer in the v-data-table, you should use a different slot for the footer. Specifically, the slot you’d want to use is footer, which allows you to customize the entire footer content.

    Here’s how you can use it:

    <v-data-table :items="reports">
  <template v-slot:item="{item}">
    ... More Code Here ...
  </template>
  <template v-slot:footer>
    <div style="display: flex; align-items: center; justify-content: space-between;">
      <!-- Key on the left side -->
      <div>
        <v-icon color="secondary" size="15px" style="margin-bottom:3px;">circle</v-icon> Upcoming
        &nbsp;&nbsp;
        <v-icon color="amber" size="15px" style="margin-bottom:3px;">circle</v-icon> Due Today
        &nbsp;&nbsp;
        <v-icon color="red" size="15px" style="margin-bottom:3px;">circle</v-icon> Overdue
      </div>
      <!-- Pagination controls (or other controls you might have) on the right side -->
      <div>
      <!-- You can include the default pagination controls or any other controls you want here. -->
      </div>
    </div>
  </template>
</v-data-table>
    Login or Signup to reply.
  2. 0

    Use v-slot:footer.prepend

    Adds content to the empty space in the footer

    <template v-slot:footer.prepend>
 ...
</template>

    codepen example

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search