bootstrap-vue · mosinve · May 23, 2018 · May 4, 2018 · May 4, 2018 · May 4, 2018
diff --git a/src/components/table/README.md b/src/components/table/README.md
@@ -306,6 +306,8 @@ fields: [
 ```
 
 ## Table style options
+
+### Table Styling ###
 `<b-table>` provides several props to alter the style of the table:
 
 | prop | Type | Description
@@ -375,7 +377,49 @@ export default {
 
 <!-- table-bordered.vue -->
 ```
+### 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
+<template>
+  <div>
+    <b-table :items="items" :fields="fields" :tbody-tr-class="rowClass">
+    </b-table>
+  </div>
+</template>
 
+<script>
+export default {
+  data () {
+    return {
+      fields: [ 'first_name', 'last_name', 'age' ],
+      items: [
+        { age: 40, first_name: 'Dickerson', last_name: 'Macdonald', status: 'awesome'  },
+        { age: 21, first_name: 'Larsen', last_name: 'Shaw' },
+        { age: 89, first_name: 'Geneva', last_name: 'Wilson' }
+      ],
+    }
+  },
+  methods: {
+    rowClass( item, type ) {
+      if ( !item )
+        return;
+      if ( item.status === 'awesome' )
+        return 'table-success';
+    },
+  }
+}
+</script>
+
+<!-- table-styled-row-basic.vue -->
+```
 
 ## 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
@@ -135,4 +135,6 @@ <h2>Provider Test Table</h2>
             <b-btn size="sm" @click.stop="details(data.item)">Details</b-btn>
         </template>
     </b-table>
+
+    <b-table ref="table_style_row" :items="items" :fields="fields" :tbody-tr-class="styleRow"></b-table>
 </div>
diff --git 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
@@ -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
@@ -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)
+      }
+    }
+  })
 })