Merge pull request #264 from PrestaShopCorp/feat/table-expandable-row…

…-add-the-click-event-to-the-entire-line Feat/table expandable row add the click event to the entire line
PrestaShopCorp · Dec 5, 2023 · 25ada8c · 25ada8c
2 parents ef6f90b + 961d4de
commit 25ada8c
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 16 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
@@ -144,6 +144,10 @@
                 `puik-table__body__row__item puik-table__body__row__item--${
                   header.align ?? 'left'
                 }`,
+                {
+                  'puik-table__body__row__item--expand-row':
+                    expandable && !header?.preventExpand,
+                },
                 { 'puik-table__body__row__item--sticky': isSticky(colIndex) },
                 {
                   'puik-table__body__row__item--sticky-scroll':
@@ -162,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' },
@@ -241,6 +242,7 @@ const Template: StoryFn = (args: Args) => ({
       {
         value: 'actions',
         size: 'sm',
+        preventExpand: true,
       },
     ]
     return { args, headers, items, selection }
@@ -656,6 +658,7 @@ export const Expandable: StoryObj = {
     {
       value: 'actions',
       size: 'sm',
+      preventExpand: true,
     },
   ]
 
@@ -688,10 +691,10 @@ export const Expandable: StoryObj = {
                     <div class="puik-icon" style="font-size: 24px;">keyboard_arrow_down</div>
                 </div>
             </td>
-            <td class="puik-table__body__row__item puik-table__body__row__item--left">lastname0</td>
-            <td class="puik-table__body__row__item puik-table__body__row__item--left">firstname0</td>
-            <td class="puik-table__body__row__item puik-table__body__row__item--center">40</td>
-            <td class="puik-table__body__row__item puik-table__body__row__item--right">[email protected]</td>
+            <td class="puik-table__body__row__item puik-table__body__row__item--left puik-table__body__row__item--expand-row">lastname0</td>
+            <td class="puik-table__body__row__item puik-table__body__row__item--left puik-table__body__row__item--expand-row">firstname0</td>
+            <td class="puik-table__body__row__item puik-table__body__row__item--center puik-table__body__row__item--expand-row">40</td>
+            <td class="puik-table__body__row__item puik-table__body__row__item--right puik-table__body__row__item--expand-row">[email protected]</td>
             <td class="puik-table__body__row__item puik-table__body__row__item--left">
                 <button class="puik-button puik-button--text puik-button--md" aria-label="Delete item">
                     <div class="puik-icon puik-button__right-icon" style="font-size: 1.25rem;">delete</div>
@@ -705,10 +708,10 @@ export const Expandable: StoryObj = {
                     <div class="puik-icon" style="font-size: 24px;">keyboard_arrow_down</div>
                 </div>
             </td>
-            <td class="puik-table__body__row__item puik-table__body__row__item--left">lastname1</td>
-            <td class="puik-table__body__row__item puik-table__body__row__item--left">firstname1</td>
-            <td class="puik-table__body__row__item puik-table__body__row__item--center">40</td>
-            <td class="puik-table__body__row__item puik-table__body__row__item--right">[email protected]</td>
+            <td class="puik-table__body__row__item puik-table__body__row__item--left puik-table__body__row__item--expand-row">lastname1</td>
+            <td class="puik-table__body__row__item puik-table__body__row__item--left puik-table__body__row__item--expand-row">firstname1</td>
+            <td class="puik-table__body__row__item puik-table__body__row__item--center puik-table__body__row__item--expand-row">40</td>
+            <td class="puik-table__body__row__item puik-table__body__row__item--right puik-table__body__row__item--expand-row">[email protected]</td>
             <td class="puik-table__body__row__item puik-table__body__row__item--left">
                 <button class="puik-button puik-button--text puik-button--md" aria-label="Delete item">
                     <div class="puik-icon puik-button__right-icon" style="font-size: 1.25rem;">delete</div>
@@ -721,10 +724,10 @@ export const Expandable: StoryObj = {
                     <div class="puik-icon" style="font-size: 24px;">keyboard_arrow_down</div>
                 </div>
             </td>
-            <td class="puik-table__body__row__item puik-table__body__row__item--left">lastname2</td>
-            <td class="puik-table__body__row__item puik-table__body__row__item--left">firstname2</td>
-            <td class="puik-table__body__row__item puik-table__body__row__item--center">40</td>
-            <td class="puik-table__body__row__item puik-table__body__row__item--right">[email protected]</td>
+            <td class="puik-table__body__row__item puik-table__body__row__item--left puik-table__body__row__item--expand-row">lastname2</td>
+            <td class="puik-table__body__row__item puik-table__body__row__item--left puik-table__body__row__item--expand-row">firstname2</td>
+            <td class="puik-table__body__row__item puik-table__body__row__item--center puik-table__body__row__item--expand-row">40</td>
+            <td class="puik-table__body__row__item puik-table__body__row__item--right puik-table__body__row__item--expand-row">[email protected]</td>
             <td class="puik-table__body__row__item puik-table__body__row__item--left">
                 <button class="puik-button puik-button--text puik-button--md" aria-label="Delete item">
                     <div class="puik-icon puik-button__right-icon" style="font-size: 1.25rem;">delete</div>

diff --git a/packages/theme/src/table.scss b/packages/theme/src/table.scss
@@ -174,4 +174,8 @@
   .puik-table__head__row__item--right.puik-table__head__row__item--sortable {
     @apply pr-2;
   }
+
+  .puik-table__body__row__item--expand-row {
+    @apply cursor-pointer;
+  }
 }