Column-level filtering above each shown column in Quasar table

[metalsadman]

1. sorry, I made an alias and will be moving most of the code at src/features, about the specific code it’s at line 31 of src/features/TableExtension/ui/CustomHeader.vue file.
2. not sure what you mean, but you’ll have to leverage off the slots and methods of QTable’s API to achieve what you want.

[Mak-NOAA]

@metalsadman

1. as you can see in my code, I have q-tds (https://github.com/nwfsc-fram/boatnet/blob/master/apps/obs-web/src/views/DebrieferTrips.vue#L85) and yours has a loop with <div class="column">. How do I leverage q-tds with your feature?

2. Also in my template I have v-slot:body="props" (https://github.com/nwfsc-fram/boatnet/blob/master/apps/obs-web/src/views/DebrieferTrips.vue#L73) not header, if I change it to header, then all rows in my code become the header.

[metalsadman]

@Mak-NOAA

1. v-slot:headers is for headers or thead which uses q-tr and q-th, in my example i was just overriding the header part.
2. v-slot:body is for the body which uses q-tr and q-td or the table’s tbody.

check the QTable’s api card ->Scoped Slots to understand these slots. https://quasar.dev/vue-components/table#QTable-API

[Mak-NOAA]

@metalsadman from the Scoped Slot documentation it says
body: “Suggestion: QTr + QTh”
header: “Suggestion: QTr + QTh”

so can I use scope header and body at the same time? Use headers the way you developed it and skip the column piece?

[metalsadman]

@Mak-NOAA just checked body slot qtr + qtd, yes you can use both since it pertains to different parts of the table. The column you are mentioning doesnt point to the table, its a class from https://quasar.dev/layout/grid/introduction-to-flexbox#Setting-Direction. Not table related.

[Mak-NOAA]

@metalsadman do you suggest using both body and header slot?

[Mak-NOAA]

@metalsadman tried that and added a comment for you in github (https://github.com/nwfsc-fram/boatnet/pull/697/files)

[Mak-NOAA]

@metalsadman following up, any thoughts?

[Mak-NOAA]

@metalsadman any thoughts on https://github.com/nwfsc-fram/boatnet/pull/697/files?

[mwx]

Hi guys, thanks for starting this thread, it is very relevant for us. I want to contribute this package I found that may solve this issue:

https://github.com/pratik227/quasar-qgrid

They also provide examples which illustrate the function pretty well

https://quasar-qgrid.netlify.app/examples