fixes bootstrap-vue-next/bootstrap-vue-next#768

Author: devhus

packages/bootstrap-vue-3/src/components/BTable/BTable.vue

@@ -385,14 +385,21 @@ const isSortable = computed(
 
 const requireItemsMapping = computed(() => isSortable.value && sortInternalBoolean.value === true)
 const computedItems = computed(() => {
-  if (usesProvider.value) return itemHelper.internalItems.value
-  return requireItemsMapping.value
+  const items = usesProvider.value
+    ? itemHelper.internalItems.value
+    : requireItemsMapping.value
     ? itemHelper.mapItems(props.fields, props.items, props, {
         isSortable,
         isFilterableTable,
         sortDescBoolean,
       })
     : props.items
+
+  if (props.perPage !== undefined) {
+    const startIndex = (props.currentPage - 1) * props.perPage
+    return items.splice(startIndex, props.perPage)
+  }
+  return items
 })
 
 const getFieldHeadLabel = (field: TableField) => {
@@ -598,6 +605,7 @@ const providerPropsWatch = async (prop: string, val: any, oldVal: any) => {
 
   //stop provide when paging
   const inNoProvider = (key: NoProviderTypes) => props.noProvider && props.noProvider.includes(key)
+  const notifyFiltered = !['currentPage', 'perPage'].includes(prop)
   const noProvideWhenPaging =
     ['currentPage', 'perPage'].includes(prop) &&
     (inNoProvider('paging') || noProviderPagingBoolean.value === true)
@@ -613,6 +621,8 @@ const providerPropsWatch = async (prop: string, val: any, oldVal: any) => {
   }
 
   await callItemsProvider()
+
+  if (notifyFiltered) itemHelper.notifyFilteredItems()
 }
 
 watch(

packages/bootstrap-vue-3/src/components/BTable/itemHelper.ts

@@ -38,9 +38,9 @@ const useItemHelper = () => {
     internalItems.value = cloneDeep(items)
     if ('isFilterableTable' in flags && flags.isFilterableTable.value === true && props.filter) {
       internalItems.value = filterItems(internalItems.value, props.filter, props.filterable)
-      if (filterEvent.value) {
-        filterEvent.value(internalItems.value)
-      }
+      // if (filterEvent.value) {
+      //   filterEvent.value(internalItems.value)
+      // }
     }
     if ('isSortable' in flags && flags.isSortable.value === true) {
       internalItems.value = sortItems(
@@ -53,10 +53,10 @@ const useItemHelper = () => {
         props.sortCompare
       )
     }
-    if (props.perPage !== undefined) {
-      const startIndex = (props.currentPage - 1) * props.perPage
-      internalItems.value = internalItems.value.splice(startIndex, props.perPage)
-    }
+    // if (props.perPage !== undefined) {
+    //   const startIndex = (props.currentPage - 1) * props.perPage
+    //   internalItems.value = internalItems.value.splice(startIndex, props.perPage)
+    // }
     return internalItems.value
   }
 
@@ -119,12 +119,19 @@ const useItemHelper = () => {
     }
   }
 
+  const notifyFilteredItems = () => {
+    if (filterEvent.value) {
+      filterEvent.value(internalItems.value)
+    }
+  }
+
   return {
     normaliseFields,
     mapItems,
     internalItems,
     updateInternalItems,
     filterEvent,
+    notifyFilteredItems,
   }
 }