Column-level filtering above each shown column in Quasar table
-
We want the ability to show text boxes above each table column, such that when a user types in it, it auto-filters the values in that particular column. Is that possible? Similar to https://datatables.net/extensions/fixedheader/examples/options/columnFiltering.html
-
@Mak-NOAA you can make use of the
header
slot and customize how your q-th’s look then use thesort
method of q-table. Check api cards https://quasar.dev/vue-components/table#QTable-API scope slots and methods section. Haven’t done this myself* -
Thanks @metalsadman , I’ll check it out
-
@metalsadman any good examples out there using the header slot? I see the API documentation but haven’t seen anyone using it for the q-ths.
-
@Mak-NOAA said in Column-level filtering above each shown column in Quasar table:
@metalsadman any good examples out there using the header slot? I see the API documentation but haven’t seen anyone using it for the q-ths.
will try to make one this week, haven’t tried this myself. didn’t you tried it yet?
-
I’m just not sure how to try it actually. I saw another related forum question https://forum.quasar-framework.org/topic/2818/solved-how-to-make-a-q-table-with-multiple-headers/5 but I wanna see how I can add stuff to header=“XYZ” then somehow call a function that can update the data array as I’m not exactly “sorting” I’m filtering based on the user input.
-
@metalsadman any luck?
-
I did try, but it messes with the header ui when adding an input below its labels so i just put an icon button on each header that will show a menu, inside the qmenu is where the input filter resides, still need to work on the filtering of column. https://0ybb3.sse.codesandbox.io/table-extensions/custom-header
-
Thanks @metalsadman , it’s looking good, just need to get the filtering hooked up which I believe I can do
-
@metalsadman I have tried to figure out where exactly you put the icon button but I can’t find it. I assume it’s happening on line 295 in dynamic.vue but it looks like you are attaching menu to each q-td. I tried to do a regular menu for each q-td however it gets triggered on all cells obviously instead of just the header. My column headers are defined on top (in “tripColumns”):
https://github.com/nwfsc-fram/boatnet/blob/master/apps/obs-web/src/views/DebrieferTrips.vue#L6- Please point to the line of code that shows the icon?
- Do I need to do something differently based on how my QTable is setup?
-
- 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 ofsrc/features/TableExtension/ui/CustomHeader.vue
file. - 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.
- sorry, I made an alias and will be moving most of the code at
-
-
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? -
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.
-
-
v-slot:headers
is for headers orthead
which usesq-tr
andq-th
, in my example i was just overriding the header part.v-slot:body
is for the body which usesq-tr
andq-td
or the table’stbody
.
check the QTable’s api card ->Scoped Slots to understand these slots. https://quasar.dev/vue-components/table#QTable-API
-
@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?
-
@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.
-
@metalsadman do you suggest using both body and header slot?
-
@metalsadman tried that and added a comment for you in github (https://github.com/nwfsc-fram/boatnet/pull/697/files)
-
@metalsadman following up, any thoughts?
-
@metalsadman any thoughts on https://github.com/nwfsc-fram/boatnet/pull/697/files?
-
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