+57
-3
lines changedFilter options
+57
-3
lines changed Original file line number Diff line number Diff line change
@@ -10,7 +10,11 @@ const detailsSlotName = 'row-details'
10 10
export default {
11 11
props: {
12 12
tbodyTrClass: {
13 -
type: [String, Array, Function],
13 +
type: [String, Array, Object, Function],
14 +
default: null
15 +
},
16 +
detailsTdClass: {
17 +
type: [String, Array, Object],
14 18
default: null
15 19
}
16 20
},
@@ -251,14 +255,15 @@ export default {
251 255
}
252 256 253 257
// Render the details slot in a TD
254 -
const $details = h(BTd, { props: { colspan: fields.length } }, [
258 +
const $details = h(BTd, { props: { colspan: fields.length }, class: this.detailsTdClass }, [
255 259
this.normalizeSlot(detailsSlotName, detailsScope)
256 260
])
257 261 258 262
// Add a hidden row to keep table row striping consistent when details showing
263 +
// Only added if the table is striped
259 264
if (tableStriped) {
260 265
$rows.push(
261 -
// We don't use `BTr` here as we dont need the extra functionality
266 +
// We don't use `BTr` here as we don't need the extra functionality
262 267
h('tr', {
263 268
key: `__b-table-details-stripe__${rowKey}`,
264 269
staticClass: 'd-none',
@@ -135,6 +135,11 @@
135 135
"prop": "tbodyTrClass",
136 136
"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)"
137 137
},
138 +
{
139 +
"prop": "detailsTdClass",
140 +
"version": "2.1.0",
141 +
"description": "CSS class (or classes) to apply to the td element in the details row"
142 +
},
138 143
{
139 144
"prop": "value",
140 145
"description": "Currently displayed row data. Read-only. Do not set a value on this prop"
@@ -1059,6 +1064,11 @@
1059 1064
"prop": "tbodyTrClass",
1060 1065
"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)"
1061 1066
},
1067 +
{
1068 +
"prop": "detailsTdClass",
1069 +
"version": "2.1.0",
1070 +
"description": "CSS class (or classes) to apply to the td element in the details row"
1071 +
},
1062 1072
{
1063 1073
"prop": "value",
1064 1074
"description": "Currently displayed row data. Read-only. Do not set a value on this prop"
@@ -59,6 +59,45 @@ describe('table > row details', () => {
59 59
wrapper.destroy()
60 60
})
61 61 62 +
it('prop `details-td-class` works', async () => {
63 +
const testItems = [
64 +
{ a: 1, b: 2, c: 3, _showDetails: true },
65 +
{ a: 5, b: 5, c: 6 },
66 +
{ a: 7, b: 8, c: 9, _showDetails: false }
67 +
]
68 +
const testFields = ['a', 'b', 'c']
69 +
const wrapper = mount(BTable, {
70 +
propsData: {
71 +
fields: testFields,
72 +
items: testItems,
73 +
detailsTdClass: 'foobar-class'
74 +
},
75 +
slots: {
76 +
// Named slots get turned into scopedSlots in Vue 2.6.x
77 +
'row-details': '<div>foobar</div>'
78 +
}
79 +
})
80 + 81 +
expect(wrapper).toBeDefined()
82 +
expect(wrapper.find('tbody').exists()).toBe(true)
83 +
const $trs = wrapper.findAll('tbody > tr')
84 +
expect($trs.length).toBe(4)
85 +
expect($trs.at(0).is('tr.b-table-details')).toBe(false)
86 +
expect($trs.at(0).findAll('td').length).toBe(3)
87 +
expect($trs.at(1).is('tr.b-table-details')).toBe(true)
88 +
expect($trs.at(1).findAll('td').length).toBe(1)
89 +
expect($trs.at(1).text()).toBe('foobar')
90 +
const $detailsTd = $trs.at(1).find('td')
91 +
expect($detailsTd.classes().length).toBe(1)
92 +
expect($detailsTd.classes()).toContain('foobar-class')
93 +
expect($trs.at(2).is('tr.b-table-details')).toBe(false)
94 +
expect($trs.at(2).findAll('td').length).toBe(3)
95 +
expect($trs.at(3).is('tr.b-table-details')).toBe(false)
96 +
expect($trs.at(3).findAll('td').length).toBe(3)
97 + 98 +
wrapper.destroy()
99 +
})
100 + 62 101
it('should show details slot when _showDetails changed', async () => {
63 102
const testItems = [
64 103
{ a: 1, b: 2, c: 3, _showDetails: true },
You can’t perform that action at this time.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4