q table add expanded row

[felek]

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>

[felek]

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,
      });
    },
}}