fix(refs dplan-12315): Pass Item to dataTable instead of header-field…

…s. (1052) Pass Item to dataTable instead of header-fields. coming from DpDataTableExtended
demos-europe · Oct 28, 2024 · a27a3d8 · a27a3d8
1 parent 80fb953
commit a27a3d8
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 24 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,9 @@ Since v0.0.10, this Changelog is formatted according to the [Common Changelog][c
 
 ## UNRELEASED
 
+### Fixed
+- ([#1052](https://github.com/demos-europe/demosplan-ui/pull/1052)) Pass RowData from DpDataTableExtended to DpDataTable slots ([@salisdemos](https://github.com/salisdemos))
+
 ## v0.4.1 - 2024-10-07
 
 ### Added

diff --git a/src/components/DpDataTable/DpDataTable.vue b/src/components/DpDataTable/DpDataTable.vue
@@ -484,15 +484,18 @@ export default {
   },
 
   watch: {
-    headerFields () {
-      if (this.isResizable) {
-        this.$nextTick(() => {
-          const firstRow = this.tableEl.getElementsByTagName('tr')[0]
-          const tableHeaderElements = firstRow ? firstRow.children : null
-
-          this.setColsWidth(tableHeaderElements)
-        })
-      }
+    headerFields: {
+      handler () {
+        if (this.isResizable) {
+          this.$nextTick(() => {
+            const firstRow = this.tableEl.getElementsByTagName('tr')[0]
+            const tableHeaderElements = firstRow ? firstRow.children : null
+
+            this.setColsWidth(tableHeaderElements)
+          })
+        }
+      },
+      deep: false // HeaderFields are always replaces as a whole and therefor deep watch is not necessary
     },
 
     shouldBeSelectedItems () {

diff --git a/src/components/DpDataTableExtended/DpDataTableExtended.vue b/src/components/DpDataTableExtended/DpDataTableExtended.vue
@@ -65,24 +65,12 @@
         </slot>
       </template>
       <template
-        v-for="el in filteredFields"
-        v-slot:[el.field]="element">
+        v-for="el in [...filteredFields, { field: 'expandedContent' }, { field: 'flyout' }]"
+        v-slot:[el.field]="item">
         <!-- table cells (TDs) -->
         <slot
           :name="el.field"
-          v-bind="el" />
-      </template>
-      <template v-slot:expandedContent="el">
-        <!-- expanded content area -->
-        <slot
-          name="expandedContent"
-          v-bind="el" />
-      </template>
-      <template v-slot:flyout="el">
-        <!-- flyout content area -->
-        <slot
-          name="flyout"
-          v-bind="el" />
+          v-bind="item" />
       </template>
     </dp-data-table>