feat: [table]related #262 preventExpand prop - PuikTableHeader interface

PrestaShopCorp · Dec 5, 2023 · 9d90972 · 9d90972
1 parent 70c2f8d
commit 9d90972
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 12 deletions.
diff --git a/packages/components/table/src/table.ts b/packages/components/table/src/table.ts
@@ -30,6 +30,7 @@ export interface PuikTableHeader {
   align?: 'left' | 'center' | 'right'
   width?: string
   sortable?: boolean
+  preventExpand?: boolean
 }
 
 export const tableProps = buildProps({

diff --git a/packages/components/table/src/table.vue b/packages/components/table/src/table.vue
@@ -90,13 +90,7 @@
       </thead>
       <tbody class="puik-table__body">
         <template v-for="(item, rowIndex) in data" :key="`row-${rowIndex}`">
-          <tr
-            :class="[
-              'puik-table__body__row',
-              { 'puik-table__body__row--expandable': expandable },
-            ]"
-            @click="expandable ? expandRow(rowIndex) : ''"
-          >
+          <tr class="puik-table__body__row">
             <td
               v-if="selectable || expandable"
               :class="[
@@ -138,6 +132,7 @@
                   ]"
                   icon="keyboard_arrow_down"
                   font-size="24"
+                  @click="expandRow(rowIndex)"
                 />
               </div>
             </td>
@@ -149,6 +144,10 @@
                 `puik-table__body__row__item puik-table__body__row__item--${
                   header.align ?? 'left'
                 }`,
+                {
+                  'puik-table__body__row__item--expandable':
+                    expandable && !header?.preventExpand,
+                },
                 { 'puik-table__body__row__item--sticky': isSticky(colIndex) },
                 {
                   'puik-table__body__row__item--sticky-scroll':
@@ -167,6 +166,9 @@
                     ScrollBarPosition == PuikTableScrollBarPosistion.Right,
                 },
               ]"
+              @click="
+                expandable && !header?.preventExpand ? expandRow(rowIndex) : ''
+              "
             >
               <div class="puik-table__body__row__item__container">
                 <div class="puik-table__body__row__item__content">

diff --git a/packages/components/table/stories/table.stories.ts b/packages/components/table/stories/table.stories.ts
@@ -53,22 +53,23 @@ export default {
     width: string | undefined
     align: 'left' | 'center' | 'right' | undefined
     sortable: boolean | undefined
+    preventExpand: boolean | undefined
   }
   `,
         },
       },
     },
-    selectable: {
+    expandable: {
       control: 'boolean',
-      description: 'Makes rows selectable',
+      description: 'Makes rows expandable',
       table: {
         type: { summary: 'boolean' },
         defaultValue: { summary: 'false' },
       },
     },
-    expandable: {
+    selectable: {
       control: 'boolean',
-      description: 'Makes rows expandable',
+      description: 'Makes rows selectable',
       table: {
         type: { summary: 'boolean' },
         defaultValue: { summary: 'false' },

diff --git a/packages/theme/src/table.scss b/packages/theme/src/table.scss
@@ -175,7 +175,7 @@
     @apply pr-2;
   }
 
-  .puik-table__body__row--expandable {
+  .puik-table__body__row__item--expandable {
     @apply cursor-pointer;
   }
 }