diff --git a/src/components/table/README.md b/src/components/table/README.md
index 73e07f0e33e..4598db046c2 100755
--- a/src/components/table/README.md
+++ b/src/components/table/README.md
@@ -306,6 +306,8 @@ fields: [
```
## Table style options
+
+### Table Styling ###
`` provides several props to alter the style of the table:
| prop | Type | Description
@@ -375,7 +377,49 @@ export default {
```
+### Row Styling ###
+
+You can also style every row using the `tbdoy-tr-class` 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`.
+
+
+**Example: Basic row styles**
+```html
+
+
+
+
+
+
+
+
+
+```
## Responsive tables
Responsive tables allow tables to be scrolled horizontally with ease. Make any table
diff --git a/src/components/table/fixtures/table.html b/src/components/table/fixtures/table.html
index 9b25295fb87..7f788610966 100755
--- a/src/components/table/fixtures/table.html
+++ b/src/components/table/fixtures/table.html
@@ -135,4 +135,6 @@ Provider Test Table
Details
+
+
diff --git a/src/components/table/fixtures/table.js b/src/components/table/fixtures/table.js
index 3d7e3d31f3e..ec8b2fa6d9b 100755
--- a/src/components/table/fixtures/table.js
+++ b/src/components/table/fixtures/table.js
@@ -144,6 +144,12 @@ window.app = new Vue({
},
formatCellAttrs (value, key, item) {
return {title: 'Actions'}
+ },
+ styleRow (item) {
+ if (!item) {
+ return
+ }
+ return { 'tr-start-with-l': item.name.first.charAt(0) === 'L', 'tr-last-name-macdonald': item.name.last === 'Macdonald' }
}
}
})
diff --git a/src/components/table/table.js b/src/components/table/table.js
index 906fb031cb6..b6ca6ba45bb 100644
--- a/src/components/table/table.js
+++ b/src/components/table/table.js
@@ -167,7 +167,7 @@ export default {
rows.push(
h(
'tr',
- { key: 'top-row', class: ['b-table-top-row', this.tbodyTrClass] },
+ { key: 'top-row', class: ['b-table-top-row', typeof this.tbodyTrClass === 'function' ? this.tbodyTrClass(null, 'row-top') : this.tbodyTrClass] },
[$scoped['top-row']({ columns: fields.length, fields: fields })]
)
)
@@ -281,7 +281,7 @@ export default {
'tr',
{
key: `details-${rowIndex}`,
- class: ['b-table-details', this.tbodyTrClass],
+ class: ['b-table-details', typeof this.tbodyTrClass === 'function' ? this.tbodyTrClass(item, 'row-details') : this.tbodyTrClass],
attrs: trAttrs
},
[details]
@@ -317,7 +317,7 @@ export default {
'tr',
{
key: 'empty-row',
- class: ['b-table-empty-row', this.tbodyTrClass],
+ class: ['b-table-empty-row', typeof this.tbodyTrClass === 'function' ? this.tbodyTrClass(null, 'row-empty') : this.tbodyTrClass],
attrs: this.isStacked ? { role: 'row' } : {}
},
[empty]
@@ -333,7 +333,7 @@ export default {
rows.push(
h(
'tr',
- { key: 'bottom-row', class: ['b-table-bottom-row', this.tbodyTrClass] },
+ { key: 'bottom-row', class: ['b-table-bottom-row', typeof this.tbodyTrClass === 'function' ? this.tbodyTrClass(null, 'row-bottom') : this.tbodyTrClass] },
[$scoped['bottom-row']({ columns: fields.length, fields: fields })]
)
)
@@ -484,7 +484,7 @@ export default {
default: null
},
tbodyTrClass: {
- type: [String, Array],
+ type: [String, Array, Function],
default: null
},
tfootClass: {
@@ -892,7 +892,7 @@ export default {
item._rowVariant
? `${this.dark ? 'bg' : 'table'}-${item._rowVariant}`
: '',
- this.tbodyTrClass
+ typeof this.tbodyTrClass === 'function' ? this.tbodyTrClass(item, 'row') : this.tbodyTrClass
]
},
rowClicked (e, item, index) {
diff --git a/src/components/table/table.spec.js b/src/components/table/table.spec.js
index aa8f106ac62..d690e1fd303 100755
--- a/src/components/table/table.spec.js
+++ b/src/components/table/table.spec.js
@@ -780,4 +780,26 @@ describe('table', async () => {
}
})
})
+
+ it('should set row classes', async () => {
+ // Classes that children rows must contain
+ const classesTest = {
+ 'tr-start-with-l': [1, 7],
+ 'tr-last-name-macdonald': [0, 6]
+ }
+ const { app } = window
+ const vm = app.$refs.table_style_row
+ const tbody = [...vm.$el.children].find(el => el && el.tagName === 'TBODY')
+ expect(tbody).toBeDefined()
+ for (const className in classesTest) {
+ const children = classesTest[className]
+ for (let childIndex = 0, len = tbody.children.length - 1; childIndex < len; ++childIndex) {
+ const hasClass = children.indexOf(childIndex) >= 0
+ expect(Boolean(tbody.children[childIndex]) &&
+ Boolean(tbody.children[childIndex].classList) &&
+ tbody.children[childIndex].classList.contains(className))
+ .toBe(hasClass)
+ }
+ }
+ })
})