Row classes classes not working

[Chris-Pratt-Clystnet]

I am currently trying to pass in a custom class for a row with the below code

columns: [
          {
            label: this.$t('general.common.category'),
            name: 'name',
            sort: false,
            row_text_alignment: 'text-left',
            column_text_alignment: 'text-left',
            row_classes: 'nowrap'
          }
]

I have an entry in my css like so

.nowrap {
  white-space: nowrap;
}

Now when the table loads this class is not applied to the row but if i do the same with the column class it works fine, I am not receiving any console errors either. Any help on this one?

[rubanraj54]

Hu @Chris-Pratt-Clystnet

you can override row, cell, column default classes by passing "classes" object as a prop to vue-bootstrap4-table component as shown in the below example. For advanced usage examples, please refer this link https://rubanraj54.gitbook.io/vue-bootstrap4-table/custom-classes.

Usage type 1:

<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: {
                    row : {
                        "nowrap" : true
                    }
                }
            }
        },
        components: {
            VueBootstrap4Table
        }
    }
</script>

Usage type 2:

<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: {
                    row : "nowrap"
                }
            }
        },
        components: {
            VueBootstrap4Table
        }
    }
</script>

Cheers, Ruby.

[Chris-Pratt-Clystnet]

@rubanraj54 Nice, will give that try

Thanks

[rubanraj54]

Hi @Chris-Pratt-Clystnet,

I found the root cause for this issue and fixed in current version.

You can now use row_classes: 'yourclass' in any column configuration to apply the class for simple usecases. For complex usecase you can checkout examples from here https://rubanraj54.gitbook.io/vue-bootstrap4-table/custom-classes like I've said before.

Issue fix ref: #22

Cheers, Ruby.