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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
|
# 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
```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`
```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>
```
## Expandable rows
To add an expandable row in the table, add a column for the expand button in the fields array. Include the tdClass `table-row-expand` to ensure icon rotation is handled. Use the built in [cell slot](https://bootstrap-vue.org/docs/components/table#comp-ref-b-table-slots) to target the expand button column and add a button with the chevron icon.
Include the [TableRowExpandMixin](https://github.com/openbmc/webui-vue/blob/master/src/components/Mixins/TableRowExpandMixin.js). The mixin contains the dynamic `aria-label` and `title` attribute values that need to be included with the expand button. The `toggleRowDetails` method should be the button's click event callback. Be sure to pass the `row` object to the function.
Use the [row-details slot](https://bootstrap-vue.org/docs/components/table#comp-ref-b-table-slots) to format the expanded row content. The slot has access to the row `item` property.
### Summary
1. Add a column for the expansion row button with the tdClass, `table-row-expand`
2. Include the `TableRowExpandMixin` to handle the dynamic aria label, title, and row expansion toggling
3. Use the `#cell` slot to target the expandable row column and add the button with accessible markup and click handler
4. Use the `#row-details` slot to format expanded row content
```vue
<template>
<b-table
hover
responsive="md"
:items="items"
:fields="fields"
>
<template #cell(expandRow)="row">
<b-button
variant="link"
:aria-label="expandRowLabel"
:title="expandRowLabel"
@click="toggleRowDetails(row)"
>
<icon-chevron />
</b-button>
</template>
<template #row-details="row">
<h3>Expanded row details</h3>
{{ row.item }}
</template>
</b-table>
</template>
<script>
import IconChevron from '@carbon/icons-vue/es/chevron--down/20';
import TableRowExpandMixin, { expandRowLabel } from '@/components/Mixins/TableRowExpandMixin';
export default {
components: { IconChevron },
mixins: [ TableRowExpandMixin ],
data() {
return {
items: [...],
fields: [
{
key: 'expandRow',
label: '',
tdClass: 'table-row-expand',
},
...
],
expandRowLabel
}
}
}
</script>
```
<!-- ## Pagination -->
<!-- ## Row actions -->
<!-- ## Batch actions -->
<!-- ## Search -->
<!-- ## Filter -->
|
