btable-columns-picker

A Bootstrap Vue Table Columns Picker component.

Screenshot

Usage

<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>

Explanations

• The component is a special \ 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 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.
• 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.

Run demo app

yarn serve