diff options
author | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2020-11-04 01:48:08 +0300 |
---|---|---|
committer | Derick Montague <derick.montague@ibm.com> | 2020-11-07 01:23:09 +0300 |
commit | 111325b199f8cc1741958fd645522858bdca55f4 (patch) | |
tree | 69d87a00e3a7da2b56ad7f13caea006fb1558734 /docs | |
parent | ec4f190453c682dc1c0f773a2ecfaf720de2fcd2 (diff) | |
download | webui-vue-111325b199f8cc1741958fd645522858bdca55f4.tar.xz |
Add documentation for table component
Adds Table documentation page under Components section with
an example of how to create a basic table.
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I9033fae662bd46d301edfb02d8a5c108e05017c6
Diffstat (limited to 'docs')
-rw-r--r-- | docs/.vuepress/config.js | 1 | ||||
-rw-r--r-- | docs/.vuepress/enhanceApp.js | 2 | ||||
-rw-r--r-- | docs/.vuepress/styles/palette.styl | 17 | ||||
-rw-r--r-- | docs/guide/components/table.md | 93 |
4 files changed, 113 insertions, 0 deletions
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index 61ac0a85..c650d7e6 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -48,6 +48,7 @@ module.exports = { "/guide/components/", "/guide/components/alert", "/guide/components/button", + "/guide/components/table", "/guide/components/toast", ] }, diff --git a/docs/.vuepress/enhanceApp.js b/docs/.vuepress/enhanceApp.js index 5c218373..6ff87759 100644 --- a/docs/.vuepress/enhanceApp.js +++ b/docs/.vuepress/enhanceApp.js @@ -7,6 +7,7 @@ import StatusIcon from "./components/app-imports/StatusIcon"; import { AlertPlugin, ButtonPlugin, + TablePlugin, ToastPlugin } from 'bootstrap-vue'; @@ -14,6 +15,7 @@ import { export default ({ Vue }) => { Vue.use(AlertPlugin); Vue.use(ButtonPlugin); + Vue.use(TablePlugin); Vue.use(ToastPlugin); // BMC Components and Mixins diff --git a/docs/.vuepress/styles/palette.styl b/docs/.vuepress/styles/palette.styl new file mode 100644 index 00000000..fc4f27eb --- /dev/null +++ b/docs/.vuepress/styles/palette.styl @@ -0,0 +1,17 @@ + +// VuePress Theme overrides +// Needed for table component to render correctly. + +tr:nth-child(2n) + background-color transparent +table + border-collapse collapse + z-index 0 !important + width 100% + display table +th + border-right transparent + border-left transparent + text-align left +td + border none
\ No newline at end of file diff --git a/docs/guide/components/table.md b/docs/guide/components/table.md new file mode 100644 index 00000000..4ed496ef --- /dev/null +++ b/docs/guide/components/table.md @@ -0,0 +1,93 @@ +# Table + +All tables in the application are using the [BoostrapVue table component](https://bootstrap-vue.org/docs/components/table). + +To use the component, include the `<b-table>` tag in the template. The component is registered globally so does not need to be imported in each SFC. + +## Basic table +There are a few required properties to maintain consistency across the application. The full list of options can be viewed on the [Bootstrap-vue table component's documentation page](https://bootstrap-vue.org/docs/components/table#comp-ref-b-table-props). + + +### Required properties + +- `items` - renders table items +- `fields` - renders table header +- `hover` - enables table row hover state +- `responsive` or `stacked` - makes the table responsive (enables horizontal scrolling or stacked view) at the defined breakpoint +- `show-empty` *(required if table data is generated dynamically)* - shows an empty message if there are no items in the table +- `empty-text` *(required if table data is generated dynamically)* - the translated empty message + +<br/> + +<b-table + :fields="['Name', 'Age', 'Color']" + :items="[ + {Name: 'Babe', Age: '3 years', Color: 'white, orange, grey' }, + {Name: 'Grey Boy', Age: '4 months', Color: 'grey' } + ]" + hover + head-variant="light" + table-variant="light" +/> + +<b-table + show-empty + hover + :fields="['Name', 'Age', 'Color']" + head-variant="light" + table-variant="light" + empty-text="No items available" +/> + +<br/> + +```vue +<template> + <b-table + hover + show-empty + responsive="md" + :items="items" + :fields="fields" + :empty-text="$t('global.table.emptyMessage')" + /> +</template> + +<script> + export default { + data() { + items: [ + { + name: 'Babe', + age: '3 years', + color: 'white, orange, grey' + }, + { + name: 'Grey Boy', + age: '4 months', + color: 'grey' + }, + ], + fields: [ + { + key: 'name', + label: this.$t('table.name') //translated label + }, + { + key: 'age', + label: this.$t('table.age') //translated label + }, + { + key: 'color', + label: this.$t('table.color') // translated label + } + ] + } + } +</script> +``` + +<!-- ## Table with row actions, sort, and exapndable rows --> +<!-- ## Table with pagination --> +<!-- ## Table with batch actions --> +<!-- ## Table with search and filter --> |