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