Skip to content
Permalink
Browse files

feat(b-table, b-table-lite): new `tbody-tr-attr` prop for arbitrary r…

…ow 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
  • Loading branch information
CyBot authored and jackmu95 committed Dec 10, 2019
1 parent 4abe675 commit 4acf6ed863dd5edd85897a01b099c42322097d1b
@@ -446,15 +446,18 @@ headers, sticky columns, and the table sorting feature, all require BootstrapVue
<!-- b-table-bordered.vue -->
```

### Row styling
### Row styling and attributes

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

| Property | Type | Description |
| -------------- | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `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`. |
| Property | Type | Description |
| ---------------- | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `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`. |
| `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`. |

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

- `item` - The item record data associated with the row. For rows that are not associated with an
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
},
methods: {
rowClass(item, type) {
if (!item) return
if (!item || type !== 'row') return
if (item.status === 'awesome') return 'table-success'
}
}
@@ -25,7 +25,10 @@ export default {
isFunction(this.tbodyTrClass)
? this.tbodyTrClass(null, 'row-bottom')
: this.tbodyTrClass
]
],
attrs: isFunction(this.tbodyTrAttr)
? this.tbodyTrAttr(null, 'row-bottom')
: this.tbodyTrAttr
},
this.normalizeSlot(slotName, { columns: fields.length, fields: fields })
)
@@ -55,7 +55,10 @@ export default {
isFunction(this.tbodyTrClass)
? this.tbodyTrClass(null, busySlotName)
: this.tbodyTrClass
]
],
attrs: isFunction(this.tbodyTrAttr)
? this.tbodyTrAttr(null, busySlotName)
: this.tbodyTrAttr
},
[
h(BTd, { props: { colspan: this.computedFields.length || null } }, [
@@ -64,7 +64,10 @@ export default {
isFunction(this.tbodyTrClass)
? this.tbodyTrClass(null, 'row-empty')
: this.tbodyTrClass
]
],
attrs: isFunction(this.tbodyTrAttr)
? this.tbodyTrAttr(null, 'row-empty')
: this.tbodyTrAttr
},
[$empty]
)
@@ -13,6 +13,10 @@ export default {
type: [String, Array, Object, Function],
default: null
},
tbodyTrAttr: {
type: [Object, Function],
default: null
},
detailsTdClass: {
type: [String, Array, Object],
default: null
@@ -216,6 +220,14 @@ export default {
const selectableClasses = this.selectableRowClasses ? this.selectableRowClasses(rowIndex) : {}
const selectableAttrs = this.selectableRowAttrs ? this.selectableRowAttrs(rowIndex) : {}

// Additional classes and attributes
const userTrClasses = isFunction(this.tbodyTrClass)
? this.tbodyTrClass(item, 'row')
: this.tbodyTrClass
const userTrAttrs = isFunction(this.tbodyTrAttr)
? this.tbodyTrAttr(item, 'row')
: this.tbodyTrAttr

// Add the item row
$rows.push(
h(
@@ -224,14 +236,12 @@ export default {
key: `__b-table-row-${rowKey}__`,
ref: 'itemRows',
refInFor: true,
class: [
isFunction(this.tbodyTrClass) ? this.tbodyTrClass(item, 'row') : this.tbodyTrClass,
selectableClasses,
rowShowDetails ? 'b-table-has-details' : ''
],
class: [userTrClasses, selectableClasses, rowShowDetails ? 'b-table-has-details' : ''],
props: { variant: item._rowVariant || null },
attrs: {
id: rowId,
...userTrAttrs,
// Users cannot override the following attributes
tabindex: hasRowClickHandler ? '0' : null,
'data-pk': primaryKeyValue || null,
'aria-details': detailsId,
@@ -284,19 +294,26 @@ export default {
}

// Add the actual details row
const userDetailsTrClasses = isFunction(this.tbodyTrClass)
? this.tbodyTrClass(item, detailsSlotName)
: this.tbodyTrClass
const userDetailsTrAttrs = isFunction(this.tbodyTrAttr)
? this.tbodyTrAttr(item, detailsSlotName)
: this.tbodyTrAttr
$rows.push(
h(
BTr,
{
key: `__b-table-details__${rowKey}`,
staticClass: 'b-table-details',
class: [
isFunction(this.tbodyTrClass)
? this.tbodyTrClass(item, detailsSlotName)
: this.tbodyTrClass
],
class: [userDetailsTrClasses],
props: { variant: item._rowVariant || null },
attrs: { id: detailsId, tabindex: '-1' }
attrs: {
...userDetailsTrAttrs,
// Users cannot override the following attributes
id: detailsId,
tabindex: '-1'
}
},
[$details]
)
@@ -23,7 +23,8 @@ export default {
staticClass: 'b-table-top-row',
class: [
isFunction(this.tbodyTrClass) ? this.tbodyTrClass(null, 'row-top') : this.tbodyTrClass
]
],
attrs: isFunction(this.tbodyTrAttr) ? this.tbodyTrAttr(null, 'row-top') : this.tbodyTrAttr
},
[this.normalizeSlot(slotName, { columns: fields.length, fields: fields })]
)
@@ -37,6 +37,7 @@ export declare class BTable extends BvComponent {
filterIncludedFields?: Array<string>
busy?: boolean
tbodyTrClass?: string | Array<any> | object | BvTableTbodyTrClassCallback
tbodyTrAttr?: object | BvTableTbodyTrAttrCallback
tabelVariant?: BvTableVariant | string
headVariant?: BvTableHeadFootVariant | string
footVariant?: BvTableHeadFootVariant | string
@@ -55,6 +56,7 @@ export declare class BTableLite extends BvComponent {
fields?: BvTableFieldArray
primaryKey?: string
tbodyTrClass?: string | Array<any> | object | BvTableTbodyTrClassCallback
tbodyTrAttr?: object | BvTableTbodyTrAttrCallback
tableClass?: string
tableVariant?: BvTableVariant | string
headVariant?: BvTableHeadFootVariant | string
@@ -133,6 +135,8 @@ export type BvTableSortDirection = 'asc' | 'desc' | 'last'

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

export type BvTableTbodyTrAttrCallback = ((item: any, type: string) => object)

export type BvTableTbodyTrClassCallback = ((item: any, type: string) => any)

export type BvTableFilterCallback = ((item: any, filter: any) => boolean)
@@ -135,6 +135,11 @@
"prop": "tbodyTrClass",
"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)"
},
{
"prop": "tbodyTrAttr",
"version": "2.2.0",
"description": "Attributes to be added to each tr in the tbody, or a function returning such attributes (see docs for details)"
},
{
"prop": "detailsTdClass",
"version": "2.1.0",
@@ -1117,6 +1122,11 @@
"prop": "tbodyTrClass",
"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)"
},
{
"prop": "tbodyTrAttr",
"version": "2.2.0",
"description": "Attributes to be added to each tr in the tbody, or a function returning such attributes (see docs for details)"
},
{
"prop": "detailsTdClass",
"version": "2.1.0",

0 comments on commit 4acf6ed

Please sign in to comment.
You can’t perform that action at this time.