Feature/expandable row

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`",
@@ -4572,6 +4573,11 @@
         "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/CRUD.vue

@@ -29,16 +29,16 @@
       </tr>
     </template>
 
-    <template #cell(actions)="{ rowIndex }">
+    <template #cell(actions)="{ cell }">
       <va-button
         preset="plain"
         icon="edit"
-        @click="openModalToEditItemById(rowIndex)"
+        @click="openModalToEditItemById(cell.rowIndex)"
       />
       <va-button
         preset="plain"
         icon="delete"
-        @click="deleteItemById(rowIndex)"
+        @click="deleteItemById(cell.rowIndex)"
       />
     </template>
   </va-data-table>

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

@@ -3,17 +3,17 @@
     :items="items"
     :columns="columns"
   >
-    <template #header(street)="{ label }">
+    <template #header(street)="{ cell }">
       <va-chip size="small">
         {{ label }}
       </va-chip>
     </template>
     <template #header(companyName)>
       Company Name
     </template>
-    <template #cell(street)="{ value }">
+    <template #cell(street)="{ cell }">
       <va-chip size="small">
-        {{ value }}
+        {{ cell.value }}
       </va-chip>
     </template>
   </va-data-table>

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

@@ -0,0 +1,65 @@
+<template>
+  <va-data-table
+    :items="items"
+    :columns="columns"
+    striped
+  >
+    <template #cell(actions)="{ row, isExpanded }">
+      <va-button @click="row.toggleRowDetails()">{{  isExpanded ? 'Collapse': 'Expand' }}</va-button>
+    </template>
+
+    <template #expandableRow="row">
+      <va-alert outline>
+        This is {{ row.cells[0].value }} details.
+      </va-alert>
+    </template>
+  </va-data-table>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  data() {
+    const users = [
+      {
+        name: "Leanne Graham",
+        username: "Bret",
+        email: "Sincere@april.biz",
+      },
+      {
+        name: "Ervin Howell",
+        username: "Antonette",
+        email: "Shanna@melissa.tv",
+      },
+      {
+        name: "Clementine Bauch",
+        username: "Samantha",
+        email: "Nathan@yesenia.net",
+      },
+      {
+        name: "Patricia Lebsack",
+        username: "Karianne",
+        email: "Julianne.OConner@kory.org",
+      },
+      {
+        name: "Chelsey Dietrich",
+        username: "Kamren",
+        email: "Lucio_Hettinger@annie.ca",
+      },
+    ];
+
+    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="row">
+            This is {{ row.cells[0].value }} details.
+        </template>
+      </va-data-table>
+    </VbCard>
   </VbDemo>
 </template>
 

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

@@ -50,8 +50,8 @@
         <template #header(address)>Street</template>
         <template #header(company)>Company Name</template>
 
-        <template #cell(address)="{ rowData }">{{ rowData.address.street }}</template>
-        <template #cell(company)="{ rowData }">{{ rowData.company.name }}</template>
+        <template #cell(address)="{ cell }">{{ cell.rowData.address.street }}</template>
+        <template #cell(company)="{ cell }">{{ cell.rowData.company.name }}</template>
       </va-data-table>
     </VbCard>
 
@@ -60,8 +60,8 @@
         <template #header(address)>Street</template>
         <template #header(company)>Company Name</template>
 
-        <template #cell(address)="{ rowData }">{{ rowData.address.street }}</template>
-        <template #cell(company)="{ rowData }">{{ rowData.company.name }}</template>
+        <template #cell(address)="{ cell }">{{ cell.rowData.address.street }}</template>
+        <template #cell(company)="{ cell }">{{ cell.rowData.company.name }}</template>
 
         <template #headerAppend>
           <tr>
@@ -89,8 +89,8 @@
         <template #header(address)>Street</template>
         <template #header(company)>Company Name</template>
 
-        <template #cell(address)="{ rowData }">{{ rowData.address.street }}</template>
-        <template #cell(company)="{ rowData }">{{ rowData.company.name }}</template>
+        <template #cell(address)="{ cell }">{{ cell.rowData.address.street }}</template>
+        <template #cell(company)="{ cell }">{{ cell.rowData.company.name }}</template>
 
         <template #colgroup>
           <col>
@@ -115,8 +115,8 @@
         <template #header(address)>Street</template>
         <template #header(company)>Company Name</template>
 
-        <template #cell(address)="{ rowData }">{{ rowData.address.street }}</template>
-        <template #cell(company)="{ rowData }">{{ rowData.company.name }}</template>
+        <template #cell(address)="{ cell }">{{ cell.rowData.address.street }}</template>
+        <template #cell(company)="{ cell }">{{ cell.rowData.company.name }}</template>
       </va-data-table>
     </VbCard>
 
@@ -202,8 +202,8 @@
         <template #header(address)>Street</template>
         <template #header(company)>Company Name</template>
 
-        <template #cell(address)="{ rowData }">{{ rowData.address.street }}</template>
-        <template #cell(company)="{ rowData }">{{ rowData.company.name }}</template>
+        <template #cell(address)="{ cell }">{{ cell.rowData.address.street }}</template>
+        <template #cell(company)="{ cell }">{{ cell.rowData.company.name }}</template>
       </va-data-table>
     </VbCard>
 
@@ -222,8 +222,8 @@
         <template #header(address)>Street</template>
         <template #header(company)>Company Name</template>
 
-        <template #cell(address)="{ rowData }">{{ rowData.address.street }}</template>
-        <template #cell(company)="{ rowData }">{{ rowData.company.name }}</template>
+        <template #cell(address)="{ cell }">{{ cell.rowData.address.street }}</template>
+        <template #cell(company)="{ cell }">{{ cell.rowData.company.name }}</template>
       </va-data-table>
     </VbCard>
 
@@ -239,8 +239,8 @@
         <template #header(address)>Street</template>
         <template #header(company)>Company Name</template>
 
-        <template #cell(address)="{ rowData }">{{ rowData.address.street }}</template>
-        <template #cell(company)="{ rowData }">{{ rowData.company.name }}</template>
+        <template #cell(address)="{ cell }">{{ cell.rowData.address.street }}</template>
+        <template #cell(company)="{ cell }">{{ cell.rowData.company.name }}</template>
       </va-data-table>
     </VbCard>
   </VbDemo>