dt-head also gets Euro sign

dt-head also gets Euro sign

AtongraaffAtongraaff Posts: 2Questions: 1Answers: 0
edited October 2 in Free community support

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

  • allanallan Posts: 65,162Questions: 1Answers: 10,796 Site admin

    Use:

    tbody .currency-cell.dt-body-right::before 
    

    Allan

Sign In or Register to comment.