+151
-11
lines changedFilter options
+151
-11
lines changed Original file line number Diff line number Diff line change
@@ -1168,6 +1168,28 @@ Slot `thead-top` can be optionally scoped, receiving an object with the followin
1168 1168
| `selectAllRows` | Method | Select all rows (applicable if the table is in [`selectable`](#row-select-support) mode |
1169 1169
| `clearSelected` | Method | Unselect all rows (applicable if the table is in [`selectable`](#row-select-support) mode |
1170 1170 1171 +
### Creating a custom footer
1172 + 1173 +
If you need greater layout control of the content of the `<tfoot>`, you can use the optionally
1174 +
scoped slot `custom-foot` to provide your own rows and cells. Use BootstrapVue's
1175 +
[table helper sub-components](#table-helper-components) `<b-tr>`, `<b-th>`, and `<b-td>` to generate
1176 +
your custom footer layout.
1177 + 1178 +
Slot `custom-foot` can be optionally scoped, receiving an object with the following properties:
1179 + 1180 +
| Property | Type | Description |
1181 +
| --------- | ------ | ------------------------------------------------------------------------------------------ |
1182 +
| `columns` | Number | The number of columns in the rendered table |
1183 +
| `fields` | Array | Array of field definition objects (normalized to the array of objects format) |
1184 +
| `items` | Array | Array of the currently _displayed_ items records - after filtering, sorting and pagination |
1185 + 1186 +
**Notes:**
1187 + 1188 +
- The `custom-foot` slot will **not** be rendered if the `foot-clone` prop has been set.
1189 +
- `head-clicked` events are not be emitted when clicking on `custom-foot` cells.
1190 +
- Sorting and sorting icons are not available for cells in the `custom-foot` slot.
1191 +
- The custom footer will not be shown when the table is in visually stacked mode.
1192 + 1171 1193
## Custom empty and emptyfiltered rendering via slots
1172 1194 1173 1195
Aside from using `empty-text`, `empty-filtered-text`, `empty-html`, and `empty-filtered-html`, it is
@@ -2654,8 +2676,8 @@ helper components. `TableSimplePlugin` is available as a top level named export.
2654 2676
## Table helper components
2655 2677 2656 2678
BootstrapVue provides additional helper child components when using `<b-table-simple>`, or the named
2657 -
slots `top-row`, `bottom-row`, and `thead-top` (all of which accept table child elements). The
2658 -
helper components are as follows:
2679 +
slots `top-row`, `bottom-row`, `thead-top`, and `custom-foot` (all of which accept table child
2680 +
elements). The helper components are as follows:
2659 2681 2660 2682
- `b-tbody` (`<b-table-simple>` only)
2661 2683
- `b-thead` (`<b-table-simple>` only)
@@ -1,4 +1,5 @@
1 1
import { getComponentConfig } from '../../../utils/config'
2 +
import { BTfoot } from '../tfoot'
2 3 3 4
export default {
4 5
props: {
@@ -20,11 +21,29 @@ export default {
20 21
}
21 22
},
22 23
methods: {
23 -
renderTfoot() {
24 +
renderTFootCustom() {
24 25
const h = this.$createElement
25 - 26 +
if (this.hasNormalizedSlot('custom-foot')) {
27 +
return h(
28 +
BTfoot,
29 +
{
30 +
key: 'bv-tfoot-custom',
31 +
class: this.tfootClass || null,
32 +
props: { footVariant: this.footVariant || this.headVariant || null }
33 +
},
34 +
this.normalizeSlot('custom-foot', {
35 +
items: this.computedItems.slice(),
36 +
fields: this.computedFields.slice(),
37 +
columns: this.computedFields.length
38 +
})
39 +
)
40 +
} else {
41 +
return h()
42 +
}
43 +
},
44 +
renderTfoot() {
26 45
// Passing true to renderThead will make it render a tfoot
27 -
return this.footClone ? this.renderThead(true) : h()
46 +
return this.footClone ? this.renderThead(true) : this.renderTFootCustom()
28 47
}
29 48
}
30 49
}
Original file line number Diff line number Diff line change
@@ -132,7 +132,7 @@
132 132
},
133 133
{
134 134
"event": "head-clicked",
135 -
"description": "Emitted when a header or footer cell is clicked.",
135 +
"description": "Emitted when a header or footer cell is clicked. Not applicable for 'custom-foot' slot.",
136 136
"args": [
137 137
{
138 138
"arg": "key",
@@ -250,15 +250,19 @@
250 250
},
251 251
{
252 252
"name": "thead-top",
253 -
"description": "Slot above the column headers in the `thead` element for user-supplied rows (optionally scoped: columns - number of TDs to provide, fields - array of field definition objects)"
253 +
"description": "Slot above the column headers in the `thead` element for user-supplied B-TR's with B-TH/B-TD (optionally scoped: columns - number of TDs to provide, fields - array of field definition objects)"
254 254
},
255 255
{
256 256
"name": "top-row",
257 -
"description": "Fixed top row slot for user supplied TD cells (Optionally scoped: columns - number of TDs to provide, fields - array of field definition objects)"
257 +
"description": "Fixed top row slot for user supplied B-TD cells (Optionally scoped: columns - number of B-TDs to provide, fields - array of field definition objects)"
258 258
},
259 259
{
260 260
"name": "bottom-row",
261 -
"description": "Fixed bottom row slot for user supplied TD cells (Optionally Scoped: columns - number of TDs to provide, fields - array of field definition objects)"
261 +
"description": "Fixed bottom row slot for user supplied B-TD cells (Optionally Scoped: columns - number of B-TDs to provide, fields - array of field definition objects)"
262 +
},
263 +
{
264 +
"name": "custom-foot",
265 +
"description": "Custom footer content slot for user supplied B-TR, B-TH, B-TD (Optionally Scoped: columns - number columns, fields - array of field definition objects, items - array of currently displayed row items)"
262 266
}
263 267
]
264 268
},
@@ -375,7 +379,7 @@
375 379
},
376 380
{
377 381
"event": "head-clicked",
378 -
"description": "Emitted when a header or footer cell is clicked.",
382 +
"description": "Emitted when a header or footer cell is clicked. Not applicable for 'custom-foot' slot.",
379 383
"args": [
380 384
{
381 385
"arg": "key",
@@ -435,7 +439,11 @@
435 439
},
436 440
{
437 441
"name": "thead-top",
438 -
"description": "Slot above the column headers in the `thead` element for user-supplied rows (optionally scoped: columns - number of TDs to provide, fields - array of field definition objects)"
442 +
"description": "Slot above the column headers in the `thead` element for user-supplied B-TR with B-TH/B-TD (optionally scoped: columns - number of TDs to provide, fields - array of field definition objects)"
443 +
},
444 +
{
445 +
"name": "custom-foot",
446 +
"description": "Custom footer content slot for user supplied B-TR's with B-TH/B-TD (Optionally Scoped: columns - number columns, fields - array of field definition objects, items - array of currently displayed row items)"
439 447
}
440 448
]
441 449
},
@@ -0,0 +1,91 @@
1 +
import { mount } from '@vue/test-utils'
2 +
import { BTable } from './table'
3 + 4 +
const testItems = [{ a: 1, b: 2, c: 3 }]
5 +
const testFields = [{ key: 'a', label: 'A' }, { key: 'b', label: 'B' }, { key: 'c', label: 'C' }]
6 + 7 +
describe('table > custom tfoot slot', () => {
8 +
it('should not render tfoot by default', async () => {
9 +
const wrapper = mount(BTable, {
10 +
propsData: {
11 +
fields: testFields,
12 +
items: testItems,
13 +
footClone: false
14 +
}
15 +
})
16 +
expect(wrapper).toBeDefined()
17 +
expect(wrapper.is('table')).toBe(true)
18 +
expect(wrapper.find('thead').exists()).toBe(true)
19 +
expect(wrapper.find('tbody').exists()).toBe(true)
20 +
expect(wrapper.find('tfoot').exists()).toBe(false)
21 + 22 +
wrapper.destroy()
23 +
})
24 + 25 +
it('should render custom-foot slot inside b-tfoot', async () => {
26 +
const wrapper = mount(BTable, {
27 +
propsData: {
28 +
fields: testFields,
29 +
items: testItems,
30 +
footClone: false
31 +
},
32 +
slots: {
33 +
'custom-foot': '<tr><td colspan="3">CUSTOM-FOOTER</td></tr>'
34 +
}
35 +
})
36 +
expect(wrapper).toBeDefined()
37 +
expect(wrapper.is('table')).toBe(true)
38 +
expect(wrapper.find('thead').exists()).toBe(true)
39 +
expect(wrapper.find('tbody').exists()).toBe(true)
40 +
expect(wrapper.find('tfoot').exists()).toBe(true)
41 +
expect(wrapper.find('tfoot').text()).toContain('CUSTOM-FOOTER')
42 +
expect(wrapper.find('tfoot').classes().length).toBe(0)
43 + 44 +
wrapper.destroy()
45 +
})
46 + 47 +
it('should not render custom-foot slot when foot-clone is true', async () => {
48 +
const wrapper = mount(BTable, {
49 +
propsData: {
50 +
fields: testFields,
51 +
items: testItems,
52 +
footClone: true
53 +
},
54 +
slots: {
55 +
'custom-foot': '<tr><td colspan="3">CUSTOM-FOOTER</td></tr>'
56 +
}
57 +
})
58 +
expect(wrapper).toBeDefined()
59 +
expect(wrapper.is('table')).toBe(true)
60 +
expect(wrapper.find('thead').exists()).toBe(true)
61 +
expect(wrapper.find('tbody').exists()).toBe(true)
62 +
expect(wrapper.find('tfoot').exists()).toBe(true)
63 +
expect(wrapper.find('tfoot').text()).not.toContain('CUSTOM-FOOTER')
64 + 65 +
wrapper.destroy()
66 +
})
67 + 68 +
it('should have foot-variant on custom-foot slot', async () => {
69 +
const wrapper = mount(BTable, {
70 +
propsData: {
71 +
fields: testFields,
72 +
items: testItems,
73 +
footClone: false,
74 +
footVariant: 'dark'
75 +
},
76 +
slots: {
77 +
'custom-foot': '<tr><td colspan="3">CUSTOM-FOOTER</td></tr>'
78 +
}
79 +
})
80 +
expect(wrapper).toBeDefined()
81 +
expect(wrapper.is('table')).toBe(true)
82 +
expect(wrapper.find('thead').exists()).toBe(true)
83 +
expect(wrapper.find('tbody').exists()).toBe(true)
84 +
expect(wrapper.find('tfoot').exists()).toBe(true)
85 +
expect(wrapper.find('tfoot').text()).toContain('CUSTOM-FOOTER')
86 +
expect(wrapper.find('tfoot').classes()).toContain('thead-dark')
87 +
expect(wrapper.find('tfoot').classes().length).toBe(1)
88 + 89 +
wrapper.destroy()
90 +
})
91 +
})
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