ColumnControl header/control alignment not working for datetime

bg7

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

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

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

Hi Ben,

I've committed a fix for the issue here.

Many thanks again for the test cases - super useful!

Regards,
Allan