How do I get a column title to be right aligned?

thataintworking

The data in the Amount column will align right, but the title is still aligned left.
I am using bootstrap5 styling.
My configuration looks like this:

$('#lineitemtable').DataTable({
    data: lineitemdata,
    columns: [
        {data: 'FeeCode', title: "Code", width: '20%'},
        {data: 'FeeDescription', title: "Description", width: '50%'},
        {data: 'Amount', title: "Amount", width: '20%', className: 'dt-right'},
    ],
    searching: false,
    paging: false,
    info: false,
});

rf1234

Assuming you are assigning your data table to a variable called "myTable".

myTable
    .on('init', function (e, settings, json) {
            myTable.columns('.dt-right').header().to$()
                .css("whatever you believe is suitable")
        }
    })

Haven't tested it. Just give it a try!

kthorngren

If you are using Datatables 2 and the data in the column is numeric then Datatables should assign the classname dt-type-numeric and this CSS should be applied:

table.dataTable th.dt-type-numeric, table.dataTable th.dt-type-date, table.dataTable td.dt-type-numeric, table.dataTable td.dt-type-date {
    text-align: right;
}

If you use dt-right then this CSS should be applied to both the header, footer and tbody:

table.dataTable th.dt-right, table.dataTable td.dt-right {
    text-align: right;
}

EDIT: Note the above CSSs are built into Datatables. You can see either one by right clicking on the th and selecting Inspect to see the styles applied.

Like this example using BS 5 and applying dt-right to the first column:
https://live.datatables.net/duhupegi/1/edit

I would start by right clicking the -tag th` to see what styling is being applied. It sounds like you may have something overriding the Datatables styling. To help debug please post a link to your page or test case replicating the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin