Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 8 commits into from Nov 25, 2017
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
52208fb
feat(table): add toggelDetails method to scoped item slots
tmorehouse Nov 24, 2017
1956dea
add toggleDetails to details scoped var
tmorehouse Nov 24, 2017
d95ce26
documentation update
tmorehouse Nov 24, 2017
2554189
Update README.md
mosinve Nov 24, 2017
1057f27
Update README.md
tmorehouse Nov 25, 2017
17da3ae
Update README.md
tmorehouse Nov 25, 2017
253d7c2
Use idMixin and add aria-describedby for details
tmorehouse Nov 25, 2017
09f3ab0
ESlint
tmorehouse Nov 25, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
157 changes: 87 additions & 70 deletions src/components/table/README.md
View file
Open in desktop
Expand Up @@ -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
Expand Down Expand Up @@ -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:
Expand All @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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>
```

Expand All @@ -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">
Expand All @@ -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>
Expand All @@ -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' }
]
}
}
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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>`._

Expand Down Expand Up @@ -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)._

Expand All @@ -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
Expand Down Expand Up @@ -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">
Expand All @@ -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>
Expand All @@ -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 {
Expand Down