Table Heading Alignment

jdadwilson

I've noticed a change in the way the heading alignment is determined. In v1.0 I could use a className for the table rows to set the alignment which would also set the for the heading also. This does not seem to be the case in v2.0.

I need to use the alignment class because the default alignment for dates and numbers is left but I want them to be right. Can the date/number default alignment be set somehow?

TIA for your assistance.

jdadwilson

kthorngren

I think 2.0 introduced new type classes for numeric and date columns, for example dt-type-numeric will be applied to the thead and tbody. You can right click and inspect the header cells to see what is applied and the selector used to override the CSS settings to align left.

Kevin

allan

Kevin is spot on as usual. v2 did indeed introduce automatic class assignment for numeric and date data, to right align such information. You can see that happening in this example. The numeric Age and Salary columns, and date based Start date column are automatically right aligned.

If you are having issues with the alignment of data, please link to a test case showing the issue so I can look into it.

Thanks,
Allan

jdadwilson

Allan, thank you for a great product and support.

I fixed the problem. On my site I use the v2.0 provided but also have a local sheet that 'overrides' some of the basic v2.0 styles. To fix the issue I added my alignment classes to the thead > tr > th.myClass in my local sheet. This fixes the issue.

Here is a link as an example. Note the heading of the last two columns are right aligned. Without the udatar class the column headings are left aligned. I did not have to use the heading alignment class in v1.0 as the class alignment in the table structure was used.

Again, thanks for a great product.

jdadwilson

allan

Nice one - good to hear you got to the bottom of it and got it working as needed

Allan

jwaynelee66

Is there a way to turn off this automatic class assignment that controls alignment?

After I upgraded from 1.10 to 2, my users are not happy with the new behavior (they don't want dates to be right aligned, and the new logic that determines if a column is numeric does not seem to work for negative numbers that are enclosed parentheses instead of prefixed with minus signs.)

Thanks,
Jeff

allan

Yes. Assuming it is a simple date column:

DataTable.type('date', 'className', '');

https://live.datatables.net/lezuqego/1/edit

If you use formatting, then the first parameter might need to be changed. Use DataTable.types() to see what data types are registered on your page.

More information about the data types is available in the manual here.

Allan

RichardD2

I generally add typeDetect: false to turn off the automatic type detection entirely, so I can have complete control over the alignment.

For v2, that means doubling-up the class names on the headers - eg: <th class="text-end" data-class="text-end">

To get the new alignment for the sort icon in v2.3, I just needed to add:

table.dataTable th.text-end div:is(.dt-column-header, .dt-column-footer) {
    flex-direction: row-reverse;
}

allan

Great extra info @RichardD2 - thank you! typeDetect had slipped my mind!

Allan

jwaynelee66

Thank you both for your help.

Jeff