From 858886a85288370bfc7c0991e96929811f20f561 Mon Sep 17 00:00:00 2001
From: Vladyslav <31040615+vladyslav-mikhieiev@users.noreply.github.com>
Date: Wed, 9 Aug 2023 11:56:10 +0300
Subject: [PATCH] feat(Table): support nested keys in columns (#503)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
---
 docs/content/4.data/1.table.md        |  2 +-
 src/runtime/components/data/Table.vue | 14 +++++++++-----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/docs/content/4.data/1.table.md b/docs/content/4.data/1.table.md
index 357cc28efc..09fde3aed3 100644
--- a/docs/content/4.data/1.table.md
+++ b/docs/content/4.data/1.table.md
@@ -545,7 +545,7 @@ Even though you can customize the sort button as mentioned in the [Sortable](#so
 
 ### `<column>-data`
 
-Use the `#<column>-data` slot to customize the data cell of a column. You will have access to the `row` and `column` properties in the slot scope.
+Use the `#<column>-data` slot to customize the data cell of a column. You will have access to the `row`, `column` and `getRowData` properties in the slot scope.
 
 You can for example create an extra column for actions with a [Dropdown](/elements/dropdown) component inside or change the color of the rows based on a selection.
 
diff --git a/src/runtime/components/data/Table.vue b/src/runtime/components/data/Table.vue
index dfcfca727c..9bdf9210c6 100644
--- a/src/runtime/components/data/Table.vue
+++ b/src/runtime/components/data/Table.vue
@@ -55,8 +55,8 @@
             </td>
 
             <td v-for="(column, subIndex) in columns" :key="subIndex" :class="[ui.td.base, ui.td.padding, ui.td.color, ui.td.font, ui.td.size]">
-              <slot :name="`${column.key}-data`" :column="column" :row="row" :index="index">
-                {{ row[column.key] }}
+              <slot :name="`${column.key}-data`" :column="column" :row="row" :index="index" :get-row-data="(defaultValue: any) => getRowData(row, column.key, defaultValue)">
+                {{ getRowData(row, column.key) }}
               </slot>
             </td>
           </tr>
@@ -69,9 +69,8 @@
 <script lang="ts">
 import { ref, computed, defineComponent, toRaw } from 'vue'
 import type { PropType } from 'vue'
-import { capitalize, orderBy } from 'lodash-es'
+import { capitalize, orderBy, omit, get } from 'lodash-es'
 import { defu } from 'defu'
-import { omit } from 'lodash-es'
 import type { Button } from '../../types/button'
 import { useAppConfig } from '#imports'
 // TODO: Remove
@@ -231,6 +230,10 @@ export default defineComponent({
       }
     }
 
+    function getRowData (row: Object, rowKey: string | string[], defaultValue: any = 'Failed to get cell value') {
+      return get(row, rowKey, defaultValue)
+    }
+
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
@@ -247,7 +250,8 @@ export default defineComponent({
       isSelected,
       onSort,
       onSelect,
-      onChange
+      onChange,
+      getRowData
     }
   }
 })