Skip to content

Commit cbeeef9

Browse files
tmorehousetmorehouse
authored
feat(b-table, b-table-lite): add new scoped slot custom-foot to allow user to create their own table footer (closes #3960) (#4027)
1 parent 81efb89 commit cbeeef9

4 files changed

Lines changed: 151 additions & 11 deletions

File tree

‎src/components/table/README.md‎

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1168,6 +1168,28 @@ Slot `thead-top` can be optionally scoped, receiving an object with the followin
11681168
| `selectAllRows` | Method | Select all rows (applicable if the table is in [`selectable`](#row-select-support) mode |
11691169
| `clearSelected` | Method | Unselect all rows (applicable if the table is in [`selectable`](#row-select-support) mode |
11701170

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+
11711193
## Custom empty and emptyfiltered rendering via slots
11721194

11731195
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.
26542676
## Table helper components
26552677

26562678
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:
26592681

26602682
- `b-tbody` (`<b-table-simple>` only)
26612683
- `b-thead` (`<b-table-simple>` only)

‎src/components/table/helpers/mixin-tfoot.js‎

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { getComponentConfig } from '../../../utils/config'
2+
import { BTfoot } from '../tfoot'
23

34
export default {
45
props: {
@@ -20,11 +21,29 @@ export default {
2021
}
2122
},
2223
methods: {
23-
renderTfoot() {
24+
renderTFootCustom() {
2425
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() {
2645
// 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()
2847
}
2948
}
3049
}

‎src/components/table/package.json‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,7 @@
132132
},
133133
{
134134
"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.",
136136
"args": [
137137
{
138138
"arg": "key",
@@ -250,15 +250,19 @@
250250
},
251251
{
252252
"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)"
254254
},
255255
{
256256
"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)"
258258
},
259259
{
260260
"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)"
262266
}
263267
]
264268
},
@@ -375,7 +379,7 @@
375379
},
376380
{
377381
"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.",
379383
"args": [
380384
{
381385
"arg": "key",
@@ -435,7 +439,11 @@
435439
},
436440
{
437441
"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)"
439447
}
440448
]
441449
},

‎src/components/table/table-tfoot-custom.spec.js‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -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+
})

0 commit comments

Comments
 (0)