Add documentation for table row expansion
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I6123210454c0d18f973cf4ee91a6891a938579a2
diff --git a/docs/.vuepress/public/table-expand-row.png b/docs/.vuepress/public/table-expand-row.png
new file mode 100644
index 0000000..b8ee9c9
--- /dev/null
+++ b/docs/.vuepress/public/table-expand-row.png
Binary files differ
diff --git a/docs/guide/components/table.md b/docs/guide/components/table.md
index af464e4..6e9e57a 100644
--- a/docs/guide/components/table.md
+++ b/docs/guide/components/table.md
@@ -117,7 +117,72 @@
</script>
```
-<!-- ## Expandable row -->
+## Expandable rows
+
+To add an expandable row in the table, add a column for the expand button in the fields array. Include the tdClass `table-row-expand` to ensure icon rotation is handled. Use the built in [cell slot](https://bootstrap-vue.org/docs/components/table#comp-ref-b-table-slots) to target the expand button column and add a button with the chevron icon.
+
+Include the [TableRowExpandMixin](https://github.com/openbmc/webui-vue/blob/master/src/components/Mixins/TableRowExpandMixin.js). The mixin contains the dynamic `aria-label` and `title` attribute values that need to be included with the expand button. The `toggleRowDetails` method should be the button's click event callback. Be sure to pass the `row` object to the function.
+
+Use the [row-details slot](https://bootstrap-vue.org/docs/components/table#comp-ref-b-table-slots) to format the expanded row content. The slot has access to the row `item` property.
+
+### Summary
+
+1. Add a column for the expansion row button with the tdClass, `table-row-expand`
+2. Include the `TableRowExpandMixin` to handle the dynamic aria label, title, and row expansion toggling
+3. Use the `#cell` slot to target the expandable row column and add the button with accessible markup and click handler
+4. Use the `#row-details` slot to format expanded row content
+
+
+
+```vue
+<template>
+ <b-table
+ hover
+ responsive="md"
+ :items="items"
+ :fields="fields"
+ >
+ <template #cell(expandRow)="row">
+ <b-button
+ variant="link"
+ :aria-label="expandRowLabel"
+ :title="expandRowLabel"
+ @click="toggleRowDetails(row)"
+ >
+ <icon-chevron />
+ </b-button>
+ </template>
+ <template #row-details="row">
+ <h3>Expanded row details</h3>
+ {{ row.item }}
+ </template>
+ </b-table>
+</template>
+<script>
+import IconChevron from '@carbon/icons-vue/es/chevron--down/20';
+import TableRowExpandMixin, { expandRowLabel } from '@/components/Mixins/TableRowExpandMixin';
+
+export default {
+ components: { IconChevron },
+ mixins: [ TableRowExpandMixin ],
+ data() {
+ return {
+ items: [...],
+ fields: [
+ {
+ key: 'expandRow',
+ label: '',
+ tdClass: 'table-row-expand',
+ },
+ ...
+ ],
+ expandRowLabel
+ }
+ }
+}
+</script>
+```
+
<!-- ## Pagination -->
<!-- ## Row actions -->
<!-- ## Batch actions -->
