HTML and CSS Markup

[Knudian]

Hello there. As I am happy using this library, I find it ankward to have to override the css, or the html markup.

<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: hidden;">
                <button class="btn btn-default dropdown-toggle" id="pageDropDown" data-toggle="dropdown" aria-expanded="false">
                    <span>
                        <span class="caret"></span>
                    </span>
                </button>
                <ul class="dropdown-menu" role="menu" aria-labelledby="pageDropDown">
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#" data-page="5">5</a></li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#" data-page="10">10</a></li>
                </ul>
            </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">
                <li class="active page-item" title="1"><a href="#" class="page-link">1</a></li>
            </ul>
        </div>
    </div>
</div>

The style attributes given (out of nowhere, i did not set any option for having this markup), is messing up the styles.

Plus, it adds some "px" on margins, or paddings ... or some border-radius to some elements ... It kills the usage of Bootstrap in itself.

Other point that bothers me is that I can't have a react-bootstrap-table inside a panel (as it is possible natively with BS), without having the complete style broken.

If someone made a fork, or proposed a PR to fix/remove those points, please tell.

[AllenFang]

The style attributes given (out of nowhere, i did not set any option for having this markup), is messing up the styles.

Plus, it adds some "px" on margins, or paddings ... or some border-radius to some elements ... It kills the usage of Bootstrap in itself.

it's for tuning some UI, so using some css on the DOM, any better solution to improve it but keep everything is work well like now

Other point that bothers me is that I can't have a react-bootstrap-table inside a panel (as it is possible natively with BS)

Any online example?

Thanks

[Knudian]

Since I am in a hurry, I did some work (locally, can't push to github from the office) :

• adding a peer dependency to react-bootstrap,
• removing the added markup from the package to fit into react-bootstrap,
• changing some markup / props to stay "fit" to react-bootstrap (only supporting the helper classes actually, and the pagination).

I personnally removed the scrolling possibility ... just because i don't like it (and the actual filters are more than enough, especially if you combine those with a pagination).

I will fork this project, and make the adjustements I did at the office in it.

PS : no online example, since it's a company project ;)

[sman591]

Made an attempt to address the margins in #1263. Will be making a separate PR for the border radius as well.

[AllenFang]

@Knudian, I'm not very familiar with react-bootstrap, but I'm also not very sure what actual change you did but my opinion is if you remove some styling or class for react-bootstrap-table, it may broken. so I highly suggest that don't do these change particular for react-bootstrap-table.

[Knudian]

@AllenFang, here is a bit more of what I've done so far :

• removing all css rules which are overriding bootstrap's style,
• removing all html markup which were messing up bootstrap's display (because of the css removing above),
• making react-bootstrap-table having a peer dependency on react-bootstrap.

Now, the package is just utilizing react-bootstrap markup, and nothing else, to get a full integration as a sub-module of react-bootstrap, without touching your functions (for now ... there may be some light modifications to do to achieve 100% coverage).

As a example, I will take the orginal "pagination" system from this package :

<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>Showing rows 1 to 10 of 103 </span>
                <span class="dropdown react-bs-table-sizePerPage-dropdown" style="visibility: hidden;">
                    <button class="btn btn-default dropdown-toggle" id="pageDropDown" data-toggle="dropdown" aria-expanded="false">
                        10
                        <span>
                            <span class="caret"></span>
                        </span>
                    </button>
                    <ul
                        class="dropdown-menu" role="menu" aria-labelledby="pageDropDown">
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#" data-page="10">10</a></li>
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#" data-page="25">25</a></li>
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#" data-page="30">30</a></li>
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#" data-page="50">50</a></li>
                        </ul>
                    </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">
                    <li class="active page-item" title="1"><a href="#" class="page-link">1</a></li>
                    <!-- No copying all other lines ... -->
                    <li class="page-item" title="next page"><a href="#" class="page-link">&gt;</a></li>
                    <li class="page-item" title="last page"><a href="#" class="page-link">&gt;&gt;</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

And now the same ... after "reconstruction".

<div class="panel-footer">
    <div class="row">
        <div class="col-xs-6">
            <p>Showing rows 1 to 10 of 103</p>
        </div>
        <div class="text-right col-xs-6">
            <ul class="pagination pagination-sm">
                <li class="disabled"><a role="button" href="#" tabindex="-1" style="pointer-events: none;"><span aria-label="First">«</span></a></li>
                <li class="disabled"><a role="button" href="#" tabindex="-1" style="pointer-events: none;"><span aria-label="Previous">‹</span></a></li>
                <li class="active"><a role="button" href="#">1</a></li>
                    <!-- No copying all other lines ... -->
                <li class="disabled"><a role="button" href="#" tabindex="-1" style="pointer-events: none;"><span aria-label="More">…</span></a></li>
                <li class=""><a role="button" href="#">10</a></li>
                <li class=""><a role="button" href="#"><span aria-label="Next">›</span></a></li>
                <li class=""><a role="button" href="#"><span aria-label="Last">»</span></a></li>
            </ul>
        </div>
    </div>
</div>

I can paste you the jsx markup, if you want to.

[AllenFang]

I may spend some time to review it, but maybe it need some time, so PR is welcome, @sman591's PR will also fixing some styling problems.

[tayzee]

@Knudian, I would love to get this to work with reactstrap (bootstrap 4) is this a difficult process, taking what you have proposed here into consideration?