rework expandable table (#2825)

build/js/ExpandableTable.js

@@ -20,13 +20,9 @@ const JQUERY_NO_CONFLICT = $.fn[NAME]
 const EVENT_EXPANDED = `expanded${EVENT_KEY}`
 const EVENT_COLLAPSED = `collapsed${EVENT_KEY}`
 
-const CLASS_NAME_HEADER = 'expandable-header'
-
 const SELECTOR_TABLE = '.expandable-table'
-const SELECTOR_HEADER = `.${CLASS_NAME_HEADER}`
-const SELECTOR_DATA_SELECTOR = 'data-expandable-table'
-const SELECTOR_EXPANDED = 'expanded'
-const SELECTOR_COLLAPSED = 'collapsed'
+const SELECTOR_DATA_TOGGLE = '[data-widget="expandable-table"]'
+const SELECTOR_ARIA_ATTR = 'aria-expanded'
 
 /**
   * Class Definition
@@ -41,16 +37,12 @@ class ExpandableTable {
   // Public
 
   init() {
-    $(SELECTOR_HEADER).each((_, $header) => {
-      // Next Child to the header will have the same column span as header
-      $($header).next().children().first().attr('colspan', $($header).children().length)
-
-      // Setting up table design for the first time
-      const $type = $($header).next().attr(SELECTOR_DATA_SELECTOR)
+    $(SELECTOR_DATA_TOGGLE).each((_, $header) => {
+      const $type = $($header).attr(SELECTOR_ARIA_ATTR)
       const $body = $($header).next().children().first().children()
-      if ($type === SELECTOR_EXPANDED) {
+      if ($type === 'true') {
         $body.show()
-      } else if ($type === SELECTOR_COLLAPSED) {
+      } else if ($type === 'false') {
         $body.hide()
         $body.parent().parent().addClass('d-none')
       }
@@ -60,19 +52,23 @@ class ExpandableTable {
   toggleRow() {
     const $element = this._element
     const time = 500
-    const $type = $element.next().attr(SELECTOR_DATA_SELECTOR)
+    const $type = $element.attr(SELECTOR_ARIA_ATTR)
     const $body = $element.next().children().first().children()
+
+    // eslint-disable-next-line no-console
+    console.log($element)
+
     $body.stop()
-    if ($type === SELECTOR_EXPANDED) {
+    if ($type === 'true') {
       $body.slideUp(time, () => {
         $element.next().addClass('d-none')
       })
-      $element.next().attr(SELECTOR_DATA_SELECTOR, SELECTOR_COLLAPSED)
+      $element.attr(SELECTOR_ARIA_ATTR, 'false')
       $element.trigger($.Event(EVENT_COLLAPSED))
-    } else if ($type === SELECTOR_COLLAPSED) {
+    } else if ($type === 'false') {
       $element.next().removeClass('d-none')
       $body.slideDown(time)
-      $element.next().attr(SELECTOR_DATA_SELECTOR, SELECTOR_EXPANDED)
+      $element.attr(SELECTOR_ARIA_ATTR, 'true')
       $element.trigger($.Event(EVENT_EXPANDED))
     }
   }
@@ -102,7 +98,7 @@ $(SELECTOR_TABLE).ready(function () {
   ExpandableTable._jQueryInterface.call($(this), 'init')
 })
 
-$(document).on('click', SELECTOR_HEADER, function () {
+$(document).on('click', SELECTOR_DATA_TOGGLE, function () {
   ExpandableTable._jQueryInterface.call($(this), 'toggleRow')
 })
 

build/scss/_table.scss

@@ -72,6 +72,15 @@
 }
 
 // Expandable Table
+
+.table-hover tbody tr.expandable-body:hover {
+  background-color: inherit !important;
+}
+
+[data-widget="expandable-table"] {
+  cursor: pointer;
+}
+
 .expandable-body {
   td {
     padding: 0;