Qtable- How to achieve Master-Details

[ebena]

Hi,
I would like to know how to achieve Master details using two q-tables. Such that when a row is selected in qtable(staffs) the whole details is shown in qtable (staff_details).

<q-table title="Staff List" ref="dataTable" :data="staffs" dense row-key="id" v-if="staffs.length > 0"
            :config="configs" :columns="columns_Master" selection="single" :selected.sync="selected"
            class="striped-odd loosed flipped">
            <template v-slot:body-cell="props">
              <q-td :props="props"  @click.native="selectedStaff(props.row.email)">
                <div>{{props.value}}</div>
              </q-td>
            </template>
</q-table>

Second table for details

<q-table title="Staff Details" ref="staffData" :data="staff" dense row-key="id"
            :config="configs_detail" :columns="columns_Details" class="striped-odd loosed flipped">
</q-table>

Script file

methods: {
    selectedStaff (email) {
      console.log('data: ', email)
      this.$auth.fetchStaffEmail(email)
        .then((response) => {
          console.log('by email', response)
          this.staff = response.data.data
          console.log(this.staff)
        })
    },
    getStaffs () {
      this.$auth.fetchStaff()
        .then(response => {
          console.log('getstaff:', response)
          this.staffs = response.data.data
        })
    }

And my vuex/axios

const STAFF_ROUTE = '/staffs'

// fetch staff details
export function fetchStaffEmail (state, data) {
  let token
  if (LocalStorage.has('token')) {
    token = LocalStorage.getItem('token')
  } else if (SessionStorage.has('token')) {
    token = SessionStorage.getItem('token')
  }
  if (token) {
    axiosInstance.defaults.headers.common['Authorization'] = 'Bearer ' + token
    if (data) {
      return axiosInstance.get(STAFF_ROUTE + '?email=' + data)
    }
  }
}

I am using feathers js and MySQL as backend

[metalsadman]

@ebena this.staff is reactive? where and how did you initiate it? also check for error logs.

[ebena]

@metalsadman thank you.
I’ve managed to get Master-Details arrangements to work. But I have to ditched the idea of using two qtable because I couldn’t flip content of details (staff) table.
Now I opted for qlist/qitem to list the details of selected staff

Please, does qtable have ‘flipped’ property?
I mean since only one record is expected, is it possible to make/flip columns into row, and row as column.

[metalsadman]

@ebena there’s expand row, see the examples in the docs. i guess you could use body slot and wrap the display data with transition flip so it changes the display from og row to the one’s you want to show when you invoke an action. I dont get the row as col and vice versa that you are trying do tho.