feat(Table): support nested keys in columns (#503)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

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.
 

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
     }
   }
 })