Skip to content
Permalink
Browse files

feat(b-table, b-table-lite): add prop `details-td-class` for applying…

… classes to the details row `<td>` (#4276)
  • Loading branch information
tmorehouse committed Oct 19, 2019
1 parent b1ba127 commit 702a1ef152d0a064dcf7dfaaa55168d2e1b82a50
@@ -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',
@@ -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"
@@ -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 },

0 comments on commit 702a1ef

Please sign in to comment.
You can’t perform that action at this time.