Table Heading Alignment
Table Heading Alignment

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
Answers
I think 2.0 introduced new type classes for numeric and date columns, for example
dt-type-numeric
will be applied to thethead
andtbody
. 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
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
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
Nice one - good to hear you got to the bottom of it and got it working as needed
Allan
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
Yes. Assuming it is a simple
date
column: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
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:
Great extra info @RichardD2 - thank you!
typeDetect
had slipped my mind!Allan
Thank you both for your help.
Jeff