Add documentation for table row actions

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

2 files changed, 80 insertions, 1 deletions

diff --git a/docs/guide/components/table/index.md b/docs/guide/components/table/index.md
index aca509c2..8398ace6 100644
--- a/docs/guide/components/table/index.md
+++ b/docs/guide/components/table/index.md
@@ -259,7 +259,86 @@ export default {
 </script>
 ```
 
+## Row actions
+
+To add table row actions, add a column for the action buttons in the table. Then in the array of table items, add a corresponding array of actions for each item. The array should have each desired row action with a `value` and `title` property.
+
+Import the `<table-row-action>` component. Provide the `value` and `title` props to the component and use the named `#icons` slot to include an icon. The component will emit a `@click-table-action` with the event value.
+
+![Table row actions example](./table-row-actions.png)
+
+```vue
+<template>
+  <b-table
+    hover
+    responsive="md"
+    :items="itemsWithActions"
+    :fields="fields"
+  >
+    <template #cell(actions)="row">
+      <table-row-action
+        v-for="(action, index) in row.item.actions"
+        :key="index"
+        :value="action.value"
+        :title="action.title"
+        @click-table-action="onTableRowAction($event, row.item)"
+      />
+        <template #icon>
+          <icon-edit v-if="action.value === 'edit'"/>
+          <icon-delete v-if="action.value === 'delete'"/>
+        </template>
+      </table-row-action>
+    </template>
+  </b-table>
+</template>
+<script>
+import IconDelete from '@carbon/icons-vue/es/trash-can/20';
+import IconEdit from '@carbon/icons-vue/es/edit/20';
+import TableRowAction from '@/components/Global/TableRowAction';
+
+export default {
+  components: { IconDelete, IconEdit, TableRowAction },
+  data() {
+    return {
+      items: [...],
+      fields: [
+        ...,
+        {
+          key: 'actions',
+          label: '',
+          tdClass: 'text-right text-nowrap',
+        }
+      ],
+    }
+  },
+  computed: {
+    itemsWithActions() {
+      return this.items.map((item) => {
+        return {
+          ...item,
+          actions: [
+            {
+              value: 'edit',
+              title: this.$t('global.action.edit'),
+            },
+            {
+              value: 'delete',
+              title: this.$t('global.action.delete'),
+            },
+          ],
+        };
+      });
+    }
+  },
+  methods: {
+    onTableRowAction(event, row) {
+      // row action callback
+    }
+  }
+}
+</script>
+```
+
 <!-- ## Pagination -->
-<!-- ## Row actions -->
 <!-- ## Batch actions -->
 <!-- ## Filter -->
diff --git a/docs/guide/components/table/table-row-actions.png b/docs/guide/components/table/table-row-actions.png
new file mode 100644
index 00000000..4574570e
--- /dev/null
+++ b/docs/guide/components/table/table-row-actions.png