feat(table): add a dummy page for table

Co-authored-by: Jérémie Jadé <jeremie.jade@pix.fr>
Co-authored-by: Fael Bassetti <fael.bassetti@pix.fr>

tests/dummy/app/controllers/table-page.js

@@ -0,0 +1,37 @@
+import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class TablePage extends Controller {
+  @tracked
+  nameSortOrder = null;
+
+  variant = 'orga';
+
+  @tracked
+  data = [
+    {
+      name: 'jean',
+      description: 'fort au jungle speed',
+      age: 15,
+    },
+    {
+      name: 'brian',
+      description: 'travail au peach pit',
+      age: 25,
+    },
+  ];
+
+  caption = 'Titre de mon tableau';
+
+  @action
+  onNameSort() {
+    if (this.nameSortOrder === 'asc') {
+      this.data = this.data.sort((a, b) => b.name.localeCompare(a.name));
+      this.nameSortOrder = 'desc';
+    } else {
+      this.data = this.data.sort((a, b) => a.name.localeCompare(b.name));
+      this.nameSortOrder = 'asc';
+    }
+  }
+}

tests/dummy/app/router.js

@@ -13,4 +13,5 @@ Router.map(function () {
   this.route('select-page', { path: '/select' });
   this.route('sidebar-page', { path: '/sidebar' });
   this.route('tooltip-page', { path: '/tooltip' });
+  this.route('table-page', { path: '/table' });
 });

tests/dummy/app/templates/application.hbs

@@ -14,6 +14,7 @@
       <PixNavigationButton @route="select-page" @icon="book">select</PixNavigationButton>
       <PixNavigationButton @route="sidebar-page" @icon="doorOpen">Sidebar</PixNavigationButton>
       <PixNavigationButton @route="tooltip-page" @icon="signpost">tooltip</PixNavigationButton>
+      <PixNavigationButton @route="table-page" @icon="assignment">Table</PixNavigationButton>
 
       <PixNavigationButton href="https://pix.fr" @icon="book">Documentation</PixNavigationButton>
       <PixNavigationButton href="https://pix.fr" title="Pix.fr" @target="_blank" @icon="help">Centre

tests/dummy/app/templates/table-page.hbs

@@ -0,0 +1,38 @@
+<PixTable @variant={{this.variant}} @data={{this.data}} @caption={{this.caption}}>
+  <:columns as |row context|>
+    <PixTableBasicColumn
+      @context={{context}}
+      @type="text"
+      @name="Nom"
+      @value={{row.name}}
+      @onSort={{this.onNameSort}}
+      @sortOrder={{this.nameSortOrder}}
+    />
+    <PixTableColumn @context={{context}}>
+      <:header>
+        Description
+      </:header>
+      <:cell>
+        <i>{{row.description}}</i>
+      </:cell>
+    </PixTableColumn>
+    <PixTableColumn @context={{context}} class="table__column--wide">
+      <:header>
+        Age
+      </:header>
+      <:cell>
+        il a
+        {{row.age}}
+        ans
+      </:cell>
+    </PixTableColumn>
+    <PixTableColumn @context={{context}}>
+      <:header>
+        Info
+      </:header>
+      <:cell>
+        <PixIcon @name="info" @title={{concat row.name " a " row.age " ans"}} />
+      </:cell>
+    </PixTableColumn>
+  </:columns>
+</PixTable>