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



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


Log in to reply