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
headerslot and customize how your q-th’s look then use thesortmethod 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.vuefile. - 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:headersis for headers ortheadwhich usesq-trandq-th, in my example i was just overriding the header part.v-slot:bodyis for the body which usesq-trandq-tdor 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?
