From 8895b7b1f6f1662263bfcd030e84fcf5aa89a409 Mon Sep 17 00:00:00 2001
From: "David W. Gray" <dwgray67@hotmail.com>
Date: Sat, 5 Apr 2025 11:34:52 -0700
Subject: [PATCH 1/2] fix(BTable): correct multi-sort to not update sortby in
 place

---
 .../docs/components/demo/TableProvider.vue    | 189 ++++++++++++++++++
 apps/docs/src/docs/components/table.md        |   8 +
 .../src/components/BTable/BTable.vue          |  11 +-
 3 files changed, 203 insertions(+), 5 deletions(-)
 create mode 100644 apps/docs/src/docs/components/demo/TableProvider.vue

diff --git a/apps/docs/src/docs/components/demo/TableProvider.vue b/apps/docs/src/docs/components/demo/TableProvider.vue
new file mode 100644
index 000000000..ae7d97f1e
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/TableProvider.vue
@@ -0,0 +1,189 @@
+<template>
+  <BContainer class="py-5">
+    <!-- User Interface controls -->
+    <BRow>
+      <BCol lg="6" class="my-1">
+        <BFormGroup
+          label="Filter"
+          label-for="filter-input"
+          label-cols-sm="3"
+          label-align-sm="right"
+          label-size="sm"
+          class="mb-0"
+        >
+          <BInputGroup size="sm">
+            <BFormInput
+              id="filter-input"
+              v-model="filter"
+              type="search"
+              placeholder="Type to Search"
+            />
+            <BInputGroupText>
+              <BButton :disabled="!filter" @click="filter = ''">Clear</BButton>
+            </BInputGroupText>
+          </BInputGroup>
+        </BFormGroup>
+      </BCol>
+      <BCol lg="6" class="my-1">
+        <BFormGroup
+          label="Per page"
+          label-for="per-page-select"
+          label-cols-sm="6"
+          label-cols-md="4"
+          label-cols-lg="3"
+          label-align-sm="right"
+          label-size="sm"
+          class="mb-0"
+        >
+          <BFormSelect id="per-page-select" v-model="perPage" :options="pageOptions" size="sm" />
+        </BFormGroup>
+      </BCol>
+      <BCol lg="6" class="my-1">
+        <BPagination
+          v-model="currentPage"
+          :total-rows="totalRows"
+          :per-page="perPage"
+          :align="'fill'"
+          size="sm"
+          class="my-0"
+        />
+      </BCol>
+    </BRow>
+    <!-- Main table element for typed table-->
+    <BTable
+      ref="provider-table"
+      v-model:sort-by="sortBy"
+      :sort-internal="true"
+      :provider="provider"
+      :fields="fields"
+      :current-page="currentPage"
+      :per-page="perPage"
+      :responsive="false"
+      :small="true"
+      :multisort="true"
+    />
+  </BContainer>
+</template>
+
+<script setup lang="ts">
+import {
+  BTable,
+  type BTableProviderContext,
+  type BTableSortBy,
+  type ColorVariant,
+  type TableFieldRaw,
+  type TableItem,
+} from 'bootstrap-vue-next'
+import {computed, ref, useTemplateRef, watch} from 'vue'
+import {type ComponentExposed} from 'vue-component-type-helpers'
+
+interface Person {
+  first_name: string
+  last_name: string
+  age: number
+  isActive: boolean
+}
+
+const table = useTemplateRef<ComponentExposed<typeof BTable<Person>>>('provider-table')
+
+const provider = (context: Readonly<BTableProviderContext<Person>>) =>
+  sortItems(filteredItems.value, context.sortBy).slice(
+    (context.currentPage - 1) * context.perPage,
+    context.currentPage * context.perPage
+  )
+
+const sortItems = (items: Person[], sortBy?: BTableSortBy[]) => {
+  if (!sortBy || sortBy.length === 0) {
+    return items
+  }
+
+  return [...filteredItems.value].sort((a: Person, b: Person) => {
+    for (const sort of sortBy) {
+      if (sort.order === undefined) {
+        continue
+      }
+      const order = sort.order === 'asc' ? 1 : -1
+      const key = sort.key as keyof Person
+      const aValue = a[key] as string | number
+      const bValue = b[key] as string | number
+      if (aValue < bValue) {
+        return -1 * order
+      } else if (aValue > bValue) {
+        return 1 * order
+      }
+    }
+    return 0
+  })
+}
+
+const items: TableItem<Person>[] = [
+  {isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald'},
+  {isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw'},
+  {
+    isActive: false,
+    age: 9,
+    first_name: 'Mini',
+    last_name: 'Navarro',
+    _rowVariant: 'success' as ColorVariant,
+  },
+  {isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson'},
+  {isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney'},
+  {isActive: false, age: 27, first_name: 'Essie', last_name: 'Dunlap'},
+  {isActive: true, age: 40, first_name: 'Thor', last_name: 'Macdonald'},
+  {
+    isActive: true,
+    age: 87,
+    first_name: 'Larsen',
+    last_name: 'Shaw',
+    _cellVariants: {age: 'danger', isActive: 'warning'},
+  },
+  {isActive: false, age: 26, first_name: 'Mitzi', last_name: 'Navarro'},
+  {isActive: false, age: 22, first_name: 'Genevieve', last_name: 'Wilson'},
+  {isActive: true, age: 38, first_name: 'John', last_name: 'Carney'},
+  {isActive: false, age: 29, first_name: 'Dick', last_name: 'Dunlap'},
+]
+
+const fields: Exclude<TableFieldRaw<Person>, string>[] = [
+  {
+    key: 'first_name',
+    sortable: true,
+  },
+  {
+    key: 'last_name',
+    sortable: true,
+  },
+  {key: 'age', label: 'Person age', sortable: true, class: 'text-center'},
+]
+
+const pageOptions = [
+  {value: 5, text: '5'},
+  {value: 10, text: '10'},
+  {value: 15, text: '15'},
+  {value: 100, text: 'Show a lot'},
+]
+
+const currentPage = ref(1)
+const perPage = ref(5)
+const sortBy = ref<BTableSortBy[]>([])
+const filter = ref('')
+
+const lcFilter = computed(() => filter.value.toLocaleLowerCase())
+
+const filteredItems = computed(() => {
+  if (!filter.value) {
+    return items
+  }
+  return items.filter(
+    (item) =>
+      item.first_name.toLowerCase().includes(lcFilter.value) ||
+      item.last_name.toLowerCase().includes(lcFilter.value) ||
+      item.age.toLocaleString().includes(lcFilter.value)
+  )
+})
+
+const totalRows = computed(() => filteredItems.value.length)
+
+watch(filter, () => {
+  table.value?.refresh()
+})
+</script>
diff --git a/apps/docs/src/docs/components/table.md b/apps/docs/src/docs/components/table.md
index df53cce18..f2658c35f 100644
--- a/apps/docs/src/docs/components/table.md
+++ b/apps/docs/src/docs/components/table.md
@@ -822,6 +822,14 @@ To Be Completed
 
 To Be Completed
 
+Below is a trimmed down version of the [complete example](#complete-example) as a starting place for using provider functions until
+docs for the provider function are completed. It uses a local provider function that implements
+sorting and filtering. Note that sorting is done in cooperation with `<BTable>` by having the
+provider function react to the `context.sortBy` array that it is passed, while filtering is done
+entirely by the provider, which manually forces a refresh of the table when the filter is changed.
+
+<<< DEMO ./demo/TableProvider.vue
+
 ## Light-weight tables
 
 `<BTableLite>` provides a great alternative to `<BTable>` if you just need simple display of
diff --git a/packages/bootstrap-vue-next/src/components/BTable/BTable.vue b/packages/bootstrap-vue-next/src/components/BTable/BTable.vue
index 95a236856..72da4d502 100644
--- a/packages/bootstrap-vue-next/src/components/BTable/BTable.vue
+++ b/packages/bootstrap-vue-next/src/components/BTable/BTable.vue
@@ -231,7 +231,7 @@ import {
 } from '../../types/TableTypes'
 import {useDefaults} from '../../composables/useDefaults'
 import type {BTableProps} from '../../types/ComponentProps'
-import {get, pick, set} from '../../utils/object'
+import {deepEqual, get, pick, set} from '../../utils/object'
 import {startCase} from '../../utils/stringUtils'
 import type {LiteralUnion} from '../../types/LiteralUnion'
 import {
@@ -831,14 +831,15 @@ const handleFieldSorting = (field: TableField<Items>) => {
    * @returns the updated value to emit for sorted
    */
   const handleMultiSort = (): BTableSortBy<Items> => {
-    sortByModel.value = sortByModel.value ?? []
+    const tmp = [...(sortByModel.value ?? [])]
     const val = updatedValue
     if (index === -1) {
-      sortByModel.value.push(val)
+      tmp.push(val)
     } else {
       val.order = resolveOrder(val.order)
-      sortByModel.value.splice(index, 1, val)
+      tmp.splice(index, 1, val)
     }
+    sortByModel.value = tmp
     return val
   }
 
@@ -900,7 +901,7 @@ const callItemsProvider = async () => {
 }
 
 const providerPropsWatch = async (prop: string, val: unknown, oldVal: unknown) => {
-  if (val === oldVal) return
+  if (deepEqual(val, oldVal)) return
 
   //stop provide when paging
   const inNoProvider = (key: NoProviderTypes) => props.noProvider?.includes(key) === true

From 8db7c5fd632732fba9b9fa00520201ca85832d5a Mon Sep 17 00:00:00 2001
From: "David W. Gray" <dwgray67@hotmail.com>
Date: Sun, 6 Apr 2025 09:08:38 -0700
Subject: [PATCH 2/2] docs(BTable): Improve provider function examples

---
 .../docs/components/demo/TableProvider.vue    |   2 +-
 .../components/demo/TableProviderAsync.vue    | 194 ++++++++++++++++++
 apps/docs/src/docs/components/table.md        |   9 +-
 3 files changed, 202 insertions(+), 3 deletions(-)
 create mode 100644 apps/docs/src/docs/components/demo/TableProviderAsync.vue

diff --git a/apps/docs/src/docs/components/demo/TableProvider.vue b/apps/docs/src/docs/components/demo/TableProvider.vue
index ae7d97f1e..640804a5c 100644
--- a/apps/docs/src/docs/components/demo/TableProvider.vue
+++ b/apps/docs/src/docs/components/demo/TableProvider.vue
@@ -97,7 +97,7 @@ const sortItems = (items: Person[], sortBy?: BTableSortBy[]) => {
     return items
   }
 
-  return [...filteredItems.value].sort((a: Person, b: Person) => {
+  return filteredItems.value.toSorted((a: Person, b: Person) => {
     for (const sort of sortBy) {
       if (sort.order === undefined) {
         continue
diff --git a/apps/docs/src/docs/components/demo/TableProviderAsync.vue b/apps/docs/src/docs/components/demo/TableProviderAsync.vue
new file mode 100644
index 000000000..d41b68917
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/TableProviderAsync.vue
@@ -0,0 +1,194 @@
+<template>
+  <BContainer class="py-5">
+    <!-- User Interface controls -->
+    <BRow>
+      <BCol lg="6" class="my-1">
+        <BFormGroup
+          label="Filter"
+          label-for="filter-input"
+          label-cols-sm="3"
+          label-align-sm="right"
+          label-size="sm"
+          class="mb-0"
+        >
+          <BInputGroup size="sm">
+            <BFormInput
+              id="filter-input"
+              v-model="filter"
+              type="search"
+              placeholder="Type to Search"
+            />
+            <BInputGroupText>
+              <BButton :disabled="!filter" @click="filter = ''">Clear</BButton>
+            </BInputGroupText>
+          </BInputGroup>
+        </BFormGroup>
+      </BCol>
+      <BCol lg="6" class="my-1">
+        <BFormGroup
+          label="Per page"
+          label-for="per-page-select"
+          label-cols-sm="6"
+          label-cols-md="4"
+          label-cols-lg="3"
+          label-align-sm="right"
+          label-size="sm"
+          class="mb-0"
+        >
+          <BFormSelect id="per-page-select" v-model="perPage" :options="pageOptions" size="sm" />
+        </BFormGroup>
+      </BCol>
+      <BCol lg="6" class="my-1">
+        <BPagination
+          v-model="currentPage"
+          :total-rows="totalRows"
+          :per-page="perPage"
+          :align="'fill'"
+          size="sm"
+          class="my-0"
+        />
+      </BCol>
+    </BRow>
+    <!-- Main table element for typed table-->
+    <BTable
+      ref="provider-table"
+      v-model:sort-by="sortBy"
+      :sort-internal="true"
+      :provider="provider"
+      :fields="fields"
+      :current-page="currentPage"
+      :per-page="perPage"
+      :responsive="false"
+      :small="true"
+      :multisort="true"
+    />
+  </BContainer>
+</template>
+
+<script setup lang="ts">
+import {
+  BTable,
+  type BTableProviderContext,
+  type BTableSortBy,
+  type ColorVariant,
+  type TableFieldRaw,
+  type TableItem,
+} from 'bootstrap-vue-next'
+import {computed, ref, useTemplateRef, watch} from 'vue'
+import {type ComponentExposed} from 'vue-component-type-helpers'
+
+interface Person {
+  first_name: string
+  last_name: string
+  age: number
+  isActive: boolean
+}
+
+const table = useTemplateRef<ComponentExposed<typeof BTable<Person>>>('provider-table')
+
+const provider = (context: Readonly<BTableProviderContext<Person>>) =>
+  new Promise<Person[]>(async (resolve) => {
+    const sortedAndPaginatedItems = sortItems(filteredItems.value, context.sortBy).slice(
+      (context.currentPage - 1) * context.perPage,
+      context.currentPage * context.perPage
+    )
+    // Sleep for a second to simulate async loading
+    await new Promise((resolve) => setTimeout(resolve, 1000))
+    resolve(sortedAndPaginatedItems)
+  })
+
+const sortItems = (items: Person[], sortBy?: BTableSortBy[]) => {
+  if (!sortBy || sortBy.length === 0) {
+    return items
+  }
+
+  return filteredItems.value.toSorted((a: Person, b: Person) => {
+    for (const sort of sortBy) {
+      if (sort.order === undefined) {
+        continue
+      }
+      const order = sort.order === 'asc' ? 1 : -1
+      const key = sort.key as keyof Person
+      const aValue = a[key] as string | number
+      const bValue = b[key] as string | number
+      if (aValue < bValue) {
+        return -1 * order
+      } else if (aValue > bValue) {
+        return 1 * order
+      }
+    }
+    return 0
+  })
+}
+
+const items: TableItem<Person>[] = [
+  {isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald'},
+  {isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw'},
+  {
+    isActive: false,
+    age: 9,
+    first_name: 'Mini',
+    last_name: 'Navarro',
+    _rowVariant: 'success' as ColorVariant,
+  },
+  {isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson'},
+  {isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney'},
+  {isActive: false, age: 27, first_name: 'Essie', last_name: 'Dunlap'},
+  {isActive: true, age: 40, first_name: 'Thor', last_name: 'Macdonald'},
+  {
+    isActive: true,
+    age: 87,
+    first_name: 'Larsen',
+    last_name: 'Shaw',
+    _cellVariants: {age: 'danger', isActive: 'warning'},
+  },
+  {isActive: false, age: 26, first_name: 'Mitzi', last_name: 'Navarro'},
+  {isActive: false, age: 22, first_name: 'Genevieve', last_name: 'Wilson'},
+  {isActive: true, age: 38, first_name: 'John', last_name: 'Carney'},
+  {isActive: false, age: 29, first_name: 'Dick', last_name: 'Dunlap'},
+]
+
+const fields: Exclude<TableFieldRaw<Person>, string>[] = [
+  {
+    key: 'first_name',
+    sortable: true,
+  },
+  {
+    key: 'last_name',
+    sortable: true,
+  },
+  {key: 'age', label: 'Person age', sortable: true, class: 'text-center'},
+]
+
+const pageOptions = [
+  {value: 5, text: '5'},
+  {value: 10, text: '10'},
+  {value: 15, text: '15'},
+  {value: 100, text: 'Show a lot'},
+]
+
+const currentPage = ref(1)
+const perPage = ref(5)
+const sortBy = ref<BTableSortBy[]>([])
+const filter = ref('')
+
+const lcFilter = computed(() => filter.value.toLocaleLowerCase())
+
+const filteredItems = computed(() => {
+  if (!filter.value) {
+    return items
+  }
+  return items.filter(
+    (item) =>
+      item.first_name.toLowerCase().includes(lcFilter.value) ||
+      item.last_name.toLowerCase().includes(lcFilter.value) ||
+      item.age.toLocaleString().includes(lcFilter.value)
+  )
+})
+
+const totalRows = computed(() => filteredItems.value.length)
+
+watch(filter, () => {
+  table.value?.refresh()
+})
+</script>
diff --git a/apps/docs/src/docs/components/table.md b/apps/docs/src/docs/components/table.md
index f2658c35f..aa0b919ff 100644
--- a/apps/docs/src/docs/components/table.md
+++ b/apps/docs/src/docs/components/table.md
@@ -822,14 +822,19 @@ To Be Completed
 
 To Be Completed
 
-Below is a trimmed down version of the [complete example](#complete-example) as a starting place for using provider functions until
-docs for the provider function are completed. It uses a local provider function that implements
+Below are trimmed down versions of the [complete example](#complete-example) as a starting place for using provider functions until docs for the provider function are completed. They use local provider functions that implement
 sorting and filtering. Note that sorting is done in cooperation with `<BTable>` by having the
 provider function react to the `context.sortBy` array that it is passed, while filtering is done
 entirely by the provider, which manually forces a refresh of the table when the filter is changed.
 
+This version uses a syncronous provider funtion:
+
 <<< DEMO ./demo/TableProvider.vue
 
+This version uses an asyncronous provider function that simulates latency by sleeping for a second:
+
+<<< DEMO ./demo/TableProviderAsync.vue
+
 ## Light-weight tables
 
 `<BTableLite>` provides a great alternative to `<BTable>` if you just need simple display of