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

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

```javascript
columns: [{
        label: "id",
        name: "id",
        filter: {
            type: "simple",
            placeholder: "Enter id"
        },
        sort: 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"
        },
    }]
```

{% endcode %}

## Attributes details

| Attributes              | Description                                                                                                                                                                      | Type    | Default       |
| ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------- |
| label                   | Name for the column header                                                                                                                                                       | String  | " "           |
| name                    | <p>Name of the attribute that you would like to show from <strong><code>"rows"</code></strong> object.</p><p>You can access nested objects properties with "." </p>              | String  | " "           |
| 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           | <p>Sort the column at the first time loading.<br>This only works if <strong><code>sort</code></strong> is <strong><code>true</code></strong></p>                                 | Boolean | false         |
| initial\_sort\_order    | <p>Sort the column at the first time loading based on given order. <br>This only works if <strong><code>initial\_sort</code></strong> is <strong><code>true</code></strong></p>  | String  | "asc"         |
| row\_text\_alignment    | <p>Align your text in the row cell. </p><p>Possible options are, <code>"text-justify","text-right","text-left","text-center"</code></p>                                          | 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

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

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

{% endcode %}

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 |