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