Add documentation for table row expansion

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I6123210454c0d18f973cf4ee91a6891a938579a2

2 files changed, 66 insertions, 1 deletions

diff --git a/docs/.vuepress/public/table-expand-row.png b/docs/.vuepress/public/table-expand-row.png
new file mode 100644
index 00000000..b8ee9c96
--- /dev/null
+++ b/docs/.vuepress/public/table-expand-row.png
diff --git a/docs/guide/components/table.md b/docs/guide/components/table.md
index af464e46..6e9e57a8 100644
--- a/docs/guide/components/table.md
+++ b/docs/guide/components/table.md
@@ -117,7 +117,72 @@ export default {
 </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
+
+![Table row expand example](/table-expand-row.png)
+
+```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 -->