Datatables not applying BS5 thead-color

Datatables not applying BS5 thead-color

mxdvmxdv Posts: 2Questions: 1Answers: 0
edited March 23 in Free community support

Debugger code (debug.datatables.net): enoqon
Description of problem:
Hello everyone,

I am using Bootstrap 5.3.2 in combination with the latest Datatables.net version within my Django application.
The following CSS stylesheets are included:
* datatables.net-bs5/css/dataTables.bootstrap5.min.css
* datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css

and the following JavaScript:
* libs/datatables.net/js/dataTables.min.js
* libs/datatables.net-bs5/js/dataTables.bootstrap5.min.js
* libs/datatables.net-responsive/js/dataTables.responsive.min.js
* libs/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js

My HTML code is as follows:

<table id="users-table" class="table dt-responsive nowrap w-100 table-hover">
  <thead class="table-light">
    <tr>
      <th scope="col">ID</th>
      <th scope="col">Name</th>
      <th scope="col">E-Mail</th>
    </tr>
  </thead>
</table>

My problem now is that the thead class "table-light" will not be applied to DataTables. The header always remains completely white (or dark if dark-mode is enabled).
The following attribute is not adopted from Bootstrap:

 .table-light {
    --bs-table-bg: #eff2f7;
}

Current workaround for me is the following:

<thead class="table-light" style="background-color: var(--bs-table-bg);"></thead>

In previous versions of DataTables (i guess BS4) the header used the appropriate color, currently this doesn't seem to work anymore.
Or am I doing something wrong here?

This may refer to this post:
https://datatables.net/forums/discussion/75480/bootstrap-dark-theme-eg-bg-dark-or-bg-black
Its not quite the same issue, but the same fix could work here :smile:

Debugger code see above.

Thank you very much!
Max

Answers

  • allanallan Posts: 63,434Questions: 1Answers: 10,458 Site admin

    Hi Max,

    Thanks for reporting this. I'm afraid that BS5 table varients aren't yet supported.

    Are you trying to use a light coloured table on a dark page? If you are able to link to a test case, that would help me understand what is going on.

    Allan

  • mxdvmxdv Posts: 2Questions: 1Answers: 0
    edited March 24

    Hi Allan,

    thanks for the reply!
    If the BS5 table variants are not yet supported, that explains a lot. :smile:

    I basically try to set the color of the thead of a DataTable on a normal page (no matter if light/dark colored).
    Here's a full example including a comment of what I'm trying to do. Just create an HTML file and open it in your browser:

    <!doctype html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap demo</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
        <link href="https://cdn.datatables.net/2.0.3/css/dataTables.bootstrap5.css" rel="stylesheet">
      </head>
      <body>
        <h1>DataTable Example</h1>
        <h3>Normal Bootstrap-Table</h3>
        <table id="bs-table" class="table w-100">
            <thead class="table-light">
                <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>
                    <td>Garrett Winters</td>
                    <td>Accountant</td>
                    <td>Tokyo</td>
                    <td>63</td>
                    <td>2011-07-25</td>
                    <td>$170,750</td>
                </tr>
        </table>
        <h3>DataTable Table</h3>
            <table id="dt-table" class="table w-100">
            <thead class="table-light">
            <!-- table-light will not be applied here
                 BS Documentation: https://getbootstrap.com/docs/5.2/content/tables/
                 works: <thead class="table-light" style="background-color: var(--bs-table-bg)"> -->
                <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>
                    <td>Garrett Winters</td>
                    <td>Accountant</td>
                    <td>Tokyo</td>
                    <td>63</td>
                    <td>2011-07-25</td>
                    <td>$170,750</td>
                </tr>
        </table>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
        <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
        <script src="https://cdn.datatables.net/2.0.3/js/dataTables.js"></script>
        <script src="https://cdn.datatables.net/2.0.3/js/dataTables.bootstrap5.js"></script>
        <script>
            new DataTable('#dt-table');
        </script>
      </body>
    </html>
    
  • allanallan Posts: 63,434Questions: 1Answers: 10,458 Site admin

    Thank you - this is it running: https://live.datatables.net/zolabuhi/1/edit

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

    Is the line in my Bootstrap 5 / DataTables integration that is causing the issue. I'll need to look into why I added that - I can't immediately recall off the top off my head!

    Allan

Sign In or Register to comment.