From b4a44632404014c68c6fbc40429dd60d5c68fd77 Mon Sep 17 00:00:00 2001
From: eworld <wklau@hketech.com>
Date: Sat, 27 Feb 2021 11:56:00 +0000
Subject: [PATCH 1/3] Improve expandable table

---
 build/js/ExpandableTable.js | 9 +++++----
 build/scss/_table.scss      | 4 ++--
 pages/tables/simple.html    | 4 ++--
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/build/js/ExpandableTable.js b/build/js/ExpandableTable.js
index f9d5eb337..6b0893c46 100644
--- a/build/js/ExpandableTable.js
+++ b/build/js/ExpandableTable.js
@@ -21,6 +21,7 @@ const EVENT_EXPANDED = `expanded${EVENT_KEY}`
 const EVENT_COLLAPSED = `collapsed${EVENT_KEY}`
 
 const SELECTOR_TABLE = '.expandable-table'
+const SELECTOR_BODY = '.expandable-body'
 const SELECTOR_DATA_TOGGLE = '[data-widget="expandable-table"]'
 const SELECTOR_ARIA_ATTR = 'aria-expanded'
 
@@ -39,7 +40,7 @@ class ExpandableTable {
   init() {
     $(SELECTOR_DATA_TOGGLE).each((_, $header) => {
       const $type = $($header).attr(SELECTOR_ARIA_ATTR)
-      const $body = $($header).next().children().first().children()
+      const $body = $($header).next(SELECTOR_BODY).children().first().children()
       if ($type === 'true') {
         $body.show()
       } else if ($type === 'false') {
@@ -53,17 +54,17 @@ class ExpandableTable {
     const $element = this._element
     const time = 500
     const $type = $element.attr(SELECTOR_ARIA_ATTR)
-    const $body = $element.next().children().first().children()
+    const $body = $element.next(SELECTOR_BODY).children().first().children()
 
     $body.stop()
     if ($type === 'true') {
       $body.slideUp(time, () => {
-        $element.next().addClass('d-none')
+        $element.next(SELECTOR_BODY).addClass('d-none')
       })
       $element.attr(SELECTOR_ARIA_ATTR, 'false')
       $element.trigger($.Event(EVENT_COLLAPSED))
     } else if ($type === 'false') {
-      $element.next().removeClass('d-none')
+      $element.next(SELECTOR_BODY).removeClass('d-none')
       $body.slideDown(time)
       $element.attr(SELECTOR_ARIA_ATTR, 'true')
       $element.trigger($.Event(EVENT_EXPANDED))
diff --git a/build/scss/_table.scss b/build/scss/_table.scss
index d06f8eacb..850d4cf8e 100644
--- a/build/scss/_table.scss
+++ b/build/scss/_table.scss
@@ -82,11 +82,11 @@
 [data-widget="expandable-table"] {
   cursor: pointer;
 
-  i {
+  i.expandable-table-caret {
     transition: transform $transition-speed linear;
   }
   &[aria-expanded="true"] {
-    td > i {
+    td i.expandable-table-caret {
       // stylelint-disable selector-max-attribute
       &[class*="right"] {
         transform: rotate(90deg);
diff --git a/pages/tables/simple.html b/pages/tables/simple.html
index 6cd66f711..dc643d473 100644
--- a/pages/tables/simple.html
+++ b/pages/tables/simple.html
@@ -1446,7 +1446,7 @@
                     </tr>
                     <tr data-widget="expandable-table" aria-expanded="true">
                       <td>
-                        <i class="fas fa-caret-right fa-fw"></i>
+                        <i class="expandable-table-caret fas fa-caret-right fa-fw"></i>
                         219
                       </td>
                     </tr>
@@ -1457,7 +1457,7 @@
                             <tbody>
                               <tr data-widget="expandable-table" aria-expanded="false">
                                 <td>
-                                  <i class="fas fa-caret-right fa-fw"></i>
+                                  <i class="expandable-table-caret fas fa-caret-right fa-fw"></i>
                                   219-1
                                 </td>
                               </tr>

From ee740e97e49028405478376cad8e4e27ffdfe06a Mon Sep 17 00:00:00 2001
From: eworld <wklau@hketech.com>
Date: Sat, 27 Feb 2021 12:10:43 +0000
Subject: [PATCH 2/3] Rename selector name

- Rename SELECTOR_BODY as SELECTOR_EXPANDABLE_BODY
---
 build/js/ExpandableTable.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/build/js/ExpandableTable.js b/build/js/ExpandableTable.js
index 6b0893c46..d7d882f21 100644
--- a/build/js/ExpandableTable.js
+++ b/build/js/ExpandableTable.js
@@ -21,7 +21,7 @@ const EVENT_EXPANDED = `expanded${EVENT_KEY}`
 const EVENT_COLLAPSED = `collapsed${EVENT_KEY}`
 
 const SELECTOR_TABLE = '.expandable-table'
-const SELECTOR_BODY = '.expandable-body'
+const SELECTOR_EXPANDABLE_BODY = '.expandable-body'
 const SELECTOR_DATA_TOGGLE = '[data-widget="expandable-table"]'
 const SELECTOR_ARIA_ATTR = 'aria-expanded'
 
@@ -40,7 +40,7 @@ class ExpandableTable {
   init() {
     $(SELECTOR_DATA_TOGGLE).each((_, $header) => {
       const $type = $($header).attr(SELECTOR_ARIA_ATTR)
-      const $body = $($header).next(SELECTOR_BODY).children().first().children()
+      const $body = $($header).next(SELECTOR_EXPANDABLE_BODY).children().first().children()
       if ($type === 'true') {
         $body.show()
       } else if ($type === 'false') {
@@ -54,17 +54,17 @@ class ExpandableTable {
     const $element = this._element
     const time = 500
     const $type = $element.attr(SELECTOR_ARIA_ATTR)
-    const $body = $element.next(SELECTOR_BODY).children().first().children()
+    const $body = $element.next(SELECTOR_EXPANDABLE_BODY).children().first().children()
 
     $body.stop()
     if ($type === 'true') {
       $body.slideUp(time, () => {
-        $element.next(SELECTOR_BODY).addClass('d-none')
+        $element.next(SELECTOR_EXPANDABLE_BODY).addClass('d-none')
       })
       $element.attr(SELECTOR_ARIA_ATTR, 'false')
       $element.trigger($.Event(EVENT_COLLAPSED))
     } else if ($type === 'false') {
-      $element.next(SELECTOR_BODY).removeClass('d-none')
+      $element.next(SELECTOR_EXPANDABLE_BODY).removeClass('d-none')
       $body.slideDown(time)
       $element.attr(SELECTOR_ARIA_ATTR, 'true')
       $element.trigger($.Event(EVENT_EXPANDED))

From daa448d4df99a99680083f9c5e6591f1add96914 Mon Sep 17 00:00:00 2001
From: eworld <wklau@hketech.com>
Date: Sat, 27 Feb 2021 12:43:51 +0000
Subject: [PATCH 3/3] Add button with icon example

---
 pages/tables/simple.html | 28 ++++++++++++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

diff --git a/pages/tables/simple.html b/pages/tables/simple.html
index dc643d473..fdfd1fc76 100644
--- a/pages/tables/simple.html
+++ b/pages/tables/simple.html
@@ -1480,8 +1480,32 @@
                                   </div>
                                 </td>
                               </tr>
-                              <tr>
-                                <td>219-2</td>
+                              <tr data-widget="expandable-table" aria-expanded="false">
+                                <td>
+                                  <button type="button" class="btn btn-primary p-0">
+                                    <i class="expandable-table-caret fas fa-caret-right fa-fw"></i>
+                                  </button>
+                                  219-2
+                                </td>
+                              </tr>
+                              <tr class="expandable-body">
+                                <td>
+                                  <div class="p-0">
+                                    <table class="table table-hover">
+                                      <tbody>
+                                        <tr>
+                                          <td>219-2-1</td>
+                                        </tr>
+                                        <tr>
+                                          <td>219-2-2</td>
+                                        </tr>
+                                        <tr>
+                                          <td>219-2-3</td>
+                                        </tr>
+                                      </tbody>
+                                    </table>
+                                  </div>
+                                </td>
                               </tr>
                               <tr>
                                 <td>219-3</td>