enhance ExpandableTable for table tree (#2907)

* enhance ExpandableTable for table tree
* remove unused rotate class
* fix html validator error/warnings

build/js/ExpandableTable.js

@@ -29,8 +29,8 @@ const SELECTOR_ARIA_ATTR = 'aria-expanded'
   * ====================================================
   */
 class ExpandableTable {
-  constructor(element, config) {
-    this._config = config
+  constructor(element, options) {
+    this._options = options
     this._element = element
   }
 
@@ -72,16 +72,17 @@ class ExpandableTable {
 
   // Static
 
-  static _jQueryInterface(config) {
+  static _jQueryInterface(operation) {
     return this.each(function () {
       let data = $(this).data(DATA_KEY)
+
       if (!data) {
         data = new ExpandableTable($(this))
         $(this).data(DATA_KEY, data)
       }
 
-      if (config === 'init' || config === 'toggleRow') {
-        data[config]()
+      if (typeof operation === 'string' && operation.match(/init|toggleRow/)) {
+        data[operation]()
       }
     })
   }

build/scss/_table.scss

@@ -79,11 +79,27 @@
 
 [data-widget="expandable-table"] {
   cursor: pointer;
+
+  i {
+    transition: transform $transition-speed linear;
+  }
+  &[aria-expanded="true"] {
+    td > i {
+      // stylelint-disable selector-max-attribute
+      &[class*="right"] {
+        transform: rotate(90deg);
+      }
+      &[class*="left"] {
+        transform: rotate(-90deg);
+      }
+      // stylelint-enable selector-max-attribute
+    }
+  }
 }
 
 .expandable-body {
-  td {
-    padding: 0;
+  > td {
+    padding: 0 !important;
     width: 100%;
 
     > div,
@@ -91,4 +107,16 @@
       padding: $table-cell-padding;
     }
   }
+
+  .table {
+    width: calc(100% - #{$table-cell-padding});
+    margin: 0 0 0 $table-cell-padding;
+
+    tr:first-child {
+      td,
+      th {
+        border-top: none;
+      }
+    }
+  }
 }

pages/tables/simple.html

@@ -1313,7 +1313,94 @@
             <!-- /.card -->
           </div>
         </div>
-        <!--  -->
+        <!-- /.row -->
+        <div class="row">
+          <div class="col-12">
+            <div class="card">
+              <div class="card-header">
+                <h3 class="card-title">Expandable Table Tree</h3>
+              </div>
+              <!-- ./card-header -->
+              <div class="card-body p-0">
+                <table class="table table-hover">
+                  <tbody>
+                    <tr>
+                      <td class="border-0">183</td>
+                    </tr>
+                    <tr data-widget="expandable-table" aria-expanded="true">
+                      <td>
+                        <i class="fas fa-caret-right fa-fw"></i>
+                        219
+                      </td>
+                    </tr>
+                    <tr class="expandable-body">
+                      <td>
+                        <div class="p-0">
+                          <table class="table table-hover">
+                            <tbody>
+                              <tr data-widget="expandable-table" aria-expanded="false">
+                                <td>
+                                  <i class="fas fa-caret-right fa-fw"></i>
+                                  219-1
+                                </td>
+                              </tr>
+                              <tr class="expandable-body">
+                                <td>
+                                  <div class="p-0">
+                                    <table class="table table-hover">
+                                      <tbody>
+                                        <tr>
+                                          <td>219-1-1</td>
+                                        </tr>
+                                        <tr>
+                                          <td>219-1-2</td>
+                                        </tr>
+                                        <tr>
+                                          <td>219-1-3</td>
+                                        </tr>
+                                      </tbody>
+                                    </table>
+                                  </div>
+                                </td>
+                              </tr>
+                              <tr>
+                                <td>219-2</td>
+                              </tr>
+                              <tr>
+                                <td>219-3</td>
+                              </tr>
+                            </tbody>
+                          </table>
+                        </div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td>657</td>
+                    </tr>
+                    <tr>
+                      <td>175</td>
+                    </tr>
+                    <tr>
+                      <td>134</td>
+                    </tr>
+                    <tr>
+                      <td>494</td>
+                    </tr>
+                    <tr>
+                      <td>832</td>
+                    </tr>
+                    <tr>
+                      <td>982</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+              <!-- /.card-body -->
+            </div>
+            <!-- /.card -->
+          </div>
+        </div>
+        <!-- /.row -->
       </div><!-- /.container-fluid -->
     </section>
     <!-- /.content -->