1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
|
# 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>
```
## 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 -->
|
