From a00d8845e239b5c14690b2547371acb1f3241233 Mon Sep 17 00:00:00 2001
From: jeremie <jeremie.jade@pix.fr>
Date: Thu, 12 Dec 2024 11:00:42 +0100
Subject: [PATCH] doc(table): Add sort alphabetic example

Co-authored-by: Iris Benoit <iris.benoit@pix.fr>
---
 app/stories/pix-table-column.mdx        | 16 ++++++++++++----
 app/stories/pix-table-column.stories.js | 16 +++++++++++-----
 2 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/app/stories/pix-table-column.mdx b/app/stories/pix-table-column.mdx
index 3edf53ae6..269cca68f 100644
--- a/app/stories/pix-table-column.mdx
+++ b/app/stories/pix-table-column.mdx
@@ -47,7 +47,14 @@ Une colonne d'un [PixTable](/docs/data-display-table--docs), gère l'affichage d
 ```html
 <PixTable @data={{this.data}} @caption={{this.caption}}>
   <:columns as |row context|>
-    <PixTableColumn @context={{context}}>
+    <PixTableColumn
+      @context={{context}}
+      @onSort={{this.sortAz}}
+      @sortOrder={{this.sortOrderAz}}
+      @ariaLabelDefaultSort={{this.ariaLabelDefaultSort}}
+      @ariaLabelSortAsc={{this.ariaLabelSortAsc}}
+      @ariaLabelSortDesc={{this.ariaLabelSortDesc}}
+    >
       <:header>
         Nom
       </:header>
@@ -57,9 +64,10 @@ Une colonne d'un [PixTable](/docs/data-display-table--docs), gère l'affichage d
     </PixTableColumn>
     <PixTableColumn
       @context={{context}}
-      @onSort={{this.onNumSort}}
-      @sortOrder={{this.sortOrder}}
-      @ariaLabelDefaultSort={{this.otherArialLabelDefaultSort}}
+      @type="number"
+      @onSort={{this.sortNum}}
+      @sortOrder={{this.sortOrderNum}}
+      @ariaLabelDefaultSort={{this.ariaLabelDefaultSort}}
       @ariaLabelSortAsc={{this.ariaLabelSortAsc}}
       @ariaLabelSortDesc={{this.ariaLabelSortDesc}}
     >
diff --git a/app/stories/pix-table-column.stories.js b/app/stories/pix-table-column.stories.js
index 37e29af34..19e880079 100644
--- a/app/stories/pix-table-column.stories.js
+++ b/app/stories/pix-table-column.stories.js
@@ -116,7 +116,14 @@ const TemplateSort = (args) => {
   return {
     template: hbs`<PixTable @data={{this.data}} @caption={{this.caption}}>
   <:columns as |row context|>
-    <PixTableColumn @context={{context}}>
+    <PixTableColumn
+      @context={{context}}
+      @onSort={{this.sort}}
+      @sortOrder={{this.sortOrder}}
+      @ariaLabelDefaultSort={{this.ariaLabelDefaultSort}}
+      @ariaLabelSortAsc={{this.ariaLabelSortAsc}}
+      @ariaLabelSortDesc={{this.ariaLabelSortDesc}}
+    >
       <:header>
         Nom
       </:header>
@@ -126,7 +133,8 @@ const TemplateSort = (args) => {
     </PixTableColumn>
     <PixTableColumn
       @context={{context}}
-      @onSort={{this.sortNum}}
+      @type='number'
+      @onSort={{this.sort}}
       @sortOrder={{this.sortOrder}}
       @ariaLabelDefaultSort={{this.ariaLabelDefaultSort}}
       @ariaLabelSortAsc={{this.ariaLabelSortAsc}}
@@ -158,9 +166,7 @@ Sorted.args = {
       age: 25,
     },
   ],
-  sortNum(a, b) {
-    return a.age - b.age;
-  },
+  sort() {},
   sortOrder: 'asc',
   ariaLabelDefaultSort: 'click pour trier',
   ariaLabelSortAsc: 'click pour trier en ordre ascendant',