From 65465bd3aa7497a21467286f5cd47e883056fce0 Mon Sep 17 00:00:00 2001
From: Matthias Goudjil <matthias.goudjil@prestashop.com>
Date: Fri, 24 Nov 2023 16:29:28 +0100
Subject: [PATCH 01/11] feat: [table] related #248 sortable feature (wip)

---
 packages/components/table/src/table.ts        |   1 +
 packages/components/table/src/table.vue       |  61 +++++-
 .../components/table/stories/table.stories.ts | 176 ++++++++++++++++++
 packages/theme/src/table.scss                 |   5 +
 4 files changed, 234 insertions(+), 9 deletions(-)

diff --git a/packages/components/table/src/table.ts b/packages/components/table/src/table.ts
index 12274792..d64259c2 100644
--- a/packages/components/table/src/table.ts
+++ b/packages/components/table/src/table.ts
@@ -8,6 +8,7 @@ export interface PuikTableHeader {
   size?: 'sm' | 'md' | 'lg'
   align?: 'left' | 'center' | 'right'
   width?: string
+  sortable?: boolean
 }
 
 export const tableProps = buildProps({
diff --git a/packages/components/table/src/table.vue b/packages/components/table/src/table.vue
index 396bf713..c343f859 100644
--- a/packages/components/table/src/table.vue
+++ b/packages/components/table/src/table.vue
@@ -56,18 +56,32 @@
             ]"
             :style="{ minWidth: header.width, width: header.width }"
           >
-            <slot
-              :name="`header-${header.value}`"
-              :header="header"
-              :index="index"
-            >
-              {{ header.text }}
-            </slot>
+            <div class="puik-table__head__row__item__content">
+              <span>
+                <slot
+                  :name="`header-${header.value}`"
+                  :header="header"
+                  :index="index"
+                >
+                  {{ header?.text || header?.value }}
+                </slot>
+              </span>
+              <PuikButton
+                v-if="header.sortable"
+                :right-icon="sortIcon[header.value] ?? 'unfold_more'"
+                variant="primary-reverse"
+                size="sm"
+                @click="sortTable(header.value)"
+              />
+            </div>
           </th>
         </tr>
       </thead>
       <tbody class="puik-table__body">
-        <template v-for="(item, rowIndex) in items" :key="`row-${rowIndex}`">
+        <template
+          v-for="(item, rowIndex) in sortedItems"
+          :key="`row-${rowIndex}`"
+        >
           <tr class="puik-table__body__row">
             <td
               v-if="selectable || expandable"
@@ -170,6 +184,7 @@
 import { computed, ref, watch } from 'vue'
 import { useLocale } from '@puik/hooks'
 import PuikCheckbox from '../../checkbox/src/checkbox.vue'
+import PuikButton from '../../button/src/button.vue'
 import PuikIcon from '../../icon/src/icon.vue'
 import { tableProps } from './table'
 defineOptions({
@@ -186,8 +201,36 @@ const { t } = useLocale()
 const checked = ref<number[]>(props.selection)
 const expandedRows = ref<number[]>([])
 const ScrollBarPosition = ref<string>('left')
-let lastScrollLeft = 0
 
+const sortOrder = ref([])
+const sortIcon = ref({})
+const sortedItems = ref([...props.items])
+const currentSortCol = ref('')
+
+const sortTable = (headerCol: string) => {
+  for (const col in sortIcon.value) {
+    sortIcon.value[col] = 'unfold_more'
+  }
+  if (sortOrder.value[headerCol]) {
+    sortOrder.value[headerCol] =
+      sortOrder.value[headerCol] === 'ASC' && currentSortCol.value === headerCol
+        ? 'DESC'
+        : 'ASC'
+    sortIcon.value[headerCol] =
+      sortOrder.value[headerCol] === 'ASC' ? 'expand_more' : 'expand_less'
+  } else {
+    sortOrder.value[headerCol] = 'ASC'
+    sortIcon.value[headerCol] = 'expand_more'
+  }
+  const order = sortOrder.value[headerCol] === 'ASC' ? 1 : -1
+  sortedItems.value.sort(
+    (a, b) => order * (a[headerCol] < b[headerCol] ? -1 : 1)
+  )
+  currentSortCol.value = headerCol
+  return sortedItems.value
+}
+
+let lastScrollLeft = 0
 const getScrollBarPosition = async (event: Event) => {
   const target = event.target as HTMLElement
   if (target.scrollLeft === 0) {
diff --git a/packages/components/table/stories/table.stories.ts b/packages/components/table/stories/table.stories.ts
index 9052f774..5e346096 100644
--- a/packages/components/table/stories/table.stories.ts
+++ b/packages/components/table/stories/table.stories.ts
@@ -1,5 +1,6 @@
 import { ref } from 'vue'
 import PuikButton from '../../button/src/button.vue'
+import PuikIcon from '../../icon/src/icon.vue'
 import PuikTable from './../src/table.vue'
 import type { PuikTableHeader } from '../src/table'
 import type { Meta, StoryFn, StoryObj, Args } from '@storybook/vue3'
@@ -51,6 +52,7 @@ export default {
     size: 'sm' | 'md' | 'lg' | undefined
     width: string | undefined
     align: 'left' | 'center' | 'right' | undefined
+    sortable: boolean | undefined
   }
   `,
         },
@@ -239,6 +241,60 @@ const Template: StoryFn = (args: Args) => ({
   </puik-table>`,
 })
 
+const SortableTemplate: StoryFn = (args: Args) => ({
+  components: {
+    PuikTable,
+    PuikButton,
+    PuikIcon,
+  },
+  setup() {
+    const selection = ref([])
+    const items = generateData()
+    const headers: PuikTableHeader[] = [
+      {
+        text: 'Nom',
+        value: 'lastname',
+        size: 'md',
+        sortable: true,
+      },
+      {
+        text: 'Prénom',
+        value: 'firstname',
+        size: 'md',
+        sortable: true,
+      },
+      {
+        text: 'Age',
+        value: 'age',
+        size: 'sm',
+        align: 'center',
+        sortable: true,
+      },
+      {
+        text: 'Email',
+        value: 'email',
+        align: 'right',
+      },
+      {
+        value: 'actions',
+        size: 'sm',
+      },
+    ]
+    return { args, headers, items, selection }
+  },
+  template: `<puik-table v-model:selection="selection" :headers="headers" :items="items" v-bind="args">
+    <template #item-value1="{ item }">
+    </template>
+    <template #item-actions="{ item }">
+      <puik-button
+        variant="text"
+        right-icon="delete"
+        aria-label="Delete item"
+      ></puik-button>
+    </template>
+  </puik-table>`,
+})
+
 export const Default: StoryObj = {
   render: Template,
   args: {},
@@ -667,6 +723,126 @@ export const Expandable: StoryObj = {
   },
 }
 
+export const Sortable: StoryObj = {
+  render: SortableTemplate,
+  args: {},
+  parameters: {
+    docs: {
+      source: {
+        code: `
+  <!--VueJS Snippet-->
+  const headers: PuikTableHeader[] = [
+    {
+      text: 'Nom',
+      value: 'lastname',
+      size: 'md',
+      sortable: true,
+    },
+    {
+      text: 'Prénom',
+      value: 'firstname',
+      size: 'md',
+      sortable: true,
+    },
+    {
+      text: 'Age',
+      value: 'age',
+      size: 'sm',
+      align: 'center',
+      sortable: true,
+    },
+    {
+      text: 'Email',
+      value: 'email',
+      align: 'right',
+    },
+    {
+      value: 'actions',
+      size: 'sm',
+    },
+  ]
+
+  <puik-table :expandable="true">
+    <template #item-actions="{ item }">
+      <puik-button
+        variant="text"
+        right-icon="delete"
+        aria-label="Delete item"
+      ></puik-button>
+    </template>
+  </puik-table>
+
+  <!--HTML/CSS Snippet-->
+  <table class="puik-table">
+    <thead class="puik-table__head">
+        <tr class="puik-table__head__row">
+            <th class="puik-table__head__row__item puik-table__head__row__item--expandable"></th>
+            <th class="puik-table__head__row__item puik-table__head__row__item--left puik-table__head__row__item--md">Nom</th>
+            <th class="puik-table__head__row__item puik-table__head__row__item--left puik-table__head__row__item--md">Prénom</th>
+            <th class="puik-table__head__row__item puik-table__head__row__item--center puik-table__head__row__item--sm">Age</th>
+            <th class="puik-table__head__row__item puik-table__head__row__item--right">Email</th>
+            <th class="puik-table__head__row__item puik-table__head__row__item--left puik-table__head__row__item--sm"></th>
+        </tr>
+    </thead>
+    <tbody class="puik-table__body">
+        <tr class="puik-table__body__row">
+            <td class="puik-table__body__row__item puik-table__body__row__item--selection">
+                <div class="puik-table__body__row__item__container">  
+                    <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">lastname0.firstname0@email.com</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>
+                </button>
+            </td>
+        </tr>
+      
+        <tr class="puik-table__body__row">
+            <td class="puik-table__body__row__item puik-table__body__row__item--selection">
+                <div class="puik-table__body__row__item__container">
+                    <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">lastname1.firstname1@email.com</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>
+                </button>
+            </td>
+        </tr>
+        <tr class="puik-table__body__row">
+            <td class="puik-table__body__row__item puik-table__body__row__item--selection">
+                <div class="puik-table__body__row__item__container">
+                    <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">lastname2.firstname2@email.com</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>
+                </button>
+            </td>
+        </tr>
+    </tbody>
+</table>
+        `,
+        language: 'html',
+      },
+    },
+  },
+}
+
 export const FullWidth: StoryObj = {
   render: Template,
   args: {
diff --git a/packages/theme/src/table.scss b/packages/theme/src/table.scss
index e22be884..59a51c45 100644
--- a/packages/theme/src/table.scss
+++ b/packages/theme/src/table.scss
@@ -129,6 +129,7 @@
   .puik-table__body__row__item--expanded {
     @apply p-0;
   }
+
   .puik-table__body__row__item__container {
     @apply flex items-center space-x-3;
     .puik-icon {
@@ -138,4 +139,8 @@
       @apply -rotate-180 transform transition-transform duration-100 ease-in-out;
     }
   }
+
+  .puik-table__head__row__item__content {
+    @apply flex items-center space-x-1;
+  }
 }

From 3f8a62f894c2c1ca2834864e1c4e2e8ad71e7ed2 Mon Sep 17 00:00:00 2001
From: Matthias Goudjil <matthias.goudjil@prestashop.com>
Date: Mon, 27 Nov 2023 09:49:15 +0100
Subject: [PATCH 02/11] feat: [table] related #248 - add enums (sorting
 feature)

---
 packages/components/table/src/table.ts  | 17 ++++++
 packages/components/table/src/table.vue | 74 ++++++++++++++++---------
 2 files changed, 65 insertions(+), 26 deletions(-)

diff --git a/packages/components/table/src/table.ts b/packages/components/table/src/table.ts
index d64259c2..d75e415d 100644
--- a/packages/components/table/src/table.ts
+++ b/packages/components/table/src/table.ts
@@ -11,6 +11,23 @@ export interface PuikTableHeader {
   sortable?: boolean
 }
 
+export enum PuikTableSortOrder {
+  ASC = 'ASC',
+  DESC = 'DESC',
+}
+
+export enum PuikTableSortIcon {
+  DEFAULT = 'unfold_more',
+  ASC = 'expand_more',
+  DESC = 'expand_less',
+}
+
+export enum PuikTableScrollBarPosistion {
+  LEFT = 'left',
+  RIGHT = 'right',
+  ISSCROLLING = 'isScrolling',
+}
+
 export const tableProps = buildProps({
   headers: {
     type: Array as PropType<PuikTableHeader[]>,
diff --git a/packages/components/table/src/table.vue b/packages/components/table/src/table.vue
index c343f859..b6df817c 100644
--- a/packages/components/table/src/table.vue
+++ b/packages/components/table/src/table.vue
@@ -11,8 +11,9 @@
               {
                 'puik-table__head__row__item--sticky-scroll':
                   stickyFirstCol &&
-                  (ScrollBarPosition === 'isScrolling' ||
-                    ScrollBarPosition === 'right'),
+                  (ScrollBarPosition ===
+                    PuikTableScrollBarPosistion.ISSCROLLING ||
+                    ScrollBarPosition === PuikTableScrollBarPosistion.RIGHT),
               },
               { 'puik-table__head__row__item--selection': selectable },
               { 'puik-table__head__row__item--expandable': expandable },
@@ -43,15 +44,18 @@
               { 'puik-table__head__row__item--sticky': isSticky(index) },
               {
                 'puik-table__head__row__item--sticky-scroll':
-                  isSticky(index) && ScrollBarPosition === 'isScrolling',
+                  isSticky(index) &&
+                  ScrollBarPosition === PuikTableScrollBarPosistion.ISSCROLLING,
               },
               {
                 'puik-table__head__row__item--sticky-left':
-                  isSticky(index) && ScrollBarPosition === 'left',
+                  isSticky(index) &&
+                  ScrollBarPosition === PuikTableScrollBarPosistion.LEFT,
               },
               {
                 'puik-table__head__row__item--sticky-right':
-                  isSticky(index) && ScrollBarPosition === 'right',
+                  isSticky(index) &&
+                  ScrollBarPosition === PuikTableScrollBarPosistion.RIGHT,
               },
             ]"
             :style="{ minWidth: header.width, width: header.width }"
@@ -68,7 +72,9 @@
               </span>
               <PuikButton
                 v-if="header.sortable"
-                :right-icon="sortIcon[header.value] ?? 'unfold_more'"
+                :right-icon="
+                  sortIcon[header.value] ?? PuikTableSortIcon.DEFAULT
+                "
                 variant="primary-reverse"
                 size="sm"
                 @click="sortTable(header.value)"
@@ -92,15 +98,19 @@
                 },
                 {
                   'puik-table__body__row__item--sticky-scroll':
-                    stickyFirstCol && ScrollBarPosition === 'isScrolling',
+                    stickyFirstCol &&
+                    ScrollBarPosition ===
+                      PuikTableScrollBarPosistion.ISSCROLLING,
                 },
                 {
                   'puik-table__body__row__item--sticky-left':
-                    stickyFirstCol && ScrollBarPosition === 'left',
+                    stickyFirstCol &&
+                    ScrollBarPosition === PuikTableScrollBarPosistion.LEFT,
                 },
                 {
                   'puik-table__body__row__item--sticky-right':
-                    stickyFirstCol && ScrollBarPosition === 'right',
+                    stickyFirstCol &&
+                    ScrollBarPosition === PuikTableScrollBarPosistion.RIGHT,
                 },
               ]"
             >
@@ -135,15 +145,19 @@
                 { 'puik-table__body__row__item--sticky': isSticky(colIndex) },
                 {
                   'puik-table__body__row__item--sticky-scroll':
-                    isSticky(colIndex) && ScrollBarPosition == 'isScrolling',
+                    isSticky(colIndex) &&
+                    ScrollBarPosition ==
+                      PuikTableScrollBarPosistion.ISSCROLLING,
                 },
                 {
                   'puik-table__body__row__item--sticky-left':
-                    isSticky(colIndex) && ScrollBarPosition == 'left',
+                    isSticky(colIndex) &&
+                    ScrollBarPosition == PuikTableScrollBarPosistion.LEFT,
                 },
                 {
                   'puik-table__body__row__item--sticky-right':
-                    isSticky(colIndex) && ScrollBarPosition == 'right',
+                    isSticky(colIndex) &&
+                    ScrollBarPosition == PuikTableScrollBarPosistion.RIGHT,
                 },
               ]"
             >
@@ -186,7 +200,12 @@ import { useLocale } from '@puik/hooks'
 import PuikCheckbox from '../../checkbox/src/checkbox.vue'
 import PuikButton from '../../button/src/button.vue'
 import PuikIcon from '../../icon/src/icon.vue'
-import { tableProps } from './table'
+import {
+  tableProps,
+  PuikTableSortOrder,
+  PuikTableSortIcon,
+  PuikTableScrollBarPosistion,
+} from './table'
 defineOptions({
   name: 'PuikTable',
 })
@@ -209,20 +228,23 @@ const currentSortCol = ref('')
 
 const sortTable = (headerCol: string) => {
   for (const col in sortIcon.value) {
-    sortIcon.value[col] = 'unfold_more'
+    sortIcon.value[col] = PuikTableSortIcon.DEFAULT
   }
   if (sortOrder.value[headerCol]) {
     sortOrder.value[headerCol] =
-      sortOrder.value[headerCol] === 'ASC' && currentSortCol.value === headerCol
-        ? 'DESC'
-        : 'ASC'
+      sortOrder.value[headerCol] === PuikTableSortOrder.ASC &&
+      currentSortCol.value === headerCol
+        ? PuikTableSortOrder.DESC
+        : PuikTableSortOrder.ASC
     sortIcon.value[headerCol] =
-      sortOrder.value[headerCol] === 'ASC' ? 'expand_more' : 'expand_less'
+      sortOrder.value[headerCol] === PuikTableSortOrder.ASC
+        ? PuikTableSortIcon.ASC
+        : PuikTableSortIcon.DESC
   } else {
-    sortOrder.value[headerCol] = 'ASC'
-    sortIcon.value[headerCol] = 'expand_more'
+    sortOrder.value[headerCol] = PuikTableSortOrder.ASC
+    sortIcon.value[headerCol] = PuikTableSortIcon.ASC
   }
-  const order = sortOrder.value[headerCol] === 'ASC' ? 1 : -1
+  const order = sortOrder.value[headerCol] === PuikTableSortOrder.ASC ? 1 : -1
   sortedItems.value.sort(
     (a, b) => order * (a[headerCol] < b[headerCol] ? -1 : 1)
   )
@@ -230,20 +252,20 @@ const sortTable = (headerCol: string) => {
   return sortedItems.value
 }
 
-let lastScrollLeft = 0
+const lastScrollLeft = ref(0)
 const getScrollBarPosition = async (event: Event) => {
   const target = event.target as HTMLElement
   if (target.scrollLeft === 0) {
-    ScrollBarPosition.value = 'left'
+    ScrollBarPosition.value = PuikTableScrollBarPosistion.LEFT
   } else if (
     Math.abs(target.scrollLeft + target.offsetWidth - target.scrollWidth) < 10
   ) {
-    ScrollBarPosition.value = 'right'
+    ScrollBarPosition.value = PuikTableScrollBarPosistion.RIGHT
   } else {
-    ScrollBarPosition.value = 'isScrolling'
+    ScrollBarPosition.value = PuikTableScrollBarPosistion.ISSCROLLING
   }
 
-  lastScrollLeft = target.scrollLeft
+  lastScrollLeft.value = target.scrollLeft
 }
 
 const isSticky = (

From 6189f7b7f65f31bf524915ab67bdc08297fdf144 Mon Sep 17 00:00:00 2001
From: Matthias Goudjil <matthias.goudjil@prestashop.com>
Date: Mon, 27 Nov 2023 14:44:02 +0100
Subject: [PATCH 03/11] test: [table] related #248 - fix tests

---
 packages/components/table/test/table.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/table/test/table.spec.ts b/packages/components/table/test/table.spec.ts
index 1c2a7ac9..8510e069 100644
--- a/packages/components/table/test/table.spec.ts
+++ b/packages/components/table/test/table.spec.ts
@@ -85,7 +85,7 @@ describe('Table tests', () => {
   it('should display headers without text', () => {
     const headers: PuikTableHeader[] = [{ value: 'firstname' }]
     factory({ headers })
-    expect(getHeaders()[0].text()).toBe('')
+    expect(getHeaders()[0].text()).toBeUndefined
   })
   it('should display 5 items', () => {
     const headers: PuikTableHeader[] = [{ value: 'firstname' }]

From 453cf29f3a5556ff5b13b0364809c08f1d9d93b4 Mon Sep 17 00:00:00 2001
From: Matthias Goudjil <matthias.goudjil@prestashop.com>
Date: Mon, 27 Nov 2023 18:55:35 +0100
Subject: [PATCH 04/11] feat: [table] - related #248 - sort event (wip)

---
 packages/components/table/src/table.ts             | 7 +++++++
 packages/components/table/src/table.vue            | 5 +++++
 packages/components/table/stories/table.stories.ts | 9 +++++++++
 3 files changed, 21 insertions(+)

diff --git a/packages/components/table/src/table.ts b/packages/components/table/src/table.ts
index d75e415d..0cdde0e0 100644
--- a/packages/components/table/src/table.ts
+++ b/packages/components/table/src/table.ts
@@ -11,6 +11,13 @@ export interface PuikTableHeader {
   sortable?: boolean
 }
 
+// export type ServerOption = {
+//   page: number
+//   rowsPerPage: number
+//   sortBy?: string | string[]
+//   sortType?: PuikTableSortOrder | PuikTableSortOrder[]
+// }
+
 export enum PuikTableSortOrder {
   ASC = 'ASC',
   DESC = 'DESC',
diff --git a/packages/components/table/src/table.vue b/packages/components/table/src/table.vue
index b6df817c..cb26c341 100644
--- a/packages/components/table/src/table.vue
+++ b/packages/components/table/src/table.vue
@@ -206,15 +206,19 @@ import {
   PuikTableSortIcon,
   PuikTableScrollBarPosistion,
 } from './table'
+// import type { ServerOption } from './table'
 defineOptions({
   name: 'PuikTable',
 })
 
 const props = defineProps(tableProps)
+
 const emit = defineEmits<{
   (e: 'select', index: number): void
   (e: 'select:all'): void
   (e: 'update:selection', value: number[]): void
+  // (e: 'update:serverOptions', value: ServerOption): void
+  (e: 'sortColumn', column: string): void
 }>()
 const { t } = useLocale()
 const checked = ref<number[]>(props.selection)
@@ -227,6 +231,7 @@ const sortedItems = ref([...props.items])
 const currentSortCol = ref('')
 
 const sortTable = (headerCol: string) => {
+  emit('sortColumn', headerCol)
   for (const col in sortIcon.value) {
     sortIcon.value[col] = PuikTableSortIcon.DEFAULT
   }
diff --git a/packages/components/table/stories/table.stories.ts b/packages/components/table/stories/table.stories.ts
index 5e346096..f5beb3a8 100644
--- a/packages/components/table/stories/table.stories.ts
+++ b/packages/components/table/stories/table.stories.ts
@@ -181,6 +181,15 @@ export default {
         },
       },
     },
+    sortColumn: {
+      control: 'none',
+      description: 'Event emitted when sorting a column',
+      table: {
+        type: {
+          summary: 'string',
+        },
+      },
+    },
   },
   args: {
     selectable: false,

From 45997507efe21df7b6461cee257c95b037081edd Mon Sep 17 00:00:00 2001
From: Matthias Goudjil <matthias.goudjil@prestashop.com>
Date: Tue, 28 Nov 2023 09:04:40 +0100
Subject: [PATCH 05/11] feat: [table] related #248 - server sorting (wip)

---
 packages/components/table/src/table.ts  | 12 ++++++------
 packages/components/table/src/table.vue | 13 ++++++++-----
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/packages/components/table/src/table.ts b/packages/components/table/src/table.ts
index 0cdde0e0..a5005f6a 100644
--- a/packages/components/table/src/table.ts
+++ b/packages/components/table/src/table.ts
@@ -11,12 +11,12 @@ export interface PuikTableHeader {
   sortable?: boolean
 }
 
-// export type ServerOption = {
-//   page: number
-//   rowsPerPage: number
-//   sortBy?: string | string[]
-//   sortType?: PuikTableSortOrder | PuikTableSortOrder[]
-// }
+export type ServerSortOption = {
+  // page: number
+  // rowsPerPage: number
+  sortBy?: string
+  sortOrder?: PuikTableSortOrder
+}
 
 export enum PuikTableSortOrder {
   ASC = 'ASC',
diff --git a/packages/components/table/src/table.vue b/packages/components/table/src/table.vue
index cb26c341..192bb6ff 100644
--- a/packages/components/table/src/table.vue
+++ b/packages/components/table/src/table.vue
@@ -206,7 +206,7 @@ import {
   PuikTableSortIcon,
   PuikTableScrollBarPosistion,
 } from './table'
-// import type { ServerOption } from './table'
+import type { ServerSortOption } from './table'
 defineOptions({
   name: 'PuikTable',
 })
@@ -218,20 +218,19 @@ const emit = defineEmits<{
   (e: 'select:all'): void
   (e: 'update:selection', value: number[]): void
   // (e: 'update:serverOptions', value: ServerOption): void
-  (e: 'sortColumn', column: string): void
+  (e: 'sortColumn', column: ServerSortOption): void
 }>()
 const { t } = useLocale()
 const checked = ref<number[]>(props.selection)
 const expandedRows = ref<number[]>([])
 const ScrollBarPosition = ref<string>('left')
-
+const lastScrollLeft = ref(0)
 const sortOrder = ref([])
 const sortIcon = ref({})
 const sortedItems = ref([...props.items])
 const currentSortCol = ref('')
 
 const sortTable = (headerCol: string) => {
-  emit('sortColumn', headerCol)
   for (const col in sortIcon.value) {
     sortIcon.value[col] = PuikTableSortIcon.DEFAULT
   }
@@ -253,11 +252,15 @@ const sortTable = (headerCol: string) => {
   sortedItems.value.sort(
     (a, b) => order * (a[headerCol] < b[headerCol] ? -1 : 1)
   )
+  const options = {
+    sortBy: headerCol,
+    sortOrder: sortOrder.value[headerCol],
+  } as ServerSortOption
+  emit('sortColumn', options)
   currentSortCol.value = headerCol
   return sortedItems.value
 }
 
-const lastScrollLeft = ref(0)
 const getScrollBarPosition = async (event: Event) => {
   const target = event.target as HTMLElement
   if (target.scrollLeft === 0) {

From 89522924c2812c340512b60b8f0bb4263a917c85 Mon Sep 17 00:00:00 2001
From: Matthias Goudjil <matthias.goudjil@prestashop.com>
Date: Wed, 29 Nov 2023 23:20:19 +0100
Subject: [PATCH 06/11] feat: [table] fix #248 -sorting feature- refacto &
 tests/docs updated

---
 packages/components/table/src/table.ts        |  9 +-
 packages/components/table/src/table.vue       | 96 ++++++++++++++-----
 .../components/table/stories/table.stories.ts | 12 ++-
 packages/components/table/test/table.spec.ts  | 21 +++-
 packages/theme/src/table.scss                 |  2 +-
 5 files changed, 111 insertions(+), 29 deletions(-)

diff --git a/packages/components/table/src/table.ts b/packages/components/table/src/table.ts
index a5005f6a..14b4761d 100644
--- a/packages/components/table/src/table.ts
+++ b/packages/components/table/src/table.ts
@@ -11,9 +11,7 @@ export interface PuikTableHeader {
   sortable?: boolean
 }
 
-export type ServerSortOption = {
-  // page: number
-  // rowsPerPage: number
+export type sortOption = {
   sortBy?: string
   sortOrder?: PuikTableSortOrder
 }
@@ -60,6 +58,11 @@ export const tableProps = buildProps({
     required: false,
     default: () => [],
   },
+  sortFromServer: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
   fullWidth: {
     type: Boolean,
     required: false,
diff --git a/packages/components/table/src/table.vue b/packages/components/table/src/table.vue
index 192bb6ff..a77d844f 100644
--- a/packages/components/table/src/table.vue
+++ b/packages/components/table/src/table.vue
@@ -84,10 +84,7 @@
         </tr>
       </thead>
       <tbody class="puik-table__body">
-        <template
-          v-for="(item, rowIndex) in sortedItems"
-          :key="`row-${rowIndex}`"
-        >
+        <template v-for="(item, rowIndex) in data" :key="`row-${rowIndex}`">
           <tr class="puik-table__body__row">
             <td
               v-if="selectable || expandable"
@@ -176,17 +173,63 @@
             class="puik-table__body__row--expanded"
           >
             <td
-              :colspan="headers.length"
-              class="puik-table__body__row__item--expanded"
+              v-if="stickyFirstCol"
+              :class="[
+                'puik-table__body__row__item puik-table__body__row__item--selection',
+                { 'puik-table__body__row__item--sticky': stickyFirstCol },
+                {
+                  'puik-table__body__row__item--sticky-scroll':
+                    stickyFirstCol &&
+                    ScrollBarPosition ==
+                      PuikTableScrollBarPosistion.ISSCROLLING,
+                },
+                {
+                  'puik-table__body__row__item--sticky-left':
+                    stickyFirstCol &&
+                    ScrollBarPosition == PuikTableScrollBarPosistion.LEFT,
+                },
+                {
+                  'puik-table__body__row__item--sticky-right':
+                    stickyFirstCol &&
+                    ScrollBarPosition == PuikTableScrollBarPosistion.RIGHT,
+                },
+              ]"
+            ></td>
+            <td
+              :colspan="
+                stickyFirstCol && stickyLastCol
+                  ? headers.length - 1
+                  : headers.length
+              "
+              class="puik-table__body__row__item puik-table__body__row__item--expanded"
             >
-              <slot
-                :name="`expanded-row-${rowIndex}`"
-                :item="item"
-                :index="rowIndex"
-              >
+              <slot name="expanded-row" :item="item" :index="rowIndex">
                 {{ item }}
               </slot>
             </td>
+            <td
+              v-if="stickyLastCol"
+              :class="[
+                'puik-table__body__row__item puik-table__body__row__item--selection',
+                { 'puik-table__body__row__item--sticky': stickyLastCol },
+                {
+                  'puik-table__body__row__item--sticky-scroll':
+                    stickyLastCol &&
+                    ScrollBarPosition ==
+                      PuikTableScrollBarPosistion.ISSCROLLING,
+                },
+                {
+                  'puik-table__body__row__item--sticky-left':
+                    stickyLastCol &&
+                    ScrollBarPosition == PuikTableScrollBarPosistion.LEFT,
+                },
+                {
+                  'puik-table__body__row__item--sticky-right':
+                    stickyLastCol &&
+                    ScrollBarPosition == PuikTableScrollBarPosistion.RIGHT,
+                },
+              ]"
+            ></td>
           </tr>
         </template>
       </tbody>
@@ -206,7 +249,7 @@ import {
   PuikTableSortIcon,
   PuikTableScrollBarPosistion,
 } from './table'
-import type { ServerSortOption } from './table'
+import type { sortOption } from './table'
 defineOptions({
   name: 'PuikTable',
 })
@@ -217,8 +260,7 @@ const emit = defineEmits<{
   (e: 'select', index: number): void
   (e: 'select:all'): void
   (e: 'update:selection', value: number[]): void
-  // (e: 'update:serverOptions', value: ServerOption): void
-  (e: 'sortColumn', column: ServerSortOption): void
+  (e: 'sortColumn', column: sortOption): void
 }>()
 const { t } = useLocale()
 const checked = ref<number[]>(props.selection)
@@ -227,13 +269,15 @@ const ScrollBarPosition = ref<string>('left')
 const lastScrollLeft = ref(0)
 const sortOrder = ref([])
 const sortIcon = ref({})
-const sortedItems = ref([...props.items])
+const data = ref([...props.items])
 const currentSortCol = ref('')
 
-const sortTable = (headerCol: string) => {
+const resetSortIcons = () => {
   for (const col in sortIcon.value) {
     sortIcon.value[col] = PuikTableSortIcon.DEFAULT
   }
+}
+const setSortOrderAndIcon = (headerCol: string) => {
   if (sortOrder.value[headerCol]) {
     sortOrder.value[headerCol] =
       sortOrder.value[headerCol] === PuikTableSortOrder.ASC &&
@@ -248,17 +292,25 @@ const sortTable = (headerCol: string) => {
     sortOrder.value[headerCol] = PuikTableSortOrder.ASC
     sortIcon.value[headerCol] = PuikTableSortIcon.ASC
   }
+}
+const sortDataLocally = (headerCol: string) => {
   const order = sortOrder.value[headerCol] === PuikTableSortOrder.ASC ? 1 : -1
-  sortedItems.value.sort(
-    (a, b) => order * (a[headerCol] < b[headerCol] ? -1 : 1)
-  )
+  data.value.sort((a, b) => order * (a[headerCol] < b[headerCol] ? -1 : 1))
+}
+const sortTable = (headerCol: string) => {
+  if (!props.sortFromServer) {
+    sortDataLocally(headerCol)
+  }
+  resetSortIcons()
+  setSortOrderAndIcon(headerCol)
+
   const options = {
     sortBy: headerCol,
     sortOrder: sortOrder.value[headerCol],
-  } as ServerSortOption
+  } as sortOption
   emit('sortColumn', options)
   currentSortCol.value = headerCol
-  return sortedItems.value
+  return data.value
 }
 
 const getScrollBarPosition = async (event: Event) => {
@@ -266,7 +318,7 @@ const getScrollBarPosition = async (event: Event) => {
   if (target.scrollLeft === 0) {
     ScrollBarPosition.value = PuikTableScrollBarPosistion.LEFT
   } else if (
-    Math.abs(target.scrollLeft + target.offsetWidth - target.scrollWidth) < 10
+    Math.abs(target.scrollLeft + target.offsetWidth - target.scrollWidth) < 20
   ) {
     ScrollBarPosition.value = PuikTableScrollBarPosistion.RIGHT
   } else {
diff --git a/packages/components/table/stories/table.stories.ts b/packages/components/table/stories/table.stories.ts
index f5beb3a8..8dbf3bab 100644
--- a/packages/components/table/stories/table.stories.ts
+++ b/packages/components/table/stories/table.stories.ts
@@ -144,7 +144,7 @@ export default {
         },
       },
     },
-    '`expanded-row-${rowIndex}`': {
+    'expanded-row': {
       control: 'none',
       description: 'slot for expanded row content',
       table: {
@@ -186,7 +186,15 @@ export default {
       description: 'Event emitted when sorting a column',
       table: {
         type: {
-          summary: 'string',
+          summary: 'sortOption',
+          detail: `
+import type { sortOption } from '@prestashopcorp/puik/es/components/table/src/table'
+
+type sortOption = {
+  sortBy?: string
+  sortOrder?: PuikTableSortOrder
+}
+`,
         },
       },
     },
diff --git a/packages/components/table/test/table.spec.ts b/packages/components/table/test/table.spec.ts
index 8510e069..d4f02477 100644
--- a/packages/components/table/test/table.spec.ts
+++ b/packages/components/table/test/table.spec.ts
@@ -3,8 +3,12 @@ import { describe, it, expect } from 'vitest'
 import { faker } from '@faker-js/faker'
 import { locales } from '@puik/locale'
 import PuikTable from '../src/table.vue'
+import {
+  PuikTableSortOrder,
+  type PuikTableHeader,
+  type sortOption,
+} from '../src/table'
 import type { MountingOptions, VueWrapper } from '@vue/test-utils'
-import type { PuikTableHeader } from '../src/table'
 
 const defaultItems = Array(5)
   .fill(null)
@@ -314,4 +318,19 @@ describe('Table tests', () => {
       'puik-table__head__row__item--expandable'
     )
   })
+
+  it('should emit sortColum event', async () => {
+    const headers: PuikTableHeader[] = [{ value: 'firstname', sortable: true }]
+    factory({ headers })
+    const header = getHeaders()[0]
+    const SortButton = header.find('.puik-button')
+    const payload: sortOption = {
+      sortBy: 'firstname',
+      sortOrder: PuikTableSortOrder.ASC,
+    }
+    expect(SortButton.classes()).toContain('puik-button')
+    await SortButton.trigger('click')
+    expect(wrapper.emitted('sortColumn')).toBeTruthy()
+    expect(wrapper.emitted('sortColumn')?.[0]?.[0]).toStrictEqual(payload)
+  })
 })
diff --git a/packages/theme/src/table.scss b/packages/theme/src/table.scss
index 59a51c45..06374669 100644
--- a/packages/theme/src/table.scss
+++ b/packages/theme/src/table.scss
@@ -79,7 +79,7 @@
   tr {
     .puik-table__head__row__item--sticky,
     .puik-table__body__row__item--sticky {
-      @apply sticky bg-white;
+      @apply sticky bg-white z-10;
     }
 
     .puik-table__head__row__item--sticky-scroll,

From be75883a34ab89985a027c8fcdfb7e12a13b58ac Mon Sep 17 00:00:00 2001
From: Matthias Goudjil <matthias.goudjil@prestashop.com>
Date: Mon, 4 Dec 2023 14:32:06 +0100
Subject: [PATCH 07/11] fix: [table] fix #239 - fix align content bugs for
 cells

---
 packages/components/table/src/table.vue | 58 ++++++++++++++-----------
 packages/theme/src/table.scss           | 43 +++++++++++++++---
 2 files changed, 69 insertions(+), 32 deletions(-)

diff --git a/packages/components/table/src/table.vue b/packages/components/table/src/table.vue
index a77d844f..b7f64b1b 100644
--- a/packages/components/table/src/table.vue
+++ b/packages/components/table/src/table.vue
@@ -60,25 +60,27 @@
             ]"
             :style="{ minWidth: header.width, width: header.width }"
           >
-            <div class="puik-table__head__row__item__content">
-              <span>
-                <slot
-                  :name="`header-${header.value}`"
-                  :header="header"
-                  :index="index"
-                >
-                  {{ header?.text || header?.value }}
-                </slot>
-              </span>
-              <PuikButton
-                v-if="header.sortable"
-                :right-icon="
-                  sortIcon[header.value] ?? PuikTableSortIcon.DEFAULT
-                "
-                variant="primary-reverse"
-                size="sm"
-                @click="sortTable(header.value)"
-              />
+            <div class="puik-table__head__row__item__container">
+              <div class="puik-table__head__row__item__content">
+                <span>
+                  <slot
+                    :name="`header-${header.value}`"
+                    :header="header"
+                    :index="index"
+                  >
+                    {{ header?.text || header?.value }}
+                  </slot>
+                </span>
+                <PuikButton
+                  v-if="header.sortable"
+                  :right-icon="
+                    sortIcon[header.value] ?? PuikTableSortIcon.DEFAULT
+                  "
+                  variant="primary-reverse"
+                  size="sm"
+                  @click="sortTable(header.value)"
+                />
+              </div>
             </div>
           </th>
         </tr>
@@ -158,13 +160,17 @@
                 },
               ]"
             >
-              <slot
-                :name="`item-${header.value}`"
-                :item="item"
-                :index="rowIndex"
-              >
-                {{ item[header.value] }}
-              </slot>
+              <div class="puik-table__body__row__item__container">
+                <div class="puik-table__body__row__item__content">
+                  <slot
+                    :name="`item-${header.value}`"
+                    :item="item"
+                    :index="rowIndex"
+                  >
+                    {{ item[header.value] }}
+                  </slot>
+                </div>
+              </div>
             </td>
           </tr>
           <tr
diff --git a/packages/theme/src/table.scss b/packages/theme/src/table.scss
index 06374669..4e86ca98 100644
--- a/packages/theme/src/table.scss
+++ b/packages/theme/src/table.scss
@@ -30,15 +30,42 @@
     }
   }
 
-  @mixin puik-table-text-align() {
+  @mixin puik-table-align() {
+    > .puik-table__head__row__item__container,
+    .puik-table__body__row__item__container {
+      @apply flex;
+    }
     &--left {
-      @apply text-left;
+      > .puik-table__head__row__item__container,
+      .puik-table__body__row__item__container {
+        @apply justify-start;
+      }
+      > .puik-table__head__row__item__content,
+      .puik-table__body__row__item__content {
+        @apply text-left;
+      }
     }
     &--center {
-      @apply text-center;
+      > .puik-table__head__row__item__container,
+      .puik-table__body__row__item__container {
+        @apply flex;
+        @apply justify-center;
+      }
+      > .puik-table__head__row__item__content,
+      .puik-table__body__row__item__content {
+        @apply text-center;
+      }
     }
     &--right {
-      @apply text-right;
+      > .puik-table__head__row__item__container,
+      .puik-table__body__row__item__container {
+        @apply flex;
+        @apply justify-end;
+      }
+      > .puik-table__head__row__item__content,
+      .puik-table__body__row__item__content {
+        @apply text-right;
+      }
     }
   }
 
@@ -51,7 +78,7 @@
         @extend .puik-body-small;
         @apply font-normal uppercase text-primary-600;
         @include puik-table-item();
-        @include puik-table-text-align();
+        @include puik-table-align();
       }
     }
   }
@@ -71,7 +98,7 @@
         @extend .puik-body-default;
         @apply text-primary-800;
         @include puik-table-item();
-        @include puik-table-text-align();
+        @include puik-table-align();
       }
     }
   }
@@ -143,4 +170,8 @@
   .puik-table__head__row__item__content {
     @apply flex items-center space-x-1;
   }
+
+  .puik-table__head__row__item--right {
+    @apply pr-2;
+  }
 }

From e9496c5b49304e2f94cdba98cbda356c49dbb8f5 Mon Sep 17 00:00:00 2001
From: Matthias Goudjil <matthias.goudjil@prestashop.com>
Date: Mon, 4 Dec 2023 14:59:45 +0100
Subject: [PATCH 08/11] feat: [Table] - change enum convention (converting them
 to Camelcase)

---
 packages/components/table/src/table.ts  | 43 +++++++++--------
 packages/components/table/src/table.vue | 62 ++++++++++++-------------
 2 files changed, 52 insertions(+), 53 deletions(-)

diff --git a/packages/components/table/src/table.ts b/packages/components/table/src/table.ts
index 14b4761d..e773f799 100644
--- a/packages/components/table/src/table.ts
+++ b/packages/components/table/src/table.ts
@@ -2,35 +2,34 @@ import { buildProps } from '@puik/utils'
 import type { ExtractPropTypes, PropType } from 'vue'
 import type Table from './table.vue'
 
-export interface PuikTableHeader {
-  value: string
-  text?: string
-  size?: 'sm' | 'md' | 'lg'
-  align?: 'left' | 'center' | 'right'
-  width?: string
-  sortable?: boolean
-}
-
-export type sortOption = {
-  sortBy?: string
-  sortOrder?: PuikTableSortOrder
-}
-
 export enum PuikTableSortOrder {
-  ASC = 'ASC',
-  DESC = 'DESC',
+  Asc = 'ASC',
+  Desc = 'DESC',
 }
 
 export enum PuikTableSortIcon {
-  DEFAULT = 'unfold_more',
-  ASC = 'expand_more',
-  DESC = 'expand_less',
+  Default = 'unfold_more',
+  Asc = 'expand_more',
+  Desc = 'expand_less',
 }
 
 export enum PuikTableScrollBarPosistion {
-  LEFT = 'left',
-  RIGHT = 'right',
-  ISSCROLLING = 'isScrolling',
+  Left = 'left',
+  Right = 'right',
+  IsScrolling = 'isScrolling',
+}
+
+export type sortOption = {
+  sortBy?: string
+  sortOrder?: PuikTableSortOrder
+}
+export interface PuikTableHeader {
+  value: string
+  text?: string
+  size?: 'sm' | 'md' | 'lg'
+  align?: 'left' | 'center' | 'right'
+  width?: string
+  sortable?: boolean
 }
 
 export const tableProps = buildProps({
diff --git a/packages/components/table/src/table.vue b/packages/components/table/src/table.vue
index b7f64b1b..6a9006c2 100644
--- a/packages/components/table/src/table.vue
+++ b/packages/components/table/src/table.vue
@@ -12,8 +12,8 @@
                 'puik-table__head__row__item--sticky-scroll':
                   stickyFirstCol &&
                   (ScrollBarPosition ===
-                    PuikTableScrollBarPosistion.ISSCROLLING ||
-                    ScrollBarPosition === PuikTableScrollBarPosistion.RIGHT),
+                    PuikTableScrollBarPosistion.IsScrolling ||
+                    ScrollBarPosition === PuikTableScrollBarPosistion.Right),
               },
               { 'puik-table__head__row__item--selection': selectable },
               { 'puik-table__head__row__item--expandable': expandable },
@@ -45,17 +45,17 @@
               {
                 'puik-table__head__row__item--sticky-scroll':
                   isSticky(index) &&
-                  ScrollBarPosition === PuikTableScrollBarPosistion.ISSCROLLING,
+                  ScrollBarPosition === PuikTableScrollBarPosistion.IsScrolling,
               },
               {
                 'puik-table__head__row__item--sticky-left':
                   isSticky(index) &&
-                  ScrollBarPosition === PuikTableScrollBarPosistion.LEFT,
+                  ScrollBarPosition === PuikTableScrollBarPosistion.Left,
               },
               {
                 'puik-table__head__row__item--sticky-right':
                   isSticky(index) &&
-                  ScrollBarPosition === PuikTableScrollBarPosistion.RIGHT,
+                  ScrollBarPosition === PuikTableScrollBarPosistion.Right,
               },
             ]"
             :style="{ minWidth: header.width, width: header.width }"
@@ -74,7 +74,7 @@
                 <PuikButton
                   v-if="header.sortable"
                   :right-icon="
-                    sortIcon[header.value] ?? PuikTableSortIcon.DEFAULT
+                    sortIcon[header.value] ?? PuikTableSortIcon.Default
                   "
                   variant="primary-reverse"
                   size="sm"
@@ -99,17 +99,17 @@
                   'puik-table__body__row__item--sticky-scroll':
                     stickyFirstCol &&
                     ScrollBarPosition ===
-                      PuikTableScrollBarPosistion.ISSCROLLING,
+                      PuikTableScrollBarPosistion.IsScrolling,
                 },
                 {
                   'puik-table__body__row__item--sticky-left':
                     stickyFirstCol &&
-                    ScrollBarPosition === PuikTableScrollBarPosistion.LEFT,
+                    ScrollBarPosition === PuikTableScrollBarPosistion.Left,
                 },
                 {
                   'puik-table__body__row__item--sticky-right':
                     stickyFirstCol &&
-                    ScrollBarPosition === PuikTableScrollBarPosistion.RIGHT,
+                    ScrollBarPosition === PuikTableScrollBarPosistion.Right,
                 },
               ]"
             >
@@ -146,17 +146,17 @@
                   'puik-table__body__row__item--sticky-scroll':
                     isSticky(colIndex) &&
                     ScrollBarPosition ==
-                      PuikTableScrollBarPosistion.ISSCROLLING,
+                      PuikTableScrollBarPosistion.IsScrolling,
                 },
                 {
                   'puik-table__body__row__item--sticky-left':
                     isSticky(colIndex) &&
-                    ScrollBarPosition == PuikTableScrollBarPosistion.LEFT,
+                    ScrollBarPosition == PuikTableScrollBarPosistion.Left,
                 },
                 {
                   'puik-table__body__row__item--sticky-right':
                     isSticky(colIndex) &&
-                    ScrollBarPosition == PuikTableScrollBarPosistion.RIGHT,
+                    ScrollBarPosition == PuikTableScrollBarPosistion.Right,
                 },
               ]"
             >
