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/guide/components | |
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/guide/components')
-rw-r--r-- | docs/guide/components/table.md | 64 |
1 files changed, 60 insertions, 4 deletions
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 --> |