@@ -894,6 +894,8 @@ The slot's scope variable (`data` in the above sample) will have the following p
894 894
| `detailsShowing` | Boolean | Will be `true` if the row's `row-details` scoped slot is visible. See section [Row details support](#row-details-support) below for additional information |
895 895
| `toggleDetails` | Function | Can be called to toggle the visibility of the rows `row-details` scoped slot. See section [Row details support](#row-details-support) below for additional information |
896 896
| `rowSelected` | Boolean | Will be `true` if the row has been selected. See section [Row select support](#row-select-support) for additional information |
897 +
| `selectRow` | Function | When called, selects the current row. See section [Row select support](#row-select-support) for additional information |
898 +
| `unselectRow` | Function | When called, unselects the current row. See section [Row select support](#row-select-support) for additional information |
897 899 898 900
**Notes:**
899 901
@@ -1407,12 +1409,17 @@ for proper reactive detection of changes to it's value. Read more about
1407 1409 1408 1410
**Available `row-details` scoped variable properties:**
1409 1411 1410 -
| Property | Type | Description |
1411 -
| --------------- | -------- | ------------------------------------------------------------------------- |
1412 -
| `item` | Object | The entire row record data object |
1413 -
| `index` | Number | The current visible row number |
1414 -
| `fields` | Array | The normalized fields definition array (in the _array of objects_ format) |
1415 -
| `toggleDetails` | Function | Function to toggle visibility of the row's details slot |
1412 +
| Property | Type | Description |
1413 +
| --------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------- |
1414 +
| `item` | Object | The entire row record data object |
1415 +
| `index` | Number | The current visible row number |
1416 +
| `fields` | Array | The normalized fields definition array (in the _array of objects_ format) |
1417 +
| `toggleDetails` | Function | Function to toggle visibility of the row's details slot |
1418 +
| `rowSelected` | Boolean | Will be `true` if the row has been selected. See section [Row select support](#row-select-support) for additional information |
1419 +
| `selectRow` | Function | When called, selects the current row. See section [Row select support](#row-select-support) for additional information |
1420 +
| `unselectRow` | Function | When called, unselects the current row. See section [Row select support](#row-select-support) for additional information |
1421 + 1422 +
Note: the row select related scope properties are only available in `<b-table>`.
1416 1423 1417 1424
In the following example, we show two methods of toggling the visibility of the details: one via a
1418 1425
button, and one via a checkbox. We also have the third row details defaulting to have details
@@ -1510,6 +1517,8 @@ Rows can also be programmatically selected and unselected via the following expo
1510 1517
- In `single` mode, `selectRow(index)` will unselect any previous selected row.
1511 1518
- Attempting to `selectRow(index)` or `unselectRow(index)` on a non-existent row will be ignored.
1512 1519
- The table must be `selectable` for any of these methods to have effect.
1520 +
- You can disable selection of rows via click events by setting the `no-select-on-click` prop. Rows
1521 +
will then only be selectable programmatically.
1513 1522 1514 1523
**Row select notes:**
1515 1524
@@ -2757,10 +2766,11 @@ cells.
2757 2766 2758 2767
### Data row accessibility
2759 2768 2760 -
When the table is in `selectable` mode (`<b-table>` only), or if there is a `row-clicked` event
2761 -
listener registered (`<b-table>` and `<b-table-lite>`), all data item rows (`<tr>` elements) will be
2762 -
placed into the document tab sequence (via `tabindex="0"`) to allow keyboard-only and screen reader
2763 -
users the ability to click the rows by pressing <kbd>ENTER</kbd>.
2769 +
When the table is in `selectable` mode (`<b-table>` only, and prop `no-select-on-click` is not set),
2770 +
or if there is a `row-clicked` event listener registered (`<b-table>` and `<b-table-lite>`), all
2771 +
data item rows (`<tr>` elements) will be placed into the document tab sequence (via `tabindex="0"`)
2772 +
to allow keyboard-only and screen reader users the ability to click the rows by pressing
2773 +
<kbd>ENTER</kbd> or <kbd>SPACE</kbd>.
2764 2774 2765 2775
When the table items rows are placed in the document tab sequence (`<b-table>` and
2766 2776
`<b-table-lite>`), they will also support basic keyboard navigation when focused:
@@ -2770,8 +2780,6 @@ When the table items rows are placed in the document tab sequence (`<b-table>` a
2770 2780
- <kbd>END</kbd> or <kbd>DOWN</kbd>+<kbd>SHIFT</kbd> will move to the last row
2771 2781
- <kbd>HOME</kbd> or <kbd>UP</kbd>+<kbd>SHIFT</kbd> will move to the first row
2772 2782
- <kbd>ENTER</kbd> or <kbd>SPACE</kbd> to click the row.
2773 -
- <kbd>SHIFT</kbd> and <kbd>CTRL</kbd> modifiers will also work (depending on the table selectable
2774 -
mode, for `<b-table>` only).
2775 2783 2776 2784
### Row event accessibility
2777 2785 RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4