Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Datatables 2.0 does not consider BS5 table variants #11

Open
rumpfc opened this issue Mar 1, 2024 · 5 comments
Open

Datatables 2.0 does not consider BS5 table variants #11

rumpfc opened this issue Mar 1, 2024 · 5 comments

Comments

@rumpfc
Copy link

rumpfc commented Mar 1, 2024 •
edited
Loading

I experimented a bit with Datatables 2.0 and various Bootstrap 5 Table variants (i.e. table header different color than table body). It seems that class dataTables which is inserted by datatables.js overrides most Bootstrap 5 classes (i.e. table-dark does have white text, but not black background).

Example:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/2.0.1/css/dataTables.bootstrap5.min.css" rel="stylesheet">

    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.datatables.net/2.0.1/js/dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/2.0.1/js/dataTables.bootstrap5.min.js"></script>
</head>
<body>
<div class="container pt-3">
    <h1>Datatables test</h1>

    <div class="my-2">
        <table id="sample-data" class="table table-striped table-success">
            <thead class="table-dark">
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Tiger Nixon</td>
                    <td>System Architect</td>
                    <td>Edinburgh</td>
                    <td>61</td>
                    <td>2011-04-25</td>
                    <td>$320,800</td>
                </tr>
                <tr class="table-info">
                    <td>Garrett Winters</td>
                    <td>Accountant</td>
                    <td>Tokyo</td>
                    <td>63</td>
                    <td>2011-07-25</td>
                    <td>$170,750</td>
                </tr>
                <tr>
                    <td>Ashton Cox</td>
                    <td>Junior Technical Author</td>
                    <td>San Francisco</td>
                    <td>66</td>
                    <td>2009-01-12</td>
                    <td>$86,000</td>
                </tr>
                <tr>
                    <td>Cedric Kelly</td>
                    <td>Senior Javascript Developer</td>
                    <td>Edinburgh</td>
                    <td>22</td>
                    <td>2012-03-29</td>
                    <td>$433,060</td>
                </tr>
                <tr>
                    <td>Airi Satou</td>
                    <td>Accountant</td>
                    <td>Tokyo</td>
                    <td>33</td>
                    <td>2008-11-28</td>
                    <td>$162,700</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
    
<script>
    $(document).ready(function() {
        new DataTable('#sample-data', {});
    });
</script>
</body>
</html>
@AllanJard
Copy link
Contributor

Hi - thanks for letting me know about this. I'll look and see if I can make better use of the Bootstrap variables to address this when I get a chance.

@gs71
Copy link

gs71 commented Mar 10, 2024

I noticed the same bug, that prevents any background-color in cells when importing file https://cdn.datatables.net/2.0.2/css/dataTables.bootstrap5.css

I think the culprit is the following line:

table.table.dataTable > :not(caption) > * > * {
  background-color: transparent;
}

When I disable it, background colors in bootstrap5 tables work fine.

I don't know why this line has been added, but it wasn't in versions 1.13, when the bug was not present.

@AllanJard
Copy link
Contributor

Its there because the row tinting for stripes in Bootstrap is done with the background colour. However, in DataTables, to make row background colours easier (in everything apart from Bootstrap apparently :)) I tint it using a box shadow, So if you applied "red" as the background colour, you still can have row striping without worrying about the tint yourself. Hence the need for the transparent override.

That obviously doesn't work with Bootstrap coloured tables - hopefully there are some Bootstrap CSS variables for this that will let me address the issue.

@fisharebest fisharebest mentioned this issue Mar 22, 2024
Closed
@Seb33300
Copy link

Seb33300 commented Nov 8, 2024

I was about to create a similar issue.

When using Datatables bs5, I expect our datatables to inherit the colors and design from Bootstrap 5.
Especially when we integrate in our project a customized version of Bootstrap 5 (by overriding its variables, see: https://getbootstrap.com/docs/5.3/customize/overview/)

Unfortunately, this package override the design of tables trying to mimic Bootstrap 5 instead of adding Bootstrap 5 classes to the <table>.

Bootstrap 5 already supports colors for hover, striped, selected... rows and the library should simply apply the corresponding CSS classes to the table/rows/cells instead of trying to mimic Bootstrap design.

@AllanJard
Copy link
Contributor

Yup, I need to use CSS variables more - a PR to the source repo would be welcomed.

The selected row is an exception - I've used a box shadow as described above to allow background colour for the rows to be set as well.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@Seb33300 @rumpfc @gs71 @AllanJard