v
v
vue-bootstrap4-table
1.1.10
Search…
⌃K

Config

You can optionally pass config as a prop to vue-bootstrap4-table component to override the table configuration defaults.

Example

App.vue
<template>
<div id="app">
<vue-bootstrap4-table :rows="rows" :columns="columns" :config="config">
</vue-bootstrap4-table>
</div>
</template>
<script>
import VueBootstrap4Table from 'vue-bootstrap4-table'
export default {
name: 'App',
data: function() {
return {
rows: [
...
],
columns: [
...
],
config: {
card_mode: true,
selected_rows_info: false,
pagination: true,
pagination_info: true,
num_of_visibile_pagination_buttons: 7,
per_page: 5,
checkbox_rows: true,
highlight_row_hover: true,
rows_selectable: true,
multi_column_sort: true,
highlight_row_hover_color:"grey",
card_title: "Vue Bootsrap 4 advanced table",
global_search: {
placeholder: "Enter custom Search text",
visibility: true,
case_sensitive: false
},
per_page_options: [5, 10, 20, 30],
show_refresh_button: true,
show_reset_button: true,
server_mode: true,
preservePageOnDataChange: true
}
}
},
components: {
VueBootstrap4Table
}
}
</script>
If you don't provide an attribute in the config, then default value will be assigned to that attribute.

Attributes details

Attributes
Description
type
Default
card_mode
You can choose between table surrounded with card layout and plain default table alone.
Boolean
true
pagination
Enable/Disable pagination in the table
Boolean
true
pagination_info
Enable/Disable pagination info in the table
Boolean
true
selected_rows_info
Enable/Disable number of rows selected info in the table
Boolean
false
num_of_visibile_pagination_buttons
Limit the number of visible pagination buttons in the pagination bar
Number
5
per_page
Number of rows to display per page
Number
10
checkbox_rows
Enable/Disable checkbox in each rows
Boolean
false
highlight_row_hover
Enable/Disable highlighting row on hover
Boolean
true
rows_selectable
Enable/Disable selecting items on row click
Boolean
false
multi_column_sort
Enable/Disable multi column sorting
Boolean
false
highlight_row_hover_color
Change the row hover highlighting color
String
"#d6d6d6"
card_title
Sets the table title in the card header
String
"" (empty string)
global_search.placeholder
Placeholder is hint text for search text box
String
"Enter search text"
global_search.visibility
Show/Hide global search text input
Boolean
true
global_search.case_sensitive
Enable/Disable case sensitive searching.
Boolean
false
per_page_options
List of options to choose how many rows being showed in single page
Array of numbers
[5,10,15]
show_refresh_button
Show/Hide Refresh button
Boolean
true
show_reset_button
Show/Hide Refresh button. Resets all query (sort, filter, global search) currently applied in the table.
Boolean
true
server_mode
Enable/Disable server side processing (Sorting, Filtering, Global search & pagination)
Boolean
false
preservePageOnDataChange
Enable/Disable preserving current index of the page on data change. For example, if this option is set to true, consider that you are in page 4 and performed some actions like sorting or filtering, then now table gets a new data and still the pagination will be in page 4. If this config is set to false (default), for any data change current page in the pagination will be shifted to page 1.
Boolean
false