No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

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

    Help
    3
    5
    577
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • W
      wpq last edited by

      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?

      1 Reply Last reply Reply Quote 0
      • s.molinari
        s.molinari last edited by

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

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

        Scott

        1 Reply Last reply Reply Quote 0
        • W
          wpq last edited by

          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?

          qyloxe 1 Reply Last reply Reply Quote 0
          • s.molinari
            s.molinari last edited by

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

            Scott

            1 Reply Last reply Reply Quote 0
            • qyloxe
              qyloxe @wpq last edited by

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

              1 Reply Last reply Reply Quote 0
              • First post
                Last post