From c0083e5c89736c01e87c70da8c492bd56ebd81ce Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 5 Sep 2019 18:20:50 -0300 Subject: [PATCH 01/15] feat(b-table, b-table-lite): add new scoped slot `custom-foot` to allow user to create their own table footer --- src/components/table/helpers/mixin-tfoot.js | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/src/components/table/helpers/mixin-tfoot.js b/src/components/table/helpers/mixin-tfoot.js index bb2ef94c097..47a2265b018 100644 --- a/src/components/table/helpers/mixin-tfoot.js +++ b/src/components/table/helpers/mixin-tfoot.js @@ -1,4 +1,5 @@ import { getComponentConfig } from '../../../utils/config' +import { BTfoot } from '../tfoot' export default { props: { @@ -20,11 +21,27 @@ export default { } }, methods: { + renderTFootCustom() { + const h = this.$createElement + if (this.hasNormalizedSlot('custom-foot')) { + return h( + BTfoot, + { props: { footVariant: this.footVariant || this.headVariant } }, + this.normalizeSlot('tfoot', { + items: this.computedItems.slice(), + fields: this.computedFields.slice(), + columns: this.computedFields.length + }) + ) + } else { + return h() + } + }, renderTfoot() { const h = this.$createElement // Passing true to renderThead will make it render a tfoot - return this.footClone ? this.renderThead(true) : h() + return this.footClone ? this.renderThead(true) : this.renderTFootCustom() } } } From e5ec2de460b805a5a7d15f2087cf21dbbb6abe33 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 5 Sep 2019 18:31:58 -0300 Subject: [PATCH 02/15] Update mixin-tfoot.js --- src/components/table/helpers/mixin-tfoot.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/table/helpers/mixin-tfoot.js b/src/components/table/helpers/mixin-tfoot.js index 47a2265b018..f658b5e7d44 100644 --- a/src/components/table/helpers/mixin-tfoot.js +++ b/src/components/table/helpers/mixin-tfoot.js @@ -38,8 +38,6 @@ export default { } }, renderTfoot() { - const h = this.$createElement - // Passing true to renderThead will make it render a tfoot return this.footClone ? this.renderThead(true) : this.renderTFootCustom() } From e7cb7c1f973da2daa86350f85dfbebf31dea6676 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 5 Sep 2019 18:45:18 -0300 Subject: [PATCH 03/15] Update mixin-tfoot.js --- src/components/table/helpers/mixin-tfoot.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/components/table/helpers/mixin-tfoot.js b/src/components/table/helpers/mixin-tfoot.js index f658b5e7d44..e8555d14842 100644 --- a/src/components/table/helpers/mixin-tfoot.js +++ b/src/components/table/helpers/mixin-tfoot.js @@ -26,8 +26,12 @@ export default { if (this.hasNormalizedSlot('custom-foot')) { return h( BTfoot, - { props: { footVariant: this.footVariant || this.headVariant } }, - this.normalizeSlot('tfoot', { + { + key: 'bv-tfoot-custom', + class: this.tfootClass || null, + props: { footVariant: this.footVariant || this.headVariant || null } + }, + this.normalizeSlot('custom-foot', { items: this.computedItems.slice(), fields: this.computedFields.slice(), columns: this.computedFields.length From d6898c79b2de49bb96e079327e531c12b2e79177 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 5 Sep 2019 18:54:02 -0300 Subject: [PATCH 04/15] Create table-tfoot-custom.spec.js --- .../table/table-tfoot-custom.spec.js | 66 +++++++++++++++++++ 1 file changed, 66 insertions(+) create mode 100644 src/components/table/table-tfoot-custom.spec.js diff --git a/src/components/table/table-tfoot-custom.spec.js b/src/components/table/table-tfoot-custom.spec.js new file mode 100644 index 00000000000..6331068911d --- /dev/null +++ b/src/components/table/table-tfoot-custom.spec.js @@ -0,0 +1,66 @@ +import { mount } from '@vue/test-utils' +import { BTable } from './table' + +const testItems = [{ a: 1, b: 2, c: 3 }] +const testFields = [{ key: 'a', label: 'A' }, { key: 'b', label: 'B' }, { key: 'c', label: 'C' }] + +describe('table > custom tfoot slot', () => { + it('should not render tfoot by default', async () => { + const wrapper = mount(BTable, { + propsData: { + fields: testFields, + items: testItems, + footClone: false + } + }) + expect(wrapper).toBeDefined() + expect(wrapper.is('table')).toBe(true) + expect(wrapper.find('thead').exists()).toBe(true) + expect(wrapper.find('tbody').exists()).toBe(true) + expect(wrapper.find('tfoot').exists()).toBe(false) + + wrapper.destroy() + }) + + it('should render custom-foot slot inside b-tfoot', async () => { + const wrapper = mount(BTable, { + propsData: { + fields: testFields, + items: testItems, + footClone: false + }, + slots: { + default: 'CUSTOM-FOOTER' + } + }) + expect(wrapper).toBeDefined() + expect(wrapper.is('table')).toBe(true) + expect(wrapper.find('thead').exists()).toBe(true) + expect(wrapper.find('tbody').exists()).toBe(true) + expect(wrapper.find('tfoot').exists()).toBe(true) + expect(wrapper.find('tfoot').text()).toContain('CUSTOM-FOOTER') + + wrapper.destroy() + }) + + it('should not render custom-foot slot when foot-clone is true', async () => { + const wrapper = mount(BTable, { + propsData: { + fields: testFields, + items: testItems, + footClone: true + }, + slots: { + default: 'CUSTOM-FOOTER' + } + }) + expect(wrapper).toBeDefined() + expect(wrapper.is('table')).toBe(true) + expect(wrapper.find('thead').exists()).toBe(true) + expect(wrapper.find('tbody').exists()).toBe(true) + expect(wrapper.find('tfoot').exists()).toBe(true) + expect(wrapper.find('tfoot').text()).not.toContain('CUSTOM-FOOTER') + + wrapper.destroy() + }) +]) From 6a16e63dd0abb99329c93cb42587c394648ac79e Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 5 Sep 2019 18:57:12 -0300 Subject: [PATCH 05/15] Update table-tfoot-custom.spec.js --- src/components/table/table-tfoot-custom.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/table/table-tfoot-custom.spec.js b/src/components/table/table-tfoot-custom.spec.js index 6331068911d..0472a4212ca 100644 --- a/src/components/table/table-tfoot-custom.spec.js +++ b/src/components/table/table-tfoot-custom.spec.js @@ -63,4 +63,4 @@ describe('table > custom tfoot slot', () => { wrapper.destroy() }) -]) +}) From a5feefe69ee165aba572c81f0867d1e739cc6bf6 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 5 Sep 2019 18:59:57 -0300 Subject: [PATCH 06/15] Update table-tfoot-custom.spec.js --- src/components/table/table-tfoot-custom.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/table/table-tfoot-custom.spec.js b/src/components/table/table-tfoot-custom.spec.js index 0472a4212ca..048d5661d4f 100644 --- a/src/components/table/table-tfoot-custom.spec.js +++ b/src/components/table/table-tfoot-custom.spec.js @@ -30,7 +30,7 @@ describe('table > custom tfoot slot', () => { footClone: false }, slots: { - default: 'CUSTOM-FOOTER' + 'custom-foot': 'CUSTOM-FOOTER' } }) expect(wrapper).toBeDefined() From 97d2f1860499fdc0ab15b6e10d14694b33e2a27d Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 5 Sep 2019 19:00:40 -0300 Subject: [PATCH 07/15] Update table-tfoot-custom.spec.js --- src/components/table/table-tfoot-custom.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/table/table-tfoot-custom.spec.js b/src/components/table/table-tfoot-custom.spec.js index 048d5661d4f..f55f6819409 100644 --- a/src/components/table/table-tfoot-custom.spec.js +++ b/src/components/table/table-tfoot-custom.spec.js @@ -51,7 +51,7 @@ describe('table > custom tfoot slot', () => { footClone: true }, slots: { - default: 'CUSTOM-FOOTER' + 'custom-foot': 'CUSTOM-FOOTER' } }) expect(wrapper).toBeDefined() From 5a05c59f2337316253dd073e05400a732c47aaf0 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 5 Sep 2019 19:03:23 -0300 Subject: [PATCH 08/15] Update table-tfoot-custom.spec.js --- .../table/table-tfoot-custom.spec.js | 25 +++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/src/components/table/table-tfoot-custom.spec.js b/src/components/table/table-tfoot-custom.spec.js index f55f6819409..0a534e47c24 100644 --- a/src/components/table/table-tfoot-custom.spec.js +++ b/src/components/table/table-tfoot-custom.spec.js @@ -18,6 +18,7 @@ describe('table > custom tfoot slot', () => { expect(wrapper.find('thead').exists()).toBe(true) expect(wrapper.find('tbody').exists()).toBe(true) expect(wrapper.find('tfoot').exists()).toBe(false) + expect(wrapper.find('tfoot').classes().length).toBe(0) wrapper.destroy() }) @@ -63,4 +64,28 @@ describe('table > custom tfoot slot', () => { wrapper.destroy() }) + + it('should have foot-variant on custom-foot slot', async () => { + const wrapper = mount(BTable, { + propsData: { + fields: testFields, + items: testItems, + footClone: false, + footVariant: 'dark' + }, + slots: { + 'custom-foot': 'CUSTOM-FOOTER' + } + }) + expect(wrapper).toBeDefined() + expect(wrapper.is('table')).toBe(true) + expect(wrapper.find('thead').exists()).toBe(true) + expect(wrapper.find('tbody').exists()).toBe(true) + expect(wrapper.find('tfoot').exists()).toBe(true) + expect(wrapper.find('tfoot').text()).toContain('CUSTOM-FOOTER') + expect(wrapper.find('tfoot').classes()).toContain('table-dark') + expect(wrapper.find('tfoot').classes().length).toBe(1) + + wrapper.destroy() + }) }) From 94cd6df1a4d82d27951869914921a4d4843badd4 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 5 Sep 2019 19:10:27 -0300 Subject: [PATCH 09/15] Update package.json --- src/components/table/package.json | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/src/components/table/package.json b/src/components/table/package.json index 789de215683..8d18f17449c 100644 --- a/src/components/table/package.json +++ b/src/components/table/package.json @@ -250,15 +250,19 @@ }, { "name": "thead-top", - "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)" + "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)" }, { "name": "top-row", - "description": "Fixed top row slot for user supplied TD cells (Optionally scoped: columns - number of TDs to provide, fields - array of field definition objects)" + "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)" }, { "name": "bottom-row", - "description": "Fixed bottom row slot for user supplied TD cells (Optionally Scoped: columns - number of TDs to provide, fields - array of field definition objects)" + "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)" + }, + { + name: "custom-foot", + "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)" } ] }, @@ -435,7 +439,11 @@ }, { "name": "thead-top", - "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)" + "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)" + }, + { + name: "custom-foot", + "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)" } ] }, From 04a4739f1135e382468850167a4b0bd6ef5c8cf4 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 5 Sep 2019 19:11:24 -0300 Subject: [PATCH 10/15] Update table-tfoot-custom.spec.js --- src/components/table/table-tfoot-custom.spec.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/table/table-tfoot-custom.spec.js b/src/components/table/table-tfoot-custom.spec.js index 0a534e47c24..becb9a8617f 100644 --- a/src/components/table/table-tfoot-custom.spec.js +++ b/src/components/table/table-tfoot-custom.spec.js @@ -18,7 +18,6 @@ describe('table > custom tfoot slot', () => { expect(wrapper.find('thead').exists()).toBe(true) expect(wrapper.find('tbody').exists()).toBe(true) expect(wrapper.find('tfoot').exists()).toBe(false) - expect(wrapper.find('tfoot').classes().length).toBe(0) wrapper.destroy() }) @@ -40,6 +39,7 @@ describe('table > custom tfoot slot', () => { expect(wrapper.find('tbody').exists()).toBe(true) expect(wrapper.find('tfoot').exists()).toBe(true) expect(wrapper.find('tfoot').text()).toContain('CUSTOM-FOOTER') + expect(wrapper.find('tfoot').classes().length).toBe(0) wrapper.destroy() }) @@ -83,7 +83,7 @@ describe('table > custom tfoot slot', () => { expect(wrapper.find('tbody').exists()).toBe(true) expect(wrapper.find('tfoot').exists()).toBe(true) expect(wrapper.find('tfoot').text()).toContain('CUSTOM-FOOTER') - expect(wrapper.find('tfoot').classes()).toContain('table-dark') + expect(wrapper.find('tfoot').classes()).toContain('thead-dark') expect(wrapper.find('tfoot').classes().length).toBe(1) wrapper.destroy() From 03512ba37e168cf346a2e406127f95179ce09a0c Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 5 Sep 2019 19:13:45 -0300 Subject: [PATCH 11/15] Update package.json --- src/components/table/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/table/package.json b/src/components/table/package.json index 8d18f17449c..a82d9d1d530 100644 --- a/src/components/table/package.json +++ b/src/components/table/package.json @@ -261,7 +261,7 @@ "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)" }, { - name: "custom-foot", + "name": "custom-foot", "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)" } ] @@ -442,7 +442,7 @@ "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)" }, { - name: "custom-foot", + "name": "custom-foot", "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)" } ] From 9dec7f9d41d855857b4a3f63602e0a843b471cac Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 5 Sep 2019 19:17:09 -0300 Subject: [PATCH 12/15] Update package.json --- src/components/table/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/table/package.json b/src/components/table/package.json index a82d9d1d530..2c2ba384483 100644 --- a/src/components/table/package.json +++ b/src/components/table/package.json @@ -132,7 +132,7 @@ }, { "event": "head-clicked", - "description": "Emitted when a header or footer cell is clicked.", + "description": "Emitted when a header or footer cell is clicked. Not applicable for 'custom-foot' slot.", "args": [ { "arg": "key", @@ -379,7 +379,7 @@ }, { "event": "head-clicked", - "description": "Emitted when a header or footer cell is clicked.", + "description": "Emitted when a header or footer cell is clicked. Not applicable for 'custom-foot' slot.", "args": [ { "arg": "key", From b0c3c01fcda4af426ae721191fc4fff102726d3f Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 5 Sep 2019 19:34:49 -0300 Subject: [PATCH 13/15] Update README.md --- src/components/table/README.md | 26 ++++++++++++++++++++++++-- 1 file changed, 24 insertions(+), 2 deletions(-) diff --git a/src/components/table/README.md b/src/components/table/README.md index b82bbf18abe..727c50c15d4 100644 --- a/src/components/table/README.md +++ b/src/components/table/README.md @@ -1168,6 +1168,28 @@ Slot `thead-top` can be optionally scoped, receiving an object with the followin | `selectAllRows` | Method | Select all rows (applicable if the table is in [`selectable`](#row-select-support) mode | | `clearSelected` | Method | Unselect all rows (applicable if the table is in [`selectable`](#row-select-support) mode | +### Creating a custom footer + +If you need greater layout control of the content of the ``, you can use the optionally +scoped slot `custom-foot` to provide your own rows and cells. Use BootstrapVue's +[table helper sub-components](#table-helper-components) ``, ``, and `` to +generate your custom footer layout. + +Slot `custom-foot` can be optionally scoped, receiving an object with the following properties: + +| Property | Type | Description | +| --------------- | ------ | ----------------------------------------------------------------------------------------- | +| `columns` | Number | The number of columns in the rendered table | +| `fields` | Array | Array of field definition objects (normalized to the array of objects format) | +| `items ` | Array | Array of the currently _displayed_ items records | + +**Notes:** + +- The `custom-foot` slot will **not** be rendered if the `foot-clone` prop has been set. +- `head-clicked` events are not be emitted when clicking on `custom-foot` cells. +- Sorting and sorting icons are not available for cells in the `custom-foot` slot. +- The custom footer will not be shown when the table is in visually stacked mode. + ## Custom empty and emptyfiltered rendering via slots 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. ## Table helper components BootstrapVue provides additional helper child components when using ``, or the named -slots `top-row`, `bottom-row`, and `thead-top` (all of which accept table child elements). The -helper components are as follows: +slots `top-row`, `bottom-row`, `thead-top`, and `custom-foot` (all of which accept table child +elements). The helper components are as follows: - `b-tbody` (`` only) - `b-thead` (`` only) From 0f2c0365896201dc006ad1f4829026e319fa98a9 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 5 Sep 2019 19:49:32 -0300 Subject: [PATCH 14/15] Update README.md --- src/components/table/README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/table/README.md b/src/components/table/README.md index 727c50c15d4..9d9d277a3a1 100644 --- a/src/components/table/README.md +++ b/src/components/table/README.md @@ -1177,11 +1177,11 @@ generate your custom footer layout. Slot `custom-foot` can be optionally scoped, receiving an object with the following properties: -| Property | Type | Description | -| --------------- | ------ | ----------------------------------------------------------------------------------------- | -| `columns` | Number | The number of columns in the rendered table | -| `fields` | Array | Array of field definition objects (normalized to the array of objects format) | -| `items ` | Array | Array of the currently _displayed_ items records | +| Property | Type | Description | +| --------------- | ------ | ------------------------------------------------------------------------------------------ | +| `columns` | Number | The number of columns in the rendered table | +| `fields` | Array | Array of field definition objects (normalized to the array of objects format) | +| `items ` | Array | Array of the currently _displayed_ items records - after filtering, sorting and pagination | **Notes:** From e4f26547702c7ace72a79a451ed09ad6b0c7dd58 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20M=C3=BCller?= Date: Fri, 6 Sep 2019 00:50:12 +0200 Subject: [PATCH 15/15] Update README.md --- src/components/table/README.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/table/README.md b/src/components/table/README.md index 727c50c15d4..6ca7375c374 100644 --- a/src/components/table/README.md +++ b/src/components/table/README.md @@ -1172,16 +1172,16 @@ Slot `thead-top` can be optionally scoped, receiving an object with the followin If you need greater layout control of the content of the ``, you can use the optionally scoped slot `custom-foot` to provide your own rows and cells. Use BootstrapVue's -[table helper sub-components](#table-helper-components) ``, ``, and `` to -generate your custom footer layout. +[table helper sub-components](#table-helper-components) ``, ``, and `` to generate +your custom footer layout. Slot `custom-foot` can be optionally scoped, receiving an object with the following properties: -| Property | Type | Description | -| --------------- | ------ | ----------------------------------------------------------------------------------------- | -| `columns` | Number | The number of columns in the rendered table | -| `fields` | Array | Array of field definition objects (normalized to the array of objects format) | -| `items ` | Array | Array of the currently _displayed_ items records | +| Property | Type | Description | +| --------- | ------ | ----------------------------------------------------------------------------- | +| `columns` | Number | The number of columns in the rendered table | +| `fields` | Array | Array of field definition objects (normalized to the array of objects format) | +| `items` | Array | Array of the currently _displayed_ items records | **Notes:**