Vuetify VDataTable an VDataTableServer when an item expanded other items must be collapsed

Question

I'm trying to collapse other rows to show fetched data on last expanded row and i didnt figure it out how to do that. I tried isExpanded and toggleExpand props but still doesn't work properly.

in expandeFn function i fetch users profile data but @update:expanded returns me an array of expanded items. I want to get last expanded users data or all expanded areas show same profile or returns me an error.

<VDataTableServer
        :items="users"
        item-value="_id"
        :headers="headers"
        :loading="loading.table"
        no-data-text="Nothing found"
        show-expand
        @update:expanded="expandeFn"
      >
        <template #item.username="{ item }">
          <div class="d-flex align-center">
            <div
              class="d-flex flex-column"
            >
              <h6 class="text-body-1 font-weight-medium">
                {{
                  item.raw.username
                }}
              </h6>
            </div>
          </div>
        </template>

        <template #expanded-row="{ columns }">
          <tr :colspan="columns.length">
            <td :colspan="columns.length">
              <VRow style="padding-top: 1rem; padding-bottom: 1rem">
                <VCol
                  v-for="category in categories"
                  :key="category"
                  cols="12"
                  lg="4"
                >
                  <VCard
                    :title="category?.interestName"
                    style="background-color: #020b15; border-radius: 1rem"
                  >
                    <template #append>
                      <div v-if="category" class="d-flex gap-1 flex-wrap">
                        {{ category?.count ? category?.count : 0 }}
                      </div>
                    </template>
                  </VCard>
                </VCol>
              </VRow>
            </td>
          </tr>
        </template>
      </VDataTableServer>

i need to collapse all other rows but not last one clicked

Answer 1

Define an array to bind to the expanded prop. Now you can use update:expanded to remove all entries of previously expanded rows from the array:

<v-data-table-server
    :expanded="expanded"
    @update:expanded="newExpanded => expanded = newExpanded.slice(-1)"
  ...

Now all but the last expanded row will be collapsed. If necessary, you can build more complex expand/collapse logic from this.

Here it is in a playground