feat: add expanded row on datatable #194

components/PoisList/PoisTable.vue

@@ -85,6 +85,7 @@ pois.value.features = pois.value.features.map((f: ApiPoi) => {
 })
 
 // Transform headers data to be compliant with Vuetify's standards
+const expanded = ref([])
 const headers = computed(() => {
   // Basic Fields
   const h: DataTableHeader[] = fields.value.map(f => ({
@@ -159,13 +160,16 @@ function getContext(key: string) {
 <template>
   <VCard class="mt-8">
     <VDataTable
+      v-model:expanded="expanded"
       :loading="loadingState"
       :headers="headers"
       :items="pois?.features"
       :no-data-text="t('poisTable.empty')"
       :search="search"
       :custom-filter="customFilter"
+      item-value="properties.metadata.id"
       items-per-page="20"
+      show-expand
     >
       <template #top>
         <header class="d-flex align-center pa-2" :style="{ flexDirection: device.smallScreen ? 'column' : 'row', gap: '8px', background: '#eeeeee' }">
@@ -199,7 +203,7 @@ function getContext(key: string) {
           />
         </header>
       </template>
-      <template #item="{ item, columns }">
+      <template #item="{ item, internalItem, columns, isExpanded, toggleExpand }">
         <tr>
           <td v-for="col in columns" :key="col.key">
             <ContribFieldGroup
@@ -216,6 +220,9 @@ function getContext(key: string) {
               <FontAwesomeIcon icon="external-link-alt" />
               {{ t('poisTable.details') }}
             </IconButton>
+            <button v-else-if="col.key === 'data-table-expand'" @click="toggleExpand(internalItem)">
+              {{ isExpanded(internalItem) ? 'Close Me' : 'Expand Me' }}
+            </button>
             <Field
               v-else
               :context="getContext(col.key.split('.').pop())"
@@ -228,6 +235,13 @@ function getContext(key: string) {
           </td>
         </tr>
       </template>
+      <template #expanded-row="{ columns }">
+        <tr>
+          <td :colspan="columns.length">
+            Peek-a-boo!
+          </td>
+        </tr>
+      </template>
       <template #loading>
         <VSkeletonLoader type="table-row@10" />
       </template>