fix(@dpc-sdp/ripple-ui-core): fixed data table column labels on small…

… screens
dpc-sdp · Aug 4, 2023 · 811988f · 811988f
1 parent 9996fb0
commit 811988f
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 6 deletions.
diff --git a/packages/ripple-ui-core/src/components/data-table/RplDataTable.vue b/packages/ripple-ui-core/src/components/data-table/RplDataTable.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import RplDataTableRow from './RplDataTableRow.vue'
+import RplDataTableRow, { tableColumnConfig } from './RplDataTableRow.vue'
 
 interface HeadingType {
   horizontal: boolean
@@ -10,7 +10,7 @@ interface HeadingType {
 interface Props {
   caption?: string
   footer?: string
-  columns: Array<string>
+  columns: tableColumnConfig[] | string[]
   headingType?: HeadingType
   items: Array<Record<string, unknown>[] | string[]>
   offset?: number

diff --git a/packages/ripple-ui-core/src/components/data-table/RplDataTableRow.vue b/packages/ripple-ui-core/src/components/data-table/RplDataTableRow.vue
@@ -7,14 +7,15 @@ import {
   rplEventPayload
 } from '../../composables/useRippleEvent'
 
-type tableColumnConfig = {
+export type tableColumnConfig = {
+  label: string
   component?: string
   props?: any
 }
 
 interface Props {
   content: any
-  columns: tableColumnConfig[]
+  columns: tableColumnConfig[] | string[]
   items: Array<string>
   verticalHeader?: boolean
   offset: number
@@ -75,15 +76,20 @@ const handleClick = () => {
         :is="i === 0 && verticalHeader ? 'th' : 'td'"
         v-for="(item, i) of items"
         :key="i"
-        :data-label="columns[i]"
+        :data-label="
+          typeof columns[i] === 'string' ? columns[i] : (columns[i] as tableColumnConfig).label
+        "
       >
         <template
           v-if="
             typeof columns[i] === 'object' &&
             columns[i].hasOwnProperty('component')
           "
         >
-          <component :is="columns[i].component" :item="item" />
+          <component
+            :is="(columns[i] as tableColumnConfig).component"
+            :item="item"
+          />
         </template>
         <template v-else>
           {{ item }}