Feature/expandable row (#3054)

* feature: implement expandable row details

* feat: implement expandable row for data table

* fix: improve examples, fix new demo errors

* fix(data-table): rollback cell slot bind change

* feat(data-table): added row-data to expandable slot bind

* docs(data-table): improve docs demo

* docs(data-table): chore change colors

---------

Co-authored-by: Maksim Nedoshev <m0ksem1337@gmail.com>

packages/docs/locales/en.json

@@ -1048,6 +1048,7 @@
         "headerAppend": "Appends custom rows inside table header (`thead`)",
         "bodyPrepend": "Prepends `tbody` with custom rows",
         "cell": "Targets all the cells. Is bound to the current cell (to it internal representation)",
+        "expandableRow": "Targets all the row. Adds an expandable row underneath. To trigger expansion use `row.toggleExpandableRow`",
         "cellKey": "Allows to target only cells of a specified by the given `key` column. Is bound to the current cell",
         "bodyAppend": "Appends rows to the table's `tbody`",
         "footerPrepend": "Prepends rows to the table's `tfoot`",
@@ -4584,6 +4585,10 @@
         "title": "Virtual scroll",
         "text": "The `virtual-scroller` prop enables virtual scroll for `tbody` rows ([read more](/ui-elements/virtual-scroll)). Pay your attention, that CSS transition is disabled here because of possible performance problems."
       },
+      "expandableRow": {
+        "title": "Expandable rows",
+        "text": "Each row could can be additionally expanded by providing `expandableRow` slot. Slot expansion is triggered by `row.toggleExpandableRow` slot property"
+      },
       "other": {
         "title": "Other",
         "text": [

packages/docs/page-config/ui-elements/data-table/examples/ExpandableRow.vue

@@ -0,0 +1,114 @@
+<template>
+  <va-data-table
+    :items="items"
+    :columns="columns"
+  >
+    <template #cell(actions)="{ row, isExpanded }">
+      <va-button 
+        @click="row.toggleRowDetails()"
+        :icon="row.isExpanded ? 'va-arrow-up': 'va-arrow-down'"
+        preset="secondary"
+        class="w-full"
+      >
+        {{ isExpanded ? 'Hide': 'More info' }}
+      </va-button>
+    </template>
+
+    <template #expandableRow="{ rowData }">
+      <div class="flex gap-2">
+        <va-avatar :src="`https://randomuser.me/api/portraits/men/${rowData.id}.jpg`"/>
+        <div class="pl-2">
+          <div class="flex gap-1">
+            <span>{{ rowData.name }}</span>
+            <span class="va-link">@{{ rowData.username }}</span>
+          </div>
+          <div class="flex items-center">
+            <va-icon size="small" name="phone" color="secondary" class="mr-2" />
+            <span>{{ rowData.phone }}</span>
+          </div>
+          <div class="flex items-center">
+            <va-icon size="small" name="email" color="secondary" class="mr-2" />
+            <span>{{ rowData.email }}</span>
+          </div>
+          <div class="flex items-center">
+            <va-icon size="small" name="language" color="secondary" class="mr-2" />
+            <span class="va-link">{{ rowData.website }}</span>
+          </div>
+        </div>
+      </div>
+    </template>
+  </va-data-table>
+</template>
+
+<style>
+  .va-data-table__table-tr--expanded td {
+    background: var(--va-background-border);
+  }
+
+  .va-data-table__table-expanded-content td {
+    background-color: var(--va-background-element);
+  }
+</style>
+
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  data() {
+    const users = [
+      {
+        id: 1,
+        name: "Leanne Graham",
+        username: "Bret",
+        email: "Sincere@april.biz",
+        phone: "1-770-736-8031",
+        website: "hildegard.org",
+      },
+      {
+        id: 2,
+        name: "Ervin Howell",
+        username: "Antonette",
+        email: "Shanna@melissa.tv",
+        phone: "010-692-6593",
+        website: "anastasia.net",
+      },
+      {
+        id: 3,
+        name: "Clementine Bauch",
+        username: "Samantha",
+        email: "Nathan@yesenia.net",
+        phone: "1-463-123-4447",
+        website: "ramiro.info",
+      },
+      {
+        id: 4,
+        name: "Patricia Lebsack",
+        username: "Karianne",
+        email: "Julianne.OConner@kory.org",
+        phone: "493-170-9623",
+        website: "kale.biz",
+      },
+      {
+        id: 5,
+        name: "Chelsey Dietrich",
+        username: "Kamren",
+        email: "Lucio_Hettinger@annie.ca",
+        phone: "(254)954-1289",
+        website: "demarco.info",
+      },
+    ];
+
+    const columns = [
+      { key: "name" },
+      { key: "username" },
+      { key: "email" },
+      { key: "actions", width: 80 },
+    ];
+
+    return {
+      items: users,
+      columns
+    };
+  },
+});
+</script>

packages/docs/page-config/ui-elements/data-table/index.ts

@@ -52,6 +52,8 @@ export default definePageConfig({
     block.paragraph("dataTable.examples.other.text[1]"),
     block.example("CRUD", { hideTitle: true }),
 
+    block.example("ExpandableRow"),
+
     block.subtitle("all.api"),
     block.api("VaDataTable", apiOptions),
   ],

packages/ui/src/components/va-data-table/VaDataTable.demo.vue

@@ -492,6 +492,18 @@
       <input type="text" v-model="filterValue">
       <va-data-table :items="evenItems" :filter="filterValue" />
     </VbCard>
+
+    <VbCard title="Expandable rows" class="demo">
+      <va-data-table :items="evenItems">
+        <template #cell(id)="{ row, isExpanded }">
+          <va-button @click="row.toggleRowDetails()">{{  isExpanded ? 'Collapse': 'Expand' }}</va-button>
+        </template>
+
+        <template #expandableRow="{ cells }">
+            This is {{ cells[0].value }} details.
+        </template>
+      </va-data-table>
+    </VbCard>
   </VbDemo>
 </template>