fix(@dpc-sdp/ripple-tide-landing-page): allow html in data tables

dpc-sdp · Nov 26, 2023 · 616446d · 616446d
1 parent d114e31
commit 616446d
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git a/packages/ripple-tide-landing-page/mapping/components/data-table/data-table-mapping.ts b/packages/ripple-tide-landing-page/mapping/components/data-table/data-table-mapping.ts
@@ -1,4 +1,4 @@
-import { getField } from '@dpc-sdp/ripple-tide-api'
+import { getField, getBody } from '@dpc-sdp/ripple-tide-api'
 import { TideDynamicPageComponent } from '@dpc-sdp/ripple-tide-api/types'
 
 export interface ITideDataTable {
@@ -11,6 +11,7 @@ export interface ITideDataTable {
   columns: Array<{
     label?: string
     objectKey: string
+    isHTML?: boolean
   }>
   items: Array<Record<string, any>>
 }
@@ -27,7 +28,8 @@ const getColumnsFromEntries = (rows: any, firstRowIsHeader: boolean) => {
   return firstRow.map((val: any, index: number) => {
     return {
       label: firstRowIsHeader ? val : undefined,
-      objectKey: columnKey(index)
+      objectKey: columnKey(index),
+      isHTML: true
     }
   })
 }
@@ -53,7 +55,7 @@ export const dataTableMapping = (
       return entry.reduce((itemObj, val, index) => {
         return {
           ...itemObj,
-          [columnKey(index)]: val
+          [columnKey(index)]: getBody(val)
         }
       }, {})
     })

diff --git a/packages/ripple-ui-core/src/components/data-table/RplDataTableRow.vue b/packages/ripple-ui-core/src/components/data-table/RplDataTableRow.vue
@@ -13,6 +13,7 @@ export type tableColumnConfig = {
   classes?: string
   component?: string
   props?: any
+  isHTML?: boolean
 }
 
 export type tableRow = {
@@ -116,7 +117,10 @@ const getCellText = (colIndex: number) => {
           />
         </template>
         <template v-else>
-          {{ getCellText(i) }}
+          <div v-if="column.isHTML" v-html="getCellText(i)" />
+          <template v-else>
+            {{ getCellText(i) }}
+          </template>
         </template>
       </component>