feat(table): allow callback on cell property (#174) (#176)

close #174 Co-authored-by: Kia Ishii <kia.king.08@gmail.com>
globalbrain · Dec 15, 2022 · c3c631d · c3c631d
1 parent 99be28e
commit c3c631d
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/lib/components/STableCell.vue b/lib/components/STableCell.vue
@@ -1,19 +1,26 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import { TableCell } from '../composables/Table'
 import STableCellAvatar from './STableCellAvatar.vue'
 import STableCellAvatars from './STableCellAvatars.vue'
 import STableCellDay from './STableCellDay.vue'
 import STableCellPill from './STableCellPill.vue'
 import STableCellText from './STableCellText.vue'
 
-defineProps<{
+const props = defineProps<{
   name: string
   className?: string
-  cell?: TableCell
+  cell?: TableCell | ((value: any, record: any) => TableCell)
   value: any
   record: any
   records: Record<string, any>
 }>()
+
+const cell = computed(() =>
+  typeof props.cell === 'function'
+    ? props.cell(props.value, props.record)
+    : props.cell
+)
 </script>
 
 <template>

diff --git a/lib/composables/Table.ts b/lib/composables/Table.ts
@@ -25,7 +25,7 @@ export interface TableColumn {
   label: string
   className?: string
   dropdown?: DropdownSection[]
-  cell?: TableCell
+  cell?: TableCell | ((value: any, record: any) => TableCell)
 }
 
 export type TableCell =