Bootstrap Vue Table Columns Picker
A Bootstrap Vue Table Columns Picker component.
<template>
<div>
<b-button variant="primary" class="mb-2" v-b-modal.columns-config-modal>
Show Columns Picker
</b-button>
<BTableColumnsPicker
:allColumns="allColumns()"
:currentColumns="columns"
:id="'columns-config-modal'"
@apply="applyColumnConfigs"
></BTableColumnsPicker>
<b-table
id="dataList"
striped
bordered
sticky-header="800px"
head-variant="light"
hover
:items="items"
:fields="columns"
>
</b-table>
</div>
</template>
<script>
import { items } from './items'
import BTableColumnsPicker from './BTableColumnsPicker.vue'
export default {
name: 'Demo',
components: {
BTableColumnsPicker
},
data() {
return {
items,
columns: [
'id',
'label',
'summary',
'date'
]
}
},
methods: {
allColumns() {
return Object.keys(items[0])
},
applyColumnConfigs(columns) {
this.columns = columns
}
}
}
</script>
@show
and @ok
that we can listen and prepare rendering the two columns selectorsapply
button, the widget emits an @apply
event and the parent component can handle it accordingly.:static="true"
to the b-modal
. This renders the modal content in-place in the DOM instead of appending it to the body. With this, the jest test can examine the content and make assertions.For more details, check out my blog.
yarn serve