Skip to content

Commit b02fb49

Browse files
authored
chore(docs): minor updates to table docs (bootstrap-vue#3840)
1 parent 9200bc8 commit b02fb49

File tree

1 file changed

+15
-15
lines changed

1 file changed

+15
-15
lines changed

src/components/table/README.md

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -639,7 +639,7 @@ values: `sm`, `md`, `lg`, or `xl`.
639639
Use the `sticky-header` prop to enable a vertically scrolling table with headers that remain fixed
640640
(sticky) as the table boxy scrolls. Setting the prop to `true` (or no explicit value) will generate
641641
a table that has a maximum height of `300px`. To specify a maximum height other than `300px`, set
642-
the `sticky-header` prop to a valid CSS height (including units).
642+
the `sticky-header` prop to a valid CSS height (including units), i.e. `sticky-header="200px"`.
643643

644644
```html
645645
<template>
@@ -2220,9 +2220,9 @@ of the BootstrapVue [table helper components](#table-helper-components): `<b-the
22202220
`<colgroup>`+`<col>`.
22212221

22222222
`<b-table-simple>` provides basic styling options via props: `striped`, `bordered`, `borderless`,
2223-
`outlined`, `small`, `hover`, `dark`, `fixed`, `responsive`. Note that `stacked` mode is available
2224-
but requires some additional markup to generate the cell headings, as described in the
2225-
[Simple tables and stacked mode](#simple-tables-and-stacked-mode) section below.
2223+
`outlined`, `small`, `hover`, `dark`, `fixed`, `responsive` and `sticky-header`. Note that `stacked`
2224+
mode is available but requires some additional markup to generate the cell headings, as described in
2225+
the [Simple tables and stacked mode](#simple-tables-and-stacked-mode) section below.
22262226

22272227
Since `b-table-simple` is just a wrapper component, of which you will need to render content inside,
22282228
it does not provide any of the advanced features of `<b-table>` (i.e. row events, head events,
@@ -2303,8 +2303,9 @@ sorting, pagination, filtering, foot-clone, etc).
23032303
<!-- b-table-simple.vue -->
23042304
```
23052305

2306-
When in `responsive` mode, the `<table>` element is wrapped inside a `<div>` element. If you need to
2307-
apply additional classes to the `<table>` element, use the `table-classes` prop.
2306+
When in `responsive` or `sticky-header` mode, the `<table>` element is wrapped inside a `<div>`
2307+
element. If you need to apply additional classes to the `<table>` element, use the `table-classes`
2308+
prop.
23082309

23092310
Any additional attributes given to `<b-table-simple>` will always be applied to the `<table>`
23102311
element.
@@ -2406,8 +2407,8 @@ medium and wider screens.
24062407

24072408
**Note:** stacked mode with `<b-table-simple>` requires that you use the BootstrapVue
24082409
[table helper components](#table-helper-components). Use of the regular `<tbody>`, `<tr>`, `<td>`
2409-
and `<th>` element tags will not work as expected, not automatically apply any of the required
2410-
accessibility attributes.
2410+
and `<th>` element tags will not work as expected, nor will they automatically apply any of the
2411+
required accessibility attributes.
24112412

24122413
### Table simple as a plugin
24132414

@@ -2432,8 +2433,8 @@ helper components are as follows:
24322433

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

24382439
In the [Simple tables](#simple-tables) example, we are using the helper components `<b-thead>`,
24392440
`<b-tbody>`, `<b-tr>`, `<b-th>`, `<b-tr>` and `<b-tfoot>`. While you can use regular table child
@@ -2452,13 +2453,12 @@ so you may these two HTML5 elements directly in `<b-table-simple>`.
24522453
text for the `'light'` variant).
24532454
- Accessibility attributes `role` and `scope` are automatically set on `<b-th>` and `<b-td>`
24542455
components based on their location (thead, tbody, or tfoot) and their `rowspan` or `colspan`
2455-
props. A `<b-td>` placed in `<b-thead>` or `<b-tfoot>` will have no `scope` attribute by default.
2456-
You can override the automatic `scope` and `role` values by setting the appropriate attribute on
2457-
the helper component.
2456+
props. You can override the automatic `scope` and `role` values by setting the appropriate
2457+
attribute on the helper component.
24582458
- For `<b-tbody>`, `<b-thead>`, and `<b-tfoot>` helper components, the appropriate default `role` of
24592459
`'rowgroup'` will be applied, unless you override the role by supplying a `role` attribute.
2460-
- For the `<b-tr>` helper component, the appropriate default `role` of `row` will be applied, unless
2461-
you override the role by supplying a `role` attribute. `<b-tr>` does not add a `scope`.
2460+
- For the `<b-tr>` helper component, the appropriate default `role` of `'row'` will be applied,
2461+
unless you override the role by supplying a `role` attribute. `<b-tr>` does not add a `scope`.
24622462
- The `<b-tbody>` element supports rendering a Vue `<transition-group>` when either, or both, of the
24632463
`tbody-transition-props` and `tbody-transition-handlers` props are used. See the
24642464
[Table body transition support](#table-body-transition-support) section for more details.

0 commit comments

Comments
 (0)