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

Columns

With the columns prop you can specify what columns you want to see in the table, enable sorting/filtering and map the data from rows prop.

Basic structure

For example, your "columns" object might look like this,
columns.vue
columns: [{
label: "id",
name: "id",
filter: {
type: "simple",
placeholder: "Enter id"
},
sort: true,
uniqueId: true
},
{
label: "First Name",
name: "name.first_name", // access nested objects properties with "."
filter: {
type: "simple",
placeholder: "Enter first name",
case_sensitive: true, // "false" by default
},
sort: true, // "false" by default
initial_sort: true, // "false" by default
initial_sort_order: "desc" // "asc" by default
},
{
label: "Email",
name: "email",
sort: true,
row_text_alignment: "text-left",
column_text_alignment: "text-left",
row_classes: "my-row-class1 my-row-class2",
column_classes: "my-column-class1 my-column-class2"
},
{
label: "Country",
name: "address.country", // access nested objects properties with "."
filter: {
type: "simple",
placeholder: "Enter country"
},
visibility: false
}]

Attributes details

Attributes
Description
Type
Default
label
Name for the column header
String
" "
name
Name of the attribute that you would like to show from "rows" object.
You can access nested objects properties with "."
String
" "
slot_name
Overrides default slot name assignment. For more details refer "Rows" section
String
" "
uniqueId
You can teach table which column has unique values. It helps table to do faster operations and it is really useful in "server_mode".
Boolean
false
visibility
Show/Hide specific column.
Boolean
true
filter
Configuration for the column filter. If you don't want to have filtering for specific columns, then just don't mention it :-)
Object
Empty
filter.type
Type of filter you want to use for your column.
String
" "
filter.placeholder
Placeholder is hint text for filter text box
String
" "
filter.case_sensitive
Enable/Disable case sensitive filtering.
Boolean
false
sort
Enable or disable sorting in column.
Boolean
false
initial_sort
Sort the column at the first time loading. This only works if sort is true
Boolean
false
initial_sort_order
Sort the column at the first time loading based on given order. This only works if initial_sort is true
String
"asc"
row_text_alignment
Align your text in the row cell.
Possible options are, "text-justify","text-right","text-left","text-center"
String
"text-center"
column_text_alignment
Align your text in the column header. Possible options are, "text-justify","text-right","text-left","text-center"
String
"text-center"
row_classes
You can specify your custom classes for each row under specified column. You can add multiple classes with a space delimiter. This classes will be added to <td> element.
String
" "
column_classes
You can specify your custom classes for each column header. You can add multiple classes with a space delimiter.This classes will be added to <th> element.
String
" "

Column slot

At some point, you might want to override or format the values in the column header.vue-bootstrap4-table allow you to achieve that with the help of vue slotting.

Example

ColumnSlotExample.vue
...
<vue-bootstrap4-table :rows="rows" :columns="columns" :config="config">
<template slot="column_email" slot-scope="props">
<i>
{{props.column.label}}
</i>
</template>
<template slot="column_name_first_name" slot-scope="props">
<b>
{{props.column.label}}
</b>
</template>
</vue-bootstrap4-table>
...
<script>
...
columns: [{
label: "First Name",
name: "name.first_name", // access nested objects properties with "."
sort: false,
},
{
label: "Email",
name: "email",
sort: true,
}],
...
</script>
Column slot name will be combination of column_ keyword with the name which you provided in the columns configuration. In the above example, slot="column_email" represents the "email" column header in the table.

Note

You might have some columns with nested objects names. In that case, the slot name will be column_ keyword + column name and dots(.) in the column name will be replaced by underscore(_).
You can see the above example, slot name for name.first_name column is column_name_first_name.

props

From slot-scope="props" you can access the following attributes.
Attributes
Description
props.column
Current column config object
Last modified 3yr ago