Skip to content

fix(b-table): allow responsive and stacked props together (closes #6261) #6266

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Dec 29, 2020
Merged

fix(b-table): allow responsive and stacked props together (closes #6261) #6266

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
099e121
fix(b-table): allow `responsive` and `stacked` props together
jacobmllr95 Dec 29, 2020
e194f19
Merge branch 'dev' into fix-table-responsive-stacked
jacobmllr95 Dec 29, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions src/components/table/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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**

Expand Down Expand Up @@ -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**

Expand Down Expand Up @@ -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
Expand Down
5 changes: 2 additions & 3 deletions src/components/table/helpers/mixin-table-renderer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
37 changes: 24 additions & 13 deletions src/components/table/table-lite.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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()
})
Expand All @@ -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,
Expand All @@ -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()
})
Expand All @@ -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
Expand Down
37 changes: 24 additions & 13 deletions src/components/table/table.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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()
})
Expand All @@ -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,
Expand All @@ -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()
})
Expand All @@ -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
Expand Down