Multi conditional q-table row formatting.



  • I want to format q-table using multiconditions for rows:

    <q-table
        :title="'Exposure Data for Loan ID: ' + selectedID + ' [' + valuationCurrency + ']'"
        :data="TableData"
        :columns="TableCols"
        row-key="Name"
        hide-bottom
        class="col-9 valuation-exposure-table"
        style="margin: 0 auto;"
        :pagination.sync="pagination"
      >
        <template v-slot:body="props">
          <q-tr :props="props" :class="tableFormat">
            <q-td v-for="col in props.cols" :key="col.name" :props="props">{{ col.value }}</q-td>
          </q-tr>
        </template>
      </q-table>
    

    However when I assign tableFormat class I get error:
    TypeError: Cannot read property 'row' of undefined

    So here is my computed class with my multiple conditions

    tableFormat() {
          if (
            this.props.row.Name === "Scheduled CF to equity before costs" ||
            this.props.row.Name ===
              "Scheduled CF to equity after servicing and funding" ||
            this.props.row.Name === "Expected CF to equity" ||
            this.props.row.Name === "Present value equity"
          ) {
            return "text-bold";
          } else if (
            this.props.row.Name === "Inputs used" ||
            this.props.row.Name === "Outstanding balance" ||
            this.props.row.Name === "Cash flows payments"
          ) {
            return "bg-accent text-white text-subtitle2";
          } else {
            return "bg-white text-black";
          }
        },
    


    1. Don’t use text like that as your row name. It’s not robust.
    2. You need to pass your props into your computed.

    Scott



  • @s-molinari
    How should I pass it to props?



  • Try :class="tableFormat(props)"

    Scott


Log in to reply