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) + } + } + }) })