How to style a row in a table based on its contents?
-
I have a table made of rows such as
{ "name": "hello", "type": "important" }, { "name": "world", "type": "info" },
I would like to style the row depending on the value of
type
- is that possible? -
You can use the body slot and do whatever you want with it.
https://quasar.dev/vue-components/table#Example--Body-slot
Scott
-
Thank you - I saw the body slot example but thought there could be something else on the whole row level.
If I understand it correctly, I need to build the whole row manually? (that is giving all the fields one by one). Is it complementary to the column definition, or an overload of that definition?
-
Good question. I’m not sure. You’ll have to play with it.
Scott
-
QTable API - scoped slots:
overloading slots:
- body
- body-cell
complementary slots:
- body-cell-[name]
Maybe this will help to build a better mental model of q-table. BUT bear in mind, that in the context of row, the
body-cell-[name]
are complementary, but in the context of cells they’are of course overloading. Nevertheless, the data model of q-table is: “collection of rows”, so I am used to think about them as I wrote above.