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

    Is it possible to have a condition based class on a column in a q-table?

    Help
    2
    6
    369
    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.
    • R
      Rocky last edited by

      Is it possible to have a condition based class on a column in a q-table? Condition based on the bound content of the column cell.

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

        Can you explain your problem in a bit more detail please?

        Scott

        1 Reply Last reply Reply Quote 0
        • R
          Rocky last edited by

          Sure, I have a column “Is Active” in a q-table that has a value of either ‘true’ or ‘false’. I want to apply a class of “alertRed” to the column cell when the value of the cell is ‘false’. I was hoping to do it natively in Quasar in the column definition, as opposed to using something like JQuery.

          1 Reply Last reply Reply Quote 0
          • R
            Rocky last edited by

            Was hoping something like this was possible:
            {
            name: ‘IsActive’,
            label: ‘Account Is Active’,
            field: ‘IsActive’,
            sortable: true,
            classes: (val) => {
            return (val == true) ? [] : [‘red’];
            }
            },

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

              You can try that, but you can and probably should just use the slot available for QTd. Sorry, I should have asked earlier, but which version are you using?

              Scott

              1 Reply Last reply Reply Quote 0
              • R
                Rocky last edited by

                Just as a follow up, this was my solution:
                <q-td slot=“body-cell-AccountIsLocked” slot-scope=“props” :props=“props” :class="(props.value==‘Locked’) ? ‘td-negative’ : ‘td-positive’">
                <q-icon :class="(props.value==‘Locked’) ? ‘text-negative’ :‘text-positive’" :name="(props.value==‘Locked’) ? ‘lock’ :‘lock_open’" />
                <span :class="(props.value==‘Locked’) ? ‘text-negative’ :‘text-positive’">{{props.value}}</span>
                </q-td>

                Thanks for all the help!..

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