Permalink
Browse files

feat(table): add toggleDetails method to scoped item slots (#1404)

* feat(table): add toggelDetails method to scoped item slots

* add toggleDetails to details scoped var

* documentation update

* Update README.md

* Update README.md

* Update README.md

* Use idMixin and add aria-describedby for details

* ESlint
  • Loading branch information...
tmorehouse committed Nov 25, 2017
1 parent 552c438 commit a9c4b7dc62bf93560c566bc88d51c14fe023d828
Showing with 122 additions and 98 deletions.
  1. +87 −70 src/components/table/README.md
  2. +35 −28 src/components/table/table.vue
@@ -54,10 +54,10 @@ These titles wil be displayed in the table header, in the order they appear in t
**first** record of data. See the [**Fields**](#fields-column-definitions-) section
below for customizing how field headings appear.
**Note:** Field order is not guaranteed. Fields will typically appear in the order they
>**Note:** _Field order is not guaranteed. Fields will typically appear in the order they
were defined in the first row, but this may not always be the case depending on the version
of browser in use. See section [**Fields (column definitions)**](#fields-column-definitions-)
below to see how to guarantee the order of fields.
below to see how to guarantee the order of fields._
Record data may also have additional special reserved name keys for colorizing
rows and individual cells (variants), and for triggering additional row detail. The supported
@@ -255,8 +255,8 @@ export default {
<!-- table-fields-object.vue -->
```
**Note:** if a `key` property is defined in the field definition, it will take
precidence over the key used to define the field.
>**Note:** _if a `key` property is defined in the field definition, it will take
precidence over the key used to define the field._
### Field definition reference
The following field properties are recognized:
@@ -274,13 +274,13 @@ The following field properties are recognized:
| `variant` | String | Apply contextual class to the `<th>` **and** `<td>` in the column - `active`, `success`, `info`, `warning`, `danger` (these variants map to classes `thead-${variant}`, `table-${variant}`, or `bg-${variant}` accordingly)
| `tdAttr` | Object | JavaScript object representing additional attributes to apply to the `td` cell
**Notes:**
- _Field properties, if not present, default to `null` unless otherwise stated above._
- _`thClass` and `tdClass` will not work with classes that are defined in scoped CSS_
- _For information on the syntax supported by `thStyle`, see
>**Notes:**
> - _Field properties, if not present, default to `null` unless otherwise stated above._
> - _`thClass` and `tdClass` will not work with classes that are defined in scoped CSS_
> - _For information on the syntax supported by `thStyle`, see
[Class and Style Bindings](https://vuejs.org/v2/guide/class-and-style.html#Binding-Inline-Styles)
in the Vue.js guide._
- _Any additional properties added to the field objects will be left intact - so you can access
> - _Any additional properties added to the field objects will be left intact - so you can access
them via the named scoped slots for custom data, header, and footer rendering._
For information and usage about scoped slots and formatters, refer to
@@ -314,8 +314,8 @@ fields: [
| `head-variant` | Use `light` or `dark` to make table header appear light or dark gray, respectively
| `foot-variant` | Use `light` or `dark` to make table footer appear light or dark gray, respectively. If not set, `head-variant` will be used. Has no effect if `foot-clone` is not set
**Deprecation note:** As of Bootstrap-Vue v1.0.0-beta.10, the prop `inverse` has been deprecated in
favour of prop `dark` to better align with Bootstrap V4.beta.2 CSS class names.
>**Deprecation note:** _As of Bootstrap-Vue v1.0.0-beta.10, the prop `inverse` has been deprecated in
favour of prop `dark` to better align with Bootstrap V4.beta.2 CSS class names._
**Example: Bordered table**
```html
@@ -419,7 +419,7 @@ responsive across all viewports by setting the prop `responsive` to `true`. Or,
maximum breakpoint with which to have a responsive table up to by setting the prop
`responsive` to one of the breakpoint values: `sm`, `md`, `lg`, or `xl`.
**Note: Possible vertical clipping/truncation**
>**Note: _Possible vertical clipping/truncation_**
Responsive tables make use of `overflow-y: hidden`, which clips off any content that
goes beyond the bottom or top edges of the table. In particular, this can clip off
@@ -621,19 +621,21 @@ The slot's scope variable (`data` in the above sample) will have the following p
| -------- | ---- | -----------
| `index` | Number | The row number (indexed from zero) relative to the displayed rows
| `item` | Object | The entire raw record data (i.e. `items[index]`) for this row (before any formatter is applied)
| `value` | Any | The value for this key in the record (`null` or `undefined` if a virtual column), or the output of thr field's `formatter` function (see below for for information on field `formatter` callback functions)
| `value` | Any | The value for this key in the record (`null` or `undefined` if a virtual column), or the output of the field's `formatter` function (see below for for information on field `formatter` callback functions)
| `unformatted` | Any | The raw value for this key in the item record (`null` or `undefined` if a virtual column), before being passed to the field's `formtter` function
| detailsShowing | Boolean | Will be `true` if the row's `row-details` scoped slot is visible. See section [Row details support](#row-details-support) below for additional information
| toggleDetails | Function | Can be called to toggle the visibility of the rows `row-details` scoped slot. See section [Row details support](#row-details-support) below for additional information
**Notes:**
- *`index` will not always be the actual row's index number, as it is
>**Notes:**
>- _`index` will not always be the actual row's index number, as it is
computed after pagination and filtering have been applied to the original
table data. The `index` value will refer to the **displayed row number**. This
number will align with the indexes from the optional `v-model` bound variable.*
- When placing inputs, buttons, selects or links within a data cell scoped slot,
be sure to add a `@click.stop` handler (which can be empty) to prevent the
click on the input, button, select, or link, from triggering the `row-clicked`
event:
number will align with the indexes from the optional `v-model` bound variable._
>- _When placing inputs, buttons, selects or links within a data cell scoped slot,
be sure to add a `@click.stop` (or `@click.native.stop` if needed) handler (which can
be empty) to prevent the click on the input, button, select, or link, from triggering
the `row-clicked` event:_
```html
<template slot="actions" scope="cell">
@@ -749,14 +751,16 @@ The slot's scope variable (`data` in the above example) will have the following
| `label` | String | The fields label value (also available as `data.field.label`)
When placing inputs, buttons, selects or links within a `HEAD_` or `FOOT_` slot,
be sure to add a `@click.stop` handler (which can be empty) to prevent the
be sure to add a `@click.stop` (or `@click.native.stop`) handler (which can be empty) to prevent the
click on the input, button, select, or link, from triggering a change in sorting,
or a `head-clicked` event.
```html
<template slot="HEAD_actions" scope="foo">
<!-- We use click.stop here to prevent 'sort-changed' or 'head-clicked' events -->
<input type="checkbox" :value="foo.column" v-model="selected" @click.stop>
<input @click.stop type="checkbox" :value="foo.column" v-model="selected">
<!-- We use click.native.stop here to prevent 'sort-changed' or 'head-clicked' events -->
<b-form-checkbox @click.native.stop :value="foo.column" v-model="selected">
</template>
```
@@ -768,28 +772,43 @@ columns not specified in the fields definition array), you can use the scoped sl
If the record has it's `_showDetails` property set to `true`, **and** a `row-details`
scoped slot exists, a new row will be shown just below the item, with the rendered
contents of the scoped slot.
contents of the `row-details` scoped slot.
**Note:** the `_showDetails` property **must** exist in the items data for proper
reactive detection of changes in `_showDetails`. Read more about
[Vue ractivity limitations](https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats).
In the scoped field slot, you can toggle the visibility of the row's `row-details`
scoped slot by calling the `toggleDetails` function passed to the field's scoped slot
variable. You can use the scoped fields slot variable `detailsShowing` to determine
the visibility of the `row-details` slot.
Available scoped variables:
>**Note:** _If manipulating the `_showDetails` property directly on the item data (i.e.
not via the `toggleDetails` function reference), the `_showDetails` propertly **must**
exist in the items data for proper reactive detection of changes to it's value. Read more about
[Vue's reactivity limitations](https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats)._
| Property | Description
| -------- | -----------
| `item` | The entire row record data object
| `index` | The current visible row number
| `fields` | The normailized fields definition array (in the _array of objects_ format)
Available `row-details` scoped viariable properties:
| Property | Type | Description
| -------- | ---- | -----------
| `item` | Object | The entire row record data object
| `index` | Number | The current visible row number
| `fields` | Array | The normailized fields definition array (in the _array of objects_ format)
| `toggleDetails` | Function | Function to toggle visibility of the row's details slot
In the following example, we show two methods of toggling the visibility of the details:
one via a button, and one via a checkbox. We also have the third row row details defaulting
to have details initially showing.
```html
<template>
<b-table :items="items" :fields="fields">
<template slot="show_details" scope="row">
<!-- we use @click.native.stop here to prevent emitting of a 'row-clicked' event -->
<!-- In some circumstances you may need to use @click.stop instead -->
<b-form-checkbox @click.native.stop v-model="row.item._showDetails">
<span class="sr-only">Show record details</span>
<!-- we use @click.stop here to prevent emitting of a 'row-clicked' event -->
<b-button size="sm" @click.stop="row.toggleDetails" class="mr-2">
{{ row.detailsShowing ? 'Hide' : 'Show'}} Details
</b-button>
<!-- In some circumstances you may need to use @click.native.stop instead -->
<!-- As `row.showDetails` is one-way, we call the toggleDetails function on @change -->
<b-form-checkbox @click.native.stop @change="row.toggleDetails" v-model="row.detailsShowing">
Details via check
</b-form-checkbox>
</template>
<template slot="row-details" scope="row">
@@ -798,10 +817,11 @@ Available scoped variables:
<b-col sm="3" class="text-sm-right"><b>Age:</b></b-col>
<b-col>{{ row.item.age }}</b-col>
</b-row>
<b-row>
<b-row class="mb-2">
<b-col sm="3" class="text-sm-right"><b>Is Active:</b></b-col>
<b-col>{{ row.item.isActive }}</b-col>
</b-row>
<b-button size="sm" @click="row.toggleDetails">Hide Details</b-button>
</b-card>
</template>
</b-table>
@@ -813,10 +833,10 @@ export default {
return {
fields: [ 'first_name', 'last_name', 'show_details' ],
items: [
{ isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald', _showDetails: false },
{ isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw', _showDetails: false },
{ isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson', _showDetails: false },
{ isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney', _showDetails: false }
{ isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
{ isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw' },
{ isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson', _showDetails: true },
{ isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney' }
]
}
}
@@ -844,7 +864,7 @@ based on the current sort critera. See the
[Vue docs](http://vuejs.org/v2/guide/components.html#sync-Modifier) for details
on the `.sync` prop modifier
**Note:** _The built-in `sort-compare` routine **cannot** sort virtual columns, nor
>**Note:** _The built-in `sort-compare` routine **cannot** sort virtual columns, nor
sort based on the custom rendering of the field data (formatter functions and/or
scoped slots are used only for presentation only, and do not affect the underlying data).
Refer to the [**Sort-compare routine**](#sort-compare-routine) section below for details on
@@ -982,7 +1002,7 @@ the original `items` array (except when `items` is set to a provider function).
Deleting a record from the v-model will **not** remove the record from the
original items array.
**Note:** *Do not bind any value directly to the `value` prop. Use the `v-model` binding.*
>**Note:** _Do not bind any value directly to the `value` prop. Use the `v-model` binding._
## Using Items Provider Functions
@@ -1058,7 +1078,7 @@ function myProvider (ctx) {
a `busy` prop that can be used either to override inner `busy`state, or to monitor
`<b-table>`'s current busy state in your application using the 2-way `.sync` modifier.
**Note:** _in order to allow `<b-table>` fully track it's `busy` state, custom items
>**Note:** _in order to allow `<b-table>` fully track it's `busy` state, custom items
provider function should handle errors from data sources and return an empty
array to `<b-table>`._
@@ -1097,10 +1117,10 @@ methods: {
}
```
**Notes:**
- _If you manually place the table in the `busy` state, the items provider will
>**Notes:**
>- _If you manually place the table in the `busy` state, the items provider will
__not__ be called/refreshed until the `busy` state has been set to `false`._
- _All click related and hover events, and sort-changed events will __not__ be
>- _All click related and hover events, and sort-changed events will __not__ be
emiited when in the `busy` state (either set automatically during provider update,
or when manually set)._
@@ -1120,12 +1140,12 @@ following `b-table` prop(s) to `true`:
When `no-provider-paging` is `false` (default), you should only return at
maximum, `perPage` number of records.
**Notes:**
- _`<b-table>` needs reference to your pagination and filtering values in order to
>**Notes:**
>- _`<b-table>` needs reference to your pagination and filtering values in order to
trigger the calling of the provider function. So be sure to bind to the `per-page`,
`current-page` and `filter` props on `b-table` to trigger the provider update function call
(unless you have the respective `no-provider-*` prop set to `true`)._
- _The `no-local-sorting` prop has no effect when `items` is a provider funtion._
>- _The `no-local-sorting` prop has no effect when `items` is a provider funtion._
### Event based refreshing of data
You may also trigger the refresh of the provider function by emitting the
@@ -1213,7 +1233,7 @@ when fetching your data!
</b-form-group>
</b-col>
<b-col md="6" class="my-1">
<b-pagination :total-rows="totalRows" :per-page="perPage" v-model="currentPage" />
<b-pagination :total-rows="totalRows" :per-page="perPage" v-model="currentPage" class="my-0" />
</b-col>
<b-col md="6" class="my-1">
<b-form-group horizontal label="Per page" class="mb-0">
@@ -1238,12 +1258,11 @@ when fetching your data!
<template slot="actions" scope="row">
<!-- We use @click.stop here to prevent a 'row-clicked' event from also happening -->
<b-button size="sm" @click.stop="info(row.item, row.index, $event.target)" class="mr-1">
Info
Info modal
</b-button>
<b-button size="sm" @click.stop="row.toggleDetails">
{{ row.detailsShowing ? 'Hide' : 'Show' }} Details
</b-button>
<!-- In some circumstances you may need to use @click.native.stop -->
<b-form-checkbox @click.native.stop v-model="row.item._showDetails">
Details
</b-form-checkbox>
</template>
<template slot="row-details" scope="row">
<b-card>
@@ -1264,30 +1283,28 @@ when fetching your data!
<script>
const items = [
{ isActive: true, age: 40, name: { first: 'Dickerson', last: 'Macdonald' }, _showDetails: false },
{ isActive: false, age: 21, name: { first: 'Larsen', last: 'Shaw' }, _showDetails: false },
{ isActive: true, age: 40, name: { first: 'Dickerson', last: 'Macdonald' } },
{ isActive: false, age: 21, name: { first: 'Larsen', last: 'Shaw' } },
{
isActive: false,
age: 9,
name: { first: 'Mini', last: 'Navarro' },
_rowVariant: 'success',
_showDetails: false
_rowVariant: 'success'
},
{ isActive: false, age: 89, name: { first: 'Geneva', last: 'Wilson' }, _showDetails: false },
{ isActive: true, age: 38, name: { first: 'Jami', last: 'Carney' }, _showDetails: false },
{ isActive: false, age: 27, name: { first: 'Essie', last: 'Dunlap' }, _showDetails: false },
{ isActive: true, age: 40, name: { first: 'Thor', last: 'Macdonald' }, _showDetails: false },
{ isActive: false, age: 89, name: { first: 'Geneva', last: 'Wilson' } },
{ isActive: true, age: 38, name: { first: 'Jami', last: 'Carney' } },
{ isActive: false, age: 27, name: { first: 'Essie', last: 'Dunlap' } },
{ isActive: true, age: 40, name: { first: 'Thor', last: 'Macdonald' } },
{
isActive: true,
age: 87,
name: { first: 'Larsen', last: 'Shaw' },
_cellVariants: { age: 'danger', isActive: 'warning' },
_showDetails: false
_cellVariants: { age: 'danger', isActive: 'warning' }
},
{ isActive: false, age: 26, name: { first: 'Mitzi', last: 'Navarro' }, _showDetails: false },
{ isActive: false, age: 22, name: { first: 'Genevieve', last: 'Wilson' }, _showDetails: false },
{ isActive: true, age: 38, name: { first: 'John', last: 'Carney' }, _showDetails: false },
{ isActive: false, age: 29, name: { first: 'Dick', last: 'Dunlap' }, _showDetails: false }
{ isActive: false, age: 26, name: { first: 'Mitzi', last: 'Navarro' } },
{ isActive: false, age: 22, name: { first: 'Genevieve', last: 'Wilson' } },
{ isActive: true, age: 38, name: { first: 'John', last: 'Carney' } },
{ isActive: false, age: 29, name: { first: 'Dick', last: 'Dunlap' } }
]
export default {
Oops, something went wrong.

0 comments on commit a9c4b7d

Please sign in to comment.