fix: added few missing props to the BTable.d.ts file

fix: replaced BTable emits definition array with a typescript interface for better type support
BREAKING CHANGE: The  event output value was changed to an object with 'sort[string]' and 'desc[boolean]' for better ts type support.
feat: Added BTable selectable prop that adds the selection functionality to the table, Added select-mode prop with value of [multi, single, range] to expend the table selection can be used with.
feat: Added Btable select-head prop to show an extra Head & Cell to the table, Added selectHead & selectCell slots to customize the selection extra head & cells.

Author: devhus

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

@@ -4,6 +4,11 @@
       <thead>
         <slot v-if="$slots['thead-top']" name="thead-top" />
         <tr>
+          <th v-if="addSelectableCell">
+            <slot name="selectHead">
+              {{ typeof selectHead === 'boolean' ? 'Selected' : selectHead }}
+            </slot>
+          </th>
           <th
             v-for="field in computedFields"
             :key="field.key"
@@ -55,8 +60,14 @@
         <tr
           v-for="(tr, ind) in computedItems"
           :key="ind"
-          :class="tr._rowVariant ? `table-${tr._rowVariant}` : null"
+          :class="getRowClasses(tr)"
+          @click.prevent="onRowClick(tr, ind, $event)"
         >
+          <td v-if="addSelectableCell">
+            <slot name="selectCell">
+              <span :class="selectedItems.has(tr) ? 'text-primary' : ''">🗹</span>
+            </slot>
+          </td>
           <td
             v-for="(field, index) in computedFields"
             :key="field.key"
@@ -112,7 +123,7 @@
 
 <script setup lang="ts">
 // import type {Breakpoint} from '../../types'
