tochoromero / aurelia-table

Simple functional data table for Aurelia
https://tochoromero.github.com/aurelia-table
MIT License
67 stars 25 forks source link

selectedrow color doesnot apply if I use Bootstrap4 #64

Open sreddim opened 6 years ago

sreddim commented 6 years ago

Hi I am using styles from bootstrap 4 by adding a reference in the view <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

When I select a row on table it does not highlight the row to light blue like it used to do in bootstrap3.3.6

Table body tr has aut-select="selected-class: info"

Any specific reason for this to be not workign in bootstrap4 or any plan to upgrade aurelie-table library with support for bootstrap4.

simongroom commented 5 years ago

I am experiencing this as well - any update at all? I am also experiencing an issue where the styling on the pagination is not being applied.

image

my code identical to that of the example pagination code in the docs.

amferguson commented 4 years ago

@simongroom I had the same problem with the pagination controls. It would appear the default markup doesn't use Bootstrap 4's pagination styling as @sreddim noted. Fortunately it's pretty straightforward to adapt the example of custom pagination to do so:


<aut-pagination current-page.bind="currentPage" page-size.bind="pageSize" total-items.bind="totalItems" >
    <template replace-part="pagination">
        <ul class="pagination" hide.bind="hideSinglePage && totalPages === 1">
            <li class="page-item ${currentPage === 1 ? 'disabled' : ''}" >
                <a aria-label="Previous" click.delegate="previousPage()" class="page-link" >
                    Previous
                </a>
            </li>

            <li class="page-item ${currentPage === page.value ? 'active' : ''}" repeat.for="page of displayPages">
                <a click.delegate="selectPage(page.value)" class="page-link">
                    ${page.title}
                </a>
            </li>

            <li class="page-item ${currentPage === totalPages ? 'disabled' : ''}">
                <a aria-label="Next" click.delegate="nextPage()" class="page-link">
                    Next
                </a>
            </li>
        </ul>
    </template>
</aut-pagination>