Vuetify - add field to data table footer?

Question

I want to add a text field to the left of Vuetify's data table footer, like so. Does anyone know how to accomplish this?

I know it's possible to hide the footer and build your own, but I want the rest of the default functionality. If anyone has access to the default footer code that could also offer a simpler starting point.

Thank you!

Answer 1

I was able to get the functionality you're looking for by using the footer slot and setting the position of the element to "absolute":

<template v-slot:footer>
    <v-checkbox style="position: absolute" class="pa-0 pl-2" label="Show Archived" hide-details />
</template>

Result:

Answer 2

Maybe it is too late, but you can search the elements of footer in the mounted hook. Then append HTML with innerHTML:

mounted() {
    var footer = document.getElementsByClassName('v-data-footer')
    for (var i = 0; i < footer.length; i++) {
        footer[i].innerHTML += '<div>asad</div>'
    }
},

Answer 3

Add additional element in slot footer

 <template v-slot:footer>create your own text field here</template>

https://vuetifyjs.com/en/api/v-data-table/#slots