@@ -187,17 +187,17 @@
                   'puik-table__body__row__item--sticky-scroll':
                     stickyFirstCol &&
                     ScrollBarPosition ==
-                      PuikTableScrollBarPosistion.ISSCROLLING,
+                      PuikTableScrollBarPosistion.IsScrolling,
                 },
                 {
                   'puik-table__body__row__item--sticky-left':
                     stickyFirstCol &&
-                    ScrollBarPosition == PuikTableScrollBarPosistion.LEFT,
+                    ScrollBarPosition == PuikTableScrollBarPosistion.Left,
                 },
                 {
                   'puik-table__body__row__item--sticky-right':
                     stickyFirstCol &&
-                    ScrollBarPosition == PuikTableScrollBarPosistion.RIGHT,
+                    ScrollBarPosition == PuikTableScrollBarPosistion.Right,
                 },
               ]"
             ></td>
@@ -222,17 +222,17 @@
                   'puik-table__body__row__item--sticky-scroll':
                     stickyLastCol &&
                     ScrollBarPosition ==
-                      PuikTableScrollBarPosistion.ISSCROLLING,
+                      PuikTableScrollBarPosistion.IsScrolling,
                 },
                 {
                   'puik-table__body__row__item--sticky-left':
                     stickyLastCol &&
-                    ScrollBarPosition == PuikTableScrollBarPosistion.LEFT,
+                    ScrollBarPosition == PuikTableScrollBarPosistion.Left,
                 },
                 {
                   'puik-table__body__row__item--sticky-right':
                     stickyLastCol &&
-                    ScrollBarPosition == PuikTableScrollBarPosistion.RIGHT,
+                    ScrollBarPosition == PuikTableScrollBarPosistion.Right,
                 },
               ]"
             ></td>
