Use PaginatorTable for BldgList

src/components/PaginatorTable.vue

@@ -9,7 +9,7 @@
     <div class="pagination_container">
       <slot name="content_skeleton_item" v-if="!items || items.length === 0"></slot>
       <b-table :filter="filterValue" :items="items" v-bind="$attrs" :current-page="current_page"
-               @filtered="onFiltered" :busy="isBusy"
+               @filtered="onFiltered" :busy="isBusy" :sort-by="sortBy"
                :per-page="items_per_page">
         <template v-for="(_, slot) of $scopedSlots" v-slot:[slot]="scope">
           <slot :name="slot" v-bind="scope"/>
@@ -122,6 +122,12 @@ export default {
       default() {
         return false
       }
+    },
+    sortBy: {
+      type: String,
+      default() {
+        return null
+      }
     }
   },
   watch: {

src/components/nd/BldgList.vue

 <template>
   <div>
-    <FilterInput v-model="filter"></FilterInput>
-    <b-pagination v-if="bldgs && bldgs.length > per_page && filter === ''" :total-rows="bldgs.length"
-                  :per-page="per_page" v-model="current_page" align="center"></b-pagination>
     <b-card no-body class="shadow">
-      <b-table responsive :filter="filter" :per-page="filter === '' ? per_page : null"
-               :current-page="filter === '' ? current_page : null" :fields="site_list_fields" :busy="bldgs === null"
-               :items="bldgs" :sort-by="sort_by || default_sort_by">
+      <PaginatorTable responsive :fields="site_list_fields" :is-busy="bldgs === null" :hide-filter="bldgs.length < 10"
+                      :hide-top-pagination="bldgs.length < 25" :sort-by="sort_by || default_sort_by"
+                      :items="bldgs" >
         <template v-slot:cell(name)="data">
           <b-link class="nowrap" :to="'/netdoc/sites/'+data.item.site_fq_name+'/'+data.item.number"><b>{{ data.value }}</b></b-link>
         </template>
         <template v-slot:cell(number)="data">
           <b-link class="nowrap" :to="'/netdoc/sites/'+data.item.site_fq_name+'/'+data.item.number"><b>{{ data.value }}</b></b-link>
         </template>
-      </b-table>
+      </PaginatorTable>
       <div v-if="bldgs && bldgs.length === 0" class="font-italic text-center mb-3">
         {{ $t('components.bcd_list.no_bldgs_available') }}
       </div>
-      <b-pagination v-if="bldgs && bldgs.length > per_page && filter === ''" :total-rows="bldgs.length"
-                    :per-page="per_page" v-model="current_page" align="center"></b-pagination>
     </b-card>
   </div>
 </template>
 
 <script>
-import FilterInput from '@/components/FilterInput'
+
+import PaginatorTable from '@/components/PaginatorTable.vue'
 
 export default {
   name: 'BldgList',
-  components: { FilterInput },
+  components: { PaginatorTable },
   watch: {
     filter: {
       immediate: true,
@@ -52,7 +48,7 @@ export default {
   },
   computed: {
     site_list_fields() {
-      const result = [
+      return [
         {
           label: this.$t('views.nd.bldg.number'),
           key: 'number',
@@ -74,7 +70,6 @@ export default {
           sortable: true
         },
       ]
-      return result
     }
   },
   props: {