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 <[email protected]> Change-Id: Id3f3ac603a58d5dbc8674ec5b2d9d059e935407d
ibm-openbmc · Jun 30, 2022 · 2e48404 · 2e48404
1 parent c36f90e
commit 2e48404
Show file tree

Hide file tree

Showing 2 changed files with 117 additions and 4 deletions.
diff --git a/docs/.vuepress/components/BmcTable.vue b/docs/.vuepress/components/BmcTable.vue
@@ -0,0 +1,57 @@
+<template>
+  <b-table
+    hover
+    show-empty
+    no-sort-reset
+    sort-icon-left
+    responsive="md"
+    head-variant="light"
+    table-variant="light"
+    sort-by="rank"
+    :items="items"
+    :fields="fields"
+  />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      items: [
+        {
+          name: 'Veracruz All Natural',
+          rank: 1,
+          description: 'Authentic Mexican Food, Smoothies, and Juices'
+        },
+        {
+          name: 'Torchy\'s Tacos',
+          rank: 3,
+          description: 'At Torchy\'s Tacos, we make food that breaks the mold.'
+        },
+        {
+          name: 'Tacodeli',
+          rank: 2,
+          description: 'Tacodeli handcrafts Mexican-inspired, creative tacos with local and organic ingredients topped with award-winning salsas.'
+        },
+      ],
+      fields: [
+        {
+          key: 'name',
+          label: 'Name',
+          sortable: true
+        },
+        {
+          key: 'rank',
+          label: 'Rank',
+          sortable: true
+        },
+        {
+          key: 'description',
+          label: 'Description',
+          sortable: false
+        }
+      ]
+    }
+  }
+}
+</script>
diff --git 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 -->