@@ -280,27 +280,27 @@ const currentSortCol = ref('')
 
 const resetSortIcons = () => {
   for (const col in sortIcon.value) {
-    sortIcon.value[col] = PuikTableSortIcon.DEFAULT
+    sortIcon.value[col] = PuikTableSortIcon.Default
   }
 }
 const setSortOrderAndIcon = (headerCol: string) => {
   if (sortOrder.value[headerCol]) {
     sortOrder.value[headerCol] =
-      sortOrder.value[headerCol] === PuikTableSortOrder.ASC &&
+      sortOrder.value[headerCol] === PuikTableSortOrder.Asc &&
       currentSortCol.value === headerCol
-        ? PuikTableSortOrder.DESC
-        : PuikTableSortOrder.ASC
+        ? PuikTableSortOrder.Desc
+        : PuikTableSortOrder.Asc
     sortIcon.value[headerCol] =
-      sortOrder.value[headerCol] === PuikTableSortOrder.ASC
-        ? PuikTableSortIcon.ASC
-        : PuikTableSortIcon.DESC
+      sortOrder.value[headerCol] === PuikTableSortOrder.Asc
+        ? PuikTableSortIcon.Asc
+        : PuikTableSortIcon.Desc
   } else {
-    sortOrder.value[headerCol] = PuikTableSortOrder.ASC
-    sortIcon.value[headerCol] = PuikTableSortIcon.ASC
+    sortOrder.value[headerCol] = PuikTableSortOrder.Asc
+    sortIcon.value[headerCol] = PuikTableSortIcon.Asc
   }
 }
 const sortDataLocally = (headerCol: string) => {
-  const order = sortOrder.value[headerCol] === PuikTableSortOrder.ASC ? 1 : -1
+  const order = sortOrder.value[headerCol] === PuikTableSortOrder.Asc ? 1 : -1
   data.value.sort((a, b) => order * (a[headerCol] < b[headerCol] ? -1 : 1))
 }
 const sortTable = (headerCol: string) => {
@@ -322,13 +322,13 @@ const sortTable = (headerCol: string) => {
 const getScrollBarPosition = async (event: Event) => {
   const target = event.target as HTMLElement
   if (target.scrollLeft === 0) {
-    ScrollBarPosition.value = PuikTableScrollBarPosistion.LEFT
+    ScrollBarPosition.value = PuikTableScrollBarPosistion.Left
   } else if (
     Math.abs(target.scrollLeft + target.offsetWidth - target.scrollWidth) < 20
   ) {
-    ScrollBarPosition.value = PuikTableScrollBarPosistion.RIGHT
+    ScrollBarPosition.value = PuikTableScrollBarPosistion.Right
   } else {
-    ScrollBarPosition.value = PuikTableScrollBarPosistion.ISSCROLLING
+    ScrollBarPosition.value = PuikTableScrollBarPosistion.IsScrolling
   }
 
   lastScrollLeft.value = target.scrollLeft

From c85d4d1cc0e0f00ff7b1815371af146ba628bfdd Mon Sep 17 00:00:00 2001
From: Matthias Goudjil <matthias.goudjil@prestashop.com>
Date: Mon, 4 Dec 2023 15:05:16 +0100
Subject: [PATCH 09/11] test: fix github checks (sort column event test)

---
 packages/components/table/test/table.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/table/test/table.spec.ts b/packages/components/table/test/table.spec.ts
index d4f02477..7dbff48b 100644
--- a/packages/components/table/test/table.spec.ts
+++ b/packages/components/table/test/table.spec.ts
@@ -326,7 +326,7 @@ describe('Table tests', () => {
     const SortButton = header.find('.puik-button')
     const payload: sortOption = {
       sortBy: 'firstname',
-      sortOrder: PuikTableSortOrder.ASC,
+      sortOrder: PuikTableSortOrder.Asc,
     }
     expect(SortButton.classes()).toContain('puik-button')
     await SortButton.trigger('click')

From 0448bead43fb0ae40021632699c47a9a6840f526 Mon Sep 17 00:00:00 2001
From: Matthias Goudjil <matthias.goudjil@prestashop.com>
Date: Mon, 4 Dec 2023 15:53:13 +0100
Subject: [PATCH 10/11] feat: [table] right-align: reduce padding only for
 sortable header cells

---
 packages/components/table/src/table.vue | 3 +++
 packages/theme/src/table.scss           | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/components/table/src/table.vue b/packages/components/table/src/table.vue
index 6a9006c2..d2303cb9 100644
--- a/packages/components/table/src/table.vue
+++ b/packages/components/table/src/table.vue
@@ -41,6 +41,9 @@
                 [`puik-table__head__row__item--${header.size}`]:
                   header?.size && !header?.width,
               },
+              {
+                'puik-table__head__row__item--sortable': header?.sortable,
+              },
               { 'puik-table__head__row__item--sticky': isSticky(index) },
               {
                 'puik-table__head__row__item--sticky-scroll':
diff --git a/packages/theme/src/table.scss b/packages/theme/src/table.scss
index 4e86ca98..a2aeeec3 100644
--- a/packages/theme/src/table.scss
+++ b/packages/theme/src/table.scss
@@ -171,7 +171,7 @@
     @apply flex items-center space-x-1;
   }
 
-  .puik-table__head__row__item--right {
+  .puik-table__head__row__item--right.puik-table__head__row__item--sortable {
     @apply pr-2;
   }
 }

From 69029ba96fbdddfeea0db98e7e8be63fb9f46948 Mon Sep 17 00:00:00 2001
From: Matthias Goudjil <matthias.goudjil@prestashop.com>
Date: Tue, 5 Dec 2023 11:27:09 +0100
Subject: [PATCH 11/11] fix: [table] sorting feature - make string sorting
 case-insensitive

---
 packages/components/table/src/table.vue | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/components/table/src/table.vue b/packages/components/table/src/table.vue
index d2303cb9..6f1ba93d 100644
--- a/packages/components/table/src/table.vue
+++ b/packages/components/table/src/table.vue
@@ -304,7 +304,17 @@ const setSortOrderAndIcon = (headerCol: string) => {
 }
 const sortDataLocally = (headerCol: string) => {
   const order = sortOrder.value[headerCol] === PuikTableSortOrder.Asc ? 1 : -1
-  data.value.sort((a, b) => order * (a[headerCol] < b[headerCol] ? -1 : 1))
+  data.value.sort((a, b) => {
+    const aValue =
+      typeof a[headerCol] === 'string'
+        ? a[headerCol].toLowerCase()
+        : a[headerCol]
+    const bValue =
+      typeof b[headerCol] === 'string'
+        ? b[headerCol].toLowerCase()
+        : b[headerCol]
+    return order * (aValue < bValue ? -1 : aValue > bValue ? 1 : 0)
+  })
 }
 const sortTable = (headerCol: string) => {
   if (!props.sortFromServer) {