feat(b-table): add selectAllRows() and clearSelected() to thead/tfoot slot scopes (addresses bootstrap-vue#3901) (bootstrap-vue#3907)

tmorehouse · jacobmllr95 · commit 86c53dd83da9 · 2019-08-17T11:27:49.000+02:00
* feat(b-table): add `selectAllRows()` and `clearSelected()` to thead slot scopes

* Update mixin-thead.js

* Update README.md
diff --git a/src/components/table/README.md b/src/components/table/README.md
@@ -1070,11 +1070,13 @@ footer cells that do not have an explicit scoped slot provided.
 The slots can be optionally scoped (`data` in the above example), and will have the following
 properties:
 
-| Property | Type   | Description                                                   |
-| -------- | ------ | ------------------------------------------------------------- |
-| `column` | String | The fields's `key` value                                      |
-| `field`  | Object | the field's object (from the `fields` prop)                   |
-| `label`  | String | The fields label value (also available as `data.field.label`) |
+| Property        | Type   | Description                                                                               |
+| --------------- | ------ | ----------------------------------------------------------------------------------------- |
+| `column`        | String | The fields's `key` value                                                                  |
+| `field`         | Object | the field's object (from the `fields` prop)                                               |
+| `label`         | String | The fields label value (also available as `data.field.label`)                             |
+| `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 |
 
 When placing inputs, buttons, selects or links within a `HEAD[...]` or `FOOT[...]` slot, note that
 `head-clicked` event will not be emitted when the input, select, textarea is clicked (unless they
@@ -1138,10 +1140,12 @@ rather than native browser table child elements.
 
 Slot `thead-top` 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) |
+| 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)             |
+| `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 |
 
 ## Custom empty and emptyfiltered rendering via slots
 
diff --git a/src/components/table/helpers/mixin-thead.js b/src/components/table/helpers/mixin-thead.js
@@ -55,6 +55,10 @@ export default {
         return h()
       }
 
+      // Refernce to `selectAllRows` and `clearSelected()`, if table is Selectable
+      const selectAllRows = this.isSelectable ? this.selectAllRows : () => {}
+      const clearSelected = this.isSelectable ? this.clearSelected : () => {}
+
       // Helper function to generate a field <th> cell
       const makeCell = (field, colIndex) => {
         let ariaLabel = null
@@ -116,7 +120,10 @@ export default {
           label: field.label,
           column: field.key,
           field,
-          isFoot
+          isFoot,
+          // Add in row select methods
+          selectAllRows,
+          clearSelected
         })
         if (!slot) {
           // need to check if this will work
@@ -135,7 +142,10 @@ export default {
       } else {
         const scope = {
           columns: fields.length,
-          fields: fields
+          fields: fields,
+          // Add in row select methods
+          selectAllRows,
+          clearSelected
         }
         $trs.push(this.normalizeSlot('thead-top', scope) || h())
         $trs.push(h(BTr, { class: this.theadTrClass }, $cells))
