diff options
author | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2020-11-05 00:40:09 +0300 |
---|---|---|
committer | Derick Montague <derick.montague@ibm.com> | 2020-11-07 01:23:09 +0300 |
commit | f6bd4c62b3779a7fb6d0ebe4a3cf6556f448bf7b (patch) | |
tree | 976a4a58063fdb4e55f4596a6ae7e0bb455a96e0 /docs | |
parent | 111325b199f8cc1741958fd645522858bdca55f4 (diff) | |
download | webui-vue-f6bd4c62b3779a7fb6d0ebe4a3cf6556f448bf7b.tar.xz |
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
Diffstat (limited to 'docs')
-rw-r--r-- | docs/.vuepress/components/BmcTable.vue | 57 | ||||
-rw-r--r-- | docs/guide/components/table.md | 64 |
2 files changed, 117 insertions, 4 deletions
diff --git a/docs/.vuepress/components/BmcTable.vue b/docs/.vuepress/components/BmcTable.vue new file mode 100644 index 00000000..9cc7b645 --- /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 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 --> |