fix(BTable): stickyHeader true causes maxHeight 300px

feat(BTable): allow Numberish values => string is interpreted as is with maxHeight, numbers are converted to ${number}px maxHeight

refactor(BTable): move tableAttrs to a computed for shared props

apps/docs/src/data/components/table.data.ts

@@ -485,8 +485,10 @@ export default {
         },
         {
           prop: 'stickyHeader',
-          type: 'boolean',
+          type: 'boolean | Numberish',
           default: false,
+          description:
+            'Makes the table header sticky. Set to true for a maximum height 300px tall table, or set to any valid CSS height (including units). Inputting a number type is converted to px height',
         },
       ],
       emits: [],

packages/bootstrap-vue-next/src/components/BTable/BTableSimple.vue

@@ -1,19 +1,21 @@
 <template>
   <!-- tables definitions are shared. Can't use createReusableTemplate cause it becomes a non-root node -->
-  <table v-if="!props.responsive" :id="id" :class="computedClasses">
-    <slot />
-  </table>
-  <div v-else :class="responsiveClasses">
-    <table :id="id" :class="computedClasses">
+  <div v-if="isResponsive" :class="responsiveClasses" :style="responsiveStyles">
+    <table v-bind="tableAttrs">
       <slot />
     </table>
   </div>
+  <table v-else v-bind="tableAttrs">
+    <slot />
+  </table>
 </template>
 
 <script setup lang="ts">
-import {computed} from 'vue'
+import {computed, type StyleValue} from 'vue'
 import type {BTableSimpleProps} from '../../types'
 
+const defaultStickyHeaderHeight = '300px'
+
 // TODO alphabetize the lists for tables
 // TODO all table things do not declare their props
 // TODO some props are not used. ex id, fixed, etc
@@ -63,10 +65,33 @@ const computedClasses = computed(() => [
     'table-striped-columns': props.stripedColumns,
   },
 ])
+const tableAttrs = computed(() => ({
+  id: props.id,
+  class: computedClasses.value,
+}))
 
+const computedSticky = computed(() =>
+  // String used as is
+  typeof props.stickyHeader === 'string'
+    ? props.stickyHeader
+    : // Number is converted to px
+      typeof props.stickyHeader === 'number'
+      ? `${props.stickyHeader}px`
+      : // Boolean true defaults to the above defined default height
+        props.stickyHeader === true
+        ? defaultStickyHeaderHeight
+        : // NaN is ignored
+          NaN
+)
+const stickyIsValid = computed(() => !Number.isNaN(computedSticky.value))
+
+const isResponsive = computed(() => props.responsive !== false || stickyIsValid.value)
+const responsiveStyles = computed<StyleValue>(() => ({
+  ...(stickyIsValid.value ? {maxHeight: computedSticky.value} : {}),
+}))
 const responsiveClasses = computed(() => ({
   'table-responsive': props.responsive === true,
   [`table-responsive-${props.responsive}`]: typeof props.responsive === 'string',
-  'b-table-sticky-header': props.stickyHeader,
+  'b-table-sticky-header': stickyIsValid.value,
 }))
 </script>

packages/bootstrap-vue-next/src/types/ComponentProps.ts

@@ -951,7 +951,7 @@ export type BTableSimpleProps = {
   responsive?: boolean | Breakpoint
   small?: boolean
   stacked?: boolean | Breakpoint
-  stickyHeader?: boolean
+  stickyHeader?: boolean | Numberish
   striped?: boolean
   stripedColumns?: boolean
   tableClass?: ClassValue