feat(table): add option to specify custom class name for column

globalbrain · Nov 14, 2022 · a7bca60 · a7bca60
1 parent a69339a
commit a7bca60
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 5 deletions.
diff --git a/lib/components/STable.vue b/lib/components/STable.vue
@@ -102,10 +102,17 @@ function updateColWidth(key: string, value: string) {
         >
           <div class="block">
             <div class="row">
-              <STableItem v-for="key in orders" :key="key" :name="key" :width="colWidths[key]">
+              <STableItem
+                v-for="key in orders"
+                :key="key"
+                :name="key"
+                :class-name="columns[key].className"
+                :width="colWidths[key]"
+              >
                 <STableColumn
                   :name="key"
                   :label="columns[key].label"
+                  :class-name="columns[key].className"
                   :dropdown="columns[key].dropdown"
                   @resize="(value) => updateColWidth(key, value)"
                 />
@@ -124,9 +131,16 @@ function updateColWidth(key: string, value: string) {
         >
           <div class="block">
             <div v-for="(record, rIndex) in records" :key="rIndex" class="row">
-              <STableItem v-for="key in orders" :key="key" :name="key" :width="colWidths[key]">
+              <STableItem
+                v-for="key in orders"
+                :key="key"
+                :name="key"
+                :class-name="columns[key].className"
+                :width="colWidths[key]"
+              >
                 <STableCell
                   :name="key"
+                  :class-name="columns[key].className"
                   :cell="columns[key].cell"
                   :value="record[key]"
                   :record="record"

diff --git a/lib/components/STableCell.vue b/lib/components/STableCell.vue
@@ -8,6 +8,7 @@ import STableCellText from './STableCellText.vue'
 
 defineProps<{
   name: string
+  className?: string
   cell?: TableCell
   value: any
   record: any
@@ -16,7 +17,7 @@ defineProps<{
 </script>
 
 <template>
-  <div class="STableCell" :class="[`col-${name}`]">
+  <div class="STableCell" :class="[className, `col-${name}`]">
     <STableCellText
       v-if="!cell || cell.type === 'text'"
       :value="value"

diff --git a/lib/components/STableColumn.vue b/lib/components/STableColumn.vue
@@ -112,7 +112,7 @@ function stopDialogPositionListener() {
 </script>
 
 <template>
-  <div class="STableColumn STableCell" :class="[{ active }, className ?? `col-${name}`]" ref="column">
+  <div class="STableColumn STableCell" :class="[{ active }, className, `col-${name}`]" ref="column">
     <div class="container">
       <p class="label">{{ label }}</p>
 

diff --git a/lib/components/STableItem.vue b/lib/components/STableItem.vue
@@ -1,14 +1,15 @@
 <script setup lang="ts">
 defineProps<{
   name: string
+  className?: string
   width?: string
 }>()
 </script>
 
 <template>
   <div
     class="STableItem"
-    :class="[`col-${name}`, { adjusted: width }]"
+    :class="[className, `col-${name}`, { adjusted: width }]"
   >
     <slot />
   </div>