Thanks to visit codestin.com
Credit goes to github.com

Skip to content

chore(docs): minor updates to the table docs #3860

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.

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 4 commits into from
Aug 13, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
15 changes: 8 additions & 7 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -74,8 +74,9 @@ stable.**
- **tables:** add support for sticky columns
([#3847](https://github.com/bootstrap-vue/bootstrap-vue/issues/3847))
([5b5f2b8](https://github.com/bootstrap-vue/bootstrap-vue/commit/5b5f2b8))
- **b-toast:** add SCSS variable for default toast background opacity + standardize a few BootstrapVue
SCSS variable names ([#3775](https://github.com/bootstrap-vue/bootstrap-vue/issues/3775))
- **b-toast:** add SCSS variable for default toast background opacity + standardize a few
BootstrapVue SCSS variable names
([#3775](https://github.com/bootstrap-vue/bootstrap-vue/issues/3775))
([5799075](https://github.com/bootstrap-vue/bootstrap-vue/commit/5799075))
- **config:** defaults for all `size` properties (closes
[#3805](https://github.com/bootstrap-vue/bootstrap-vue/issues/3805))
Expand All @@ -97,12 +98,12 @@ stable.**
formatting) has been changed in this version to use a new square bracketed syntax. While the
previous naming syntax still works, it has been deprecated in favour of the newer naming
convention (which prevents potential slot-name conflicts with fields named `default` and other
table slots). **Users are encouraged to switch to the new table field slot name syntax, as the
old slot name syntax will be removed in 2.0.0 stable release!**
table slots). **Users are encouraged to switch to the new table field slot name syntax, as the old
slot name syntax will be removed in 2.0.0 stable release!**

- Users should switch to the simplified import syntax (introduced in v2.0.0-rc.22) when
importing individual plugins, components, and/or directives. **Importing from the `es/` build
directory has been deprecated and will be removed in 2.0.0 stable release!**
- Users should switch to the simplified import syntax (introduced in v2.0.0-rc.22) when importing
individual plugins, components, and/or directives. **Importing from the `es/` build directory has
been deprecated and will be removed in 2.0.0 stable release!**

<a name="2.0.0-rc.27"></a>

Expand Down
16 changes: 8 additions & 8 deletions src/components/table/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2381,7 +2381,7 @@ The `<b-table-simple>` component gives the user complete control over the render
content, while providing basic Bootstrap v4 table styling. `<b-table-simple>` is a wrapper component
around the `<table>` element. Inside the component, via the `default` slot, you can use any or all
of the BootstrapVue [table helper components](#table-helper-components): `<b-thead>`, `<b-tfoot>`,
`<b-tbody>`, `<b-tr>`, `<b-th>`, `<b-td>`, and the HTML5 elements `<caption>` and `<colgroup>` and
`<b-tbody>`, `<b-tr>`, `<b-th>`, `<b-td>`, and the HTML5 elements `<caption>`, `<colgroup>` and
`<col>`. Contrary to the component's name, one can create simple or complex table layouts with
`<b-table-simple>`.

Expand All @@ -2394,7 +2394,7 @@ sticky. See below for more information on using [sticky columns](#simple-tables-

Since `b-table-simple` is just a wrapper component, of which you will need to render content inside,
it does not provide any of the advanced features of `<b-table>` (i.e. row events, head events,
sorting, pagination, filtering, foot-clone, etc).
sorting, pagination, filtering, foot-clone, items, fields, etc).

```html
<div>
Expand Down Expand Up @@ -2650,24 +2650,24 @@ BootstrapVue provides additional helper child components when using `<b-table-si
slots `top-row`, `bottom-row`, and `thead-top` (all of which accept table child elements). The
helper components are as follows:

- `b-tbody`
- `b-thead`
- `b-tfoot`
- `b-tbody` (`<b-table-simple>` only)
- `b-thead` (`<b-table-simple>` only)
- `b-tfoot` (`<b-table-simple>` only)
- `b-tr`
- `b-td`
- `b-th`

These components are optimized to handle converting variants to the appropriate classes (such as
handling table `dark` mode), and automatically applying certain accessibility attributes (i.e.
`role`s and `scope`s) and can handle the stacked table and sticky-header requirements. Components
`role`s and `scope`s). It can generate the stacked table and sticky-header requirements. Components
`<b-table>` and `<b-table-lite>` use these helper components internally.

In the [Simple tables](#simple-tables) example, we are using the helper components `<b-thead>`,
`<b-tbody>`, `<b-tr>`, `<b-th>`, `<b-tr>` and `<b-tfoot>`. While you can use regular table child
elements (i.e. `<tbody>`, `<tr>`, `<td>`, etc) within `<b-table-simple>`, and the named slots
`top-row`, `bottom-row`, and `thead-top`, it is recommended to use these BootstrapVue table `<b-t*>`
helper components. Note that there are no helper components for `<caption>` or `<colgroup>`+`<col>`,
so you may these two HTML5 elements directly in `<b-table-simple>`.
helper components. Note that there are no helper components for `<caption>`, `<colgroup>` or
`<col>`, so you may these three HTML5 elements directly in `<b-table-simple>`.

- Table helper components `<b-tr>`, `<b-td>` and `<b-th>` all accept a `variant` prop, which will
apply one of the Bootstrap theme colors (custom theme colors are supported via
Expand Down
6 changes: 4 additions & 2 deletions src/components/table/_table.scss
Original file line number Diff line number Diff line change
Expand Up @@ -104,8 +104,10 @@
// Needed because Bootstrap v4 does not have table child elements set up
// to inherit their background color from parent element by default
//
// An issue or PR should be made at twbs/bootstrap repo for table
// background color inheritance
// An issue made at twbs/bootstrap repo for table
// background color inheritance:
// https://github.com/twbs/bootstrap/issues/29244
// If implemented, would negate the need for all the below SCSS
.table.b-table {
> thead,
> tbody,
Expand Down