[SOLVED by @metalsadman] How to display (and maybe later edit) checkboxes for Boolean values in QTable
-
I have quite some fun with Quasar, uncovering its powers step by step. I now have a QTree working side by side with a QForm and a QTable - those two allow to display and do some limited editing of data belonging to the nodes selected in the QTree.
Here is a question related to QTable: My QTable renders data that is in String and in Boolean format.
I noticed that without further customization, the Boolean values are just displayed as ‘true’ or ‘false’. This is probably “as expected”.What I would like instead is that the Boolean values are displayed as checkboxes (checkbox -
checked for ‘true’, ☐ - unchecked for ‘false’).-
I know there is qCheckbox, but how can that be used inside a QTable column? If it is possible, I would need a pointer to some sample code how q-checkbox is placed into q-table for a Boolean column.
-
More as a "poor man’s solution’, I was wondering whether I could use’ format: val => ‘$(val)’ for the Boolean q-table columns to display Unicode checkbox symbols, depending on whether val is true or false. Again I’m missing some example for that. Is there somewhere in the docs jungle a list of basic examples how format:val can be used?
-
The QTable doc starts with saying the QTable is able to display data. And most of the QTable examples deal with displaying=rendering data . But there is one example for popup editing, which would allow some editing of the table data. It says it can only be used with body scoped slots, not cell scoped slots. But no explanation of the two. What is the difference between body and cell scoped slots?
Thanks for any hints.
-
-
Body slot you have to define qtr and qtd, cell slots target specific/all columns you’d define qtd in it.
In your casebody-cell-[name]is enough since youre only trying to customize 1 column. Ie.<template v-slot:body-cell-myBooleanColumn="props"> <q-td :props="props"> <q-checkbox v-model="props.row.myboolmodel" /> ...If you think that some sections on the docs need improvement, you could contribute by issuing a pr at quasar github repo or by clicking the pencil icon in the current doc page.
-
Thanks @metalsadman - will try that out.
For my second option above, to simply display checkmarks rather than Boolean “true” or “false”, without using nested q-checkbox, I found a solution through using format: with a function.
Following your suggestion, I created a pr for the q-table doc to document that use of format: with a function:
https://github.com/quasarframework/quasar/compare/dev...mickey58github:patch-1 (hope you can view this)(For experienced users this is probably trivial, for beginners it can save them an hour to figure out how :format can be used)
-
I need to re-open this post with a follow-up question. I played with a few possible solutions for the requirement to deal with Boolean values in my q-table. One of them uses nested q-checkboxes for Boolean values in q-table cells, as suggested above by @metalsadman. I like it because it can be used also for fields that are not read-only but need to be changed by users.
The code for it looks like this:
<template v-slot:body-cell-grundNorm="props"> <q-td :props="props"> <q-checkbox v-model="props.row.grundNorm" disable style="transform: scale(0.8);" /> </q-td>The “disable” parameter is there because this Boolean field in the example happens to be a read-only field. So far so good, this code works.
However there is a remaining problem/impact on the q-table: Although I already tried some CSS in it (the style=“transform: scale(0.7);” - which reduces the size of the checkboxes), the size of the q-table columns with those checkboxes (even if reduced through style="…") is no longer “dense” as defined in my q-table declaration. The q-table row height with the checkboxes (regardless of the size reduction throught style="…") is now always about twice the row height of my q-table without the checkboxes. Due to the larger row height, the q-table looks a lot less “pretty” and can display only half of the rows per page compared with the original setup without checkboxes for Boolean values (though the checkboxes (even if not reduced through style="…") consume definitely not more vertical space than other text in the same table row.
My use of CSS with Quasar and q-table has been very limited so far. So my question now is whether there is a way to influence the q-table row height and achieve a “dense”, smaller row height for my q-table with the nested checkboxes, through CSS or other parameters.
-
Sorry for the reminder…is there noone out there on this forum who knows how to influence the q-table row height through CSS?
-
@Mickey58 did play with this for a bit, but didnt finish due to work, it has to deal with your checkbox css. anyway if you can provide a repro, will take a look when i can.
-
Thanks, @metalsadman. The above CSS (style=“transform: scale(0.8)”) was just one of my attempts to try to get the q-table row height to a narrow, dense row height. But this style attribute reduces only the checkbox size, but it does not have the desired reduction effect on the row height of the q-table. So you can ignore/drop this style=“transform: …” in the q-checkbox definition.
The remaining problem is as simple as this: As soon as I include such a checkbox in one of my table cells, the q-table row height (although the q-table is specified as "dense"´) is automatically increased by some code inside Quasar, ignoring the “dense” attribute. But this row height increase by Quasar is unnecessary, because the actual row height, even with the checkboxes, is sufficient for a dense layout.
This is proven by the fact that Quasar itself uses regular checkboxes in the first column (see [https://quasar.dev/vue-components/table#Selection]) to allow selection of q-table rows by the user, and still maintains a “dense” layout with these “own” checkboxes. I already looked up the Quasar q-table code on GitHub, but it is too complicated (at least for me) to understand the logic that determines the “dense” behavior and q-table row height.
-
@Mickey58 tldr, like i said i did played witht his for a bit, and as you can see here it is dense https://codepen.io/metalsadman/pen/LYPoaGe, and since your use case seem different as the way i see it (so i dunno), but you’re not making a repro so i think just take some idea off of that codepen i did there…
-
@metalsadman - thanks for your investment in my little problem. I’ll take a look at your codepen this evening or tomorrow, as we have a holiday today
-
@metalsadman - I tested your Codepen and see that with your code the table row height remains the same, even with q-checkboxes/q-toggles/q-btns included.
This is - strangely - different from the behavior I see - as soon as I include the checkboxes, the row height gets increased.
At a first glance I don’t see fundamental differences between your code and mine though that would explain the different behavior.
My q-table is however more complicated, and is dependent on backend data. I have to think how I could build a codepen for it.
-
-
I compared your code again with mine, and have been able to find the cause why my q-table did not show up as “dense”. It was kind of a user error: I had put “dense” attributes on all checkboxes in my q-table, but not on the first Quasar related checkbox, which does the selection of a row in the table:
<q-td :auto-width="true"> <q-checkbox v-model="props.selected" dense /> </q-td>With that “dense” property on the row selection checkbox and “dense” properties on all other checkboxes, my table is now “dense” as well:
@metalsadman - thanks a lot, I would not have caught the root cause without your Codepen!
-
@Mickey58 glad to help, and gz. looking good
