feat(b-table, b-table-lite): add prop details-td-class for applying classes to the details row <td> (#4276)

tmorehouse · web-flow · commit 702a1ef152d0 · 2019-10-19T13:17:33.000-03:00
diff --git a/src/components/table/helpers/mixin-tbody-row.js b/src/components/table/helpers/mixin-tbody-row.js
@@ -10,7 +10,11 @@ const detailsSlotName = 'row-details'
 export default {
   props: {
     tbodyTrClass: {
-      type: [String, Array, Function],
+      type: [String, Array, Object, Function],
+      default: null
+    },
+    detailsTdClass: {
+      type: [String, Array, Object],
       default: null
     }
   },
@@ -251,14 +255,15 @@ export default {
         }
 
         // Render the details slot in a TD
-        const $details = h(BTd, { props: { colspan: fields.length } }, [
+        const $details = h(BTd, { props: { colspan: fields.length }, class: this.detailsTdClass }, [
           this.normalizeSlot(detailsSlotName, detailsScope)
         ])
 
         // Add a hidden row to keep table row striping consistent when details showing
+        // Only added if the table is striped
         if (tableStriped) {
           $rows.push(
-            // We don't use `BTr` here as we dont need the extra functionality
+            // We don't use `BTr` here as we don't need the extra functionality
             h('tr', {
               key: `__b-table-details-stripe__${rowKey}`,
               staticClass: 'd-none',
diff --git a/src/components/table/package.json b/src/components/table/package.json
@@ -135,6 +135,11 @@
             "prop": "tbodyTrClass",
             "description": "CSS class (or classes) to apply to the tr element in the tbody. Can be a function that returns a class (see docs for details)"
           },
+          {
+            "prop": "detailsTdClass",
+            "version": "2.1.0",
+            "description": "CSS class (or classes) to apply to the td element in the details row"
+          },
           {
             "prop": "value",
             "description": "Currently displayed row data. Read-only. Do not set a value on this prop"
@@ -1059,6 +1064,11 @@
             "prop": "tbodyTrClass",
             "description": "CSS class (or classes) to apply to the tr element in the tbody. Can be a function that returns a class (see docs for details)"
           },
+          {
+            "prop": "detailsTdClass",
+            "version": "2.1.0",
+            "description": "CSS class (or classes) to apply to the td element in the details row"
+          },
           {
             "prop": "value",
             "description": "Currently displayed row data. Read-only. Do not set a value on this prop"
diff --git a/src/components/table/table-row-details.spec.js b/src/components/table/table-row-details.spec.js
@@ -59,6 +59,45 @@ describe('table > row details', () => {
     wrapper.destroy()
   })
 
+  it('prop `details-td-class` works', async () => {
+    const testItems = [
+      { a: 1, b: 2, c: 3, _showDetails: true },
+      { a: 5, b: 5, c: 6 },
+      { a: 7, b: 8, c: 9, _showDetails: false }
+    ]
+    const testFields = ['a', 'b', 'c']
+    const wrapper = mount(BTable, {
+      propsData: {
+        fields: testFields,
+        items: testItems,
+        detailsTdClass: 'foobar-class'
+      },
+      slots: {
+        // Named slots get turned into scopedSlots in Vue 2.6.x
+        'row-details': '<div>foobar</div>'
+      }
+    })
+
+    expect(wrapper).toBeDefined()
+    expect(wrapper.find('tbody').exists()).toBe(true)
+    const $trs = wrapper.findAll('tbody > tr')
+    expect($trs.length).toBe(4)
+    expect($trs.at(0).is('tr.b-table-details')).toBe(false)
+    expect($trs.at(0).findAll('td').length).toBe(3)
+    expect($trs.at(1).is('tr.b-table-details')).toBe(true)
+    expect($trs.at(1).findAll('td').length).toBe(1)
+    expect($trs.at(1).text()).toBe('foobar')
+    const $detailsTd = $trs.at(1).find('td')
+    expect($detailsTd.classes().length).toBe(1)
+    expect($detailsTd.classes()).toContain('foobar-class')
+    expect($trs.at(2).is('tr.b-table-details')).toBe(false)
+    expect($trs.at(2).findAll('td').length).toBe(3)
+    expect($trs.at(3).is('tr.b-table-details')).toBe(false)
+    expect($trs.at(3).findAll('td').length).toBe(3)
+
+    wrapper.destroy()
+  })
+
   it('should show details slot when _showDetails changed', async () => {
     const testItems = [
       { a: 1, b: 2, c: 3, _showDetails: true },
