Can i remove the scrollbar on bottom?

[ojas360]

The table has a class table-responsive due to which the overflow-x is set, Can i unset it?

[rubanraj54]

Hi thanks for letting me know the issue.

I am currently working on this to make it configurable. You will get the new version by today.

Thanks.

[ojas360]

Also is it possible to change the color of pagination page numbers, as they are too bright. Is it possible to style it?

[rubanraj54]

Currently it is not possible, But I will consider your request since it makes more sense that users can override the colors.

[rubanraj54]

Hi @ojas360 , I've added a new option to override classes on the outer table <div> element. you can do this by following. So, please update your package to new version (1.0.27)

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

<script>
    import VueBootstrap4Table from 'vue-bootstrap4-table'

    export default {
        name: 'App',
        data: function() {
            return {
                rows: [...],
                columns: [...],
                config: {
                    pagination: true,
                    pagination_info: true,
                },
                classes: {
                    tableWrapper: "",
                }
        },
        components: {
            VueBootstrap4Table
        }
    }
</script>

Pass classes prop to vue-bootstrap4-table component and in the classes object you can see "tableWrapper" is currently empty which overrides the default classes of <div> element outside the <table> element.

If you want to pass your custom class, you can specify it in tableWrapper. For example, something like this tableWrapper: "mytable-wrapper-class custom-class-two"

Regarding the pagination number/background color, in your application css/scss file you can add the following styles. Change the text color or background color as like your wish.

.pagination>li>a {
    background-color: white;
    /* text color */
    color: #5A4181;
}

.pagination>li>a:focus,
.pagination>li>a:hover,
.pagination>li>span:focus,
.pagination>li>span:hover {
    /* text color */
    color: #5a5a5a;
    background-color: #eee;
    border-color: #ddd;
}

.pagination>.active>a {
    /* text color */
    color: white;
    background-color: #5A4181 !important;
    border: solid 1px #5A4181 !important;
}

.pagination>.active>a:hover {
    background-color: #5A4181 !important;
    border: solid 1px #5A4181;
}

If you would like to support this plugin, please give this repository a star ⭐

[ojas360]

Thanks for your support

[ojas360]

Regarding the pagination styles,

I applied the following .pagination>li>a { background-color: white; // text color color: #5A4181; }

But its not overriding the existing styles

One more question, Is it possible to style the sort icons and Table Headers?

[rubanraj54]

Hi @ojas360 , Sorry it was my mistake in the previous message. I used a wrong comment style in the css, and now I've updated my previous message with correct comment.

And the pagination style should look like this,

.pagination>li>a {
    background-color: white;
    /* text color */
    color: #5A4181;
}

You can checkout this code pen example. (https://codepen.io/rubanraj54/pen/bzvPpP)

You can override default slot icons with your styled icons with the help of slots. Example is here (https://rubanraj54.gitbook.io/vue-bootstrap4-table/sorting#slot)

Styling Table headers is not yet supported, But I will implement the feature in my next version.