[SOLVED] How to align the q-toggles that control q-table column visibility



  • I’m using q-toggles to control the visibility of q-table columns. I follow the code shown in https://quasar.dev/vue-components/table#Example--Visible-columns%2C-custom-top-and-fullscreen

    My q-toggle labels (which correspond to the q-table column names) are made up from text with different lengths.

    The different lengths of the label texts for the toggles lead to a “wild” arrangement of those q-toggles, which doesn’t look good (and is in sharp contrast with the nice ordering of the q-table columns below the toggles). I have inserted two q-spaces between the q-toggles to group them more nicely, but that is not sufficient, as the screenshot shows:

    750ab8a8-7ae4-4fb0-8a7f-6af06d980fb7-image.png

    Is there a simple way how I can arrange these q-toggles above the q-table in a tabbed format or a grid format?

    The code for the full table is pretty long, its template starts like this:

                        <q-table
                          title="Materialeigenschaften"
                          dense
                          :data="selectedNode.materialEigenschaften"
                          :columns="tableColumnsMaterialEigenschaften"
                          row-key="_id"
                          :visible-columns="visibleColumnsMaterialEigenschaften"
                        >
                          <template v-slot:top="props">          
                            <div class="col-2 q-table__title">Material-Eigenschaften</div>
                            <!-- q-toggles to control q-table columns visibility start here: -->
                            <div v-if="$q.screen.gt.xs" class="col">
                              <q-toggle
                                v-model="visibleColumnsMaterialEigenschaften"
                                val="symbol"
                                label="Symbol"
                              />
                              <!-- ...more q-toggles with different labels follow here, with 2 q-spaces in between, followed by the long rest of q-table -->
    


  • @Mickey58 make a row, with even col’s i guess. but imo, is a qselect dropdown might be neater no? something like this https://0ybb3.sse.codesandbox.io/table-extensions/dynamic-sample. click “Fields”. Also in docs, https://quasar.dev/vue-components/table#Visible-columns%2C-custom-top%2C-fullscreen. You could also use qmenu with qtoggles as the items.



  • Thanks @metalsadman. I would like to keep the toggles and not change it to a dropdown menu.

    So I would like to try your first suggestion first, put the toggles in a “row with even columns”.

    But what does that mean, use a q-tr or what? And how to set the column width? A small example would be great.





  • I’d also suggest making a dropdown multiple select menu of some sort. It would be much more elegant from a UI/ UX perspective.

    Scott



  • Thanks, @metalsadman, now I remember I had looked at the flex box doc a while ago, but missed that those are applicable to my q-toggles.

    @s-molinari - thanks, too. I found the toggles (if ordered nicely) quite intuitive, However, it is likely that the number of columns of my table will grow further - therefore I agree that a multi-select menu makes sense…

    I’m traveling currently, so it will take some time to try your suggestions out. Thanks again.



  • Or a button that opens a dialog with your toggles. 😄

    Scott



  • As a first step, I tried a flex box as suggested by @metalsadman to align the q-toggles. Here is a code snippet that shows the concept, using class=“col-2” for each q-toggle, which means 2/12 of the available space in the row:

    <div v-if="$q.screen.gt.xs" class="row full-width">
            <div class="col-2">
                    <q-toggle
                          v-model="visibleColumnsMaterialEigenschaften"
                          val="schallSchutz"
                          label="Schallschutz"
                     />
            </div>
    

    It took me a few attempts to find out that it needs class=“full-width” to work properly.

    The result has up to 6 toggles per row that are aligned nicely:
    aea289b2-4ebf-4ca1-9f78-c65ac5a94b60-image.png


Log in to reply