# Custom classes

You can pass your classes for the table, row, cell, etc.. via **`classes`** prop. And interesting thing is you can pass a validator function to apply custom classes conditionally.

## Example

```javascript
<template>
    <div id="app">
        <vue-bootstrap4-table :classes="classes" 
                              :rows="rows" 
                              :columns="columns">
        </vue-bootstrap4-table>
    </div>
</template>

<script>
    import VueBootstrap4Table from 'vue-bootstrap4-table'
    export default {
        name: 'App',
        data: function() {
            return {
                rows: [
                    ...
                ],
                columns: [
                    ...
                ],
                classes: {
                    table : {
                        "table-striped my-class" : true,
                        "table-bordered my-class-two" : function(rows) {
                            return true
                        }
                    },
                    row : {
                        "my-row my-row2" : true,
                        "function-class" : function(row) {
                            return row.id == 1
                        }
                    },
                    cell : {
                        "my-cell my-cell2" : true,
                        "text-danger" : function(row,column,cellValue) {
                            return column.name == "salary" && row.salary > 2500
                        }
                    }
                }
            }
        },
        components: {
            VueBootstrap4Table
        }
    }
</script>

```

Currently you can add custom classes to **`<table>, <tr> and <td>`** elements using table, row, and cell properties respectively.

You can either pass the custom classes directly or pass a function with your condition check to decide whether to apply to class or not.

For example, in the above example, look at the property **`cell`**. There we are applying classes **"my-cell my-cell2"** directly to **`<td>`** element and **"text-danger"** class only to the "salary" column & also the salary value should be above 2500.&#x20;


---

# 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.23/custom-classes.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.