+90
-9
lines changedFilter options
+90
-9
lines changed Original file line number Diff line number Diff line change
@@ -85,28 +85,54 @@ export default {
85 85
const hasDetailsSlot = this.hasNormalizedSlot(detailsSlotName)
86 86
const formatted = this.getFormattedValue(item, field)
87 87
const key = field.key
88 +
// We only uses the helper components for sticky columns to
89 +
// improve performance of BTable/BTableLite by reducing the
90 +
// total number of vue instances created during render
91 +
const cellTag = field.stickyColumn
92 +
? field.isRowHeader
93 +
? BTh
94 +
: BTd
95 +
: field.isRowHeader
96 +
? 'th'
97 +
: 'td'
98 +
const cellVariant =
99 +
item._cellVariants && item._cellVariants[key]
100 +
? item._cellVariants[key]
101 +
: field.variant || null
88 102
const data = {
89 103
// For the Vue key, we concatenate the column index and
90 104
// field key (as field keys could be duplicated)
91 105
// TODO: Although we do prevent duplicate field keys...
92 106
// So we could change this to: `row-${rowIndex}-cell-${key}`
93 107
key: `row-${rowIndex}-cell-${colIndex}-${key}`,
94 108
class: [field.class ? field.class : '', this.getTdValues(item, key, field.tdClass, '')],
95 -
props: {
96 -
stackedHeading: this.isStacked ? field.label : null,
97 -
stickyColumn: field.stickyColumn,
98 -
variant:
99 -
item._cellVariants && item._cellVariants[key]
100 -
? item._cellVariants[key]
101 -
: field.variant || null
102 -
},
109 +
props: {},
103 110
attrs: {
104 111
'aria-colindex': String(colIndex + 1),
105 112
...(field.isRowHeader
106 113
? this.getThValues(item, key, field.thAttr, 'row', {})
107 114
: this.getTdValues(item, key, field.tdAttr, {}))
108 115
}
109 116
}
117 +
if (field.stickyColumn) {
118 +
// We are using the helper BTd or BTh
119 +
data.props = {
120 +
stackedHeading: this.isStacked ? field.label : null,
121 +
stickyColumn: field.stickyColumn,
122 +
variant: cellVariant
123 +
}
124 +
} else {
125 +
// Using native TD or TH element, so we need to
126 +
// add in the attributes and variant class
127 +
data.attrs['data-label'] =
128 +
this.isStacked && !isUndefinedOrNull(field.label) ? toString(field.label) : null
129 +
data.attrs.role = field.isRowHeader ? 'rowheader' : 'cell'
130 +
data.attrs.scope = field.isRowHeader ? 'row' : null
131 +
// Add in the variant class
132 +
if (cellVariant) {
133 +
data.class.push(`${this.dark ? 'bg' : 'table'}-${cellVariant}`)
134 +
}
135 +
}
110 136
const slotScope = {
111 137
item: item,
112 138
index: rowIndex,
@@ -135,7 +161,7 @@ export default {
135 161
$childNodes = [h('div', {}, [$childNodes])]
136 162
}
137 163
// Render either a td or th cell
138 -
return h(field.isRowHeader ? BTh : BTd, data, [$childNodes])
164 +
return h(cellTag, data, [$childNodes])
139 165
},
140 166
renderTbodyRow(item, rowIndex) {
141 167
// Renders an item's row (or rows if details supported)
@@ -0,0 +1,55 @@
1 +
import { mount } from '@vue/test-utils'
2 +
import { BTable } from './table'
3 +
import { BTd } from './td'
4 +
import { BTh } from './th'
5 + 6 +
const items = [{ a: 1, b: 2, c: 3 }, { a: 4, b: 5, c: 6 }]
7 +
const fields = [
8 +
{ key: 'a', stickyColumn: true, isRowHeader: true },
9 +
{ key: 'b', stickyColumn: true },
10 +
'c'
11 +
]
12 + 13 +
describe('table > sticky columns', () => {
14 +
it('has expected classes when sticky column is enabled', async () => {
15 +
const wrapper = mount(BTable, {
16 +
propsData: {
17 +
responsive: true,
18 +
items: items,
19 +
fields: fields
20 +
}
21 +
})
22 + 23 +
expect(wrapper).toBeDefined()
24 +
expect(wrapper.is(BTable)).toBe(true)
25 +
expect(wrapper.is('div')).toBe(true)
26 +
expect(wrapper.classes()).toContain('table-responsive')
27 +
const table = wrapper.find('table')
28 +
expect(table.classes()).toContain('table')
29 +
expect(table.classes()).toContain('b-table')
30 + 31 +
const trs = wrapper.findAll('tbody > tr')
32 +
expect(trs.length).toBe(2)
33 + 34 +
const cells = trs.at(0).findAll('th, td')
35 +
expect(cells.length).toBe(3)
36 + 37 +
// First column should be BTh with sticky classes
38 +
expect(cells.at(0).is(BTh)).toBe(true)
39 +
expect(cells.at(0).is('th')).toBe(true)
40 +
expect(cells.at(0).classes()).toContain('b-table-sticky-column')
41 + 42 +
// Second column should be BTd with sticky classes
43 +
expect(cells.at(1).is(BTd)).toBe(true)
44 +
expect(cells.at(1).is('td')).toBe(true)
45 +
expect(cells.at(1).classes()).toContain('b-table-sticky-column')
46 + 47 +
// Third column should be td
48 +
expect(cells.at(2).is(BTd)).toBe(false)
49 +
expect(cells.at(2).is(BTh)).toBe(false)
50 +
expect(cells.at(2).is('td')).toBe(true)
51 +
expect(cells.at(2).classes()).not.toContain('b-table-sticky-column')
52 + 53 +
wrapper.destroy()
54 +
})
55 +
})
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