fix(BTableLite): field attribute isRowHeader now being respected (#2713)

rgeerts · web-flow · commit 9a4b648a3167 · 2025-06-09T08:07:53.000-05:00
diff --git a/packages/bootstrap-vue-next/src/components/BTable/BTableLite.vue b/packages/bootstrap-vue-next/src/components/BTable/BTableLite.vue
@@ -88,7 +88,8 @@
             @mouseleave="!filterEvent($event) && emit('row-unhovered', item, itemIndex, $event)"
             @mousedown="handleMiddleClick(item, itemIndex, $event)"
           >
-            <BTd
+            <component
+              :is="getCellComponent(field)"
               v-for="field in computedFields"
               :key="field.key"
               :variant="
@@ -121,7 +122,7 @@
                   {{ formatItem(item, String(field.key), field.formatter) }}
                 </template>
               </slot>
-            </BTd>
+            </component>
           </BTr>
 
           <template
@@ -518,6 +519,13 @@ const getRowClasses = (item: Items | null, type: TableRowType) =>
 const generateTableRowId = (primaryKeyValue: string) =>
   `${computedId.value}__row_${primaryKeyValue}`
 
+const getCellComponent = (field: Readonly<TableField>) => {
+  if (field?.isRowHeader) {
+    return BTh
+  }
+  return BTd
+}
+
 const computedSimpleProps = computed(() => ({
   ...pick(props, btableSimpleProps),
   tableClass: computedTableClasses.value,
diff --git a/packages/bootstrap-vue-next/src/components/BTable/table-lite.spec.ts b/packages/bootstrap-vue-next/src/components/BTable/table-lite.spec.ts
@@ -528,4 +528,35 @@ describe('btablelite', () => {
       expect(wrapper.text()).not.toContain('foobar!')
     })
   })
+  describe('isRowHeader field property', () => {
+    it('sets td/th appropriately based on isRowHeader is true, false, or undefined', async () => {
+      const items = [{isActive: true, age: 40, name: {first: 'Dickerson', last: 'Macdonald'}}]
+      const fields = [
+        {key: 'name.first', label: 'Actions', isRowHeader: true, class: 'first-name'},
+        {key: 'age', label: 'Age', isRowHeader: false, class: 'age'},
+        {key: 'isActive', label: 'Active', isRowHeader: false, class: 'active'},
+      ]
+      const wrapper = mount(BTableLite, {
+        props: {
+          items,
+          fields,
+        },
+      })
+      const $tbody = wrapper.get('tbody')
+      const $tr = $tbody.find('tr')
+      expect($tr.find('th.first-name').exists()).toBe(true)
+      expect($tr.find('td.age').exists()).toBe(true)
+      expect($tr.find('td.active').exists()).toBe(true)
+      await wrapper.setProps({
+        fields: [
+          {key: 'name.first', label: 'Actions', isRowHeader: false, class: 'first-name'},
+          {key: 'age', label: 'Age', isRowHeader: false, class: 'age'},
+          {key: 'isActive', label: 'Active', isRowHeader: false, class: 'active'},
+        ],
+      })
+      expect($tr.find('th.first-name').exists()).toBe(false)
+      expect($tr.find('td.age').exists()).toBe(true)
+      expect($tr.find('td.active').exists()).toBe(true)
+    })
+  })
 })
