add header select disable option to card tables

orangehrm · Dec 10, 2024 · eadf478 · eadf478
1 parent 807f15a
commit eadf478
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 0 deletions.
diff --git a/components/src/core/components/CardTable/Header/DefaultCardHeader.vue b/components/src/core/components/CardTable/Header/DefaultCardHeader.vue
@@ -1,4 +1,6 @@
 <template>
+  <pre>{{ showHeader }}</pre>
+  <pre>{{ tableProps.hideHeaders }}</pre>
   <oxd-card-thead v-if="showHeader && !tableProps.hideHeaders">
     <oxd-card-tr :clickable="false">
       <oxd-card-th
@@ -9,6 +11,7 @@
       >
         <oxd-checkbox-input
           :checkIcon="checkIcon"
+          :disabled="allSelectDisabled"
           v-model="selectedAll"
           @change="onChangeSelectAll"
         />
@@ -89,6 +92,10 @@ export default defineComponent({
         : 'dash';
     };
 
+    const allSelectDisabled = computed(() => {
+      return tableProps.items.every(item => item.isSelectDisabled === true);
+    });
+
     const state: State = reactive({
       checkIcon: 'oxd-check',
       checkedItems: [...tableProps.selected],
@@ -137,6 +144,7 @@ export default defineComponent({
       tableProps,
       screenState,
       showHeader,
+      allSelectDisabled,
     };
   },
 

diff --git a/storybook/stories/core/components/CardTable/Table.stories.js b/storybook/stories/core/components/CardTable/Table.stories.js
@@ -72,6 +72,7 @@ RowOptions.args = {
   items: [
     {col1: 'Data 1', col2: 'Data 2', isSelectable: false, isDisabled: false},
     {col1: 'Data 2', col2: 'Data 2', isSelectable: true, isDisabled: false},
+    {col1: 'Data 3', col2: 'Data 3', isDisabled: false, isSelectDisabled: true, selectDisabledTooltip: "Not allowed to delete data in progress"}
   ],
 };