Skip to content
Permalink
Browse files

feat(b-table): add `selectAllRows()` and `clearSelected()` to thead/t…

…foot slot scopes (addresses #3901) (#3907)

* feat(b-table): add `selectAllRows()` and `clearSelected()` to thead slot scopes

* Update mixin-thead.js

* Update README.md
  • Loading branch information...
tmorehouse authored and jackmu95 committed Aug 17, 2019
1 parent 2c8bd23 commit 86c53dd83da9c292904e2f489b310cc59a1f31a1
Showing with 25 additions and 11 deletions.
  1. +13 −9 src/components/table/README.md
  2. +12 −2 src/components/table/helpers/mixin-thead.js
@@ -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

@@ -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))

0 comments on commit 86c53dd

Please sign in to comment.
You can’t perform that action at this time.