Rows

You bind your list of items as array of objects to rows props to vue-bootstrap4-table component, then voilà.. you can start work with the table.

Basic structure

For example, your "rows" object might look like this,

rows.vue

    rows: [{
            "id": 1,
            "name": {
                "first_name": "Vladimir",
                "last_name": "Nitzsche"
            },
            "address": {
                "country": "Mayotte"
            },
            "email": "[e-mail]",
        },
        {
            "id": 2,
            "name": {
                "first_name": "Irwin",
                "last_name": "Bayer"
            },
            "age": 23,
            "address": {
                "country": "Guernsey"
            },
            "email": "[e-mail]",
        },
        {
            "id": 3,
            "name": {
                "first_name": "Don",
                "last_name": "Herman"
            },
            "address": {
                "country": "Papua New Guinea"
            },
            "email": "[e-mail]",
        }]

Row Slot

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

Example

SlotExample.vue

...
<vue-bootstrap4-table :rows="rows" :columns="columns" :config="config">
    <template slot="email" slot-scope="props">
        <i>
            {{props.cell_value}}
        </i>
    </template>
    <template slot="name_first_name" slot-scope="props">
        <b>
            {{props.cell_value}}
        </b>
    </template>
    <template slot="lastname" slot-scope="props">
        <b>
            {{props.cell_value}}
        </b>
    </template>
</vue-bootstrap4-table>
...
<script>
...
columns: [{
            label: "First Name",
            name: "name.first_name" // access nested objects properties with "."
        },
        {
            label: "Last Name",
            name: "name.last_name", // access nested objects properties with "."
            slot_name: "lastname" // optional, if you don't provide slot name 
                                  //then default slot name will be name_last_name
        },
        {
            label: "Email",
            name: "email"
        }],
...
</script>

Slot name will be same as the name which you provided in the columns configuration. In the above example, slot="email" represents the "email" column in the table.

Note

You might have some columns getting the values from nested objects from rows. In that case, the slot name will be 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 name_first_name.

If you don't like this default "slot name" assignment, then you can set names to row slots as shown in the above example.

props

From slot-scope="props" you can access the following attributes.

Attributes	Description
props.cell_value	Returns the actual value of the cell
props.row	Current row object
props.column	Current column config object

Empty result message slot

If the given rows data is empty or result set is empty after applying filters, vue-bootstrap4-table shows this default message "No results found". You can override the message as like your wish with the help of empty-results slot.

Example

EmptyRowSlotExample.vue

...
<vue-bootstrap4-table :rows="rows" :columns="columns">
    <template slot="empty-results">
        Users not found
    </template>
</vue-bootstrap4-table>
...