Can't style QTable cell conditionally

fenchai

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.

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>

tof06

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

fenchai

thank you very much

No More Posting New Topics!

Can't style QTable cell conditionally