qtable summary footer

[amoss]

Hi

I’ve found nothing in the documentation regarding the summary footer for a qtable. I saw there is a footer using

<template v-slot:bottom>
          blah blah
</template>

but there is no access to the content itself in order to count/sum the data. Did I miss something? Thanks

[rab]

@amoss What are you trying to do? q-table comes with pagination footer that shows total number of items. If you want to use the total count then perhaps passing in pagination prop with .synch could work for you.

[amoss]

Thanks for replying

Is there a way to make a footer with sum/count of a certain column.
for example I have columns: “name” and “amount paid”.
I want count under name column and sum under “amount paid” column.

[rab]

@amoss Calculate count and total in data before passing to q-table.

[amoss]

I can calculate (I only need totals because count I have) but how can I show it under the relevant column?

[rab]

@amoss Suggestion is to add an extra item to the end of your data array to represent the count and total values. That item will appear in the correct columns as part of standard q-table rendering. If not a solution then please post your relevant code.

[amoss]

I was hoping it will remain in the bottom (fixed) even when scrolling up/down (just like the current footer where the paging/total rows is shown).
I tried to do the same with the headers (sticky) but failed (see my other post) but that’s a different story.

[rab]

@amoss PageSticky can be used to create a bottom fixed element. I don’t know how you would align elements in that with q-table columns. Perhaps if you take explicit css control of column widths you could make it work.

[metalsadman]

@rab page sticky has x and y offset relative to the position prop, he can use that to adjust accordingly if he go this route.

[amoss]

I’m not that familiar with css tricks, I didn’t even manage to make sticky headers work. It looks like the sticky css is ignored while css regarding the qtable itself works as expected (see my other post)).

So if there’s any place I can read more (or see code examples) about the path/route both of you mentioned, I’d appreciate it very much.
Also, is it possible to add such feature request so that qtable will have this kind of footer by default?
Thanks

[amoss]

This post is deleted!

[amoss]

After I managed to set the sticky headers, I’m back to the footer. There is a built in sticky footer for q-table so I wonder if I can use that for my totals instead of playing with css.

[ekeu]

@amoss If this is still an issue, what I did to get round was to use the “props.rowIndex” in the body slot. I then added a <template> with a v-if=“props.rowIndex === data.length-1” to show a summary data <q-tr> after the last row. Since this is within the body slot, you still have access to the props to manipulate them in the same way as any other custom row.

[dobbel]

@ekeu nice workaround!