components/table/index.md

1 # Table  chapter
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
9 ## Basic table
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
23   empty message if there are no items in the table
24 - `empty-text` _(required if table data is generated dynamically)_ - the
27 ![Basic table example](./table.png)
28 ![Basic empty table
29 example](./table-empty.png)
33   <b-table
39     :empty-text="$t('global.table.emptyMessage')"
61         label: this.$t('table.name') //translated label
65         label: this.$t('table.age') //translated label
69         label: this.$t('table.color') // translated label
79 To enable table sort, include `sortable: true` in the fields array for sortable
80 columns and add the following props to the `<b-table>` component:
86 ![Table sort example](./table-sort.png)
90   <b-table
130 To add an expandable row in the table, add a column for the expand button in the
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)
144 [row-details slot](https://bootstrap-vue.org/docs/components/table#comp-ref-b-table-slots)
151    `table-row-expand`
158 ![Table row expand example](./table-expand-row.png)
162   <b-table hover responsive="md" :items="items" :fields="fields">
177   </b-table>
193           tdClass: 'table-row-expand',
206 The table is leveraging
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.
220 `onClearSearchInput` methods as the event callbacks. The table should also
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)
246         <table-cell-count
252     <b-table
258       :empty-filtered-text="$t('global.table.emptySearchMessage')"
295 To add table row actions, add a column for the action buttons in the table. Then
296 in the array of table items, add a corresponding array of actions for each item.
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)
308   <b-table
315       <table-row-action
320         @click-table-action="onTableRowAction($event, row.item)"
326       </table-row-action>
328   </b-table>
380 To add a table dropdown filter:
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
387 prop will usually match the filtered by table column key. The `values` prop
393 from the TableFilterMixin to show the filtered table data.
395 ![Table filter example](./table-filter.png)
397 ![Table filter active example](./table-filter-active.png)
404         <table-filter
410     <b-table hover responsive="md" :items="filteredItems" :fields="fields" />
426           label: this.$t('table.status'),
450 To add a date filter, import the `<table-date-filter>` component. It will emit a
456 Batch actions allow a user to take a single action on many items in a table at
459 To add table batch actions:
461 1. Import the `<table-toolbar> `component and BVTableSelectableMixin
463    table. The table will emit a `@row-selected` event. Use the `onRowSelected`
465    the total table items count as the second argument.
466 1. Add a table column for checkboxes. The table header checkbox should use the
468    provided by the mixin. The table header checkbox should also use the
470    the table `ref` passed as an argument. The table row checkboxes should use
472    table `ref` passed as the first argument and the row index passed as the
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
479    as a callback with the table `ref` passed as an argument.
481 ![Table batch action example](./table-batch-action.png)
483 ![Table batch action active example](./table-batch-action-active.png)
488     <table-toolbar
491       @clear-selected="clearSelectedRows($refs.table)"
494     <b-table
495       ref="table"
508           @change="onChangeHeaderCheckbox($refs.table)"
514           @change="toggleSelectRow($refs.table, row.index)"
517     </b-table>
566 To add table pagination:
569 1. Add the `per-page` and `current-page` props to the `<table>` component.
577       class="table-pagination-select"
578       :label="$t('global.table.itemsPerPage')"
595       aria-controls="table-event-logs"
601 ![Table pagination example](./table-pagination.png)
606     <b-table
617           class="table-pagination-select"
618           :label="$t('global.table.itemsPerPage')"
635           aria-controls="table-event-logs"