Navigation

    Quasar Framework
    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Column-level filtering above each shown column in Quasar table

    Help
    3
    20
    1540
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • M
      Mak-NOAA last edited by

      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

      1 Reply Last reply Reply Quote 1
      • metalsadman
        metalsadman last edited by metalsadman

        @Mak-NOAA you can make use of the header slot and customize how your q-th’s look then use the sort 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*

        1 Reply Last reply Reply Quote 0
        • M
          Mak-NOAA last edited by

          Thanks @metalsadman , I’ll check it out

          1 Reply Last reply Reply Quote 0
          • M
            Mak-NOAA last edited by

            @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.

            metalsadman 1 Reply Last reply Reply Quote 0
            • metalsadman
              metalsadman @Mak-NOAA last edited by

              @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?

              1 Reply Last reply Reply Quote 0
              • M
                Mak-NOAA last edited by

                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.

                1 Reply Last reply Reply Quote 0
                • M
                  Mak-NOAA last edited by

                  @metalsadman any luck?

                  1 Reply Last reply Reply Quote 0
                  • metalsadman
                    metalsadman last edited by

                    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

                    1 Reply Last reply Reply Quote 0
                    • M
                      Mak-NOAA last edited by

                      Thanks @metalsadman , it’s looking good, just need to get the filtering hooked up which I believe I can do

                      1 Reply Last reply Reply Quote 0
                      • M
                        Mak-NOAA last edited by

                        @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

                        1. Please point to the line of code that shows the icon?
                        2. Do I need to do something differently based on how my QTable is setup?
                        1 Reply Last reply Reply Quote 0
                        • metalsadman
                          metalsadman last edited by 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.
                          1 Reply Last reply Reply Quote 0
                          • M
                            Mak-NOAA last edited by 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.

                            1 Reply Last reply Reply Quote 0
                            • metalsadman
                              metalsadman last edited by 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

                              1 Reply Last reply Reply Quote 0
                              • M
                                Mak-NOAA last edited by

                                @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?

                                1 Reply Last reply Reply Quote 0
                                • metalsadman
                                  metalsadman last edited by

                                  @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.

                                  1 Reply Last reply Reply Quote 0
                                  • M
                                    Mak-NOAA last edited by

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

                                    1 Reply Last reply Reply Quote 0
                                    • M
                                      Mak-NOAA last edited by

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

                                      1 Reply Last reply Reply Quote 1
                                      • M
                                        Mak-NOAA last edited by

                                        @metalsadman following up, any thoughts?

                                        1 Reply Last reply Reply Quote 0
                                        • M
                                          Mak-NOAA last edited by

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

                                          1 Reply Last reply Reply Quote 1
                                          • M
                                            mwx last edited by

                                            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

                                            1 Reply Last reply Reply Quote 0
                                            • First post
                                              Last post