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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://rubanraj54.gitbook.io/vue-bootstrap4-table/1.0.19/columns.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.