From b083cf88e73d063ac0023833a1fe3ec126463486 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Fri, 30 Aug 2019 19:37:31 -0300 Subject: [PATCH 01/10] feat(table): add `no-border-collapse` prop and style Mainly for use with sticky header and/or column tables to prevent the header borders from scrolling with the body. --- src/components/table/_table.scss | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/components/table/_table.scss b/src/components/table/_table.scss index ae8733ce003..3b388fd239d 100644 --- a/src/components/table/_table.scss +++ b/src/components/table/_table.scss @@ -7,6 +7,13 @@ table-layout: fixed; } + // Disabled border-collapse + // Mainly for use with sticky headers and columns + &.b-table-no-border-collapse { + border-collapse: separate; + border-spacing: 0; + } + // Table busy styling &[aria-busy="true"] { opacity: $b-table-busy-opacity; From 7b670ab0c3b0f1635d60fd9351860bcbe68d178b Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Fri, 30 Aug 2019 19:40:24 -0300 Subject: [PATCH 02/10] Update mixin-table-renderer.js --- src/components/table/helpers/mixin-table-renderer.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/table/helpers/mixin-table-renderer.js b/src/components/table/helpers/mixin-table-renderer.js index c60f0417847..352f3d70084 100644 --- a/src/components/table/helpers/mixin-table-renderer.js +++ b/src/components/table/helpers/mixin-table-renderer.js @@ -54,6 +54,10 @@ export default { type: [Boolean, String], default: false }, + noBorderCollapse: { + type: Boolean, + default: false + }, captionTop: { type: Boolean, default: false @@ -111,7 +115,8 @@ export default { // The following are b-table custom styles border: this.outlined, 'b-table-fixed': this.fixed, - 'b-table-caption-top': this.captionTop + 'b-table-caption-top': this.captionTop, + 'b-table-no-border-collapse': this.noBorderCollapse }, this.tableVariant ? `${this.dark ? 'bg' : 'table'}-${this.tableVariant}` : '', // Stacked table classes From 6e6d45b792976d724d968cd44691247f64fb4e83 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Fri, 30 Aug 2019 19:53:51 -0300 Subject: [PATCH 03/10] Update README.md --- src/components/table/README.md | 72 ++++++++++++++++++++-------------- 1 file changed, 42 insertions(+), 30 deletions(-) diff --git a/src/components/table/README.md b/src/components/table/README.md index 717d795abb1..de57cb83d3c 100644 --- a/src/components/table/README.md +++ b/src/components/table/README.md @@ -327,28 +327,29 @@ details. `` provides several props to alter the style of the table: -| prop | Type | Description | -| ------------------- | ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `striped` | Boolean | Add zebra-striping to the table rows within the `` | -| `bordered` | Boolean | For borders on all sides of the table and cells. | -| `borderless` | Boolean | removes inner borders from table. | -| `outlined` | Boolean | For a thin border on all sides of the table. Has no effect if `bordered` is set. | -| `small` | Boolean | To make tables more compact by cutting cell padding in half. | -| `hover` | Boolean | To enable a hover highlighting state on table rows within a `` | -| `dark` | Boolean | Invert the colors — with light text on dark backgrounds (equivalent to Bootstrap v4 class `.table-dark`) | -| `fixed` | Boolean | Generate a table with equal fixed-width columns (`table-layout: fixed;`) | -| `responsive` | Boolean or String | Generate a responsive table to make it scroll horizontally. Set to `true` for an always responsive table, or set it to one of the breakpoints `'sm'`, `'md'`, `'lg'`, or `'xl'` to make the table responsive (horizontally scroll) only on screens smaller than the breakpoint. See [Responsive tables](#responsive-tables) below for details. | -| `sticky-header` | Boolean or String | Generates a vertically scrollable table with sticky headers. Set to `true` to enable sticky headers (default table max-height of `300px`), or set it to a string containing a height (with CSS units) to specify a maximum height other than `300px`. See the [Sticky header](#sticky-headers) section below for details. | -| `stacked` | Boolean or String | Generate a responsive stacked table. Set to `true` for an always stacked table, or set it to one of the breakpoints `'sm'`, `'md'`, `'lg'`, or `'xl'` to make the table visually stacked only on screens smaller than the breakpoint. See [Stacked tables](#stacked-tables) below for details. | -| `caption-top` | Boolean | If the table has a caption, and this prop is set to `true`, the caption will be visually placed above the table. If `false` (the default), the caption will be visually placed below the table. | -| `table-variant` | String | Give the table an overall theme color variant. | -| `head-variant` | String | Use `'light'` or `'dark'` to make table header appear light or dark gray, respectively | -| `foot-variant` | String | Use `'light'` or `'dark'` to make table footer appear light or dark gray, respectively. If not set, `head-variant` will be used. Has no effect if `foot-clone` is not set | -| `foot-clone` | Boolean | Turns on the table footer, and defaults with the same contents a the table header | -| `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. | - -**Note:** table style options `fixed`, `stacked`, and `caption-top`, and the table sorting feature, -requires BootstrapVue's custom CSS. +| prop | Type | Description | +| -------------------- | ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `striped` | Boolean | Add zebra-striping to the table rows within the `` | +| `bordered` | Boolean | For borders on all sides of the table and cells. | +| `borderless` | Boolean | removes inner borders from table. | +| `outlined` | Boolean | For a thin border on all sides of the table. Has no effect if `bordered` is set. | +| `small` | Boolean | To make tables more compact by cutting cell padding in half. | +| `hover` | Boolean | To enable a hover highlighting state on table rows within a `` | +| `dark` | Boolean | Invert the colors — with light text on dark backgrounds (equivalent to Bootstrap v4 class `.table-dark`) | +| `fixed` | Boolean | Generate a table with equal fixed-width columns (`table-layout: fixed;`) | +| `responsive` | Boolean or String | Generate a responsive table to make it scroll horizontally. Set to `true` for an always responsive table, or set it to one of the breakpoints `'sm'`, `'md'`, `'lg'`, or `'xl'` to make the table responsive (horizontally scroll) only on screens smaller than the breakpoint. See [Responsive tables](#responsive-tables) below for details. | +| `sticky-header` | Boolean or String | Generates a vertically scrollable table with sticky headers. Set to `true` to enable sticky headers (default table max-height of `300px`), or set it to a string containing a height (with CSS units) to specify a maximum height other than `300px`. See the [Sticky header](#sticky-headers) section below for details. | +| `stacked` | Boolean or String | Generate a responsive stacked table. Set to `true` for an always stacked table, or set it to one of the breakpoints `'sm'`, `'md'`, `'lg'`, or `'xl'` to make the table visually stacked only on screens smaller than the breakpoint. See [Stacked tables](#stacked-tables) below for details. | +| `caption-top` | Boolean | If the table has a caption, and this prop is set to `true`, the caption will be visually placed above the table. If `false` (the default), the caption will be visually placed below the table. | +| `table-variant` | String | Give the table an overall theme color variant. | +| `head-variant` | String | Use `'light'` or `'dark'` to make table header appear light or dark gray, respectively | +| `foot-variant` | String | Use `'light'` or `'dark'` to make table footer appear light or dark gray, respectively. If not set, `head-variant` will be used. Has no effect if `foot-clone` is not set | +| `foot-clone` | Boolean | Turns on the table footer, and defaults with the same contents a the table header | +| `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. **Example: Basic table styles** @@ -365,6 +366,7 @@ requires BootstrapVue's custom CSS. Dark Fixed Foot Clone + No border collapse @@ -395,6 +397,7 @@ requires BootstrapVue's custom CSS. :dark="dark" :fixed="fixed" :foot-clone="footClone" + :no-border-collapse="noCollapse" :items="items" :fields="fields" :head-variant="headVariant" @@ -433,7 +436,8 @@ requires BootstrapVue's custom CSS. fixed: false, footClone: false, headVariant: null, - tableVariant: '' + tableVariant: '', + noCollapse: false } } } @@ -1238,9 +1242,8 @@ available horizontal space. - BootstrapVue's custom CSS is required in order to support `sticky-header`. - Bootstrap v4 uses the CSS style `border-collapse: collapsed` on table elements. This prevents the borders on the sticky header from "sticking" to the header, and hence the borders will scroll when - the body scrolls. To get around this issue, create some custom CSS that targets - `table.table.b-table`, which sets they styles `border-collapse: collapsed; border-spacing: 0px;` - (note that this may cause double borders when using features such as `bordered`, etc). + the body scrolls. To get around this issue, set the pop `no-border-collapse` on the table (note + that this may cause double borders when using features such as `bordered`, etc). - The sticky header feature uses CSS style `position: sticky` to position the headings. - Internet Explorer does not support `position: sticky`, hence for IE11 the table headings will scroll with the table body. @@ -1258,8 +1261,17 @@ set. ```html