Merge pull request #3458 from hkvstore/expandable-table

Improve expandable table

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_EXPANDABLE_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_EXPANDABLE_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_EXPANDABLE_BODY).children().first().children()
 
     $body.stop()
     if ($type === 'true') {
       $body.slideUp(time, () => {
-        $element.next().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().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))

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);

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>
@@ -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>