ColumnControl header/control alignment not working for datetime

bg7 · June 26

We're using datetime columns and we'd like to have the ColumnControl headers/controls left/right alignment be consistent with all other column headers/controls (we'd prefer the controls on the right side). I found this page that explains how to do that:

https://datatables.net/extensions/columncontrol/examples/styling/alignmentBothLeft.html

However, while it works for date columns it doesn't appear to work for datetime columns. Here's an example:

https://live.datatables.net/mijusame/5/edit

This line in the example:

DataTable.type('datetime', 'className', 'dt-left');

doesn't seem to have any effect. Am I doing something wrong?

Thanks.

Ben

allan · June 26

Hi Ben,

I don't immediately see anything wrong with that line. It looks like the class name isn't being change for the datetime type, which is odd. I'm missing something (or there is a bug). I'll look into it and get back to you on Monday.

Allan

bg7 · June 26

Allan,

Fwiw this is what Copilot had to say:

"The issue is: when header classes collide (dt-left + dt-right / dt-type-date) and ColumnControl uses :empty + span.dtcc, the ColumnControl CSS still pushes controls left."

It also gave me a patch that "fixed" part (but not all I think) of what's going on.

/* Keep ColumnControl actions on the right in headers DataTables marks as right/date/numeric. */
.dt-container table.dataTable thead > tr > th.dt-right div.dt-column-header,
.dt-container table.dataTable thead > tr > th.dt-type-date div.dt-column-header,
.dt-container table.dataTable thead > tr > th.dt-type-numeric div.dt-column-header,
.dt-container table.dataTable thead > tr > td.dt-right div.dt-column-header,
.dt-container table.dataTable thead > tr > td.dt-type-date div.dt-column-header,
.dt-container table.dataTable thead > tr > td.dt-type-numeric div.dt-column-header {
flex-direction: row !important;
}

/* Override dtcc's empty-title margin flip for the same header class stack. */
.dt-container table.dataTable thead > tr > th.dt-right div.dt-column-header span.dt-column-title:empty + span.dtcc,
.dt-container table.dataTable thead > tr > th.dt-type-date div.dt-column-header span.dt-column-title:empty + span.dtcc,
.dt-container table.dataTable thead > tr > th.dt-type-numeric div.dt-column-header span.dt-column-title:empty + span.dtcc,
.dt-container table.dataTable thead > tr > td.dt-right div.dt-column-header span.dt-column-title:empty + span.dtcc,
.dt-container table.dataTable thead > tr > td.dt-type-date div.dt-column-header span.dt-column-title:empty + span.dtcc,
.dt-container table.dataTable thead > tr > td.dt-type-numeric div.dt-column-header span.dt-column-title:empty + span.dtcc {
margin-left: auto !important;
margin-right: 0 !important;
}

Figured I'd share that in case it's helpful in tracking things down.

One other thing worth noting I think is that the data in the cell I believe should be left-aligned as well but as you can see in the example that's not happening for the datetime cell like it is for the date cell.

Thanks.

Ben

allan · June 29

Hi Ben,

I've committed a fix for the issue here.

Many thanks again for the test cases - super useful!

Regards,
Allan

bg7 · 2:26PM

Allan,

Sorry for the slow reply. I was off last week.

Thanks for looking into this. I just updated the example to use the nightly builds but I'm still seeing the controls on the left. Is the fix you pushed included in the nightly builds or am I missing something?

https://live.datatables.net/mijusame/8/edit

Thanks.

Ben

allan · 4:08PM

Possibly you have a cached version of the files. This link has them with today's date as a query string to "bust" the cache:

Allan

bg7 · 5:07PM

Allan,

That new linked example looks great.

As for the old example not working:

https://live.datatables.net/mijusame/8/edit

As you mentioned the new one you linked has this line:

<script src="https://nightly.datatables.net/js/dataTables.js?2026-07-06"></script>

while the old one doesn't have a date param:

<script src="https://nightly.datatables.net/js/dataTables.js"></script>

Doesn't that imply that it's not in the (non-date-specific) nightly build yet? Or are you saying the live editor has the old version cached?

Thanks.

Ben

allan · 8:38PM

Hi Ben,

The nightly builds, like all of the DataTables site, have CloudFlare in front of them - otherwise my server would melt from the number of requests to it! The Time To Live (TTL) is lower for the nightly builds, but it is still present (thinking about it, I'll switch it to 24 hours, which would make sense!), but it can mean that CloudFlare's Edge servers have an old version of the file (moreover, this can vary by region since different edge servers could have a difference version of the file!).

This is one of the reasons that the nightly builds should never be used for a production build. They can, do, and will change, but there is still caching present! What web-site the request comes from (the live. pages, or anywhere else) doesn't make any difference.

The query string just forces it to get a new version from my server. I use the ISO date, but any old string could be used. Sometimes I might add an a or b after the date if I've made multiple changes in a data. The "nightly" is a bit of a misnomer - it actually builds on each push.

(Apologies if I'm teaching my granny to suck eggs here!).

Allan

bg7 · 9:07PM

Allan,

Thanks for the explanation. That's definitely helpful in understanding what behavior to expect.

As for your granny... that's an expression I had to look up. No apologies necessary.

Ben

ColumnControl header/control alignment not working for datetime

ColumnControl header/control alignment not working for datetime

Answers

Howdy, Stranger!

Categories

DataTables

ColumnControl header/control alignment not working for datetime

ColumnControl header/control alignment not working for datetime

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables