dt-head also gets Euro sign
dt-head also gets Euro sign

I use css to get a currency sign in my table, but now it also shows in the header, no matter when I try I am not able to only get the currency sign in the body columns.
I use css with :
/* Style for the currency cell container in the body */
.currency-cell.dt-body-right {
text-align: right; /* Aligns the entire content to the right by default */
white-space: nowrap; /* Prevents wrapping if amounts are long */
}
/* Create a pseudo-element for the currency symbol ONLY in the body */
.currency-cell.dt-body-right::before {
content: "€"; /* The Euro sign */
float: left; /* Floats it to the left */
margin-right: 0.3em; /* Adds some space between the Euro sign and the number */
font-weight: normal; /* Optional: adjust styling */
}
/* Ensure header cells align as normal */
/* DataTables will add dt-head-left/dt-head-right classes */
.dt-head-left, .dt-head-right {
text-align: left; /* Default for headers */
}
.dt-head-right {
text-align: right;
}
and I call datatable as follows :
function loadRitten(dateObj) {
const dateStr = formatDateForPhp(dateObj);
$.getJSON("ajax/get_ritten.php", { date: dateStr }, function(data) {
if (!table) {
// Initialize DataTable first time
table = $('#rittenTable').DataTable({
data: data,
columns: [
{ data: 'tijd' },
{ data: 'Start' },
{ data: 'Eind' },
{ data: 'Klant' },
{ data: 'Taxi' },
{
data: 'Bedrag',
render: function(data, type, row) {
if (type === 'display') {
// Format as currency: €1.234,56
return $.fn.dataTable.render.number(null, ',', 2, '').display(data);
}
return data; // Return original data for other types
} },
{ data: 'Betaling' },
{ data: 'Costcenter' },
{ data: 'Notitie' }
],
columnDefs: [
{ targets: [0, 1, 2, 3, 4, 6, 7, 8], className: 'dt-body-left' },
{ targets: 5, className: 'currency-cell dt-body-right' }
],
paging: false,
searching: false,
ordering: false,
info: false,
autoWidth: false,
responsive: true
});
} else {
// Reload data
table.clear().rows.add(data).draw();
}
});
}
$(document).ready(function () {
$('#rittenTable thead th').css('text-align', 'left')
// Initial load = today
loadRitten(currentDate);
Answers
Use:
Allan