I'm working with Vue3, and Im (at least tyring to) implementing a data table with pagination using Vuetify.
Right now i just cant see why are the paginations (that left-right arrows for going back or forward between data pages) buttons not been rendered properly. I mean, i can see they are at html, but their dimensions put them out of display, so i cannot use/test them.
I wonder if anyone can help me with this probably minor misunderstanding of mine, that would be nice.
here is my component right now
<template>
<v-data-table
v-model:items-per-page="itemsPerPage"
items-per-page-text="Linhas por página"
:headers="headers"
:items="statementStore.dataTableItems"
class="elevation-1"
item-value="valor"
></v-data-table>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { useStatementStore } from "@/store/statement"
const statementStore = useStatementStore()
import { onBeforeMount } from 'vue';
onBeforeMount(async () => await statementStore.setEvents())
const itemsPerPage = ref(5); // Linhas por página (padrão 10);
const headers: any[] = [
{ title: 'Valor', align: 'start', sortable: false, key: 'valor', },
{ title: 'Descrição', key: 'descricao', align: 'end', },
{ title: 'Data', key: 'data', align: 'end', },
{ title: 'Método', key: 'metodo', align: 'end', },
{ title: 'Meio', key: 'meio', align: 'end', },
{ title: 'Fluxo', key: 'fluxo', align: 'end', },
];
</script>
rendering it at the vuetify playground (using mocked data), it shows all good. but on my app doesnt.
