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
diff --git a/docs/.vuepress/components/BmcTable.vue b/docs/.vuepress/components/BmcTable.vue
new file mode 100644
index 0000000..9cc7b64
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/docs/guide/components/table.md b/docs/guide/components/table.md
index 4ed496e..ddb1413 100644
--- a/docs/guide/components/table.md
+++ b/docs/guide/components/table.md
@@ -87,7 +87,63 @@
</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 -->