For displaying tabular data, <b-table> supports pagination, filtering, sorting, custom rendering, various style options, events, and asynchronous data. For simple display of tabular data without all the fancy features, BootstrapVue provides two lightweight alternative components <b-table-lite> and <b-table-simple>.
<b-table> Properties <b-table> v-model <b-table> Slots <b-table> Events <b-table> $root Event listeners All property default values are globally configurable.
Property
(Click to sort ascending)Type
(Click to sort ascending)Default
Description
api-url
String Pass through prop. Passed as part of the context object sent to the items provider function bordered
Boolean false Adds borders to all the cells and headers borderless
Boolean false Removes all borders from cells busy
Boolean false When set, forces the table into the busy state.Automatically set when an items provider function is being called caption
String Text string to place in the caption element caption-html
String HTML string to place in the caption element caption-top
Boolean false Visually place the table caption above the table. Default is below current-page
Number or String 1 The current page number to display when the table is paginated. Starting from 1 and up dark
Boolean false Places the table in dark mode details-td-class
Array or Object or String CSS class (or classes) to apply to the row details' `td` element for the row-details slot empty-filtered-html
String HTML string to show when the table has no items to show due to filtering empty-filtered-text
String 'There are no records matching your request' Text string to show when the table has no items to show due to filtering empty-html
String HTML string to show when the table has no items to show empty-text
String 'There are no records to show' Text string to show when the table has no items to show fields
Array null Array of field names or array of field definition objects filter
Array or Object or String or RegExp Criteria for filtering. Internal filtering supports only string or RegExpr criteria filter-debounce
Number or String 0 Time in milliseconds to debounce changes to the filter criteria before filtering the records filter-function
Function Reference to a function to use instead of the internal filtering function. Refer to the docs for details filter-ignored-fields
Array [] Array of top level fields to ignore when filtering the item data filter-included-fields
Array [] Array of fields to include when filtering. Overrides filter-ignore-fields fixed
Boolean false Makes all columns equal width (fixed layout table). Will speed up rendering for large tables. Column widths can be set via CSS or colgroup foot-clone
Boolean false Enable the footer of the table, and clone the header content by default foot-row-variant
String Apply a Bootstrap theme color variant to the tr element in the tfoot. Falls back to head-row-variant foot-variant
String Footer variant: 'light' or 'dark', or unset. May take precedence over foot-row-variant head-row-variant
String Apply a Bootstrap theme color variant to the tr element in the thead head-variant
String Header variant: 'light' or 'dark', or unset. May take precedence over head-row-variant hover
Boolean false Enables hover styling on rows id
String Used to set the `id` attribute on the rendered content, and used as the base to generate any additional element IDs as needed items
Array or Function [] Array of items to display, or an items provider function reference. Refer to the docs for details label-sort-asc
String 'Click to sort ascending' Hidden string to place in the header cell when clicking the cell will change the sort direction to ascending label-sort-clear
String 'Click to clear sorting' Hidden string to place in the header cell when clicking the cell will clear the current sorting direction label-sort-desc
String 'Click to sort descending' Hidden string to place in the header cell when clicking the cell will change the sort direction to descending no-border-collapse
Boolean false Disable's the collapsing of table borders. Useful when table has sticky headers or columns no-footer-sorting
Boolean false When the build in formatter is used, setting this prop will disable the sorting ability in the footer no-local-sorting
Boolean false Disabled the internal sorting routine, and expects the user to provde the items sorted. Sorting controls will still be available no-provider-filtering
Boolean false When set, uses internal filtering to pagination the data. Otherwise the provider is expected to perform the filtering no-provider-paging
Boolean false When set, uses internal paging to pagination the data. Otherwise the items provider is expected to perform the paging no-provider-sorting
Boolean false When set, uses internal sorting to sort the data. Otherwise the items provider is expected to perform the sorting no-select-on-click
Boolean false Disables row selection via click events. Row selection will be only available programmatically no-sort-reset
Boolean false When a table is sortable, clicking on any non-sortable column heading will clear the current sort values. Set this prop to disable this feature outlined
Boolean false Adds an outline border to the table element per-page
Number or String 0 Number of rows to show per page. Set to 0 to disable pagination primary-key
String Name of a table field that contains a guaranteed unique value per row. Needed for tbody transition support, and also speeds up table rendering responsive
Boolean or String false Makes the table responsive in width, adding a horizontal scrollbar. Set to true for always responsive or set to one of the breakpoints to switch from responsive to normal: 'sm', 'md', 'lg', 'xl' select-mode
String 'multi' The selectable mode for the table when 'selectable' is set. Possible values: 'single', 'multi' or 'range' selectable
Boolean false When set, places the table body rows in selectable mode selected-variant
String 'active' Bootstrap color theme variant to set selected rows to. Use any of the standard Bootstrap theme color variants, or the special table row variant 'active' (default). Set to an empty string to not use a variant show-empty
Boolean false When enabled, and there are no item records to show, shows a message that there are no rows to show small
Boolean false Renders the table with smaller cell padding sort-by
String Field name that is currently being sorted. Set to null to clear sorting. Syncable with the .sync prop modifier sort-compare
Function A reference to a function for sort-comparing two rows of data. Defaults to the internal sort compare routine. See docs for details sort-compare-locale
Array or String The locale string (or array of locale string) that specified the language when sorting. See docs for details sort-compare-options
Object { 'numeric': true } An object containing sort configuration for the 'String.prototype.sortLocale' method. See docs for details sort-desc
Boolean false Set to true to sort the column in descending order. Syncable with the .sync prop modifier sort-direction
String 'asc' The initial sorting direction to sort an unsorted column by: 'asc', 'desc', or 'last' (to use the previous sort direction) sort-icon-left
Boolean false Positions the sort control to the left of the header text. Default is on the right of the header text sort-null-last
Boolean false When sorting, null and undefined values will be sorted first (or last, depending on 'sort-desc'). Set this prop to sort null values last. Only applicable to internal sorting stacked
Boolean or String false Place the table in stacked mode. Set to true for always stacked, or set to one of the breakpoints to switch from stacked to normal: 'sm', 'md', 'lg', 'xl' sticky-header
Boolean or String false Makes the table header sticky. Set to true for a maximum height 300px tall table, or set to any valid CSS hight (including units) striped
Boolean false Applies striping to the tbody rows table-class
Array or Object or String CSS class (or classes) to apply to the table element table-variant
String Apply a Bootstrap theme color variant to the entire table tbody-class
Array or Object or String CSS class (or classes) to apply to the tbody element tbody-tr-attr
Object or Function Attributes to be added to each tr in the tbody, or a function returning such attributes (see docs for details) tbody-tr-class
Array or Object or String or Function CSS class (or classes) to apply to the tr element in the tbody. Can be a function that returns a class (see docs for details) tbody-transition-handlers
Object Vue 'transition-group' event handlers. When provided will make the tbody a Vue 'transition-group' component tbody-transition-props
Object Vue 'transition-group' properties. When provided will make the tbody a Vue 'transition-group' component tfoot-class
Array or Object or String CSS class (or classes) to apply to the tfoot element tfoot-tr-class
Array or Object or String CSS class (or classes) to apply to the tr element in the tfoot thead-class
Array or Object or String CSS class (or classes) to apply to the thead element thead-tr-class
Array or Object or String CSS class (or classes) to apply to the tr element in the thead value
Array [] Currently displayed row data. Read-only. Do not set a value on this prop
Caution: Props that support HTML strings (*-html) can be vulnerable to Cross Site Scripting (XSS) attacks when passed raw user supplied values. You must properly sanitize the user input first!
v-model
Property
Event
value input Slots
Name
(Click to sort ascending)Scoped
Description
bottom-row Fixed bottom row slot for user supplied B-TD cells. Optionally Scoped cell() Default scoped slot for custom data rendering of field data. See docs for scoped data cell({key}) Scoped slot for custom data rendering of field data. '{key}' is the field's key name. See docs for scoped data custom-foot Custom footer content slot for user supplied B-TR, B-TH, B-TD. Optionally Scoped empty Content to display when no items are present in the `items` array. Optionally scoped emptyfiltered Content to display when no items are present in the filtered `items` array. Optionally scoped foot() Default scoped slot for custom rendering of field footer. See docs for scoped footer foot({key}) Scoped slot for custom rendering of field footer. '{key}' is the field's key name. See docs for scoped footer head() Default scoped slot for custom rendering of field header. See docs for scoped header head({key}) Scoped slot for custom rendering of field header. '{key}' is the field's key name. See docs for scoped header row-details Scoped slot for optional rendering additional record details. See docs for Row details support table-busy No Optional slot to place loading message when table is in the busy state table-caption No Content to display in the table's caption element table-colgroup Slot to place custom colgroup and col elements. Optionally scoped thead-top Slot above the column headers in the `thead` element for user-supplied B-TR's with B-TH/B-TD. Optionally scoped top-row Fixed top row slot for user supplied B-TD cells. Optionally scoped Events
Event
(Click to sort ascending)Arguments
Description
context-changed
ctx - Table state context object. See docsfiltered
filteredItems - Array of items after filtering (before local pagination occurs)head-clicked
key - Column key clicked (field name)field - Field definition objectevent - Native event objectisFooter - 'True' if this event originated from clicking on the footer cellrefreshed Emitted when the items provider function has returned data row-clicked
item - Item data of the row being clickedindex - Index of the row being clickedevent - Native event objectrow-contextmenu
item - Item data of the row being right clickedindex - Index of the row being right clickedevent - Native event objectrow-dblclicked
item - Item data of the row being double clickedindex - Index of the row being double clickedevent - Native event objectrow-hovered
item - Item data of the row being hoveredindex - Index of the row being hoveredevent - Native event objectrow-middle-clicked
item - Item data of the row being middle clickedindex - Index of the row being middle clickedevent - Native event objectrow-selected
rows - Array of the row items that are selectedrow-unhovered
item - Item data of the row being unhoveredindex - Index of the row being unhoveredevent - Native event objectsort-changed
ctx - Table state context object. See docs$root event listeners
You can control <b-table> by emitting the following events on $root:
Event
Arguments
Description
bv::refresh::table
id - Table ID to refresh data
All property default values are globally configurable.
Property
(Click to sort ascending)Type
(Click to sort ascending)Default
Description
bordered
Boolean false Adds borders to all the cells and headers borderless
Boolean false Removes all borders from cells caption
String Text string to place in the caption element caption-html
String HTML string to place in the caption element caption-top
Boolean false Visually place the table caption above the table. Default is below dark
Boolean false Places the table in dark mode details-td-class
Array or Object or String CSS class (or classes) to apply to the td element in the details row fields
Array null Array of field names or array of field definition objects fixed
Boolean false Makes all columns equal width (fixed layout table). Will speed up rendering for large tables. Column widths can be set via CSS or colgroup foot-clone
Boolean false Enable to the footer of the table, and clone the header content by default foot-row-variant
String Apply a Bootstrap theme color variant to the tr element in the tfoot. Falls back to head-row-variant foot-variant
String Footer variant: 'light' or 'dark', or unset. May take precedence over foot-row-variant head-row-variant
String Apply a Bootstrap theme color variant to the tr element in the thead head-variant
String Header variant: 'light' or 'dark', or unset. May take precedence over head-row-variant hover
Boolean false Enables hover styling on rows id
String Used to set the `id` attribute on the rendered content, and used as the base to generate any additional element IDs as needed items
Array [] Array of items to display no-border-collapse
Boolean false Disable's the collapsing of table borders. Useful when table has sticky headers or columns outlined
Boolean false Adds an outline border to the table element primary-key
String Name of a table field that contains a guaranteed unique value per row. Needed for tbody transition support, and also speeds up table rendering responsive
Boolean or String false Makes the table responsive in width, adding a horizontal scrollbar. Set to true for always responsive or set to one of the breakpoints to switch from responsive to normal: 'sm', 'md', 'lg', 'xl' small
Boolean false Renders the table with smaller cell padding stacked
Boolean or String false Place the table in stacked mode. Set to true for always stacked, or set to one of the breakpoints to switch from stacked to normal: 'sm', 'md', 'lg', 'xl' sticky-header
Boolean or String false Makes the table header sticky. Set to true for a maximum height 300px tall table, or set to any valid CSS hight (including units) striped
Boolean false Applies striping to the tbody rows table-class
Array or Object or String CSS class (or classes) to apply to the table element table-variant
String Apply a Bootstrap theme color variant to the entire table tbody-class
Array or Object or String CSS class (or classes) to apply to the tbody element tbody-tr-attr
Object or Function Attributes to be added to each tr in the tbody, or a function returning such attributes (see docs for details) tbody-tr-class
Array or Object or String or Function CSS class (or classes) to apply to the tr element in the tbody. Can be a function that returns a class (see docs for details) tbody-transition-handlers
Object Vue 'transition-group' event handlers. When provided will make the tbody a Vue 'transition-group' component tbody-transition-props
Object Vue 'transition-group' properties. When provided will make the tbody a Vue 'transition-group' component tfoot-class
Array or Object or String CSS class (or classes) to apply to the tfoot element tfoot-tr-class
Array or Object or String CSS class (or classes) to apply to the tr element in the tfoot thead-class
Array or Object or String CSS class (or classes) to apply to the thead element thead-tr-class
Array or Object or String CSS class (or classes) to apply to the tr element in the thead value
Array [] Currently displayed row data. Read-only. Do not set a value on this prop
Caution: Props that support HTML strings (*-html) can be vulnerable to Cross Site Scripting (XSS) attacks when passed raw user supplied values. You must properly sanitize the user input first!
v-model
Property
Event
value input Slots
Name
(Click to sort ascending)Scoped
Description
cell() Default scoped slot for custom data rendering of field data cell({key}) Scoped slot for custom data rendering of field data. '{key}' is the field's key name custom-foot Custom footer content slot for user supplied B-TR's with B-TH/B-TD. Optionally Scoped foot() Default scoped slot for custom rendering of field footer foot({key}) Scoped slot for custom rendering of field footer. '{key}' is the field's key name head() Default scoped slot for custom rendering of field header head({key}) Scoped slot for custom rendering of field header. '{key}' is the field's key name row-details Scoped slot for optional rendering additional record details. See docs for Row details support table-caption No Content to display in the table's caption element table-colgroup Slot to place custom colgroup and col elements. Optionally scoped thead-top Slot above the column headers in the `thead` element for user-supplied B-TR with B-TH/B-TD. Optionally scoped Events
Event
Arguments
Description
head-clicked
key - Column key clicked (field name)field - Field definition objectevent - Native event objectisFooter - 'True' if this event originated from clicking on the footer cellrow-clicked
item - Item data of the row being clickedindex - Index of the row being clickedevent - Native event objectrow-contextmenu
item - Item data of the row being right clickedindex - Index of the row being right clickedevent - Native event objectrow-dblclicked
item - Item data of the row being double clickedindex - Index of the row being double clickedevent - Native event objectrow-hovered
item - Item data of the row being hoveredindex - Index of the row being hoveredevent - Native event objectrow-middle-clicked
item - Item data of the row being middle clickedindex - Index of the row being middle clickedevent - Native event objectrow-unhovered
item - Item data of the row being unhoveredindex - Index of the row being unhoveredevent - Native event objectAll property default values are globally configurable.
Property
(Click to sort ascending)Type
(Click to sort ascending)Default
Description
bordered
Boolean false Adds borders to all the cells and headers borderless
Boolean false Removes all borders from cells caption-top
Boolean false Visually place the table caption above the table. Default is below dark
Boolean false Places the table in dark mode fixed
Boolean false Makes all columns equal width (fixed layout table). Will speed up rendering for large tables. Column widths can be set via CSS or colgroup hover
Boolean false Enables hover styling on rows id
String Used to set the `id` attribute on the rendered content, and used as the base to generate any additional element IDs as needed no-border-collapse
Boolean false Disable's the collapsing of table borders. Useful when table has sticky headers or columns outlined
Boolean false Adds an outline border to the table element responsive
Boolean or String false Makes the table responsive in width, adding a horizontal scrollbar. Set to true for always responsive or set to one of the breakpoints to switch from responsive to normal: 'sm', 'md', 'lg', 'xl' small
Boolean false Renders the table with smaller cell padding stacked
Boolean or String false Place the table in stacked mode. Set to true for always stacked, or set to one of the breakpoints to switch from stacked to normal: 'sm', 'md', 'lg', 'xl' sticky-header
Boolean or String false Makes the table header sticky. Set to true for a maximum height 300px tall table, or set to any valid CSS hight (including units) striped
Boolean false Applies striping to the tbody rows table-class
Array or Object or String CSS class (or classes) to apply to the table element table-variant
String Apply a Bootstrap theme color variant to the entire table Slots
Name
Description
default Content to place in the table
Properties
All property default values are globally configurable.
Property
Type
Default
Description
tbody-transition-handlers
Object Vue 'transition-group' event handlers. When provided will make the tbody a Vue 'transition-group' component tbody-transition-props
Object Vue 'transition-group' properties. When provided will make the tbody a Vue 'transition-group' component Slots
Name
Description
default Content to place in the tbody
Properties
All property default values are globally configurable.
Property
Type
Default
Description
head-variant
String Header variant: 'light' or 'dark', or unset Slots
Name
Description
default Content to place in the thead
All property default values are globally configurable.
Property
Type
Default
Description
foot-variant
String Footer variant: 'light' or 'dark', or unset
Name
Description
default Content to place in the tfoot
Properties
All property default values are globally configurable.
Property
Type
Default
Description
variant
String Applies one of the Bootstrap theme color variants to the component Slots
Name
Description
default Content to place in the tr
Properties
All property default values are globally configurable.
Property
Type
Default
Description
colspan
Number or String null Number of columns this cell spans rowspan
Number or String null Number of rows this cell spans stacked-heading
String Heading for the cell when in stacked mode. Only applicable to cells in the 'tbody' element sticky-column
Boolean false If this will be a sticky colum. Must be set on all cells in this column. table must be in sticky-header or responsive mode to work variant
String Applies one of the Bootstrap theme color variants to the component Slots
Name
Description
default Content to place in the td
Properties
All property default values are globally configurable.
Property
Type
Default
Description
colspan
Number or String null Number of columns this cell spans rowspan
Number or String null Number of rows this cell spans stacked-heading
String Heading for the cell when in stacked mode. Only applicable to cells in the 'tbody' element sticky-column
Boolean false If this will be a sticky colum. Must be set on all cells in this column. table must be in sticky-header or responsive mode to work variant
String Applies one of the Bootstrap theme color variants to the component Importing individual components
You can import individual components into your project via the following named exports:
Component
Named Export
Import Path
<b-table> BTable bootstrap-vue <b-table-lite> BTableLite bootstrap-vue <b-table-simple> BTableSimple bootstrap-vue <b-tbody> BTbody bootstrap-vue <b-thead> BThead bootstrap-vue <b-tfoot> BTfoot bootstrap-vue <b-tr> BTr bootstrap-vue <b-td> BTd bootstrap-vue <b-th> BTh bootstrap-vue
Example:
import { BTable } from 'bootstrap-vue'
Vue.component('b-table', BTable) Importing as a Vue.js plugin
This plugin includes all of the above listed individual components. Plugins also include any component aliases.
Named Export
Import Path
TablePlugin bootstrap-vue
This plugin also automatically includes the following plugins:
TableLitePluginTableSimplePluginExample:
import { TablePlugin } from 'bootstrap-vue'
Vue.use(TablePlugin)
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4