Is there a way to change the pagination styling for a react-bootstrap-table?

Question

The default styling for the pagination row in react-bootstrap-table uses the bootstrap grid column sizing class names (like "col-xs-6"). We're using a different sized grid that the default (60 instead of 12) so the pagination elements end up squished into small columns all the way to the left.

Setting the class names to "col-xs-30" fixes the problem. But I don't see an option to adjust any pagination styling.

I see that there's a way to totally custom render the pagination elements. Is that my only option? Copy the original and just change the col sizes?

score 5 · Answer 1 · answered Apr 16 '18 at 00:34

In Chrome press Ctrl + Shift + C and select the element you want to style. In the developer tools check out which CSS class that element is using, copy it, go to your project's CSS file, paste it in, and finally change the styling as you wish.

For example ==>

.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus

Hope that helps.

Cheers!

score 0 · Answer 2 · answered Sep 13 '17 at 09:27

If you see documentation for pagination, it seems that this is the unique way to tweak the pagination for your grid. (See Custom Pagination section here)

Said this, you can always use the upper class for pagination element, that is react-bs-table-pagination and override CSS from this point, thus there's no hook in react-bootstrap table options to add your own classes to pagination.

 <div class="react-bs-table-pagination">
    <div class="row" style="margin-top: 15px;">
        <div>
            <div class="col-md-6 col-xs-6 col-sm-6 col-lg-6">
              <span class="dropdown   react-bs-table-sizePerPage-dropdown" style="visibility: visible;">

                   <!-- ... -->
                   <!-- DROPDOWN CODE -->
                   <!-- ... -->

              </span>
            </div>
            <div class="col-md-6 col-xs-6 col-sm-6 col-lg-6" style="display: block;">
                <ul class="react-bootstrap-table-page-btns-ul pagination">

                   <!-- ... -->
                   <!-- PAGINATION ELEMENT CODE -->
                   <!-- ... -->

                </ul>
            </div>
        </div>
    </div>
</div>

Is there a way to change the pagination styling for a react-bootstrap-table?

2 Answers2