1.0.23

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": "franecki.anastasia@gmail.com",
        },
        {
            "id": 2,
            "name": {
                "first_name": "Irwin",
                "last_name": "Bayer"
            },
            "age": 23,
            "address": {
                "country": "Guernsey"
            },
            "email": "rlittle@macejkovic.biz",
        },
        {
            "id": 3,
            "name": {
                "first_name": "Don",
                "last_name": "Herman"
            },
            "address": {
                "country": "Papua New Guinea"
            },
            "email": "delia.becker@cormier.com",
        }]

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.

PreviousColumnsNextSorting

Last updated