Hey there, I'm a beginner coder who mainly works as a UX designer. I've been working on a v-data-table component and I really want to add a refresh button to the bottom of the table just like in this example:
Check out the data table from Vuetify documentation with the added refresh button
My table relies heavily on templates and slots for adding data to the table. My question is, how can I add a refresh button to the bottom left outside of the data area (as shown in the image)? The code for the table in the image that DOESN'T include the refresh button is taken from Vue's data table page.
<template>
<v-data-table
v-model:items-per-page="itemsPerPage"
:headers="headers"
:items="desserts"
item-value="name"
class="elevation-1"
></v-data-table>
</template>
I tried adding the code for the refresh button inside the v-data-table but it didn't work, possibly because it requires a template. Placing it outside the table caused it to go under the entire table rather than just at the bottom where I want it. I am unsure if Vue provides a template for v-data-table that allows customization of the bottom row with "items-per-page" text. This is what I'm aiming for, but unfortunately, the Vue documentation wasn't much help. The closest thing I found was how to add CRUD actions to individual rows or headers, not at the bottom left of the data table.