From ce413a6b7971e90b88642f2ccac8a49c7cdf5bc6 Mon Sep 17 00:00:00 2001
From: jeremie <jeremie.jade@pix.fr>
Date: Mon, 25 Nov 2024 15:10:55 +0100
Subject: [PATCH 1/7] feat: init pix-table

Co-authored-by: Iris Benoit <iris.benoit@pix.fr>
Co-authored-by: Fael Bassetti <fael.bassetti@pix.fr>
---
 addon/components/pix-table.hbs                | 21 +++++++
 addon/components/pix-table.js                 | 11 ++++
 addon/styles/_pix-table.scss                  |  4 ++
 app/components/pix-table.js                   |  1 +
 app/stories/pix-table.mdx                     | 25 ++++++++
 app/stories/pix-table.stories.js              | 61 +++++++++++++++++++
 .../integration/components/pix-table-test.js  | 60 ++++++++++++++++++
 7 files changed, 183 insertions(+)
 create mode 100644 addon/components/pix-table.hbs
 create mode 100644 addon/components/pix-table.js
 create mode 100644 addon/styles/_pix-table.scss
 create mode 100644 app/components/pix-table.js
 create mode 100644 app/stories/pix-table.mdx
 create mode 100644 app/stories/pix-table.stories.js
 create mode 100644 tests/integration/components/pix-table-test.js

