@@ -639,7 +639,7 @@ values: `sm`, `md`, `lg`, or `xl`.
639
639
Use the ` sticky-header ` prop to enable a vertically scrolling table with headers that remain fixed
640
640
(sticky) as the table boxy scrolls. Setting the prop to ` true ` (or no explicit value) will generate
641
641
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" ` .
643
643
644
644
``` html
645
645
<template >
@@ -2220,9 +2220,9 @@ of the BootstrapVue [table helper components](#table-helper-components): `<b-the
2220
2220
` <colgroup> ` +` <col> ` .
2221
2221
2222
2222
` <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.
2226
2226
2227
2227
Since ` b-table-simple ` is just a wrapper component, of which you will need to render content inside,
2228
2228
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).
2303
2303
<!-- b-table-simple.vue -->
2304
2304
```
2305
2305
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.
2308
2309
2309
2310
Any additional attributes given to ` <b-table-simple> ` will always be applied to the ` <table> `
2310
2311
element.
@@ -2406,8 +2407,8 @@ medium and wider screens.
2406
2407
2407
2408
** Note:** stacked mode with ` <b-table-simple> ` requires that you use the BootstrapVue
2408
2409
[ 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.
2411
2412
2412
2413
### Table simple as a plugin
2413
2414
@@ -2432,8 +2433,8 @@ helper components are as follows:
2432
2433
2433
2434
These components are optimized to handle converting variants to the appropriate classes (such as
2434
2435
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.
2437
2438
2438
2439
In the [ Simple tables] ( #simple-tables ) example, we are using the helper components ` <b-thead> ` ,
2439
2440
` <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>`.
2452
2453
text for the ` 'light' ` variant).
2453
2454
- Accessibility attributes ` role ` and ` scope ` are automatically set on ` <b-th> ` and ` <b-td> `
2454
2455
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.
2458
2458
- For ` <b-tbody> ` , ` <b-thead> ` , and ` <b-tfoot> ` helper components, the appropriate default ` role ` of
2459
2459
` '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 ` .
2462
2462
- The ` <b-tbody> ` element supports rendering a Vue ` <transition-group> ` when either, or both, of the
2463
2463
` tbody-transition-props ` and ` tbody-transition-handlers ` props are used. See the
2464
2464
[ Table body transition support] ( #table-body-transition-support ) section for more details.
0 commit comments