Toggle detailed row in buefy table

Question

I have a buefy table with details. Whenever I click on a chevron, the detailed view of the according row shows. It would be much better in my case, to have only one detailed view open. The desired outcome is: Whenever I click on a chevron, that detailed view opens and all other close.

In buefy, the opening of the detailed view is programmed like this:

<td v-if="detailed">
    <a role="button" @click.stop="toggleDetails(row)">
    <b-icon
       icon="chevron-right"
       both
       :class="{'is-expanded': isVisibleDetailRow(row)}"/>
    </a>
 </td>

...
props: {
    ...
    detailed: Boolean
    ...
}

...
methods: {
    ...
    toggleDetails(obj) {
        const found = this.isVisibleDetailRow(obj)

        if (found) {
            this.closeDetailRow(obj)
            this.$emit('details-close', obj)
        } else {
            this.openDetailRow(obj)
            this.$emit('details-open', obj)
        }

        // Syncs the detailed rows with the parent component
        this.$emit('update:openedDetailed', this.visibleDetailRows)
    },
    openDetailRow(obj) {
        const index = this.handleDetailKey(obj)
        this.visibleDetailRows.push(index)
    },

    closeDetailRow(obj) {
        const index = this.handleDetailKey(obj)
        const i = this.visibleDetailRows.indexOf(index)
        this.visibleDetailRows.splice(i, 1)
    },

    isVisibleDetailRow(obj) {
        const index = this.handleDetailKey(obj)
        const result = this.visibleDetailRows.indexOf(index) >= 0
        return result
    },
    ...
}

I see that there is an update_event sent to the parent. Do I have to save the visibleDetailRows and tell the Child component to close it, when the button is pressed again? How would I do that?

Answer 1

The way I did it was to use the @details-open event to call a custom function :

    <b-table
    :data="data"
    :opened-detailed="defaultOpenedDetails"
    detailed
    detail-key="id"
    @details-open="(row, index) => closeAllOtherDetails(row, index)"
>

When you expand a row, the event is triggered.

And the called function closeAllOtherDetails() deletes all elements of the defaultOpenedDetails array, except the current row you just expanded :

closeAllOtherDetails(row, index) {
  this.defaultOpenedDetails = [row.id]
}

That does the trick. Simple!