Custom bottom of QTable without removing pagination data

[Luca]

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:

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:

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

Thank you so much
Luca

[dorsolic]

Hi Luca,

I’m also trying to customize QTable bottom as you described it.
Have you succeeded, or you used another solution?

Thanks,
Duro

[dobbel]

@dorsolic

You could use the bottom slot with your own pagination( copied from the pagination slot example), something like this:

https://codepen.io/ontwikkelfabriek/pen/GRjYvxa

[dorsolic]

@dobbel many thanks!