Converted to BootstrapVue for the table, still needs more configuration

Author: kevinschaper

table-component/dist/mapping-commons-table.js

@@ -8,18 +8,15 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.34",
-    "@fortawesome/free-solid-svg-icons": "^5.15.2",
-    "@fortawesome/vue-fontawesome": "^2.0.2",
     "axios": "^0.21.1",
     "bootstrap": "^4.6.0",
+    "bootstrap-vue": "^2.21.2",
     "core-js": "^3.6.5",
     "jquery": "^3.5.1",
     "json-loader": "^0.5.7",
     "popper.js": "^1.16.1",
     "vue": "^2.6.11",
     "vue-axios": "^3.2.4",
-    "vue2-bootstrap-table2": "^1.2.1",
     "yamljs": "^0.3.0"
   },
   "devDependencies": {

table-component/dist/mapping-commons-table.js.map

@@ -1,61 +1,64 @@
 <template>
   <div id="app">
     <div id="table-container">
-      <VueBootstrapTable :columns='columns'
-                         :values='mappings'
-                         :show-filter=true
-                         :selectable=false
-                         :filter-case-sensitive=false>
-      </VueBootstrapTable>
+      <b-table :items="mappings"
+               :fields="fields"
+               responsive
+               > </b-table>
     </div>
   </div>
 </template>
 
 <script>
 import axios from 'axios'
 import YAML from 'yamljs'
-import VueBootstrapTable from 'vue2-bootstrap-table2'
 
 export default {
   name: 'App',
   components: {
-    VueBootstrapTable: VueBootstrapTable
   },
   data () {
     return {
       mappings: [],
-      columns: [
+      fields: [
         {
-          name: 'mapping_set_id',
-          title: 'ID'
+          key: 'mapping_set_id',
+          label: 'ID',
+          sortable: true
         },
         {
-          name: 'mapping_set_group',
-          title: 'Group'
+          key: 'mapping_set_group',
+          label: 'Group',
+          sortable: true
         },
         {
-          name: 'mapping_set_title',
-          title: 'Title'
+          key: 'mapping_set_title',
+          label: 'Title',
+          sortable: true
         },
         {
-          name: 'mapping_set_description',
-          title: 'Description'
+          key: 'mapping_set_description',
+          label: 'Description',
+          sortable: true
         },
         {
-          name: 'creator_id',
-          title: 'Creator ID'
+          key: 'creator_id',
+          label: 'Creator ID',
+          sortable: true
         },
         {
-          name: 'curie_map',
-          title: 'CURIE Map'
+          key: 'curie_map',
+          label: 'CURIE Map'
         },
         {
-          name: 'license',
-          title: 'License'
+          key: 'license',
+          label: 'License',
+          sortable: true
         },
         {
-          name: 'mapping_provider',
-          title: 'Mapping Provider'
+          key: 'mapping_provider',
+          title: 'Mapping Provider',
+          sortable: true
         }
       ]
     }

table-component/dist/mapping-commons-table.min.js

@@ -2,17 +2,19 @@ import Vue from 'vue'
 import App from './App.vue'
 import axios from 'axios'
 import VueAxios from 'vue-axios'
-import 'bootstrap'
-import 'bootstrap/dist/css/bootstrap.min.css'
-import { library } from '@fortawesome/fontawesome-svg-core'
-import { faUserSecret } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
-Vue.use(VueAxios, axios)
+import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
+
+// Import Bootstrap an BootstrapVue CSS files (order is important)
+import 'bootstrap/dist/css/bootstrap.css'
+import 'bootstrap-vue/dist/bootstrap-vue.css'
 
-library.add(faUserSecret)
+// Make BootstrapVue available throughout your project
+Vue.use(BootstrapVue)
+// Optionally install the BootstrapVue icon components plugin
+Vue.use(IconsPlugin)
 
-Vue.component('font-awesome-icon', FontAwesomeIcon)
+Vue.use(VueAxios, axios)
 
 Vue.config.productionTip = false