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