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

[Mickey58]

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:

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

[metalsadman]

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

[Mickey58]

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.

[metalsadman]

@Mickey58 i meant a div using css flex classes to wrap your qtoggles. https://quasar.dev/layout/grid/introduction-to-flexbox https://quasar.dev/layout/grid/flex-playground

[s.molinari]

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

[Mickey58]

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.

[s.molinari]

Or a button that opens a dialog with your toggles.

Scott

[Mickey58]

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: