Skip to content
Permalink
Browse files

feat(table): add support for transitions on tbody element (Closes #1821

…) (#2450)

Renders the `<tbody>` element usingVue's  `<transition-group>` component.  Users can pass an object of props via the `tbodyTransitionProps` prop, and can also pass an object of transition event handlers via the `tbodyTransitionHandlers` props.

When neither prop is specified, no transitions will occur.
  • Loading branch information
tmorehouse committed Jan 14, 2019
1 parent 3723493 commit 91514af445221286ef0bc55985556d58e3c54fdc
Showing with 105 additions and 5 deletions.
  1. +5 −3 docs/assets/css/styles.css
  2. +71 −0 src/components/table/README.md
  3. +29 −2 src/components/table/table.js
@@ -13,13 +13,10 @@
z-index: 999999;
}


* {
-webkit-font-smoothing: antialiased;
}



.bd-toc-link, .bd-navbar .navbar-nav .nav-link.active {
font-weight: normal;
}
@@ -118,3 +115,8 @@ pre.editable.error:after {
min-height: 10rem;
background-color: rgba(255, 0, 0, .1);
}

/* CSS for table transtion example */
table#table-transition-example .flip-list-move {
transition: transform 1s;
}
@@ -1334,6 +1334,77 @@ remove the record from the original items array.

**Note:** _Do not bind any value directly to the `value` prop. Use the `v-model` binding._

## Table body transition support

Vue transitions and animations are optionally supported on the `<tbody>` element via the use of Vue's
`<transition-group>` component internally. Three props are available for transitions support (all three
default to undefined):

| Prop | Type | Description
| --------------------------- | ------ | ----------------------------------------------------------------- |
| `tbody-transition-props` | Object | Object of transition-group properties |
| `tbody-transition-handlers` | Object | Object of transition-group event handlers |
| `primary-key` | String | String specifying the field to use as a unique row key (required) |

To enable transitons you need to specify `tbody-transition-props` and/or `tbody-transition-handlers`,
and must specify which field key to use as a unique key via the `primary-key` prop. Your data **must
have** a column (specified by the `primary-key` prop) that has a **unique value per row** in order for
transitions to work properly. The `primary-key` field's _value_ can either be a unique string or number.
The field specified does not need to appear in the rendered table output, but it **must** exist in each
row of your items data.

You must also provide CSS to handle your transitions (if using CSS transitions) in your project.

For more information of Vue's list rendering transitions, see the
[Vue JS official docs](https://vuejs.org/v2/guide/transitions.html#List-Move-Transitions).

In the example below, we have used the following custom CSS:

```css
table#table-transition-example .flip-list-move {
transition: transform 1s;
}
```

```html
<template>
<b-table id="table-transition-example"
:items="items"
:fields="fields"
striped
small
primary-key="a"
:tbody-transition-props="transProps"
/>
</template>

<script>
export default {
data () {
return {
transProps: {
// Transition name
name: 'flip-list'
},
items: [
{a: 2, b: 'Two', c: 'Moose'},
{a: 1, b: 'Three', c: 'Dog'},
{a: 3, b: 'Four', c: 'Cat'},
{a: 4, b: 'One', c: 'Mouse'}
],
fields: [
{ key: 'a', sortable: true },
{ key: 'b', sortable: true },
{ key: 'c', sortable: true }
]
}
}
}
</script>

<!-- table-transitions.vue -->
```

## Using Items Provider Functions

As mentioned under the [**Items**](#items-record-data-) prop section, it is possible to use a
@@ -352,6 +352,14 @@ export default {
// Passthrough prop. Passed to the context object. Not used by b-table directly
type: String,
default: ''
},
tbodyTransitionProps: {
type: Object
// default: undefined
},
tbodyTransitionHandlers: {
type: Object
// default: undefined
}
},
data() {
@@ -1508,10 +1516,29 @@ export default {
rows.push(h(false))
}

// Is tbody transition enabled
const isTransGroup = this.tbodyTransitionProps || this.tbodyTransitionHandlers
let tbodyProps = {}
let tbodyOn = {}
if (isTransGroup) {
tbodyOn = this.tbodyTransitionHandlers || {}
tbodyProps = assign(
{},
this.tbodyTransitionProps || {},
// Always use tbody element as tag. Users can't override this.
{ tag: 'tbody' }
)
}

// Assemble the rows into the tbody
const tbody = h(
'tbody',
{ class: this.bodyClasses, attrs: this.isStacked ? { role: 'rowgroup' } : {} },
isTransGroup ? 'transition-group' : 'tbody',
{
props: tbodyProps,
on: tbodyOn,
class: this.bodyClasses,
attrs: this.isStacked ? { role: 'rowgroup' } : {}
},
rows
)

0 comments on commit 91514af

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