diff options
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 --> |