Table Heading Alignment

Table Heading Alignment

jdadwilsonjdadwilson Posts: 127Questions: 30Answers: 1

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

  • kthorngrenkthorngren Posts: 22,028Questions: 26Answers: 5,082

    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

  • allanallan Posts: 64,552Questions: 1Answers: 10,670 Site admin
    edited August 2024

    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

  • jdadwilsonjdadwilson Posts: 127Questions: 30Answers: 1

    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

  • allanallan Posts: 64,552Questions: 1Answers: 10,670 Site admin

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

    Allan

  • jwaynelee66jwaynelee66 Posts: 10Questions: 1Answers: 1

    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

  • allanallan Posts: 64,552Questions: 1Answers: 10,670 Site admin

    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

  • RichardD2RichardD2 Posts: 20Questions: 2Answers: 1

    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;
    }
    
  • allanallan Posts: 64,552Questions: 1Answers: 10,670 Site admin

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

    Allan

  • jwaynelee66jwaynelee66 Posts: 10Questions: 1Answers: 1
    edited May 27

    Thank you both for your help.

    Jeff

Sign In or Register to comment.