Skip to content
This repository was archived by the owner on Mar 27, 2025. It is now read-only.

Commit 2ca32a8

Browse files
committed
feat(BTable): added tbodyTrClass prop to update the tbody > rows styles based on function results
1 parent a57d196 commit 2ca32a8

File tree

2 files changed

+54
-14
lines changed

2 files changed

+54
-14
lines changed

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

Lines changed: 36 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@
6363
<tbody>
6464
<template v-for="(item, itemIndex) in items" :key="itemIndex">
6565
<tr
66-
:class="getRowClasses(item)"
66+
:class="getRowClasses(item, 'row')"
6767
@click="!filterEvent($event) && onRowClick(item, itemIndex, $event)"
6868
@dblclick="!filterEvent($event) && onRowDblClick(item, itemIndex, $event)"
6969
@mouseenter="!filterEvent($event) && onRowMouseEnter(item, itemIndex, $event)"
@@ -108,17 +108,16 @@
108108
</td>
109109
</tr>
110110

111-
<tr v-if="item._showDetails === true && $slots['row-details']" :class="getRowClasses(item)">
111+
<tr
112+
v-if="item._showDetails === true && $slots['row-details']"
113+
:class="getRowClasses(item, 'row-details')"
114+
>
112115
<td :colspan="computedFieldsTotal">
113116
<slot name="row-details" :item="item" :toggle-details="() => toggleRowDetails(item)" />
114117
</td>
115118
</tr>
116119
</template>
117-
<tr
118-
v-if="busyBoolean"
119-
class="b-table-busy-slot"
120-
:class="{'b-table-static-busy': items.length === 0}"
121-
>
120+
<tr v-if="busyBoolean" class="b-table-busy-slot" :class="getBusyRowClasses()">
122121
<td :colspan="computedFieldsTotal">
123122
<slot name="table-busy">
124123
<div class="d-flex align-items-center justify-content-center gap-2">
@@ -224,6 +223,7 @@ const props = withDefaults(
224223
emptyFilteredText?: string
225224
tableClasses?: Record<string, any>
226225
fieldColumnClasses?: (field: TableFieldObject) => Record<string, any>[]
226+
tbodyTrClass?: (item: TableItem | null, type: string) => string | Array<any> | null | undefined
227227
}>(),
228228
{
229229
perPage: undefined,
@@ -445,13 +445,35 @@ const getFieldRowClasses = (field: TableFieldObject, tr: TableItem) => [
445445
},
446446
]
447447
448-
const getRowClasses = (item: TableItem) => [
449-
item._rowVariant ? `table-${item._rowVariant}` : null,
450-
item._rowVariant ? `table-${item._rowVariant}` : null,
451-
selectableBoolean.value && selectedItems.value.has(item)
452-
? `selected table-${props.selectionVariant}`
453-
: null,
454-
]
448+
const getRowClasses = (item: TableItem, type = 'row') => {
449+
const classesArray = [
450+
item._rowVariant ? `table-${item._rowVariant}` : null,
451+
item._rowVariant ? `table-${item._rowVariant}` : null,
452+
selectableBoolean.value && selectedItems.value.has(item)
453+
? `selected table-${props.selectionVariant}`
454+
: null,
455+
]
456+
457+
if (props.tbodyTrClass) {
458+
const extraClasses = props.tbodyTrClass(item, type)
459+
if (extraClasses) {
460+
classesArray.push(...(typeof extraClasses === 'string' ? [extraClasses] : extraClasses))
461+
}
462+
}
463+
return classesArray
464+
}
465+
466+
const getBusyRowClasses = () => {
467+
const classesArray = [{'b-table-static-busy': props.items.length === 0}]
468+
469+
if (props.tbodyTrClass) {
470+
const extraClasses = props.tbodyTrClass(null, 'table-busy')
471+
if (extraClasses) {
472+
classesArray.push(...(typeof extraClasses === 'string' ? [extraClasses] : extraClasses))
473+
}
474+
}
475+
return classesArray
476+
}
455477
456478
const selectAllRows = () => {
457479
if (!selectableBoolean.value) return

packages/bootstrap-vue-next/src/components/BTable/table-lite.spec.ts

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -505,6 +505,24 @@ describe('table', () => {
505505
expect($table.find('tr.b-table-busy-slot').exists()).toBe(true)
506506
})
507507

508+
it('has added tbody > tr classes given by tbodyTrClass prop ', () => {
509+
const rowClass = (item: TableItem, type: string) => {
510+
if (!item || type !== 'row') return null
511+
if (item.age === 1) return 'table-success'
512+
}
513+
const wrapper = mount(BTable, {
514+
props: {
515+
fields,
516+
items,
517+
tbodyTrClass: rowClass,
518+
},
519+
})
520+
const $table = wrapper.get('table')
521+
const $firstRow = $table.get('tbody tr')
522+
523+
expect($firstRow.classes()).toContain('table-success')
524+
})
525+
508526
it('has accepts a formatter function', async () => {
509527
const fields2: TableField[] = fields.map((field) => {
510528
if (typeof field === 'object') {

0 commit comments

Comments
 (0)