Skip to content
Permalink
Browse files
fix(b-table): allow responsive and stacked props together (#6266)
  • Loading branch information
jacobmllr95 committed Dec 29, 2020
1 parent 79784ae commit fa977a8
Show file tree
Hide file tree
Showing 4 changed files with 56 additions and 35 deletions.
@@ -349,8 +349,8 @@ details.
| `no-footer-sorting` | Boolean | When `foot-clone` is true and the table is sortable, disables the sorting icons and click behaviour on the footer heading cells. Refer to the [Sorting](#sorting) section below for more details. |
| `no-border-collapse` | Boolean | Disables the default of collapsing of the table borders. Mainly for use with [sticky headers](#sticky-headers) and/or [sticky columns](#sticky-columns). Will cause the appearance of double borders in some situations. |

**Note:** table style options `fixed`, `stacked`, `caption-top`, `no-border-collapse`, sticky
headers, sticky columns, and the table sorting feature, all require BootstrapVue's custom CSS.
**Note:** The table style options `fixed`, `stacked`, `caption-top`, `no-border-collapse`, sticky
headers, sticky columns and the table sorting feature, all require BootstrapVue's custom CSS.

**Example: Basic table styles**

@@ -609,8 +609,8 @@ breakpoint values `'sm'`, `'md'`, `'lg'`, or `'xl'`.
Column header labels will be rendered to the left of each field value using a CSS `::before` pseudo
element, with a width of 40%.

The prop `stacked` takes precedence over the `responsive` prop, [`sticky-header`](#sticky-headers)
props, and the [`stickyColumn`](#sticky-columns) field definition property.
The `stacked` prop takes precedence over the [`sticky-header`](#sticky-headers) prop and the
[`stickyColumn`](#sticky-columns) field definition property.

**Example: Always stacked table**

@@ -1402,8 +1402,8 @@ set.
wrapped inside a horizontally scrollable `<div>`.
- When you have multiple columns that are set as `stickyColumn`, the columns will stack over each
other visually, and the left-most sticky columns may "peek" out from under the next sticky column.
To get around this behaviour, make sure your latter stickyColumns are the same width or wider than
previous sticky columns.
To get around this behaviour, make sure your latter sticky columns are the same width or wider
than previous sticky columns.
- Bootstrap v4 uses the CSS style `border-collapse: collapsed` on table elements. This prevents any
borders on the sticky columns from "sticking" to the column, and hence those borders will scroll
when the body scrolls. To get around this issue, set the prop `no-border-collapse` on the table
@@ -51,9 +51,8 @@ export const tableRendererMixin = Vue.extend({
computed: {
// Layout related computed props
isResponsive() {
let { responsive } = this
responsive = responsive === '' ? true : responsive
return this.isStacked ? false : responsive
const { responsive } = this
return responsive === '' ? true : responsive
},
isStickyHeader() {
let { stickyHeader } = this
@@ -225,9 +225,12 @@ describe('table-lite', () => {
expect(wrapper.element.tagName).toBe('DIV')
expect(wrapper.classes()).toContain('table-responsive')
expect(wrapper.classes().length).toBe(1)
expect(wrapper.find('table').classes()).toContain('table')
expect(wrapper.find('table').classes()).toContain('b-table')
expect(wrapper.find('table').classes().length).toBe(2)

const $table = wrapper.find('table')
expect($table.exists()).toBe(true)
expect($table.classes()).toContain('table')
expect($table.classes()).toContain('b-table')
expect($table.classes().length).toBe(2)

wrapper.destroy()
})
@@ -245,14 +248,17 @@ describe('table-lite', () => {
expect(wrapper.element.tagName).toBe('DIV')
expect(wrapper.classes()).toContain('table-responsive-md')
expect(wrapper.classes().length).toBe(1)
expect(wrapper.find('table').classes()).toContain('table')
expect(wrapper.find('table').classes()).toContain('b-table')
expect(wrapper.find('table').classes().length).toBe(2)

const $table = wrapper.find('table')
expect($table.exists()).toBe(true)
expect($table.classes()).toContain('table')
expect($table.classes()).toContain('b-table')
expect($table.classes().length).toBe(2)

wrapper.destroy()
})

it('stacked has precedence over responsive', async () => {
it('stacked and responsive work together', async () => {
const wrapper = mount(BTableLite, {
propsData: {
items: items1,
@@ -263,12 +269,16 @@ describe('table-lite', () => {
})

expect(wrapper).toBeDefined()
expect(wrapper.element.tagName).toBe('TABLE')
expect(wrapper.classes()).not.toContain('table-responsive')
expect(wrapper.classes()).toContain('b-table-stacked')
expect(wrapper.classes()).toContain('table')
expect(wrapper.classes()).toContain('b-table')
expect(wrapper.classes().length).toBe(3)
expect(wrapper.element.tagName).toBe('DIV')
expect(wrapper.classes()).toContain('table-responsive')
expect(wrapper.classes().length).toBe(1)

const $table = wrapper.find('table')
expect($table.exists()).toBe(true)
expect($table.classes()).toContain('table')
expect($table.classes()).toContain('b-table')
expect($table.classes()).toContain('b-table-stacked')
expect($table.classes().length).toBe(3)

wrapper.destroy()
})
@@ -281,6 +291,7 @@ describe('table-lite', () => {
stacked: true
}
})

expect(wrapper).toBeDefined()
expect(wrapper.findAll('tbody > tr').length).toBe(2)
const $trs = wrapper.findAll('tbody > tr').wrappers
@@ -286,9 +286,12 @@ describe('table', () => {
expect(wrapper.element.tagName).toBe('DIV')
expect(wrapper.classes()).toContain('table-responsive')
expect(wrapper.classes().length).toBe(1)
expect(wrapper.find('table').classes()).toContain('table')
expect(wrapper.find('table').classes()).toContain('b-table')
expect(wrapper.find('table').classes().length).toBe(2)

const $table = wrapper.find('table')
expect($table.exists()).toBe(true)
expect($table.classes()).toContain('table')
expect($table.classes()).toContain('b-table')
expect($table.classes().length).toBe(2)

wrapper.destroy()
})
@@ -306,14 +309,17 @@ describe('table', () => {
expect(wrapper.element.tagName).toBe('DIV')
expect(wrapper.classes()).toContain('table-responsive-md')
expect(wrapper.classes().length).toBe(1)
expect(wrapper.find('table').classes()).toContain('table')
expect(wrapper.find('table').classes()).toContain('b-table')
expect(wrapper.find('table').classes().length).toBe(2)

const $table = wrapper.find('table')
expect($table.exists()).toBe(true)
expect($table.classes()).toContain('table')
expect($table.classes()).toContain('b-table')
expect($table.classes().length).toBe(2)

wrapper.destroy()
})

it('stacked has precedence over responsive', async () => {
it('stacked and responsive work together', async () => {
const wrapper = mount(BTable, {
propsData: {
items: items1,
@@ -324,12 +330,16 @@ describe('table', () => {
})

expect(wrapper).toBeDefined()
expect(wrapper.element.tagName).toBe('TABLE')
expect(wrapper.classes()).not.toContain('table-responsive')
expect(wrapper.classes()).toContain('b-table-stacked')
expect(wrapper.classes()).toContain('table')
expect(wrapper.classes()).toContain('b-table')
expect(wrapper.classes().length).toBe(3)
expect(wrapper.element.tagName).toBe('DIV')
expect(wrapper.classes()).toContain('table-responsive')
expect(wrapper.classes().length).toBe(1)

const $table = wrapper.find('table')
expect($table.exists()).toBe(true)
expect($table.classes()).toContain('table')
expect($table.classes()).toContain('b-table')
expect($table.classes()).toContain('b-table-stacked')
expect($table.classes().length).toBe(3)

wrapper.destroy()
})
@@ -342,6 +352,7 @@ describe('table', () => {
stacked: true
}
})

expect(wrapper).toBeDefined()
expect(wrapper.findAll('tbody > tr').length).toBe(2)
const $trs = wrapper.findAll('tbody > tr').wrappers

0 comments on commit fa977a8

Please sign in to comment.