How to style a row in a table based on its contents?

wpq

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?

s.molinari

You can use the body slot and do whatever you want with it.

https://quasar.dev/vue-components/table#Example--Body-slot

Scott

wpq

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?

s.molinari

Good question. I’m not sure. You’ll have to play with it.

Scott

qyloxe

@wpq

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.