Still confused about centering dt-numeric columns

Gee-E-Emh

Link to test case: https://live.datatables.net/kaviconi/1/
Description of problem:
I saw the question from May 1 about this issue, but wasn't clear on the resolution. I'm trying to center a numeric column but I couldn't get it to work without adding CSS:

th.dt-type-numeric, td.dt-type-numeric {
text-align: center !important;
}

It just seemed odd to me that non-numeric columns still work okay without my CSS addition, as shown in the Javascript section of the test case where I have columnDefs entries like, "{ targets: [ 1 ], className: 'dt-center dt-head-center' }".

When I look at the results with Chrome and Edge Developer Tools (see attached screen shot), the CSS Computed section for the text-align element with an Age column entry selected seems to be picking "right" instead of "center" because of the CSS weighting of the dt-type-numeric entries. That is, I think "right" has more CSS specificity weight because it has more matching selectors than "center", partially because "right" includes the matching "td.dt-type-numeric" and "th.dt-type-numeric" and "center" does not, as you can see in the screen shot. Using "!important" seems to correct this. Am I understanding this issue correctly ?

allan

Am I understanding this issue correctly ?

100%! You've just summarised CSS specificity is a way that only a small percentage of web devs could I reckon!

DataTables uses table.dataTable td.dt-type-numeric as the selector for the right alignment of the number type. Anything with a higher specificity would override it - e.g.:

table.dataTable tr td.dt-type-numeric {
  text-align: center;
}

https://live.datatables.net/kaviconi/2/edit

Allan

REJIS

Been running into this specificity problem since we updated too. Our users want the numeric columns back left aligned. Using dt-left didn't work, but using both dt-head-left and dt-body-left does...I'm guessing because they need to select the tags by the additional head and body tags that the dt-left alone doesn't have.

These auto styles that get applied probably should have been less specific than the alignment classes so we could override them. Is there a property or something to set to turn off the auto alignment?

kthorngren

@REJIS

Using dt-left didn't work

dt-left nor dt-body-left don't seem to work as documented in the Styles docs in Allan's example. I'm not able to get dt-body-left to work either. Seems the classes aren't applied to the tbody. Updated Allan's example to show both dt-left and dt-body-left not working:
https://live.datatables.net/kaviconi/11/edit

@allan will need to take a look.

Is there a property or something to set to turn off the auto alignment?

I believe this thread shows what to do.

Kevin

allan

I made a change for DataTables 2.2.0 to allow dt-center to take a higher priority that the auto detection classes. The updated example shows that for the last column.

The other option is to disable the auto detection class:

DataTable.type('num', 'className', '');
DataTable.type('num-fmt', 'className', '');

Allan

REJIS

Thanks. That did the trick for turning off the auto alignment. Were there any other types of data getting aligned, or do those two lines cover them all?

kthorngren

You can use DataTable.types() to see all the types. Also see the Types docs.

Kevin

allan

Dates and numbers get right aligned by default in DataTables. Everything else is left aligned.

Allan

REJIS

Are Dates auto detected, do they only detect ISO, or do we have to specify them? I don't seem to have any getting right aligned with MM/DD/YYYY format. I guess if I do start using ISO I'd just use the same lines as above with "date" as the first param. I have always had to make my own $.fn.dataTable.ext.type.order with a custom type name to sort those dates too since not in the proper order like ISO dates to sort. We had a table storing file sizes once too where I made one that sorts sizes and considers kb/mb/gb to multiply by and sort.

kthorngren

Are Dates auto detected, do they only detect ISO, or do we have to specify them?

The Types docs I linked to earlier state this:

date - Dates in ISO8601 format (e.g. 2151-04-01).

If its not ISO8601 format then it won't be detected as a date but as a string.

I have always had to make my own $.fn.dataTable.ext.type.order with a custom type name to sort those dates

When using the plugin the columns.type to the columns with the matching date format for the plugin. In this case the type won't be date.

However you could register your own type using DataTable.type() with the desired className property.

Kevin