diff --git a/addon/components/pix-table.hbs b/addon/components/pix-table.hbs
new file mode 100644
index 000000000..9278d3799
--- /dev/null
+++ b/addon/components/pix-table.hbs
@@ -0,0 +1,21 @@
+<div class="table">
+  <table class="pix-table" ...attributes>
+    <caption class="screen-reader-only">{{@caption}}</caption>
+    <thead>
+      <tr>
+        {{#each @headers as |header|}}
+          <th scope="col">{{header.name}}</th>
+        {{/each}}
+      </tr>
+    </thead>
+    <tbody>
+      {{#each this.computedData as |row|}}
+        <tr>
+          {{#each row as |value|}}
+            <td>{{value}}</td>
+          {{/each}}
+        </tr>
+      {{/each}}
+    </tbody>
+  </table>
+</div>
\ No newline at end of file
diff --git a/addon/components/pix-table.js b/addon/components/pix-table.js
new file mode 100644
index 000000000..3a01dee5b
--- /dev/null
+++ b/addon/components/pix-table.js
@@ -0,0 +1,11 @@
+import Component from '@glimmer/component';
+
+export default class PixTable extends Component {
+  get computedData() {
+    return this.args.data.map((data) => {
+      return this.args.headers.map((header) => {
+        return data[header.key];
+      });
+    });
+  }
+}
diff --git a/addon/styles/_pix-table.scss b/addon/styles/_pix-table.scss
new file mode 100644
index 000000000..8db5dddef
--- /dev/null
+++ b/addon/styles/_pix-table.scss
@@ -0,0 +1,4 @@
+.pix-table {
+  
+
+}
diff --git a/app/components/pix-table.js b/app/components/pix-table.js
new file mode 100644
index 000000000..1443d4136
--- /dev/null
+++ b/app/components/pix-table.js
@@ -0,0 +1 @@
+export { default } from '@1024pix/pix-ui/components/pix-table';
diff --git a/app/stories/pix-table.mdx b/app/stories/pix-table.mdx
new file mode 100644
index 000000000..b8ae64147
--- /dev/null
+++ b/app/stories/pix-table.mdx
@@ -0,0 +1,25 @@
+import { Meta, Story, ArgTypes } from '@storybook/blocks';
+
+import * as ComponentStories from './pix-table.stories';
+
+<Meta of={ComponentStories} />
+
+# PixTable
+
+Une table qui prend en argument des headers et des data.
+
+<Story of={ComponentStories.Default} height={200} />
+
+## Usage
+
+```html
+<PixTable
+  @data={{this.data}}
+  @headers={{this.headers}}
+  @caption={{this.caption}}
+/>
+```
+
+## Arguments
+
+<ArgTypes />
diff --git a/app/stories/pix-table.stories.js b/app/stories/pix-table.stories.js
new file mode 100644
index 000000000..bf7d2ac30
--- /dev/null
+++ b/app/stories/pix-table.stories.js
@@ -0,0 +1,61 @@
+import { hbs } from 'ember-cli-htmlbars';
+
+export default {
+  title: 'Data display/Table',
+  // select attribute data type from https://storybook.js.org/docs/react/essentials/controls
+  argTypes: {
+    data: {
+      name: 'data',
+      description: 'Liste des données du tableau',
+      type: { name: 'array', required: true },
+    },
+    headers: {
+      name: 'headers',
+      description: 'Nom des colonnes',
+      type: { name: 'array', required: true },
+    },
+    caption: {
+      name: 'caption',
+      description: "Description du tableau (lisible uniquement par les lecteurs d'écran)",
+      type: { name: 'string', required: true },
+    },
+  },
+};
+
+const Template = (args) => {
+  return {
+    template: hbs`<PixTable @data={{this.data}} @headers={{this.headers}} @caption={{this.caption}} />`,
+    context: args,
+  };
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  data: [
+    {
+      name: 'jean',
+      description: 'fort au jungle speed',
+      age: 'il a 15ans',
+    },
+    {
+      name: 'brian',
+      description: 'travail au peach pit',
+      age: 'il a 25ans',
+    },
+  ],
+  headers: [
+    {
+      name: 'Nom',
+      key: 'name',
+    },
+    {
+      name: 'Description',
+      key: 'description',
+    },
+    {
+      name: 'Age',
+      key: 'age',
+    },
+  ],
+  caption: 'Description du tableau',
+};
diff --git a/tests/integration/components/pix-table-test.js b/tests/integration/components/pix-table-test.js
new file mode 100644
index 000000000..0172b8e91
--- /dev/null
+++ b/tests/integration/components/pix-table-test.js
@@ -0,0 +1,60 @@
+//! template-lint-disable
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@1024pix/ember-testing-library';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | table', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders the default PixTable', async function (assert) {
+    // given
+    this.data = [
+      {
+        name: 'jean',
+        description: 'fort au jungle speed',
+        age: 'il a 15ans',
+      },
+      {
+        name: 'brian',
+        description: 'travail au peach pit',
+        age: 'il a 25ans',
+      },
+    ];
+
+    this.headers = [
+      {
+        name: 'Nom',
+        key: 'name',
+      },
+      {
+        name: 'Description',
+        key: 'description',
+      },
+      {
+        name: 'Age',
+        key: 'age',
+      },
+    ];
+
+    // when
+    const screen = await render(
+      hbs`<PixTable
+  @caption='Ceci est le caption de notre table'
+  @data={{this.data}}
+  @headers={{this.headers}}
+/>`,
+    );
+
+    // then
+    assert.dom(screen.queryByRole('columnheader', { name: 'Nom' })).exists();
+    assert.dom(screen.queryByRole('columnheader', { name: 'Description' })).exists();
+    assert.dom(screen.queryByRole('columnheader', { name: 'Age' })).exists();
+    assert.dom(screen.queryByRole('cell', { name: 'jean' })).exists();
+    assert.dom(screen.queryByRole('cell', { name: 'fort au jungle speed' })).exists();
+    assert.dom(screen.queryByRole('cell', { name: 'il a 15ans' })).exists();
+    assert
+      .dom(screen.queryByRole('caption', { name: 'Ceci est le caption de notre table' }))
+      .exists();
+  });
+});

From ae3878b23d58ca9441c1d3fd3a5f61002277dd0b Mon Sep 17 00:00:00 2001
From: Eithliu <iris.benoit@pix.fr>
Date: Mon, 25 Nov 2024 16:15:08 +0100
Subject: [PATCH 2/7] feat(design): add scss for pix-table
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Jérémie Jadé <jeremie.jade@pix.fr>
Co-authored-by: Fael Bassetti <fael.bassetti@pix.fr>
---
 addon/components/pix-table.hbs |  4 ++--
 addon/styles/_pix-table.scss   | 35 +++++++++++++++++++++++++++++++++-
 addon/styles/addon.scss        |  1 +
 app/stories/pix-table.mdx      |  2 +-
 4 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/addon/components/pix-table.hbs b/addon/components/pix-table.hbs
index 9278d3799..056747d30 100644
--- a/addon/components/pix-table.hbs
+++ b/addon/components/pix-table.hbs
@@ -1,5 +1,5 @@
-<div class="table">
-  <table class="pix-table" ...attributes>
+<div class="pix-table">
+  <table ...attributes>
     <caption class="screen-reader-only">{{@caption}}</caption>
     <thead>
       <tr>
diff --git a/addon/styles/_pix-table.scss b/addon/styles/_pix-table.scss
index 8db5dddef..0df2c2259 100644
--- a/addon/styles/_pix-table.scss
+++ b/addon/styles/_pix-table.scss
@@ -1,4 +1,37 @@
 .pix-table {
-  
+  width: 100%;
+  padding: var(--pix-spacing-4x);
+  border: solid 1px var(--pix-neutral-100);
+  border-radius: var(--pix-spacing-2x);
+  @extend %pix-body-s;
 
+  table {
+    border-collapse: collapse;
+
+    thead tr {
+      background: var(--pix-primary-10);
+      text-align: center;
+    }
+
+    tbody > tr:nth-of-type(even) {
+      background-color: var(--pix-neutral-20);
+    }
+
+    th {
+      text-align: start;
+    }
+
+    td, th {
+      padding: var(--pix-spacing-6x) var(--pix-spacing-4x);
+
+      &:first-child {
+        border-radius: var(--pix-spacing-2x) 0 0 var(--pix-spacing-2x);
+      }
+
+      &:last-child {
+        border-radius: 0 var(--pix-spacing-2x) var(--pix-spacing-2x) 0;
+      }
+    }
+  }
 }
+
diff --git a/addon/styles/addon.scss b/addon/styles/addon.scss
index 7aaa490e8..849afd24e 100644
--- a/addon/styles/addon.scss
+++ b/addon/styles/addon.scss
@@ -18,6 +18,7 @@
 @import 'pix-select-list';
 @import 'pix-stars';
 @import 'pix-tag';
+@import 'pix-table';
 @import 'pix-textarea';
 @import 'pix-tooltip';
 @import 'pix-button-upload';
diff --git a/app/stories/pix-table.mdx b/app/stories/pix-table.mdx
index b8ae64147..026d6eadd 100644
--- a/app/stories/pix-table.mdx
+++ b/app/stories/pix-table.mdx
@@ -8,7 +8,7 @@ import * as ComponentStories from './pix-table.stories';
 
 Une table qui prend en argument des headers et des data.
 
-<Story of={ComponentStories.Default} height={200} />
+<Story of={ComponentStories.Default} height={400} />
 
 ## Usage
 

From 2c1d02cd38963284871f2883ef7233e9082f94c4 Mon Sep 17 00:00:00 2001
From: Eithliu <iris.benoit@pix.fr>
Date: Tue, 26 Nov 2024 17:39:55 +0100
Subject: [PATCH 3/7] feat(pix-table): Add variant
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Jérémie Jadé <jeremie.jade@pix.fr>
Co-authored-by: Fael Bassetti <fael.bassetti@pix.fr>
---
 addon/components/pix-table.hbs                |  2 +-
 addon/components/pix-table.js                 | 17 +++++++++++++
 addon/styles/_pix-table.scss                  | 20 +++++++++++----
 app/stories/pix-table.stories.js              | 21 +++++++++++++++-
 .../integration/components/pix-table-test.js  | 25 +++++++++++++++++--
 5 files changed, 76 insertions(+), 9 deletions(-)

diff --git a/addon/components/pix-table.hbs b/addon/components/pix-table.hbs
index 056747d30..5eb8bc197 100644
--- a/addon/components/pix-table.hbs
+++ b/addon/components/pix-table.hbs
@@ -4,7 +4,7 @@
     <thead>
       <tr>
         {{#each @headers as |header|}}
-          <th scope="col">{{header.name}}</th>
+          <th scope="col" class={{this.headerClass}}>{{header.name}}</th>
         {{/each}}
       </tr>
     </thead>
diff --git a/addon/components/pix-table.js b/addon/components/pix-table.js
index 3a01dee5b..560926d61 100644
--- a/addon/components/pix-table.js
+++ b/addon/components/pix-table.js
@@ -1,4 +1,5 @@
 import Component from '@glimmer/component';
+import { warn } from '@ember/debug';
 
 export default class PixTable extends Component {
   get computedData() {
@@ -8,4 +9,20 @@ export default class PixTable extends Component {
       });
     });
   }
+
+  get variant() {
+    const value = this.args.variant ?? 'primary';
+    warn(
+      `PixTable: @variant "${value}" should be certif, orga or primary`,
+      ['primary', 'orga', 'certif'].includes(value),
+      {
+        id: 'pix-ui.pix-table.variant.not-valid',
+      },
+    );
+
+    return value;
+  }
+  get headerClass() {
+    return `pix-table-header--${this.variant}`;
+  }
 }
diff --git a/addon/styles/_pix-table.scss b/addon/styles/_pix-table.scss
index 0df2c2259..fe3d243a1 100644
--- a/addon/styles/_pix-table.scss
+++ b/addon/styles/_pix-table.scss
@@ -3,22 +3,32 @@
   padding: var(--pix-spacing-4x);
   border: solid 1px var(--pix-neutral-100);
   border-radius: var(--pix-spacing-2x);
+
   @extend %pix-body-s;
 
   table {
     border-collapse: collapse;
 
-    thead tr {
-      background: var(--pix-primary-10);
-      text-align: center;
-    }
-
     tbody > tr:nth-of-type(even) {
       background-color: var(--pix-neutral-20);
     }
 
     th {
       text-align: start;
+
+      &.pix-table-header {
+        &--primary {
+          background: var(--pix-primary-10);
+        }
+
+        &--orga {
+          background: var(--pix-orga-50);
+        }
+
+        &--certif {
+          background: var(--pix-certif-50);
+        }
+      }
     }
 
     td, th {
diff --git a/app/stories/pix-table.stories.js b/app/stories/pix-table.stories.js
index bf7d2ac30..a60f48c59 100644
--- a/app/stories/pix-table.stories.js
+++ b/app/stories/pix-table.stories.js
@@ -14,6 +14,20 @@ export default {
       description: 'Nom des colonnes',
       type: { name: 'array', required: true },
     },
+    variant: {
+      name: 'variant',
+      description: "Afficher le bon variant pour l'application",
+      options: ['orga', 'certif', 'primary'],
+      control: {
+        type: 'select',
+      },
+      table: {
+        defaultValue: {
+          summary: 'primary',
+        },
+      },
+      type: { name: 'string', required: false },
+    },
     caption: {
       name: 'caption',
       description: "Description du tableau (lisible uniquement par les lecteurs d'écran)",
@@ -24,7 +38,12 @@ export default {
 
 const Template = (args) => {
   return {
-    template: hbs`<PixTable @data={{this.data}} @headers={{this.headers}} @caption={{this.caption}} />`,
+    template: hbs`<PixTable
+  @variant={{this.variant}}
+  @data={{this.data}}
+  @headers={{this.headers}}
+  @caption={{this.caption}}
+/>`,
     context: args,
   };
 };
diff --git a/tests/integration/components/pix-table-test.js b/tests/integration/components/pix-table-test.js
index 0172b8e91..49f5152ab 100644
--- a/tests/integration/components/pix-table-test.js
+++ b/tests/integration/components/pix-table-test.js
@@ -7,8 +7,7 @@ import { hbs } from 'ember-cli-htmlbars';
 module('Integration | Component | table', function (hooks) {
   setupRenderingTest(hooks);
 
-  test('it renders the default PixTable', async function (assert) {
-    // given
+  hooks.beforeEach(function () {
     this.data = [
       {
         name: 'jean',
@@ -36,7 +35,9 @@ module('Integration | Component | table', function (hooks) {
         key: 'age',
       },
     ];
+  });
 
+  test('it renders the default PixTable', async function (assert) {
     // when
     const screen = await render(
       hbs`<PixTable
@@ -57,4 +58,24 @@ module('Integration | Component | table', function (hooks) {
       .dom(screen.queryByRole('caption', { name: 'Ceci est le caption de notre table' }))
       .exists();
   });
+
+  ['orga', 'primary', 'certif'].forEach(function (variant) {
+    test(`it add the correct className from ${variant}`, async function (assert) {
+      // when
+      this.variant = variant;
+      const screen = await render(
+        hbs`<PixTable
+  @caption='Ceci est le caption de notre table'
+  @data={{this.data}}
+  @headers={{this.headers}}
+  @variant={{this.variant}}
+/>`,
+      );
+      // then
+      assert.strictEqual(
+        screen.queryByRole('columnheader', { name: 'Nom' }).getAttribute('class'),
+        `pix-table-header--${variant}`,
+      );
+    });
+  });
 });

From 9d03e36c2e4c67454240f923e4d60fe7356fd079 Mon Sep 17 00:00:00 2001
From: Eithliu <iris.benoit@pix.fr>
Date: Tue, 26 Nov 2024 18:04:57 +0100
Subject: [PATCH 4/7] feat(responsive): add responsiveness
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Jérémie Jadé <jeremie.jade@pix.fr>
Co-authored-by: Fael Bassetti <fael.bassetti@pix.fr>
---
 addon/styles/_pix-table.scss     |  2 ++
 app/stories/pix-table.stories.js | 24 ++++++++++++++++++++++++
 2 files changed, 26 insertions(+)

diff --git a/addon/styles/_pix-table.scss b/addon/styles/_pix-table.scss
index fe3d243a1..80ea2c297 100644
--- a/addon/styles/_pix-table.scss
+++ b/addon/styles/_pix-table.scss
@@ -1,12 +1,14 @@
 .pix-table {
   width: 100%;
   padding: var(--pix-spacing-4x);
+  overflow: auto;
   border: solid 1px var(--pix-neutral-100);
   border-radius: var(--pix-spacing-2x);
 
   @extend %pix-body-s;
 
   table {
+    min-width: 100%;
     border-collapse: collapse;
 
     tbody > tr:nth-of-type(even) {
diff --git a/app/stories/pix-table.stories.js b/app/stories/pix-table.stories.js
index a60f48c59..814252aef 100644
--- a/app/stories/pix-table.stories.js
+++ b/app/stories/pix-table.stories.js
@@ -75,6 +75,30 @@ Default.args = {
       name: 'Age',
       key: 'age',
     },
+    {
+      name: 'Nom',
+      key: 'name',
+    },
+    {
+      name: 'Description',
+      key: 'description',
+    },
+    {
+      name: 'Age',
+      key: 'age',
+    },
+    {
+      name: 'Nom',
+      key: 'name',
+    },
+    {
+      name: 'Description',
+      key: 'description',
+    },
+    {
+      name: 'Age',
+      key: 'age',
+    },
   ],
   caption: 'Description du tableau',
 };

From 43186c1f9dc276a0ee70e4ec6ea18d7550ba4e3c Mon Sep 17 00:00:00 2001
From: Eithliu <iris.benoit@pix.fr>
Date: Wed, 27 Nov 2024 15:23:15 +0100
Subject: [PATCH 5/7] feat(table): add colgroup yield to manage column size.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Jérémie Jadé <jeremie.jade@pix.fr>
Co-authored-by: Fael Bassetti <fael.bassetti@pix.fr>
---
 addon/components/pix-table.hbs                |  5 ++
 app/stories/pix-table.mdx                     | 25 ++++++++-
 app/stories/pix-table.stories.js              | 53 ++++++++++---------
 .../integration/components/pix-table-test.js  | 19 +++++++
 4 files changed, 76 insertions(+), 26 deletions(-)

diff --git a/addon/components/pix-table.hbs b/addon/components/pix-table.hbs
index 5eb8bc197..1f998a6e8 100644
--- a/addon/components/pix-table.hbs
+++ b/addon/components/pix-table.hbs
@@ -1,6 +1,11 @@
 <div class="pix-table">
   <table ...attributes>
     <caption class="screen-reader-only">{{@caption}}</caption>
+    {{#if (has-block "colgroup")}}
+      <colgroup>
+        {{yield to="colgroup"}}
+      </colgroup>
+    {{/if}}
     <thead>
       <tr>
         {{#each @headers as |header|}}
diff --git a/app/stories/pix-table.mdx b/app/stories/pix-table.mdx
index 026d6eadd..883a869cd 100644
--- a/app/stories/pix-table.mdx
+++ b/app/stories/pix-table.mdx
@@ -8,10 +8,9 @@ import * as ComponentStories from './pix-table.stories';
 
 Une table qui prend en argument des headers et des data.
 
+## Exemple basique
 <Story of={ComponentStories.Default} height={400} />
 
-## Usage
-
 ```html
 <PixTable
   @data={{this.data}}
@@ -20,6 +19,28 @@ Une table qui prend en argument des headers et des data.
 />
 ```
 
+## Exemple avec un colgroup
+<Story of={ComponentStories.ColGroup} height={400} />
+
+```html
+<PixTable
+  @data={{this.data}}
+  @headers={{this.headers}}
+  @caption={{this.caption}}
+>
+  <:colgroup>
+    <col />
+    <col class="table__column--wide" />
+    <col />
+  </:colgroup>
+</PixTable>
+<style>
+  .table__column--wide { width: 500px; }
+</style>
+```
+
+
+
 ## Arguments
 
 <ArgTypes />
diff --git a/app/stories/pix-table.stories.js b/app/stories/pix-table.stories.js
index 814252aef..afdad81b8 100644
--- a/app/stories/pix-table.stories.js
+++ b/app/stories/pix-table.stories.js
@@ -33,6 +33,12 @@ export default {
       description: "Description du tableau (lisible uniquement par les lecteurs d'écran)",
       type: { name: 'string', required: true },
     },
+    colgroup: {
+      name: '<:colgroup>',
+      description:
+        'Permet de gérer la taille des colonnes, [Donald Doc](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/colgroup)',
+      type: { name: 'block content', required: false },
+    },
   },
 };
 
@@ -47,8 +53,30 @@ const Template = (args) => {
     context: args,
   };
 };
+const Template2 = (args) => {
+  return {
+    template: hbs`<PixTable
+  @variant={{this.variant}}
+  @data={{this.data}}
+  @headers={{this.headers}}
+  @caption={{this.caption}}
+>
+  <:colgroup>
+    <col />
+    <col class='table__column--wide' />
+    <col />
+  </:colgroup>
+</PixTable>
+{{! template-lint-disable no-forbidden-elements}}
+<style>
+  .table__column--wide { width: 500px; }
+</style>`,
+    context: args,
+  };
+};
 
 export const Default = Template.bind({});
+export const ColGroup = Template2.bind({});
 Default.args = {
   data: [
     {
@@ -75,30 +103,7 @@ Default.args = {
       name: 'Age',
       key: 'age',
     },
-    {
-      name: 'Nom',
-      key: 'name',
-    },
-    {
-      name: 'Description',
-      key: 'description',
-    },
-    {
-      name: 'Age',
-      key: 'age',
-    },
-    {
-      name: 'Nom',
-      key: 'name',
-    },
-    {
-      name: 'Description',
-      key: 'description',
-    },
-    {
-      name: 'Age',
-      key: 'age',
-    },
   ],
   caption: 'Description du tableau',
 };
+ColGroup.args = Default.args;
diff --git a/tests/integration/components/pix-table-test.js b/tests/integration/components/pix-table-test.js
index 49f5152ab..da60737d9 100644
--- a/tests/integration/components/pix-table-test.js
+++ b/tests/integration/components/pix-table-test.js
@@ -57,6 +57,25 @@ module('Integration | Component | table', function (hooks) {
     assert
       .dom(screen.queryByRole('caption', { name: 'Ceci est le caption de notre table' }))
       .exists();
+    assert.dom(this.element.querySelector('colgroup')).doesNotExist();
+  });
+
+  test('it should renders the colgroup', async function (assert) {
+    // when
+    await render(
+      hbs`<PixTable
+  @caption='Ceci est le caption de notre table'
+  @data={{this.data}}
+  @headers={{this.headers}}
+>
+  <:colgroup>
+    <col /><col /><col />
+  </:colgroup>
+</PixTable>`,
+    );
+    // then
+
+    assert.dom(this.element.querySelector('colgroup')).exists();
   });
 
   ['orga', 'primary', 'certif'].forEach(function (variant) {

From d2caabea9cc3e3b5df67900d449e9248c16d48ed Mon Sep 17 00:00:00 2001
From: Nicolas Lepage <19571875+nlepage@users.noreply.github.com>
Date: Wed, 27 Nov 2024 17:28:20 +0100
Subject: [PATCH 6/7] refactor(pix-table): rewrite to block params API
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Iris Benoit-Martin <iris.benoit-martin@pix.fr>
Co-authored-by: Jérémie Jadé <jeremie.jade@pix.fr>
Co-authored-by: Fael Bassetti <fael.bassetti@pix.fr>
---
 addon/components/pix-table-column.hbs         |   9 ++
 addon/components/pix-table.hbs                |  19 +--
 addon/components/pix-table.js                 |  21 ++--
 addon/styles/_pix-table.scss                  |  26 ++--
 app/components/pix-table-column.js            |   1 +
 app/stories/pix-table-column.mdx              |  32 +++++
 app/stories/pix-table-column.stories.js       |  56 +++++++++
 app/stories/pix-table.mdx                     |  62 ++++++----
 app/stories/pix-table.stories.js              | 111 +++++++++---------
 .../integration/components/pix-table-test.js  | 111 ++++++++++--------
 10 files changed, 286 insertions(+), 162 deletions(-)
 create mode 100644 addon/components/pix-table-column.hbs
 create mode 100644 app/components/pix-table-column.js
 create mode 100644 app/stories/pix-table-column.mdx
 create mode 100644 app/stories/pix-table-column.stories.js

diff --git a/addon/components/pix-table-column.hbs b/addon/components/pix-table-column.hbs
new file mode 100644
index 000000000..0e47a2b98
--- /dev/null
+++ b/addon/components/pix-table-column.hbs
@@ -0,0 +1,9 @@
+{{#if @context.isHeader}}
+  <th scope="col" ...attributes>
+    {{yield to="header"}}
+  </th>
+{{else}}
+  <td ...attributes>
+    {{yield @context.row to="cell"}}
+  </td>
+{{/if}}
\ No newline at end of file
diff --git a/addon/components/pix-table.hbs b/addon/components/pix-table.hbs
index 1f998a6e8..3a566f1e3 100644
--- a/addon/components/pix-table.hbs
+++ b/addon/components/pix-table.hbs
@@ -1,24 +1,15 @@
 <div class="pix-table">
-  <table ...attributes>
+  <table>
     <caption class="screen-reader-only">{{@caption}}</caption>
-    {{#if (has-block "colgroup")}}
-      <colgroup>
-        {{yield to="colgroup"}}
-      </colgroup>
-    {{/if}}
-    <thead>
+    <thead class={{this.headerClass}}>
       <tr>
-        {{#each @headers as |header|}}
-          <th scope="col" class={{this.headerClass}}>{{header.name}}</th>
-        {{/each}}
+        {{yield this.headerContext to="columns"}}
       </tr>
     </thead>
     <tbody>
-      {{#each this.computedData as |row|}}
+      {{#each @data as |row|}}
         <tr>
-          {{#each row as |value|}}
-            <td>{{value}}</td>
-          {{/each}}
+          {{yield (this.getRowContext row) to="columns"}}
         </tr>
       {{/each}}
     </tbody>
diff --git a/addon/components/pix-table.js b/addon/components/pix-table.js
index 560926d61..cc3dcec5c 100644
--- a/addon/components/pix-table.js
+++ b/addon/components/pix-table.js
@@ -2,14 +2,6 @@ import Component from '@glimmer/component';
 import { warn } from '@ember/debug';
 
 export default class PixTable extends Component {
-  get computedData() {
-    return this.args.data.map((data) => {
-      return this.args.headers.map((header) => {
-        return data[header.key];
-      });
-    });
-  }
-
   get variant() {
     const value = this.args.variant ?? 'primary';
     warn(
@@ -25,4 +17,17 @@ export default class PixTable extends Component {
   get headerClass() {
     return `pix-table-header--${this.variant}`;
   }
+
+  get headerContext() {
+    return {
+      isHeader: true,
+    };
+  }
+
+  getRowContext(row) {
+    return {
+      isHeader: false,
+      row,
+    };
+  }
 }
diff --git a/addon/styles/_pix-table.scss b/addon/styles/_pix-table.scss
index 80ea2c297..dba952ab6 100644
--- a/addon/styles/_pix-table.scss
+++ b/addon/styles/_pix-table.scss
@@ -15,24 +15,24 @@
       background-color: var(--pix-neutral-20);
     }
 
-    th {
-      text-align: start;
-
-      &.pix-table-header {
-        &--primary {
-          background: var(--pix-primary-10);
-        }
+    thead.pix-table-header {
+      &--primary {
+        background: var(--pix-primary-10);
+      }
 
-        &--orga {
-          background: var(--pix-orga-50);
-        }
+      &--orga {
+        background: var(--pix-orga-50);
+      }
 
-        &--certif {
-          background: var(--pix-certif-50);
-        }
+      &--certif {
+        background: var(--pix-certif-50);
       }
     }
 
+    th {
+      text-align: start;
+    }
+
     td, th {
       padding: var(--pix-spacing-6x) var(--pix-spacing-4x);
 
diff --git a/app/components/pix-table-column.js b/app/components/pix-table-column.js
new file mode 100644
index 000000000..8687270d0
--- /dev/null
+++ b/app/components/pix-table-column.js
@@ -0,0 +1 @@
+export { default } from '@1024pix/pix-ui/components/pix-table-column';
diff --git a/app/stories/pix-table-column.mdx b/app/stories/pix-table-column.mdx
new file mode 100644
index 000000000..27679aab3
--- /dev/null
+++ b/app/stories/pix-table-column.mdx
@@ -0,0 +1,32 @@
+import { Meta, Story, ArgTypes } from '@storybook/blocks';
+
+import * as ComponentStories from './pix-table-column.stories';
+
+<Meta of={ComponentStories} />
+
+# PixTableColumn
+
+Une colonne d'un [PixTable](/docs/data-display-table--docs), gère l'affichage de l'en-tête et des cellules d'une colonne.
+
+<Story of={ComponentStories.Default} height={400} />
+
+## Usage
+
+```html
+<PixTable @data={{this.data}} @caption={{this.caption}}>
+  <:columns as |context|>
+    <PixTableColumn @context={{context}}>
+      <:header>
+        Info
+      </:header>
+      <:cell as |row|>
+        <PixIcon @name='info' @title={{concat row.name ' a ' row.age ' ans'}} />
+      </:cell>
+    </PixTableColumn>
+  </:columns>
+</PixTable>
+```
+
+## Arguments
+
+<ArgTypes />
diff --git a/app/stories/pix-table-column.stories.js b/app/stories/pix-table-column.stories.js
new file mode 100644
index 000000000..225bc65e4
--- /dev/null
+++ b/app/stories/pix-table-column.stories.js
@@ -0,0 +1,56 @@
+import { hbs } from 'ember-cli-htmlbars';
+
+export default {
+  title: 'Data display/Table/TableColumn',
+  argTypes: {
+    context: {
+      name: 'context',
+      description: 'Propriété a récupérer depuis le block element <:columns> du pixTable parent',
+      type: { name: 'object', required: true },
+    },
+    header: {
+      name: '<:header>',
+      description: 'En-tête de la colonne',
+      type: { name: 'object', required: true },
+    },
+    cell: {
+      name: '<:cell>',
+      description:
+        'Cellule de la colonne. Expose la propriété `row` correspondant aux données de la ligne',
+      type: { name: 'object', required: true },
+    },
+  },
+};
+
+const Template = (args) => {
+  return {
+    template: hbs`<PixTable @data={{this.data}} @caption={{this.caption}}>
+  <:columns as |context|>
+    <PixTableColumn @context={{context}}>
+      <:header>
+        Info
+      </:header>
+      <:cell as |row|>
+        <PixIcon @name='info' @title={{concat row.name ' a ' row.age ' ans'}} />
+      </:cell>
+    </PixTableColumn>
+  </:columns>
+</PixTable>`,
+    context: args,
+  };
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  caption: 'Description du tableau',
+  data: [
+    {
+      name: 'jean',
+      age: 15,
+    },
+    {
+      name: 'brian',
+      age: 25,
+    },
+  ],
+};
diff --git a/app/stories/pix-table.mdx b/app/stories/pix-table.mdx
index 883a869cd..dda208b85 100644
--- a/app/stories/pix-table.mdx
+++ b/app/stories/pix-table.mdx
@@ -6,41 +6,55 @@ import * as ComponentStories from './pix-table.stories';
 
 # PixTable
 
-Une table qui prend en argument des headers et des data.
+Une table qui prend en argument des data et en `block content` des [PixTableColumn](/docs/data-display-table-tablecolumn--docs).
 
 ## Exemple basique
 <Story of={ComponentStories.Default} height={400} />
 
 ```html
-<PixTable
-  @data={{this.data}}
-  @headers={{this.headers}}
-  @caption={{this.caption}}
-/>
-```
-
-## Exemple avec un colgroup
-<Story of={ComponentStories.ColGroup} height={400} />
-
-```html
-<PixTable
-  @data={{this.data}}
-  @headers={{this.headers}}
-  @caption={{this.caption}}
->
-  <:colgroup>
-    <col />
-    <col class="table__column--wide" />
-    <col />
-  </:colgroup>
+<PixTable @variant={{this.variant}} @data={{this.data}} @caption={{this.caption}}>
+  <:columns as |context|>
+    <PixTableColumn @context={{context}}>
+      <:header>
+        Nom
+      </:header>
+      <:cell as |row| >
+        {{row.name}}
+      </:cell>
+    </PixTableColumn>
+    <PixTableColumn @context={{context}}>
+      <:header>
+        Description
+      </:header>
+      <:cell as |row|>
+        <i>{{row.description}}</i>
+      </:cell>
+    </PixTableColumn>
+    <PixTableColumn @context={{context}} class='table__column--wide'>
+      <:header>
+        Age
+      </:header>
+      <:cell as |row| >
+        il a
+        {{row.age}}
+        ans
+      </:cell>
+    </PixTableColumn>
+    <PixTableColumn @context={{context}}>
+      <:header>
+        Info
+      </:header>
+      <:cell as |row|>
+        <PixIcon @name='info' @title={{concat row.name ' a ' row.age ' ans'}} />
+      </:cell>
+    </PixTableColumn>
+  </:columns>
 </PixTable>
 <style>
   .table__column--wide { width: 500px; }
 </style>
 ```
 
-
-
 ## Arguments
 
 <ArgTypes />
diff --git a/app/stories/pix-table.stories.js b/app/stories/pix-table.stories.js
index afdad81b8..8893beb03 100644
--- a/app/stories/pix-table.stories.js
+++ b/app/stories/pix-table.stories.js
@@ -9,10 +9,16 @@ export default {
       description: 'Liste des données du tableau',
       type: { name: 'array', required: true },
     },
-    headers: {
-      name: 'headers',
-      description: 'Nom des colonnes',
-      type: { name: 'array', required: true },
+    caption: {
+      name: 'caption',
+      description: "Description du tableau (lisible uniquement par les lecteurs d'écran)",
+      type: { name: 'string', required: true },
+    },
+    columns: {
+      name: '<:columns>',
+      description:
+        'Définition du rendu des différentes colonnes de la table en utilisant `<PixTableColumn>`',
+      type: { name: 'block content', required: true },
     },
     variant: {
       name: 'variant',
@@ -26,46 +32,53 @@ export default {
           summary: 'primary',
         },
       },
-      type: { name: 'string', required: false },
-    },
-    caption: {
-      name: 'caption',
-      description: "Description du tableau (lisible uniquement par les lecteurs d'écran)",
-      type: { name: 'string', required: true },
-    },
-    colgroup: {
-      name: '<:colgroup>',
-      description:
-        'Permet de gérer la taille des colonnes, [Donald Doc](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/colgroup)',
-      type: { name: 'block content', required: false },
+      type: {
+        name: '"primary" | "orga" | "certif"',
+        required: false,
+      },
     },
   },
 };
 
 const Template = (args) => {
   return {
-    template: hbs`<PixTable
-  @variant={{this.variant}}
-  @data={{this.data}}
-  @headers={{this.headers}}
-  @caption={{this.caption}}
-/>`,
-    context: args,
-  };
-};
-const Template2 = (args) => {
-  return {
-    template: hbs`<PixTable
-  @variant={{this.variant}}
-  @data={{this.data}}
-  @headers={{this.headers}}
-  @caption={{this.caption}}
->
-  <:colgroup>
-    <col />
-    <col class='table__column--wide' />
-    <col />
-  </:colgroup>
+    template: hbs`<PixTable @variant={{this.variant}} @data={{this.data}} @caption={{this.caption}}>
+  <:columns as |context|>
+    <PixTableColumn @context={{context}}>
+      <:header>
+        Nom
+      </:header>
+      <:cell as |row|>
+        {{row.name}}
+      </:cell>
+    </PixTableColumn>
+    <PixTableColumn @context={{context}}>
+      <:header>
+        Description
+      </:header>
+      <:cell as |row|>
+        <i>{{row.description}}</i>
+      </:cell>
+    </PixTableColumn>
+    <PixTableColumn @context={{context}} class='table__column--wide'>
+      <:header>
+        Age
+      </:header>
+      <:cell as |row|>
+        il a
+        {{row.age}}
+        ans
+      </:cell>
+    </PixTableColumn>
+    <PixTableColumn @context={{context}}>
+      <:header>
+        Info
+      </:header>
+      <:cell as |row|>
+        <PixIcon @name='info' @title={{concat row.name ' a ' row.age ' ans'}} />
+      </:cell>
+    </PixTableColumn>
+  </:columns>
 </PixTable>
 {{! template-lint-disable no-forbidden-elements}}
 <style>
@@ -76,34 +89,18 @@ const Template2 = (args) => {
 };
 
 export const Default = Template.bind({});
-export const ColGroup = Template2.bind({});
 Default.args = {
+  caption: 'Description du tableau',
   data: [
     {
       name: 'jean',
       description: 'fort au jungle speed',
-      age: 'il a 15ans',
+      age: 15,
     },
     {
       name: 'brian',
       description: 'travail au peach pit',
-      age: 'il a 25ans',
-    },
-  ],
-  headers: [
-    {
-      name: 'Nom',
-      key: 'name',
-    },
-    {
-      name: 'Description',
-      key: 'description',
-    },
-    {
-      name: 'Age',
-      key: 'age',
+      age: 25,
     },
   ],
-  caption: 'Description du tableau',
 };
-ColGroup.args = Default.args;
diff --git a/tests/integration/components/pix-table-test.js b/tests/integration/components/pix-table-test.js
index da60737d9..092f72d10 100644
--- a/tests/integration/components/pix-table-test.js
+++ b/tests/integration/components/pix-table-test.js
@@ -12,27 +12,12 @@ module('Integration | Component | table', function (hooks) {
       {
         name: 'jean',
         description: 'fort au jungle speed',
-        age: 'il a 15ans',
+        age: 15,
       },
       {
         name: 'brian',
         description: 'travail au peach pit',
-        age: 'il a 25ans',
-      },
-    ];
-
-    this.headers = [
-      {
-        name: 'Nom',
-        key: 'name',
-      },
-      {
-        name: 'Description',
-        key: 'description',
-      },
-      {
-        name: 'Age',
-        key: 'age',
+        age: 25,
       },
     ];
   });
@@ -40,11 +25,36 @@ module('Integration | Component | table', function (hooks) {
   test('it renders the default PixTable', async function (assert) {
     // when
     const screen = await render(
-      hbs`<PixTable
-  @caption='Ceci est le caption de notre table'
-  @data={{this.data}}
-  @headers={{this.headers}}
-/>`,
+      hbs`<PixTable @caption='Ceci est le caption de notre table' @data={{this.data}}>
+  <:columns as |context|>
+    <PixTableColumn @context={{context}}>
+      <:header>
+        Nom
+      </:header>
+      <:cell as |row|>
+        {{row.name}}
+      </:cell>
+    </PixTableColumn>
+    <PixTableColumn @context={{context}}>
+      <:header>
+        Description
+      </:header>
+      <:cell as |row|>
+        {{row.description}}
+      </:cell>
+    </PixTableColumn>
+    <PixTableColumn @context={{context}}>
+      <:header>
+        Age
+      </:header>
+      <:cell as |row|>
+        il a
+        {{row.age}}
+        ans
+      </:cell>
+    </PixTableColumn>
+  </:columns>
+</PixTable>`,
     );
 
     // then
@@ -53,46 +63,55 @@ module('Integration | Component | table', function (hooks) {
     assert.dom(screen.queryByRole('columnheader', { name: 'Age' })).exists();
     assert.dom(screen.queryByRole('cell', { name: 'jean' })).exists();
     assert.dom(screen.queryByRole('cell', { name: 'fort au jungle speed' })).exists();
-    assert.dom(screen.queryByRole('cell', { name: 'il a 15ans' })).exists();
+    assert.dom(screen.queryByRole('cell', { name: 'il a 15 ans' })).exists();
     assert
       .dom(screen.queryByRole('caption', { name: 'Ceci est le caption de notre table' }))
       .exists();
-    assert.dom(this.element.querySelector('colgroup')).doesNotExist();
-  });
-
-  test('it should renders the colgroup', async function (assert) {
-    // when
-    await render(
-      hbs`<PixTable
-  @caption='Ceci est le caption de notre table'
-  @data={{this.data}}
-  @headers={{this.headers}}
->
-  <:colgroup>
-    <col /><col /><col />
-  </:colgroup>
-</PixTable>`,
-    );
-    // then
-
-    assert.dom(this.element.querySelector('colgroup')).exists();
   });
 
   ['orga', 'primary', 'certif'].forEach(function (variant) {
     test(`it add the correct className from ${variant}`, async function (assert) {
       // when
       this.variant = variant;
-      const screen = await render(
+      await render(
         hbs`<PixTable
   @caption='Ceci est le caption de notre table'
   @data={{this.data}}
-  @headers={{this.headers}}
   @variant={{this.variant}}
-/>`,
+>
+  <:columns as |context|>
+    <PixTableColumn @context={{context}}>
+      <:header>
+        Nom
+      </:header>
+      <:cell as |row|>
+        {{row.name}}
+      </:cell>
+    </PixTableColumn>
+    <PixTableColumn @context={{context}}>
+      <:header>
+        Description
+      </:header>
+      <:cell as |row|>
+        {{row.description}}
+      </:cell>
+    </PixTableColumn>
+    <PixTableColumn @context={{context}}>
+      <:header>
+        Age
+      </:header>
+      <:cell as |row|>
+        il a
+        {{row.age}}
+        ans
+      </:cell>
+    </PixTableColumn>
+  </:columns>
+</PixTable>`,
       );
       // then
       assert.strictEqual(
-        screen.queryByRole('columnheader', { name: 'Nom' }).getAttribute('class'),
+        this.element.querySelector('thead').getAttribute('class'),
         `pix-table-header--${variant}`,
       );
     });

From 7be5a6fbddf6c8f7bf0a3f000f4ec76d48945736 Mon Sep 17 00:00:00 2001
From: Fael BASSETTI <fael.bassetti@pix.fr>
Date: Fri, 29 Nov 2024 17:42:46 +0100
Subject: [PATCH 7/7] refactor(pix-table): replace context object with row and
 index

Co-authored-by: Xavier Carron <xavier.carron@pix.fr>
---
 addon/components/pix-table-column.hbs         |  4 +--
 addon/components/pix-table-column.js          |  7 +++++
 addon/components/pix-table.hbs                |  6 ++--
 addon/components/pix-table.js                 | 13 ---------
 app/stories/pix-table-column.mdx              |  6 ++--
 app/stories/pix-table-column.stories.js       | 16 +++++------
 app/stories/pix-table.mdx                     | 18 ++++++------
 app/stories/pix-table.stories.js              | 20 ++++++-------
 .../integration/components/pix-table-test.js  | 28 +++++++++----------
 9 files changed, 56 insertions(+), 62 deletions(-)
 create mode 100644 addon/components/pix-table-column.js

diff --git a/addon/components/pix-table-column.hbs b/addon/components/pix-table-column.hbs
index 0e47a2b98..82b61a556 100644
--- a/addon/components/pix-table-column.hbs
+++ b/addon/components/pix-table-column.hbs
@@ -1,9 +1,9 @@
-{{#if @context.isHeader}}
+{{#if this.displayHeader}}
   <th scope="col" ...attributes>
     {{yield to="header"}}
   </th>
 {{else}}
   <td ...attributes>
-    {{yield @context.row to="cell"}}
+    {{yield to="cell"}}
   </td>
 {{/if}}
\ No newline at end of file
diff --git a/addon/components/pix-table-column.js b/addon/components/pix-table-column.js
new file mode 100644
index 000000000..5d23cb164
--- /dev/null
+++ b/addon/components/pix-table-column.js
@@ -0,0 +1,7 @@
+import Component from '@glimmer/component';
+
+export default class PixTableColumn extends Component {
+  get displayHeader() {
+    return this.args.index === -1;
+  }
+}
diff --git a/addon/components/pix-table.hbs b/addon/components/pix-table.hbs
index 3a566f1e3..b3c1fad66 100644
--- a/addon/components/pix-table.hbs
+++ b/addon/components/pix-table.hbs
@@ -3,13 +3,13 @@
     <caption class="screen-reader-only">{{@caption}}</caption>
     <thead class={{this.headerClass}}>
       <tr>
-        {{yield this.headerContext to="columns"}}
+        {{yield null -1 to="columns"}}
       </tr>
     </thead>
     <tbody>
-      {{#each @data as |row|}}
+      {{#each @data as |row index|}}
         <tr>
-          {{yield (this.getRowContext row) to="columns"}}
+          {{yield row index to="columns"}}
         </tr>
       {{/each}}
     </tbody>
diff --git a/addon/components/pix-table.js b/addon/components/pix-table.js
index cc3dcec5c..8bddf6d8c 100644
--- a/addon/components/pix-table.js
+++ b/addon/components/pix-table.js
@@ -17,17 +17,4 @@ export default class PixTable extends Component {
   get headerClass() {
     return `pix-table-header--${this.variant}`;
   }
-
-  get headerContext() {
-    return {
-      isHeader: true,
-    };
-  }
-
-  getRowContext(row) {
-    return {
-      isHeader: false,
-      row,
-    };
-  }
 }
diff --git a/app/stories/pix-table-column.mdx b/app/stories/pix-table-column.mdx
index 27679aab3..dddb4a22f 100644
--- a/app/stories/pix-table-column.mdx
+++ b/app/stories/pix-table-column.mdx
@@ -14,12 +14,12 @@ 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 |context|>
-    <PixTableColumn @context={{context}}>
+  <:columns as |row index|>
+    <PixTableColumn @index={{index}}>
       <:header>
         Info
       </:header>
-      <:cell as |row|>
+      <:cell>
         <PixIcon @name='info' @title={{concat row.name ' a ' row.age ' ans'}} />
       </:cell>
     </PixTableColumn>
diff --git a/app/stories/pix-table-column.stories.js b/app/stories/pix-table-column.stories.js
index 225bc65e4..86bea8a4a 100644
--- a/app/stories/pix-table-column.stories.js
+++ b/app/stories/pix-table-column.stories.js
@@ -4,9 +4,10 @@ export default {
   title: 'Data display/Table/TableColumn',
   argTypes: {
     context: {
-      name: 'context',
-      description: 'Propriété a récupérer depuis le block element <:columns> du pixTable parent',
-      type: { name: 'object', required: true },
+      name: 'index',
+      description:
+        'Propriété a récupérer depuis le block element `<:columns>` du PixTable parent. Affiche le header si égale à `-1`',
+      type: { name: 'number', required: true },
     },
     header: {
       name: '<:header>',
@@ -15,8 +16,7 @@ export default {
     },
     cell: {
       name: '<:cell>',
-      description:
-        'Cellule de la colonne. Expose la propriété `row` correspondant aux données de la ligne',
+      description: 'Cellule de la colonne.',
       type: { name: 'object', required: true },
     },
   },
@@ -25,12 +25,12 @@ export default {
 const Template = (args) => {
   return {
     template: hbs`<PixTable @data={{this.data}} @caption={{this.caption}}>
-  <:columns as |context|>
-    <PixTableColumn @context={{context}}>
+  <:columns as |row index|>
+    <PixTableColumn @index={{index}}>
       <:header>
         Info
       </:header>
-      <:cell as |row|>
+      <:cell>
         <PixIcon @name='info' @title={{concat row.name ' a ' row.age ' ans'}} />
       </:cell>
     </PixTableColumn>
diff --git a/app/stories/pix-table.mdx b/app/stories/pix-table.mdx
index dda208b85..e2b0e9674 100644
--- a/app/stories/pix-table.mdx
+++ b/app/stories/pix-table.mdx
@@ -13,38 +13,38 @@ Une table qui prend en argument des data et en `block content` des [PixTableColu
 
 ```html
 <PixTable @variant={{this.variant}} @data={{this.data}} @caption={{this.caption}}>
-  <:columns as |context|>
-    <PixTableColumn @context={{context}}>
+  <:columns as |row index|>
+    <PixTableColumn @index={{index}}>
       <:header>
         Nom
       </:header>
-      <:cell as |row| >
+      <:cell>
         {{row.name}}
       </:cell>
     </PixTableColumn>
-    <PixTableColumn @context={{context}}>
+    <PixTableColumn @index={{index}}>
       <:header>
         Description
       </:header>
-      <:cell as |row|>
+      <:cell>
         <i>{{row.description}}</i>
       </:cell>
     </PixTableColumn>
-    <PixTableColumn @context={{context}} class='table__column--wide'>
+    <PixTableColumn @index={{index}} class='table__column--wide'>
       <:header>
         Age
       </:header>
-      <:cell as |row| >
+      <:cell >
         il a
         {{row.age}}
         ans
       </:cell>
     </PixTableColumn>
-    <PixTableColumn @context={{context}}>
+    <PixTableColumn @index={{index}}>
       <:header>
         Info
       </:header>
-      <:cell as |row|>
+      <:cell>
         <PixIcon @name='info' @title={{concat row.name ' a ' row.age ' ans'}} />
       </:cell>
     </PixTableColumn>
diff --git a/app/stories/pix-table.stories.js b/app/stories/pix-table.stories.js
index 8893beb03..68b057574 100644
--- a/app/stories/pix-table.stories.js
+++ b/app/stories/pix-table.stories.js
@@ -17,7 +17,7 @@ export default {
     columns: {
       name: '<:columns>',
       description:
-        'Définition du rendu des différentes colonnes de la table en utilisant `<PixTableColumn>`',
+        'Définition du rendu des différentes colonnes de la table en utilisant `<PixTableColumn>`. Expose les paramètres `row` et `index` (correspondant aux données de la ligne actuelle)',
       type: { name: 'block content', required: true },
     },
     variant: {
@@ -43,38 +43,38 @@ export default {
 const Template = (args) => {
   return {
     template: hbs`<PixTable @variant={{this.variant}} @data={{this.data}} @caption={{this.caption}}>
-  <:columns as |context|>
-    <PixTableColumn @context={{context}}>
+  <:columns as |row index|>
+    <PixTableColumn @index={{index}}>
       <:header>
         Nom
       </:header>
-      <:cell as |row|>
+      <:cell>
         {{row.name}}
       </:cell>
     </PixTableColumn>
-    <PixTableColumn @context={{context}}>
+    <PixTableColumn @index={{index}}>
       <:header>
         Description
       </:header>
-      <:cell as |row|>
+      <:cell>
         <i>{{row.description}}</i>
       </:cell>
     </PixTableColumn>
-    <PixTableColumn @context={{context}} class='table__column--wide'>
+    <PixTableColumn @index={{index}} class='table__column--wide'>
       <:header>
         Age
       </:header>
-      <:cell as |row|>
+      <:cell>
         il a
         {{row.age}}
         ans
       </:cell>
     </PixTableColumn>
-    <PixTableColumn @context={{context}}>
+    <PixTableColumn @index={{index}}>
       <:header>
         Info
       </:header>
-      <:cell as |row|>
+      <:cell>
         <PixIcon @name='info' @title={{concat row.name ' a ' row.age ' ans'}} />
       </:cell>
     </PixTableColumn>
diff --git a/tests/integration/components/pix-table-test.js b/tests/integration/components/pix-table-test.js
index 092f72d10..68c9896c5 100644
--- a/tests/integration/components/pix-table-test.js
+++ b/tests/integration/components/pix-table-test.js
@@ -26,28 +26,28 @@ module('Integration | Component | table', function (hooks) {
     // when
     const screen = await render(
       hbs`<PixTable @caption='Ceci est le caption de notre table' @data={{this.data}}>
-  <:columns as |context|>
-    <PixTableColumn @context={{context}}>
+  <:columns as |row index|>
+    <PixTableColumn @index={{index}}>
       <:header>
         Nom
       </:header>
-      <:cell as |row|>
+      <:cell>
         {{row.name}}
       </:cell>
     </PixTableColumn>
-    <PixTableColumn @context={{context}}>
+    <PixTableColumn @index={{index}}>
       <:header>
         Description
       </:header>
-      <:cell as |row|>
+      <:cell>
         {{row.description}}
       </:cell>
     </PixTableColumn>
-    <PixTableColumn @context={{context}}>
+    <PixTableColumn @index={{index}}>
       <:header>
         Age
       </:header>
-      <:cell as |row|>
+      <:cell>
         il a
         {{row.age}}
         ans
@@ -79,28 +79,28 @@ module('Integration | Component | table', function (hooks) {
   @data={{this.data}}
   @variant={{this.variant}}
 >
-  <:columns as |context|>
-    <PixTableColumn @context={{context}}>
+  <:columns as |row index|>
+    <PixTableColumn @index={{index}}>
       <:header>
         Nom
       </:header>
-      <:cell as |row|>
+      <:cell>
         {{row.name}}
       </:cell>
     </PixTableColumn>
-    <PixTableColumn @context={{context}}>
+    <PixTableColumn @index={{index}}>
       <:header>
         Description
       </:header>
-      <:cell as |row|>
+      <:cell>
         {{row.description}}
       </:cell>
     </PixTableColumn>
-    <PixTableColumn @context={{context}}>
+    <PixTableColumn @index={{index}}>
       <:header>
         Age
       </:header>
-      <:cell as |row|>
+      <:cell>
         il a
         {{row.age}}
         ans