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"
/>
<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>
- The component is a special <b-modal> that we can trigger with a button.
- The component takes in two column arrays which represent:
- the current columns
- all the available columns for picking
- Modal has two built-in custom events
@show
and@ok
that we can listen and prepare rendering the two columns selectors - When users click the
apply
button, the widget emits an@apply
event and the parent component can handle it accordingly. - To make the component test friendly, I added
:static="true"
to theb-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. - The current UI uses two multi-select components from bootstrap. And it doesn't support reordering the selection easily. If you need reordering, consider using the two-list vue-draggable
For more details, check out my blog.
yarn serve