-import {computed, toRef} from 'vue'
+import {computed, ref, toRef, useSlots} from 'vue'
 import {useBooleanish} from '../../composables'
 import type {
   Booleanish,
@@ -144,6 +155,9 @@ interface BTableProps {
   sortBy?: string
   sortDesc?: boolean
   sortInternal?: boolean
+  selectable?: boolean
+  selectHead?: boolean | string
+  selectMode?: 'multi' | 'single' | 'range'
 }
 
 const props = withDefaults(defineProps<BTableProps>(), {
@@ -159,9 +173,22 @@ const props = withDefaults(defineProps<BTableProps>(), {
   small: false,
   striped: false,
   sortInternal: true,
+  selectable: false,
+  selectHead: true,
+  selectMode: 'single',
 })
 
-const emits = defineEmits(['update:sortBy', 'update:sortDesc', 'sorted'])
+interface BTableEmits {
+  (e: 'rowSelected', value: TableItem): void
+  (e: 'rowUnselected', value: TableItem): void
+  (e: 'selection', value: TableItem[]): void
+  (e: 'update:sortBy', value: string): void
+  (e: 'update:sortDesc', value: boolean): void
+  (e: 'sorted', ...value: Parameters<(sort?: {by?: string; desc?: boolean}) => any>): void
+}
+
+const emits = defineEmits<BTableEmits>()
+const slots = useSlots()
 
 const captionTopBoolean = useBooleanish(toRef(props, 'captionTop'))
 const borderlessBoolean = useBooleanish(toRef(props, 'borderless'))
@@ -171,6 +198,8 @@ const footCloneBoolean = useBooleanish(toRef(props, 'footClone'))
 const hoverBoolean = useBooleanish(toRef(props, 'hover'))
 const smallBoolean = useBooleanish(toRef(props, 'small'))
 const stripedBoolean = useBooleanish(toRef(props, 'striped'))
+const sortInternalBoolean = useBooleanish(toRef(props, 'sortInternal'))
+const selectableBoolean = useBooleanish(toRef(props, 'selectable'))
 
 const classes = computed(() => [
   'table',
@@ -185,13 +214,16 @@ const classes = computed(() => [
     'table-borderless': borderlessBoolean.value,
     'table-sm': smallBoolean.value,
     'caption-top': captionTopBoolean.value,
+    'b-table-selectable': selectableBoolean.value,
+    [`b-table-select-${props.selectMode}`]: selectableBoolean.value,
+    'b-table-selecting user-select-none': selectableBoolean.value && isSelecting.value,
   },
 ])
 
 const itemHelper = useItemHelper()
 const computedFields = computed(() => itemHelper.normaliseFields(props.fields, props.items))
 const computedItems = computed(() =>
-  props.sortInternal
+  sortInternalBoolean.value === true
     ? itemHelper.sortItems(props.fields, props.items, {key: props.sortBy, desc: props.sortDesc})
     : props.items
 )
@@ -201,6 +233,10 @@ const responsiveClasses = computed(() => ({
   [`table-responsive-${props.responsive}`]: typeof props.responsive === 'string',
 }))
 
+const addSelectableCell = computed(
+  () => selectableBoolean && (props.selectHead || slots.selectHead !== undefined)
+)
+
 const isSortable = computed(
   () =>
     props.fields.filter((field) => (typeof field === 'string' ? false : field.sortable)).length > 0
@@ -218,8 +254,47 @@ const columnClicked = (field: TableField<Record<string, unknown>>) => {
       emits('update:sortBy', typeof field === 'string' ? field : field.key)
       emits('update:sortDesc', false)
     }
-    emits('sorted', props.sortBy, props.sortDesc)
+    emits('sorted', {by: props.sortBy, desc: props.sortDesc})
+  }
+}
+
+const selectedItems = ref<Set<TableItem>>(new Set([]))
+const isSelecting = computed(() => selectedItems.value.size > 0)
+
+const onRowClick = (row: TableItem, index: number, e: MouseEvent) => {
+  handleRowSelection(row, index, e.shiftKey)
+}
+
+const handleRowSelection = (row: TableItem, index: number, shiftClicked = false) => {
+  if (!selectableBoolean.value) return
+
+  if (selectedItems.value.has(row)) {
+    selectedItems.value.delete(row)
+    emits('rowUnselected', row)
+  } else {
+    if (props.selectMode === 'single' && selectedItems.value.size > 0) {
+      selectedItems.value.forEach((item) => emits('rowUnselected', item))
+      selectedItems.value.clear()
+    }
+
+    if (props.selectMode === 'range' && selectedItems.value.size > 0 && shiftClicked) {
+      const lastSelectedItem = Array.from(selectedItems.value).pop()
+      const lastSelectedIndex = computedItems.value.findIndex((i) => i === lastSelectedItem)
+      const selectStartIndex = Math.min(lastSelectedIndex, index)
+      const selectEndIndex = Math.max(lastSelectedIndex, index)
+      computedItems.value.slice(selectStartIndex, selectEndIndex + 1).forEach((item) => {
+        if (!selectedItems.value.has(item)) {
+          selectedItems.value.add(item)
+          emits('rowSelected', item)
+        }
+      })
+    } else {
+      selectedItems.value.add(row)
+      emits('rowSelected', row)
+    }
   }
+
+  emits('selection', Array.from(selectedItems.value))
 }
 
 const getFieldColumnClasses = (field: TableFieldObject) => [
@@ -228,4 +303,9 @@ const getFieldColumnClasses = (field: TableFieldObject) => [
   field.variant ? `table-${field.variant}` : undefined,
   {'b-table-sortable-column': isSortable.value && field.sortable},
 ]
+
+const getRowClasses = (item: TableItem) => [
+  item._rowVariant ? `table-${item._rowVariant}` : null,
+  selectableBoolean.value && selectedItems.value.has(item) ? `selected table-primary` : null,
+]
 </script>

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

@@ -86,3 +86,11 @@
     cursor: pointer;
   }
 }
+
+.table {
+  &.b-table-selectable {
+    tr {
+      cursor: pointer;
+    }
+  }
+}

packages/bootstrap-vue-3/src/types/components/BTable/BTable.d.ts

@@ -16,6 +16,9 @@ export interface Props {
   small?: boolean
   striped?: boolean
   variant?: ColorVariant
+  sortInternal?: boolean
+  selectable?: boolean
+  selectMode?: 'multi' | 'single' | 'range'
 }
 // Emits