Custom bottom of QTable without removing pagination data



  • Hi all!

    I’m rather new to Quasar and Vue and it’s the first time I use slots.

    I would like to put a couple of links or buttons in the left side of the bottom (footer) of a QTable to let the user download data in CSV (and maybe PDF) format via calls to the app backend. I’d like to use that space because it is free and there is home for a couple of buttons:

    Where I want to put buttons...

    However, if I use the bottom slot:

                  <q-table
                    class="tab-elenco q-mt-md full-width"
                    :data="lista"
                    :columns="columns"
                    row-key="id"
                    :pagination="pagination"
                    no-data-label="Nessun elemento in archivio"
                    loading-label="Caricamento in corso..."
                    :loading="loading"
                    :filter="search"
                    @row-click="modifica"
                  >
                    <template v-slot:bottom>
                      <q-btn
                        color="primary"
                        label="Esporta in CSV"
                        no-caps
                        flat
                        @click="exportTable"
                      />
                    </template>
                  </q-table>
    

    all the pagination data goes away:

    Pagination info disappeared

    Is it possible to keep the pagination info while customizing the left side of the QTable bottom?

    Thank you so much 🙂
    Luca


Log in to reply