doc(table): Add sort alphabetic example

Co-authored-by: Iris Benoit <iris.benoit@pix.fr>
1024pix · Dec 12, 2024 · 4882591 · 4882591
1 parent 8c23b43
commit 4882591
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 9 deletions.
diff --git 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
@@ -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',