qtable summary footer
@amoss What are you trying to do?
q-tablecomes with pagination footer that shows total number of items. If you want to use the total count then perhaps passing in pagination prop with
.synchcould work for you.
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.
totalin data before passing to
I can calculate (I only need totals because count I have) but how can I show it under the relevant column?
@amoss Suggestion is to add an extra item to the end of your
dataarray to represent the
totalvalues. That item will appear in the correct columns as part of standard
q-tablerendering. If not a solution then please post your relevant code.
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.
PageStickycan be used to create a bottom fixed element. I don’t know how you would align elements in that with
q-tablecolumns. Perhaps if you take explicit css control of column widths you could make it work.
metalsadman last edited by
@rab page sticky has x and y offset relative to the
positionprop, he can use that to adjust accordingly if he go this route.
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?
This post is deleted!
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.
@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 last edited by
@ekeu nice workaround!