feat(3973): enhance ExpandableTable with button click beside table row click

build/js/ExpandableTable.js

@@ -51,7 +51,15 @@ class ExpandableTable {
   }
 
   toggleRow() {
-    const $element = this._element
+    let $element = this._element
+
+    if ($element[0].nodeName !== 'TR') {
+      $element = $element.parent()
+      if ($element[0].nodeName !== 'TR') {
+        $element = $element.parent()
+      }
+    }
+
     const time = 500
     const $type = $element.attr(SELECTOR_ARIA_ATTR)
     const $body = $element.next(SELECTOR_EXPANDABLE_BODY).children().first().children()

build/scss/_table.scss

@@ -86,7 +86,27 @@
     transition: transform $transition-speed linear;
   }
   &[aria-expanded="true"] {
-    td i.expandable-table-caret {
+    i.expandable-table-caret {
+      // stylelint-disable selector-max-attribute
+      &[class*="right"] {
+        transform: rotate(90deg);
+      }
+      &[class*="left"] {
+        transform: rotate(-90deg);
+      }
+      // stylelint-enable selector-max-attribute
+    }
+  }
+}
+
+[aria-expanded="true"] {
+  cursor: pointer;
+
+  i.expandable-table-caret {
+    transition: transform $transition-speed linear;
+  }
+  [data-widget="expandable-table"] {
+    i.expandable-table-caret {
       // stylelint-disable selector-max-attribute
       &[class*="right"] {
         transform: rotate(90deg);