components/table/index.md

19 - `hover` - enables table row hover state
130 To add an expandable row in the table, add a column for the expand button in the
131 fields array. Include the tdClass `table-row-expand` to ensure icon rotation is
140 be the button's click event callback. Be sure to pass the `row` object to the
144 [row-details slot](https://bootstrap-vue.org/docs/components/table#comp-ref-b-table-slots)
145 to format the expanded row content. The slot has access to the row `item`
150 1. Add a column for the expansion row button with the tdClass,
151    `table-row-expand`
153    and row expansion toggling
154 3. Use the `#cell` slot to target the expandable row column and add the button
156 4. Use the `#row-details` slot to format expanded row content
158 ![Table row expand example](./table-expand-row.png)
163     <template #cell(expandRow)="row">
168         @click="toggleRowDetails(row)"
173     <template #row-details="row">
174       <h3>Expanded row details</h3>
175       {{ row.item }}
193           tdClass: 'table-row-expand',
238     <b-row>
251     </b-row>
293 ## Row actions
295 To add table row actions, add a column for the action buttons in the table. Then
297 The array should have each desired row action with a `value` and `title`
300 Import the `<table-row-action>` component. Provide the `value` and `title` props
304 ![Table row actions example](./table-row-actions.png)
314     <template #cell(actions)="row">
315       <table-row-action
316         v-for="(action, index) in row.item.actions"
320         @click-table-action="onTableRowAction($event, row.item)"
326       </table-row-action>
370     onTableRowAction(event, row) {
371       // row action callback
402     <b-row>
409     </b-row>
463    table. The table will emit a `@row-selected` event. Use the `onRowSelected`
470    the table `ref` passed as an argument. The table row checkboxes should use
472    table `ref` passed as the first argument and the row index passed as the
502       @row-selected="onRowSelected($event, items.length)"
511       <template #cell(checkbox)="row">
513           v-model="row.rowSelected"
514           @change="toggleSelectRow($refs.table, row.index)"
574 <b-row>
598 </b-row>
614     <b-row>
638     </b-row>