title: Quasar not able to style QTable cell conditionally
body: <p>This is a simple template for a table I created with Quasar.</p>
  
  <p><code>:class="'(props.value &lt; 1000) ? bg-red : bg-green'"</code>
  I am not able to color each cell according to the number conditional and it keeps being false (In this case bg-green gets triggered on every cell). I checked that all cell's <code>typeOf</code> is <code>number</code>.</p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="q-pa-sm"&gt;
      &lt;q-table
        ref="mainTable"
        class="my-sticky-virtscroll-table"
        style="height: 800px"
        :data="data"
        :columns="columns"
        row-key="name"
        :selected-rows-label="getSelectedString"
        selection="multiple"
        :selected.sync="selected"
        virtual-scroll
        :pagination.sync="pagination"
        :virtual-scroll-sticky-size-start="48"
        :rows-per-page-options="[0]"
        :filter="filter"
        flat
        bordered=""
        @focusin.native="activateNavigation"
        @focusout.native="deactivateNavigation"
        @keydown.native="onKey"
      &gt;
        &lt;template v-slot:top-left&gt;
          &lt;q-input
            ref="mainSearchInput"
            debounce="10"
            v-model="filter"
            label="Búsqueda"
            filled
            bottom-slots
            clearable=""
            style="width:500px"
          &gt;
            &lt;template v-slot:hint
              &gt;Puede hacer busquedas online con commandos.&lt;/template
            &gt;
          &lt;/q-input&gt;
        &lt;/template&gt;
  
        &lt;template v-slot:body-cell-qty="props"&gt;
          &lt;q-td :props="props"&gt;
            &lt;q-badge
              :class="'(props.value &lt; 1000) ? bg-red : bg-green'"
              :label="props.value"
            /&gt;
          &lt;/q-td&gt;
        &lt;/template&gt;
  
        &lt;template v-slot:body-cell-code="props"&gt;
          &lt;q-td :props="props"&gt;
            &lt;q-badge
              :class="'props.value &lt; 5 ? bg-orange : bg-red'"
              :label="props.value"
            /&gt;
          &lt;/q-td&gt;
        &lt;/template&gt;
      &lt;/q-table&gt;
      &lt;div class="q-mt-md"&gt;Selected: {{ JSON.stringify(selected) }}&lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>You can see here the <code>Qty Column</code> is always <code>green</code> and for some reason, <code>Código Column</code> is always true.</p>
  
  <p><a href="https://i.stack.imgur.com/f27jA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/f27jA.png" alt="This is how my table looks"></a></p>
  
  <p>Below is my Script and Style Section.</p>
  
  <pre><code>&lt;script&gt;
  import path from "path";
  import { remote } from "electron";
  
  export default {
    data() {
      return {
        navigationActive: false,
        filter: "",
        selected: [],
        pagination: {
          rowsPerPage: 0
        },
        columns: [
          {
            name: "code",
            required: true,
            label: "Código",
            align: "left",
            // field: row =&gt; row.name,
            field: "CODIGO",
            format: val =&gt; `${val}`,
            sortable: true
          },
          {
            name: "description",
            align: "left",
            label: "Descipción",
            field: "DESCRIPCION",
            sortable: true
          },
          { name: "qty", label: "Qty", field: "INVENT", align: "right" },
          { name: "codAlt", label: "Cod Alt", field: "COD.ALT.", align: "left" },
          {
            name: "desAlt",
            label: "Desc Alt",
            field: "DESC.ALT.",
            align: "left"
          },
          {
            name: "groups",
            label: "Grupo",
            field: "GRUPO",
            align: "left"
          },
          { name: "price", label: "Precio", field: "PRECIO", align: "right" },
          {
            name: "discount20",
            label: "20 %",
            field: "PRECIO",
            align: "right",
            sort: (a, b) =&gt; parseInt(a, 10) - parseInt(b, 10)
          }
        ],
        data: []
      };
    },
  
    methods: {
      getSelectedString() {
        return this.selected.length === 0
          ? ""
          : `${this.selected.length} record${
              this.selected.length &gt; 1 ? "s" : ""
            } selected of ${this.data.length}`;
      },
  
      activateNavigation() {
        this.navigationActive = true;
      },
  
      deactivateNavigation() {
        this.navigationActive = false;
      },
  
      onKey(evt) {
        if (
          this.navigationActive !== true ||
          [33, 34, 35, 36, 38, 40].indexOf(evt.keyCode) === -1 ||
          this.$refs.mainTable === void 0
        ) {
          return;
        }
  
        evt.preventDefault();
  
        switch (evt.keyCode) {
          case 36: // Home
            page = 1;
            index = 0;
            break;
          case 35: // End
            page = lastPage;
            index = rowsPerPage - 1;
            break;
          case 33: // PageUp
            page = currentPage &lt;= 1 ? lastPage : currentPage - 1;
            if (index &lt; 0) {
              index = 0;
            }
            break;
          case 34: // PageDown
            page = currentPage &gt;= lastPage ? 1 : currentPage + 1;
            if (index &lt; 0) {
              index = rowsPerPage - 1;
            }
            break;
          case 38: // ArrowUp
            if (currentIndex &lt;= 0) {
              page = currentPage &lt;= 1 ? lastPage : currentPage - 1;
              index = rowsPerPage - 1;
            } else {
              index = currentIndex - 1;
            }
            break;
          case 40: // ArrowDown
            if (currentIndex &gt;= lastIndex) {
              page = currentPage &gt;= lastPage ? 1 : currentPage + 1;
              index = 0;
            } else {
              index = currentIndex + 1;
            }
            break;
        }
  
        if (page !== this.pagination.page) {
          this.pagination = {
            ...this.pagination,
            page
          };
  
          this.$nextTick(() =&gt; {
            const { computedRows } = this.$refs.mainTable;
            this.selected = [
              computedRows[Math.min(index, computedRows.length - 1)]
            ];
          });
        } else {
          this.selected = [computedRows[index]];
        }
      }
    },
  
    mounted() {
      // get file path
      const filePath = path.join(
        remote.app.getPath("home"),
        "/Dropbox/Sync/inventarioHL.json"
      );
  
      // load the File System to execute our common tasks (CRUD)
      var fs = require("fs");
  
      // read file content
      const fsData = fs.readFileSync(filePath, "utf-8");
  
      // parse text into json
      var jsonData = JSON.parse(fsData);
  
      // add entire data to table
      this.data = jsonData;
  
      // for (const x in jsonData) {
      //   console.log(x);
      // }
  
      console.log(jsonData[0]);
  
      // focus on q-input
      this.$refs.mainSearchInput.$el.focus();
    }
  };
  &lt;/script&gt;
  
  &lt;style lang="sass"&gt;
  .my-sticky-virtscroll-table
    /* height or max-height is important */
    height: 310px
  
    /* specifying max-width so the example can
      highlight the sticky column on any browser window */
    max-width: 1300px
  
    td:first-child
      /* bg color is important for td; just specify one */
      background-color: #fafafa !important
  
    tr th
      position: sticky
      /* higher than z-index for td below */
      z-index: 2
      /* bg color is important; just specify one */
      background: #fafafa
  
    /* this will be the loading indicator */
    thead tr:last-child th
      /* height of all previous header rows */
      top: 48px
      /* highest z-index */
      z-index: 3
    thead tr:first-child th
      top: 0
      z-index: 1
    tr:first-child th:first-child
      /* highest z-index */
      z-index: 3
  
    td:first-child
      z-index: 1
  
    td:first-child, th:first-child
      position: sticky
      left: 0
  &lt;/style&gt;
  </code></pre>