+66
-22
lines changedFilter options
+66
-22
lines changed Original file line number Diff line number Diff line change
@@ -446,15 +446,18 @@ headers, sticky columns, and the table sorting feature, all require BootstrapVue
446 446
<!-- b-table-bordered.vue -->
447 447
```
448 448 449 -
### Row styling
449 +
### Row styling and attributes
450 450 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:
452 453 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`. |
456 458 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:
458 461 459 462
- `item` - The item record data associated with the row. For rows that are not associated with an
460 463
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
485 488
},
486 489
methods: {
487 490
rowClass(item, type) {
488 -
if (!item) return
491 +
if (!item || type !== 'row') return
489 492
if (item.status === 'awesome') return 'table-success'
490 493
}
491 494
}
@@ -25,7 +25,10 @@ export default {
25 25
isFunction(this.tbodyTrClass)
26 26
? this.tbodyTrClass(null, 'row-bottom')
27 27
: this.tbodyTrClass
28 -
]
28 +
],
29 +
attrs: isFunction(this.tbodyTrAttr)
30 +
? this.tbodyTrAttr(null, 'row-bottom')
31 +
: this.tbodyTrAttr
29 32
},
30 33
this.normalizeSlot(slotName, { columns: fields.length, fields: fields })
31 34
)
@@ -55,7 +55,10 @@ export default {
55 55
isFunction(this.tbodyTrClass)
56 56
? this.tbodyTrClass(null, busySlotName)
57 57
: this.tbodyTrClass
58 -
]
58 +
],
59 +
attrs: isFunction(this.tbodyTrAttr)
60 +
? this.tbodyTrAttr(null, busySlotName)
61 +
: this.tbodyTrAttr
59 62
},
60 63
[
61 64
h(BTd, { props: { colspan: this.computedFields.length || null } }, [
@@ -64,7 +64,10 @@ export default {
64 64
isFunction(this.tbodyTrClass)
65 65
? this.tbodyTrClass(null, 'row-empty')
66 66
: this.tbodyTrClass
67 -
]
67 +
],
68 +
attrs: isFunction(this.tbodyTrAttr)
69 +
? this.tbodyTrAttr(null, 'row-empty')
70 +
: this.tbodyTrAttr
68 71
},
69 72
[$empty]
70 73
)
@@ -13,6 +13,10 @@ export default {
13 13
type: [String, Array, Object, Function],
14 14
default: null
15 15
},
16 +
tbodyTrAttr: {
17 +
type: [Object, Function],
18 +
default: null
19 +
},
16 20
detailsTdClass: {
17 21
type: [String, Array, Object],
18 22
default: null
@@ -216,6 +220,14 @@ export default {
216 220
const selectableClasses = this.selectableRowClasses ? this.selectableRowClasses(rowIndex) : {}
217 221
const selectableAttrs = this.selectableRowAttrs ? this.selectableRowAttrs(rowIndex) : {}
218 222 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 + 219 231
// Add the item row
220 232
$rows.push(
221 233
h(
@@ -224,14 +236,12 @@ export default {
224 236
key: `__b-table-row-${rowKey}__`,
225 237
ref: 'itemRows',
226 238
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' : ''],
232 240
props: { variant: item._rowVariant || null },
233 241
attrs: {
234 242
id: rowId,
243 +
...userTrAttrs,
244 +
// Users cannot override the following attributes
235 245
tabindex: hasRowClickHandler ? '0' : null,
236 246
'data-pk': primaryKeyValue || null,
237 247
'aria-details': detailsId,
@@ -284,19 +294,26 @@ export default {
284 294
}
285 295 286 296
// 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
287 303
$rows.push(
288 304
h(
289 305
BTr,
290 306
{
291 307
key: `__b-table-details__${rowKey}`,
292 308
staticClass: 'b-table-details',
293 -
class: [
294 -
isFunction(this.tbodyTrClass)
295 -
? this.tbodyTrClass(item, detailsSlotName)
296 -
: this.tbodyTrClass
297 -
],
309 +
class: [userDetailsTrClasses],
298 310
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 +
}
300 317
},
301 318
[$details]
302 319
)
@@ -23,7 +23,8 @@ export default {
23 23
staticClass: 'b-table-top-row',
24 24
class: [
25 25
isFunction(this.tbodyTrClass) ? this.tbodyTrClass(null, 'row-top') : this.tbodyTrClass
26 -
]
26 +
],
27 +
attrs: isFunction(this.tbodyTrAttr) ? this.tbodyTrAttr(null, 'row-top') : this.tbodyTrAttr
27 28
},
28 29
[this.normalizeSlot(slotName, { columns: fields.length, fields: fields })]
29 30
)
@@ -37,6 +37,7 @@ export declare class BTable extends BvComponent {
37 37
filterIncludedFields?: Array<string>
38 38
busy?: boolean
39 39
tbodyTrClass?: string | Array<any> | object | BvTableTbodyTrClassCallback
40 +
tbodyTrAttr?: object | BvTableTbodyTrAttrCallback
40 41
tabelVariant?: BvTableVariant | string
41 42
headVariant?: BvTableHeadFootVariant | string
42 43
footVariant?: BvTableHeadFootVariant | string
@@ -55,6 +56,7 @@ export declare class BTableLite extends BvComponent {
55 56
fields?: BvTableFieldArray
56 57
primaryKey?: string
57 58
tbodyTrClass?: string | Array<any> | object | BvTableTbodyTrClassCallback
59 +
tbodyTrAttr?: object | BvTableTbodyTrAttrCallback
58 60
tableClass?: string
59 61
tableVariant?: BvTableVariant | string
60 62
headVariant?: BvTableHeadFootVariant | string
@@ -133,6 +135,8 @@ export type BvTableSortDirection = 'asc' | 'desc' | 'last'
133 135 134 136
export type BvTableFormatterCallback = ((value: any, key: string, item: any) => any)
135 137 138 +
export type BvTableTbodyTrAttrCallback = ((item: any, type: string) => object)
139 + 136 140
export type BvTableTbodyTrClassCallback = ((item: any, type: string) => any)
137 141 138 142
export type BvTableFilterCallback = ((item: any, filter: any) => boolean)
@@ -135,6 +135,11 @@
135 135
"prop": "tbodyTrClass",
136 136
"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)"
137 137
},
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 +
},
138 143
{
139 144
"prop": "detailsTdClass",
140 145
"version": "2.1.0",
@@ -1117,6 +1122,11 @@
1117 1122
"prop": "tbodyTrClass",
1118 1123
"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)"
1119 1124
},
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 +
},
1120 1130
{
1121 1131
"prop": "detailsTdClass",
1122 1132
"version": "2.1.0",
You can’t perform that action at this time.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4