[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:


    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:

                          <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">
                              <!-- ...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.


  • 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. 😄


  • 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">

    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:

Log in to reply