From f6bd4c62b3779a7fb6d0ebe4a3cf6556f448bf7b Mon Sep 17 00:00:00 2001
From: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Date: Wed, 4 Nov 2020 13:40:09 -0800
Subject: Add documentation for table sort

Create example BmcTable component to eventually showcase all
functionality. For now, it only includes table sort.

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: Id3f3ac603a58d5dbc8674ec5b2d9d059e935407d
---
 docs/guide/components/table.md | 64 +++++++++++++++++++++++++++++++++++++++---
 1 file changed, 60 insertions(+), 4 deletions(-)

(limited to 'docs/guide/components/table.md')

diff --git a/docs/guide/components/table.md b/docs/guide/components/table.md
index 4ed496ef..ddb1413f 100644
--- a/docs/guide/components/table.md
+++ b/docs/guide/components/table.md
@@ -87,7 +87,63 @@ There are a few required properties to maintain consistency across the applicati
 </script>
 ```
 
-<!-- ## Table with row actions, sort, and exapndable rows -->
-<!-- ## Table with pagination -->
-<!-- ## Table with batch actions -->
-<!-- ## Table with search and filter -->
+## Sort
+
+To enable table sort, include `sortable: true` in the fields array for sortable columns and add the following props to the `<b-table>` component:
+
+- `sort-by`
+- `no-sort-reset`
+- `sort-icon-left`
+
+<br/>
+
+```vue
+<template>
+  <b-table
+    hover
+    no-sort-reset
+    sort-icon-left
+    sort-by="rank"
+    responsive="md"
+    :items="items"
+    :fields="fields"
+  />
+</template>
+<script>
+export default {
+  data() {
+    return {
+      items: [...],
+      fields: [
+        {
+          key: 'name',
+          label: 'Name', //should be translated
+          sortable: true
+        },
+        {
+          key: 'rank',
+          label: 'Rank', //should be translated
+          sortable: true
+        },
+        {
+          key: 'description',
+          label: 'Description', //should be translated
+          sortable: false
+        }
+      ]
+    }
+  }
+}
+</script>
+```
+
+<br />
+
+<BmcTable />
+
+<!-- ## Expandable row -->
+<!-- ## Pagination -->
+<!-- ## Row actions -->
+<!-- ## Batch actions -->
+<!-- ## Search -->
+<!-- ## Filter -->
-- 
cgit v1.2.3