Can't style QTable cell conditionally



  • This is a simple template for a table I created with Quasar.

    :class="'(props.value < 1000) ? bg-red : bg-green'"
    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 typeOf is number.

    <template>
      <div class="q-pa-sm">
        <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"
        >
          <template v-slot:top-left>
            <q-input
              ref="mainSearchInput"
              debounce="10"
              v-model="filter"
              label="Búsqueda"
              filled
              bottom-slots
              clearable=""
              style="width:500px"
            >
              <template v-slot:hint
                >Puede hacer busquedas online con commandos.</template
              >
            </q-input>
          </template>
    
          <template v-slot:body-cell-qty="props">
            <q-td :props="props">
              <q-badge
                :class="'(props.value < 1000) ? bg-red : bg-green'"
                :label="props.value"
              />
            </q-td>
          </template>
    
          <template v-slot:body-cell-code="props">
            <q-td :props="props">
              <q-badge
                :class="'props.value < 5 ? bg-orange : bg-red'"
                :label="props.value"
              />
            </q-td>
          </template>
        </q-table>
        <div class="q-mt-md">Selected: {{ JSON.stringify(selected) }}</div>
      </div>
    </template>
    

    You can see here the Qty Column is always green and for some reason, Código Column is always true.

    This is how my table looks

    Below is my Script and Style Section.

    <script>
    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 => row.name,
              field: "CODIGO",
              format: val => `${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) => parseInt(a, 10) - parseInt(b, 10)
            }
          ],
          data: []
        };
      },
    
      methods: {
        getSelectedString() {
          return this.selected.length === 0
            ? ""
            : `${this.selected.length} record${
                this.selected.length > 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 <= 1 ? lastPage : currentPage - 1;
              if (index < 0) {
                index = 0;
              }
              break;
            case 34: // PageDown
              page = currentPage >= lastPage ? 1 : currentPage + 1;
              if (index < 0) {
                index = rowsPerPage - 1;
              }
              break;
            case 38: // ArrowUp
              if (currentIndex <= 0) {
                page = currentPage <= 1 ? lastPage : currentPage - 1;
                index = rowsPerPage - 1;
              } else {
                index = currentIndex - 1;
              }
              break;
            case 40: // ArrowDown
              if (currentIndex >= lastIndex) {
                page = currentPage >= lastPage ? 1 : currentPage + 1;
                index = 0;
              } else {
                index = currentIndex + 1;
              }
              break;
          }
    
          if (page !== this.pagination.page) {
            this.pagination = {
              ...this.pagination,
              page
            };
    
            this.$nextTick(() => {
              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();
      }
    };
    </script>
    
    <style lang="sass">
    .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
    </style>
    


  • @fenchai said in Can't style QTable cell conditionally:

    :class="’(props.value < 1000) ? bg-red : bg-green’"

    Your quotes are misplaced :

    :class="props.value < 1000 ? 'bg-red' : 'bg-green'"
    

    Or use the object form for class :

    :class="{
      'bg-red': props.value < 1000,
      'bg-green': props.value >= 1000
    }
    


  • thank you very much


Log in to reply