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"
        },
    }]

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

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 updated