DataTables
Datatables 2.0 does not consider BS5 table variants
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>
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.
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.
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.
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.
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.