q table add expanded row



  • Hello, I excellent component q-table !
    from example here. I would like to have two expanded rows.

    For now i update data to have expand2 property like so:

    {
              name: 'Frozen Yogurt',
              calories: 159,
              fat: 6.0,
              carbs: 24,
              protein: 4.0,
              sodium: 87,
              calcium: '14%',
              iron: '1%',
              expand1: false,
              expand2: false
            },
    

    and then in fn on click i change props.row.expand, and show hide content in expand row props.row.expand1/2.

    <q-tr v-show="props.expand" :props="props">
             <q-td colspan="100%">
               <div class="text-left" v-if="props">
                 <div v-if="props.row.expand2">aaaaa</div>
                 <div v-if="props.row.expand1">
                   This is expand slot for row above: {{ props.row.name }}.
                 </div>
                </div>
             </q-td>
           </q-tr>
    

    Is there any way to add prop say expand2 and than just us it? to not mess with my raw data ? Also then it would be possible to have two or more ‘children’

    <q-btn size="sm" color="accent" round dense @click="props.expand2 = !props.expand2" :icon="props.expand ? 'remove' : 'add'"></q-btn>
    
        <q-tr v-show="props.expand2" :props="props">
          <q-td colspan="100%">
            <div class="text-left" v-if="props">
              <div>
                other data
              </div>
             </div>
          </q-td>
        </q-tr>
    


  • Found it.
    Create custom component:
    Key here is to add custom prop, register it and than can be used.

    import RowExpandTwo from "./table-row-expandTwo.js";
    import TableBodyTwo from "./table-bodyTwo.js";
    import QTable from "quasar/src/components/table/QTable.js";
    
    export default {
      name: "qTableExtend",
      extends: QTable,
      mixins: [RowExpandTwo, TableBodyTwo],
    };
    

    Then RowExpandTwo:

    function getVal(val) {
      return Array.isArray(val) ? val.slice() : [];
    }
    
    export default {
      props: {
        expandedTwo: Array, // sync
      },
    
      data() {
        return {
          innerExpandedTwo: getVal(this.expandedTwo),
        };
      },
    
      watch: {
        expandedTwo(val) {
          this.innerExpandedTwo = getVal(val);
        },
      },
    
      methods: {
        isRowExpandedTwo(key) {
          return this.innerExpandedTwo.includes(key);
        },
    
        setExpandedTwo(val) {
          if (this.expandedTwo !== void 0) {
            this.$emit("update:expandedTwo", val);
          } else {
            this.innerExpandedTwo = val;
          }
        },
    
        __updateExpandedTwo(key, add) {
          const target = this.innerExpandedTwo.slice();
          const index = target.indexOf(key);
    
          if (add === true) {
            if (index === -1) {
              target.push(key);
              this.setExpandedTwo(target);
            }
          } else if (index !== -1) {
            target.splice(index, 1);
            this.setExpandedTwo(target);
          }
        },
      },
    };
    

    TableBodyTwo:

    export default {
      methods: {
    __injectBodyCommonScope(data) {
          Object.assign(data, {
            cols: this.computedCols,
            colsMap: this.computedColsMap,
            sort: this.sort,
            rowIndex: this.firstRowIndex + data.pageIndex,
            color: this.color,
            dark: this.isDark,
            dense: this.dense,
          });
    
          this.hasSelectionMode === true &&
            Object.defineProperty(data, "selected", {
              get: () => this.isRowSelected(data.key),
              set: (adding, evt) => {
                this.__updateSelection([data.key], [data.row], adding, evt);
              },
              configurable: true,
              enumerable: true,
            });
    
          Object.defineProperty(data, "expand", {
            get: () => this.isRowExpanded(data.key),
            set: (adding) => {
              this.__updateExpanded(data.key, adding);
            },
            configurable: true,
            enumerable: true,
          });
    
    //ONLY THIS ADD
          Object.defineProperty(data, "expandTwo", {
            get: () => this.isRowExpandedTwo(data.key),
            set: (adding) => {
              this.__updateExpandedTwo(data.key, adding);
            },
            configurable: true,
            enumerable: true,
          });
        },
    }}
    

Log in to reply