Permalink
Browse files

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

  • Loading branch information...
jonfunkhouser authored and pi0 committed Mar 12, 2018
1 parent 91c7257 commit d05d6b6eb32a14ff4f652915968f2443da6c6b4a
@@ -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).
@@ -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']
}
}
})
@@ -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
@@ -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)
}
})
})
})

0 comments on commit d05d6b6

Please sign in to comment.