[SD-187] Data table html header labels

packages/ripple-ui-core/src/components/data-table/RplDataTable.stories.mdx

@@ -5,7 +5,18 @@ import {
   ArgsTable
 } from '@storybook/addon-docs'
 import RplDataTable from './RplDataTable.vue'
-import { RplDataTableColumns, RplDataTableItems, RplDataTableColumnConfig, RplDataTableComplexItems, RplDataTableObjectKeyColumnConfig, RplDataTableObjects, RplDataTableStructuredColumns, RplDataTableStructuredItems, RplDataTableExtraComponents } from './fixtures/sample'
+import {
+  RplDataTableColumns,
+  RplDataTableItems,
+  RplDataTableColumnConfig,
+  RplDataTableComplexItems,
+  RplDataTableObjectKeyColumnConfig,
+  RplDataTableObjectKeyColumnHTMLConfig,
+  RplDataTableObjects,
+  RplDataTableStructuredColumns,
+  RplDataTableStructuredItems,
+  RplDataTableExtraComponents
+} from './fixtures/sample'
 import { a11yStoryCheck } from './../../../stories/interactions.js'
 
 export const SingleTemplate = (args) => ({
@@ -124,3 +135,24 @@ export const SingleTemplate = (args) => ({
     {SingleTemplate.bind()}
   </Story>
 </Canvas>
+
+<Canvas>
+  <Story
+    name="HTML headings"
+    play={a11yStoryCheck}
+    args={{
+      caption: "Pets II: The Return",
+      footer: "HTML passed through to headings",
+      columns: RplDataTableObjectKeyColumnHTMLConfig,
+      items: RplDataTableExtraComponents,
+      headingType: {
+        horizontal: true,
+        vertical: true
+      },
+      showExtraContent: true,
+      offset: 0
+    }}
+  >
+    {SingleTemplate.bind()}
+  </Story>
+</Canvas>

packages/ripple-ui-core/src/components/data-table/RplDataTable.vue

@@ -1,6 +1,13 @@
 <script setup lang="ts">
 import { useBreakpoints } from '@vueuse/core'
-import { computed, withDefaults, ref, unref, onMounted } from 'vue'
+import {
+  computed,
+  type ComputedRef,
+  withDefaults,
+  ref,
+  unref,
+  onMounted
+} from 'vue'
 import { bpMin } from '../../lib/breakpoints'
 import RplDataTableRow, {
   extraRowContent,
@@ -76,13 +83,16 @@ const displayMobileView: ComputedRef<boolean> = computed(() => {
         </caption>
         <thead v-if="headingType.horizontal && columns.length > 0">
           <tr>
-            <th
-              v-for="(column, index) in columns"
-              :key="index"
-              :class="column.classes"
-            >
-              {{ column.label }}
-            </th>
+            <template v-for="(column, index) in columns" :key="index">
+              <th
+                v-if="column.isLabelHTML"
+                :class="column.classes"
+                v-html="column.label"
+              ></th>
+              <th v-else :class="column.classes">
+                {{ column.label }}
+              </th>
+            </template>
             <th v-if="showExtraContent" class="rpl-data-table__actions">
               <span class="rpl-u-visually-hidden">Actions</span>
             </th>

packages/ripple-ui-core/src/components/data-table/RplDataTableRow.vue

@@ -14,6 +14,7 @@ export type tableColumnConfig = {
   component?: string
   props?: any
   isHTML?: boolean
+  isLabelHTML?: boolean
 }
 
 export type tableRow = {
@@ -40,7 +41,7 @@ interface Props {
   columns: tableColumnConfig[]
   items?: Array<string>
   row: tableRow
-  extraContent?: extraRowContent
+  extraContent?: extraRowContent | null
   verticalHeader?: boolean
   offset: number
   caption?: string

packages/ripple-ui-core/src/components/data-table/fixtures/sample.ts

@@ -192,6 +192,23 @@ export const RplDataTableObjectKeyColumnConfig = [
   }
 ]
 
+export const RplDataTableObjectKeyColumnHTMLConfig = [
+  {
+    label: '<em>Nominative descriptor</em>',
+    objectKey: 'name',
+    isLabelHTML: true
+  },
+  {
+    label: 'Duration<sup>1</sup>',
+    objectKey: 'age',
+    isLabelHTML: true
+  },
+  {
+    label: 'Species',
+    objectKey: 'type'
+  }
+]
+
 export const RplDataTableObjects = [
   {
     name: 'George',