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

Question

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: Is there any way to make the key show up on the left side of the footer?

Answer 1

Use v-slot:footer.prepend

Adds content to the empty space in the footer

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

codepen example