🌐 AI搜索 & 代理 主页
Skip to content

Commit 4acf6ed

Browse files
CyBotjacobmllr95
CyBot
authored and
jacobmllr95
committed
feat(b-table, b-table-lite): new tbody-tr-attr prop for arbitrary row attributes (closes #1864) (#4481)
* feat(b-table): add custom row attributes Adds a trAttr attribute to b-table, which can either be an object or a function An object is added straight to the attributes of each row A function gets passed each item and is expected to return an object * Change attribute order so ARIA attributes don't get overwritten * Add implementation version to package declaration * Add implementation version to package declaration Missed second one... * Update mixin-tbody-row.js * Update mixin-busy.js * Update mixin-bottom-row.js * Update mixin-empty.js * Update mixin-top-row.js * Update package.json * Update index.d.ts * Update README.md * lint * Update index.d.ts * Update mixin-tbody-row.js
1 parent 4abe675 commit 4acf6ed

File tree

8 files changed

+66
-22
lines changed

8 files changed

+66
-22
lines changed

‎src/components/table/README.md‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -446,15 +446,18 @@ headers, sticky columns, and the table sorting feature, all require BootstrapVue
446446
<!-- b-table-bordered.vue -->
447447
```
448448

449-
### Row styling
449+
### Row styling and attributes
450450

451-
You can also style every row using the `tbody-tr-class` prop
451+
You can also style every row using the `tbody-tr-class` prop, and optionally supply additional
452+
attributes via the `tbody-tr-attr` prop:
452453

453-
| Property | Type | Description |
454-
| -------------- | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
455-
| `tbodyTrClass` | String, Array or Function | Classes to be applied to every row on the table. If a function is given, it will be called as `tbodyTrClass( item, type )` and it may return an `Array`, `Object` or `String`. |
454+
| Property | Type | Description |
455+
| ---------------- | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
456+
| `tbody-tr-class` | String, Array or Function | Classes to be applied to every row on the table. If a function is given, it will be called as `tbodyTrClass( item, type )` and it may return an `Array`, `Object` or `String`. |
457+
| `tbody-tr-attr` | Object or Function | Attributes to be applied to every row on the table. If a function is given, it will be called as `tbodyTrAttr( item, type )` and it must return an `Object`. |
456458

457-
When passing a function reference to `tbody-tr-class`, the function's arguments will be as follows:
459+
When passing a function reference to `tbody-tr-class` or `tbody-tr-attr`, the function's arguments
460+
will be as follows:
458461

459462
- `item` - The item record data associated with the row. For rows that are not associated with an
460463
item record, this value will be `null` or `undefined`
@@ -485,7 +488,7 @@ When passing a function reference to `tbody-tr-class`, the function's arguments
485488
},
486489
methods: {
487490
rowClass(item, type) {
488-
if (!item) return
491+
if (!item || type !== 'row') return
489492
if (item.status === 'awesome') return 'table-success'
490493
}
491494
}

‎src/components/table/helpers/mixin-bottom-row.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,10 @@ export default {
2525
isFunction(this.tbodyTrClass)
2626
? this.tbodyTrClass(null, 'row-bottom')
2727
: this.tbodyTrClass
28-
]
28+
],
29+
attrs: isFunction(this.tbodyTrAttr)
30+
? this.tbodyTrAttr(null, 'row-bottom')
31+
: this.tbodyTrAttr
2932
},
3033
this.normalizeSlot(slotName, { columns: fields.length, fields: fields })
3134
)

‎src/components/table/helpers/mixin-busy.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,10 @@ export default {
5555
isFunction(this.tbodyTrClass)
5656
? this.tbodyTrClass(null, busySlotName)
5757
: this.tbodyTrClass
58-
]
58+
],
59+
attrs: isFunction(this.tbodyTrAttr)
60+
? this.tbodyTrAttr(null, busySlotName)
61+
: this.tbodyTrAttr
5962
},
6063
[
6164
h(BTd, { props: { colspan: this.computedFields.length || null } }, [

‎src/components/table/helpers/mixin-empty.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,10 @@ export default {
6464
isFunction(this.tbodyTrClass)
6565
? this.tbodyTrClass(null, 'row-empty')
6666
: this.tbodyTrClass
67-
]
67+
],
68+
attrs: isFunction(this.tbodyTrAttr)
69+
? this.tbodyTrAttr(null, 'row-empty')
70+
: this.tbodyTrAttr
6871
},
6972
[$empty]
7073
)

‎src/components/table/helpers/mixin-tbody-row.js‎

Lines changed: 28 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,10 @@ export default {
1313
type: [String, Array, Object, Function],
1414
default: null
1515
},
16+
tbodyTrAttr: {
17+
type: [Object, Function],
18+
default: null
19+
},
1620
detailsTdClass: {
1721
type: [String, Array, Object],
1822
default: null
@@ -216,6 +220,14 @@ export default {
216220
const selectableClasses = this.selectableRowClasses ? this.selectableRowClasses(rowIndex) : {}
217221
const selectableAttrs = this.selectableRowAttrs ? this.selectableRowAttrs(rowIndex) : {}
218222

223+
// Additional classes and attributes
224+
const userTrClasses = isFunction(this.tbodyTrClass)
225+
? this.tbodyTrClass(item, 'row')
226+
: this.tbodyTrClass
227+
const userTrAttrs = isFunction(this.tbodyTrAttr)
228+
? this.tbodyTrAttr(item, 'row')
229+
: this.tbodyTrAttr
230+
219231
// Add the item row
220232
$rows.push(
221233
h(
@@ -224,14 +236,12 @@ export default {
224236
key: `__b-table-row-${rowKey}__`,
225237
ref: 'itemRows',
226238
refInFor: true,
227-
class: [
228-
isFunction(this.tbodyTrClass) ? this.tbodyTrClass(item, 'row') : this.tbodyTrClass,
229-
selectableClasses,
230-
rowShowDetails ? 'b-table-has-details' : ''
231-
],
239+
class: [userTrClasses, selectableClasses, rowShowDetails ? 'b-table-has-details' : ''],
232240
props: { variant: item._rowVariant || null },
233241
attrs: {
234242
id: rowId,
243+
...userTrAttrs,
244+
// Users cannot override the following attributes
235245
tabindex: hasRowClickHandler ? '0' : null,
236246
'data-pk': primaryKeyValue || null,
237247
'aria-details': detailsId,
@@ -284,19 +294,26 @@ export default {
284294
}
285295

286296
// Add the actual details row
297+
const userDetailsTrClasses = isFunction(this.tbodyTrClass)
298+
? this.tbodyTrClass(item, detailsSlotName)
299+
: this.tbodyTrClass
300+
const userDetailsTrAttrs = isFunction(this.tbodyTrAttr)
301+
? this.tbodyTrAttr(item, detailsSlotName)
302+
: this.tbodyTrAttr
287303
$rows.push(
288304
h(
289305
BTr,
290306
{
291307
key: `__b-table-details__${rowKey}`,
292308
staticClass: 'b-table-details',
293-
class: [
294-
isFunction(this.tbodyTrClass)
295-
? this.tbodyTrClass(item, detailsSlotName)
296-
: this.tbodyTrClass
297-
],
309+
class: [userDetailsTrClasses],
298310
props: { variant: item._rowVariant || null },
299-
attrs: { id: detailsId, tabindex: '-1' }
311+
attrs: {
312+
...userDetailsTrAttrs,
313+
// Users cannot override the following attributes
314+
id: detailsId,
315+
tabindex: '-1'
316+
}
300317
},
301318
[$details]
302319
)

‎src/components/table/helpers/mixin-top-row.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,8 @@ export default {
2323
staticClass: 'b-table-top-row',
2424
class: [
2525
isFunction(this.tbodyTrClass) ? this.tbodyTrClass(null, 'row-top') : this.tbodyTrClass
26-
]
26+
],
27+
attrs: isFunction(this.tbodyTrAttr) ? this.tbodyTrAttr(null, 'row-top') : this.tbodyTrAttr
2728
},
2829
[this.normalizeSlot(slotName, { columns: fields.length, fields: fields })]
2930
)

‎src/components/table/index.d.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ export declare class BTable extends BvComponent {
3737
filterIncludedFields?: Array<string>
3838
busy?: boolean
3939
tbodyTrClass?: string | Array<any> | object | BvTableTbodyTrClassCallback
40+
tbodyTrAttr?: object | BvTableTbodyTrAttrCallback
4041
tabelVariant?: BvTableVariant | string
4142
headVariant?: BvTableHeadFootVariant | string
4243
footVariant?: BvTableHeadFootVariant | string
@@ -55,6 +56,7 @@ export declare class BTableLite extends BvComponent {
5556
fields?: BvTableFieldArray
5657
primaryKey?: string
5758
tbodyTrClass?: string | Array<any> | object | BvTableTbodyTrClassCallback
59+
tbodyTrAttr?: object | BvTableTbodyTrAttrCallback
5860
tableClass?: string
5961
tableVariant?: BvTableVariant | string
6062
headVariant?: BvTableHeadFootVariant | string
@@ -133,6 +135,8 @@ export type BvTableSortDirection = 'asc' | 'desc' | 'last'
133135

134136
export type BvTableFormatterCallback = ((value: any, key: string, item: any) => any)
135137

138+
export type BvTableTbodyTrAttrCallback = ((item: any, type: string) => object)
139+
136140
export type BvTableTbodyTrClassCallback = ((item: any, type: string) => any)
137141

138142
export type BvTableFilterCallback = ((item: any, filter: any) => boolean)

‎src/components/table/package.json‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -135,6 +135,11 @@
135135
"prop": "tbodyTrClass",
136136
"description": "CSS class (or classes) to apply to the tr element in the tbody. Can be a function that returns a class (see docs for details)"
137137
},
138+
{
139+
"prop": "tbodyTrAttr",
140+
"version": "2.2.0",
141+
"description": "Attributes to be added to each tr in the tbody, or a function returning such attributes (see docs for details)"
142+
},
138143
{
139144
"prop": "detailsTdClass",
140145
"version": "2.1.0",
@@ -1117,6 +1122,11 @@
11171122
"prop": "tbodyTrClass",
11181123
"description": "CSS class (or classes) to apply to the tr element in the tbody. Can be a function that returns a class (see docs for details)"
11191124
},
1125+
{
1126+
"prop": "tbodyTrAttr",
1127+
"version": "2.2.0",
1128+
"description": "Attributes to be added to each tr in the tbody, or a function returning such attributes (see docs for details)"
1129+
},
11201130
{
11211131
"prop": "detailsTdClass",
11221132
"version": "2.1.0",

0 commit comments

Comments
 (0)