feat(table): allow conditionally showing action items (#374)

globalbrain · Nov 13, 2023 · 63aa857 · 63aa857
1 parent b465414
commit 63aa857
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 16 deletions.
diff --git a/docs/components/table.md b/docs/components/table.md
@@ -510,7 +510,10 @@ interface TableCellActions {
   labelMode?: ColorModes
 
   // Callback function when the button is clicked.
-  onClick(value: any, record: any): void
+  onClick(record: any): void
+
+  // Whether to show the button for the record.
+  show?(record: any): boolean
 }
 
 type ColorModes =

diff --git a/lib/components/STableCell.vue b/lib/components/STableCell.vue
@@ -102,7 +102,6 @@ const computedCell = computed<TableCell | undefined>(() =>
     />
     <STableCellActions
       v-else-if="computedCell.type === 'actions'"
-      :value="value"
       :record="record"
       :actions="computedCell.actions"
     />

diff --git a/lib/components/STableCellActions.vue b/lib/components/STableCellActions.vue
@@ -3,26 +3,26 @@ import { type TableCellAction } from '../composables/Table'
 import SButton from './SButton.vue'
 
 defineProps<{
-  value: any
   record: any
   actions: TableCellAction[]
 }>()
 </script>
 
 <template>
   <div class="STableCellActions">
-    <SButton
-      v-for="(action, i) in actions"
-      :key="i"
-      size="mini"
-      type="text"
-      :mode="action.mode ?? 'mute'"
-      :icon="action.icon"
-      :icon-mode="action.iconMode"
-      :label="action.label"
-      :label-mode="action.labelMode"
-      @click="action.onClick(value, record)"
-    />
+    <template v-for="(action, i) in actions" :key="i">
+      <SButton
+        v-if="action.show == null || action.show(record)"
+        size="mini"
+        type="text"
+        :mode="action.mode ?? 'mute'"
+        :icon="action.icon"
+        :icon-mode="action.iconMode"
+        :label="action.label"
+        :label-mode="action.labelMode"
+        @click="action.onClick(record)"
+      />
+    </template>
   </div>
 </template>
 

diff --git a/lib/composables/Table.ts b/lib/composables/Table.ts
@@ -189,7 +189,8 @@ export interface TableCellAction {
   iconMode?: Mode
   label?: string
   labelMode?: Mode
-  onClick(value: any, record: any): void
+  onClick(record: any): void
+  show?(record: any): boolean
 }
 
 export interface TableMenu {