components/table/index.md

4 [BoostrapVue table component](https://bootstrap-vue.org/docs/components/table).
6 To use the component, include the `<b-table>` tag in the template. The component
13 [Bootstrap-vue table component's documentation page](https://bootstrap-vue.org/docs/components/tabl…
17 - `items` - renders table items
18 - `fields` - renders table header
19 - `hover` - enables table row hover state
20 - `responsive` or `stacked` - makes the table responsive (enables horizontal
22 - `show-empty` _(required if table data is generated dynamically)_ - shows an
24 - `empty-text` _(required if table data is generated dynamically)_ - the
29 example](./table-empty.png)
31 ```vue
33   <b-table
35     show-empty
39     :empty-text="$t('global.table.emptyMessage')"
80 columns and add the following props to the `<b-table>` component:
82 - `sort-by`
83 - `no-sort-reset`
84 - `sort-icon-left`
86 ![Table sort example](./table-sort.png)
88 ```vue
90   <b-table
92     no-sort-reset
93     sort-icon-left
94     sort-by="rank"
131 fields array. Include the tdClass `table-row-expand` to ensure icon rotation is
133 [cell slot](https://bootstrap-vue.org/docs/components/table#comp-ref-b-table-slots)
137 [TableRowExpandMixin](https://github.com/openbmc/webui-vue/blob/master/src/components/Mixins/TableR…
138 The mixin contains the dynamic `aria-label` and `title` attribute values that
144 [row-details slot](https://bootstrap-vue.org/docs/components/table#comp-ref-b-table-slots)
151    `table-row-expand`
156 4. Use the `#row-details` slot to format expanded row content
158 ![Table row expand example](./table-expand-row.png)
160 ```vue
162   <b-table hover responsive="md" :items="items" :fields="fields">
164       <b-button
166         :aria-label="expandRowLabel"
170         <icon-chevron />
171       </b-button>
173     <template #row-details="row">
177   </b-table>
180 import IconChevron from '@carbon/icons-vue/es/chevron--down/20';
193           tdClass: 'table-row-expand',
207 [BootstrapVue table filtering](https://bootstrap-vue.org/docs/components/table#filtering)
209 [@filtered](https://bootstrap-vue.org/docs/components/table#filter-events) event
210 listener onto the `<b-table>` component. The event callback should track the
213 Import the `<search>` and `<table-cell-count>` components and include them in
214 the template above the `<b-table>` component.
217 [SearchFilterMixin](https://github.com/openbmc/webui-vue/blob/master/src/components/Mixins/SearchFi…
218 Add the `@change-search` and `@clear-search` event listeners on the `<search>`
223 The `<table-cell-count>` component requires two properties, total table item
226 Add the `:empty-filtered-text` prop to the table to show the translated message
229 ![Table search example](./table-search.png)
231 ![Table search active example](./table-search-active.png)
233 ![Table search empty example](./table-search-empty.png)
235 ```vue
237   <b-container>
238     <b-row>
239       <b-col>
244       </b-col>
245       <b-col>
246         <table-cell-count
247           :filtered-items-count="filteredItemsCount"
248           :total-number-of-cells="items.length"
250       </b-col>
251     </b-row>
252     <b-table
258       :empty-filtered-text="$t('global.table.emptySearchMessage')"
261   </b-container>
300 Import the `<table-row-action>` component. Provide the `value` and `title` props
302 component will emit a `@click-table-action` with the event value.
304 ![Table row actions example](./table-row-actions.png)
306 ```vue
308   <b-table
315       <table-row-action
316         v-for="(action, index) in row.item.actions"
320         @click-table-action="onTableRowAction($event, row.item)"
323           <icon-edit v-if="action.value === 'edit'"/>
324           <icon-delete v-if="action.value === 'delete'"/>
326       </table-row-action>
328   </b-table>
331 import IconDelete from '@carbon/icons-vue/es/trash-can/20';
332 import IconEdit from '@carbon/icons-vue/es/edit/20';
345           tdClass: 'text-right text-nowrap',
382 1. Import the `<table-filter>` component and `TableFilterMixin`.
383 1. Add a filters prop to the `<table-filters>` component. This prop should be an
391 The component will emit a `@filter-change` event that will provide the filter
395 ![Table filter example](./table-filter.png)
397 ![Table filter active example](./table-filter-active.png)
399 ```vue
401   <b-container>
402     <b-row>
403       <b-col class="text-right">
404         <table-filter
406           @filter-change="onTableFilterChange"
408       </b-col>
409     </b-row>
410     <b-table hover responsive="md" :items="filteredItems" :fields="fields" />
411   </b-container>
450 To add a date filter, import the `<table-date-filter>` component. It will emit a
461 1. Import the `<table-toolbar>` component and `BVTableSelectableMixin`
462 1. Add the `selectable`, `no-select-on-click` props and a unique `ref` to the
463    table. The table will emit a `@row-selected` event. Use the `onRowSelected`
474 1. Add an actions prop to the `<table-toolbar>` component. This prop should be
476    `selected-items-count` prop to the `<table-toolbar>` component. The component
477    will emit a `@batch-action` event that will provide the user selected action.
478    It will also emit a `@clear-selected` event. Provide the `clearSelectedRows`
481 ![Table batch action example](./table-batch-action.png)
483 ![Table batch action active example](./table-batch-action-active.png)
485 ```vue
487   <b-container>
488     <table-toolbar
489       :selected-items-count="selectedRows.length"
491       @clear-selected="clearSelectedRows($refs.table)"
492       @batch-action="onBatchAction"
494     <b-table
498       no-select-on-click
502       @row-selected="onRowSelected($event, items.length)"
505         <b-form-checkbox
506           v-model="tableHeaderCheckboxModel"
512         <b-form-checkbox
513           v-model="row.rowSelected"
517     </b-table>
518   </b-container>
569 1. Add the `per-page` and `current-page` props to the `<table>` component.
571    `total-rows` prop.
573 ```vue{21}
574 <b-row>
575   <b-col sm="6">
576     <b-form-group
577       class="table-pagination-select"
579       label-for="pagination-items-per-page"
581       <b-form-select
582         id="pagination-items-per-page"
583         v-model="perPage"
586     </b-form-group>
587   </b-col>
588   <b-col sm="6">
589     <b-pagination
590       v-model="currentPage"
591       first-number
592       last-number
593       :per-page="perPage"
594       :total-rows="getTotalRowCount(items.length)"
595       aria-controls="table-event-logs"
597   </b-col>
598 </b-row>
601 ![Table pagination example](./table-pagination.png)
603 ```vue
605   <b-container>
606     <b-table
611       :per-page="perPage"
612       :current-page="currentPage"
614     <b-row>
615       <b-col sm="6">
616         <b-form-group
617           class="table-pagination-select"
619           label-for="pagination-items-per-page"
621           <b-form-select
622             id="pagination-items-per-page"
623             v-model="perPage"
626         </b-form-group>
627       </b-col>
628       <b-col sm="6">
629         <b-pagination
630           v-model="currentPage"
631           first-number
632           last-number
633           :per-page="perPage"
634           :total-rows="getTotalRowCount(items.length)"
635           aria-controls="table-event-logs"
637       </b-col>
638     </b-row>
639   </b-container>