feat(pix-table): allow pass onClickon row

1024pix · Feb 27, 2025 · c28d031 · c28d031
1 parent 39fcc5c
commit c28d031
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 2 deletions.
diff --git a/addon/components/pix-table.hbs b/addon/components/pix-table.hbs
@@ -8,7 +8,10 @@
     </thead>
     <tbody>
       {{#each @data as |row|}}
-        <tr>
+        <tr
+          class={{if this.hasClickOnRow "pix-table__clickable-row" ""}}
+          {{on "click" (fn this.onClick row)}}
+        >
           {{yield row "cell" to="columns"}}
         </tr>
       {{/each}}

diff --git a/addon/components/pix-table.js b/addon/components/pix-table.js
@@ -1,4 +1,5 @@
 import { warn } from '@ember/debug';
+import { action } from '@ember/object';
 import Component from '@glimmer/component';
 
 export default class PixTable extends Component {
@@ -39,4 +40,16 @@ export default class PixTable extends Component {
   get headerClass() {
     return `pix-table-header--${this.variant}`;
   }
+
+  get hasClickOnRow() {
+    return typeof this.args.onClick === 'function';
+  }
+
+  @action
+  onClick(row, event) {
+    event.stopPropagation();
+    if (this.hasClickOnRow) {
+      this.args.onClick(row);
+    }
+  }
 }
diff --git a/addon/styles/_pix-table.scss b/addon/styles/_pix-table.scss
@@ -11,12 +11,24 @@
 
   @extend %pix-body-s;
 
-  .pix-table__condensed {
+  &__condensed {
     th, td {
       padding: var(--pix-spacing-2x) var(--pix-spacing-4x);
     }
   }
 
+  &__clickable-row {
+    cursor: pointer;
+
+    &:hover,
+    &:focus,
+    &:active {
+      color: var(--pix-neutral-900);
+      background-color: var(--pix-neutral-20);
+      transition: 0.25s ease;
+    }
+  }
+
   table {
     min-width: 100%;
     border-collapse: collapse;

diff --git a/app/stories/pix-table.stories.js b/app/stories/pix-table.stories.js
@@ -20,6 +20,12 @@ export default {
         'Définition du rendu des différentes colonnes de la table en utilisant `<PixTableColumn>`. Expose les paramètres `row` et `context` (correspondant aux données de la ligne actuelle)',
       type: { name: 'block content', required: true },
     },
+    onClick: {
+      name: 'onClick',
+      description:
+        "Permet d'ajouter un onClick sur le tr de chaque ligne, la function en paramètre récupérera l'objet au complet.",
+      type: { name: 'function', required: false },
+    },
     variant: {
       name: 'variant',
       description: "Afficher le bon variant pour l'application",