# 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,

{% code title="rows.vue" %}

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

{% endcode %}

## 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

{% code title="SlotExample.vue" %}

```javascript
...
<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>
```

{% endcode %}

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

{% code title="EmptyRowSlotExample.vue" %}

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

{% endcode %}