feat(table): support custom classes per table cell in a column

Author: jonfunkhouser

src/components/table/README.md

@@ -275,7 +275,7 @@ The following field properties are recognized:
 | `class` | String or Array | Class name (or array of class names) to add to `<th>` **and** `<td>` in the column.
 | `formatter` | String or Function | A formatter callback function, can be used instead of (or in conjunction with) slots for real table fields (i.e. fields, that have corresponding data at items array). Refer to [**Custom Data Rendering**](#custom-data-rendering) for more details.
 | `sortable` | Boolean | Enable sorting on this column. Refer to the [**Sorting**](#sorting) Section for more details.
-| `tdClass` | String or Array | Class name (or array of class names) to add to `<tbody>` data `<td>` cells in the column.
+| `tdClass` | String or Array or Function | Class name (or array of class names) to add to `<tbody>` data `<td>` cells in the column. If custom classes per cell are required, a callback function can be specified instead.
 | `thClass` | String or Array | Class name (or array of class names) to add to `<thead>`/`<tfoot>` heading `<th>` cell.
 | `thStyle` | Object | JavaScript object representing CSS styles you would like to apply to the table `<thead>`/`<tfoot>` field `<th>`.
 | `variant` | String | Apply contextual class to all the `<th>` **and** `<td>` in the column - `active`, `success`, `info`, `warning`, `danger` (these variants map to classes `thead-${variant}`, `table-${variant}`, or `bg-${variant}` accordingly).

src/components/table/fixtures/table.js

@@ -4,18 +4,22 @@ window.app = new Vue({
     fields: {
       name: {
         label: 'Person Full name',
-        sortable: true
+        sortable: true,
+        tdClass: 'bg-primary'
       },
       age: {
         label: 'Person age',
         sortable: true,
-        formatter: 'formatAge'
+        formatter: 'formatAge',
+        tdClass: ['bg-primary', 'text-dark']
       },
       isActive: {
-        label: 'is Active'
+        label: 'is Active',
+        tdClass: (value, key, item) => { return 'bg-danger' }
       },
       actions: {
-        label: 'Actions'
+        label: 'Actions',
+        tdClass: 'formatCell'
       }
     },
     currentPage: 1,
@@ -131,6 +135,9 @@ window.app = new Vue({
     },
     formatAge (value) {
       return `${value} years old`
+    },
+    formatCell (value, key, item) {
+      return ['bg-primary', 'text-light']
     }
   }
 })

src/components/table/table.js

@@ -864,6 +864,7 @@ export default {
       ]
     },
     tdClasses (field, item) {
+      const t = this
       let cellVariant = ''
       if (item._cellVariants && item._cellVariants[field.key]) {
         cellVariant = `${this.dark ? 'bg' : 'table'}-${
@@ -876,7 +877,7 @@ export default {
           : '',
         cellVariant,
         field.class ? field.class : '',
-        field.tdClass ? field.tdClass : ''
+        t.getTdClasses(item, field)
       ]
     },
     rowClasses (item) {
@@ -981,6 +982,22 @@ export default {
         this._providerSetLocal(data)
       }
     },
+    getTdClasses (item, field) {
+      const key = field.key
+      const tdClass = field.tdClass
+      const parent = this.$parent
+      if (tdClass) {
+        if (typeof tdClass === 'function') {
+          let value = get(item, key)
+          return tdClass(value, key, item)
+        } else if (typeof tdClass === 'string' && typeof parent[tdClass] === 'function') {
+          let value = get(item, key)
+          return parent[tdClass](value, key, item)
+        }
+        return tdClass
+      }
+      return ''
+    },
     getFormattedValue (item, field) {
       const key = field.key
       const formatter = field.formatter

src/components/table/table.spec.js

@@ -699,4 +699,41 @@ describe('table', async () => {
       'b-table-stacked'
     ])
   })
+
+  it('all example tables should have custom formatted cells', async () => {
+    const { app: { $refs } } = window
+
+    const tables = ['table_basic', 'table_paginated', 'table_dark']
+    await nextTick()
+
+    tables.forEach((table, idx) => {
+      const vm = $refs[table]
+      const tbody = [...vm.$el.children].find(
+        el => el && el.tagName === 'TBODY'
+      )
+      expect(tbody).toBeDefined()
+      if (tbody) {
+        const tr = tbody.children[0]
+        expect(tr).toBeDefined()
+        expect(Boolean(tr.children[0]) &&
+          Boolean(tr.children[0].classList) &&
+          tr.children[0].classList.contains('bg-primary'))
+          .toBe(true)
+        expect(Boolean(tr.children[1]) &&
+          Boolean(tr.children[1].classList) &&
+          tr.children[1].classList.contains('bg-primary') &&
+          tr.children[1].classList.contains('text-dark'))
+          .toBe(true)
+        expect(Boolean(tr.children[2]) &&
+          Boolean(tr.children[2].classList) &&
+          tr.children[2].classList.contains('bg-danger'))
+          .toBe(true)
+        expect(Boolean(tr.children[3]) &&
+          Boolean(tr.children[3].classList) &&
+          tr.children[3].classList.contains('bg-primary') &&
+          tr.children[3].classList.contains('text-light'))
+          .toBe(true)
+      }
+    })
+  })
 })