Align cells left after 2.0

linusd

From the release notes of 2.0:

Auto type detection class assignment. Class names are applied automatically to the table columns based on the detected column type. We now automatically right align number and date columns.

I have date type cells, that now automatically gets the dt-type-date class assigned. This class will right align columns.

To custom align columns, you are seemingly supposed to add the dt[-head|-body]-left class: https://datatables.net/manual/styling/classes

The problem is, the custom class is added before the automatic class, so its styles are overwritten, including the for me important text-align.

How can i left align a date cell in datatables 2.0? I don't want to change the type of the cell, because that would break ordering.

allan

Hi,

You can control the class names that are automatically assigned to a type through the new DataTable.type() method (some discussion on the built in types here).

For example:

DataTable.type('date', 'className', ' ');

new DataTable('#example');

Interestingly it ignores the setting if you pass an empty string - that's an error I'll correct.

You could assign other classes if you prefer. It looks like dt-type-date will take preference over dt-left regardless of order in the class list, I suspect due to the ordering in the CSS. I'll look at that as well.

Thanks for flagging this up.

Allan

mc2002tii

A related problem is that dt-type-date alignment also right-aligns the th cell causing it to overlap with the sorting arrows (at least on Bootstrap 5).

allan

I'm not seeing that here or here.

Are you able to give me a link to a page that is showing the issue please? It sounds like the padding that the DataTables / Bootstrap integration stylesheet is applying to the header for exactly that reason isn't on the table you are looking at for whatever reason.

Allan

mc2002tii

I figured out where the problem is happening. My table uses table-sm to reduce the padding in the cells. If you add the table-sm class to the live.datatables.net link above it reproduces the problem I am seeing.

allan

Brilliant! Thanks for letting me know about that. I've committed a fix which will be in DataTables 2.0.1.

Regards,
Allan

mc2002tii

I appreciate it. Thank you!

coolblades1

@allan the suggest solution doesn't work when you use
render: DataTable.render.datetime(.....) for date column def, this has internal helper
__mlHelper that set the class to dt-right

allan

Yes, if you using a renderer then the type name will no longer be date, but rather will reflect the format. You can use DataTable.types() to find out what the registered type names are and then set the class as needed for that data type.

Allan

coolblades1

Thank you @allan for point that out.
This what i have
columnDefs: [
{
targets: ['dateTime'],
className: 'toTheLeft',//workaround for dt not honor the date type customization commented out above
render: DataTable.render.datetime(JSSimpleDateTimeFormatDisplay, JSSimpleDateTimeFormatDisplay, 'en')
},
{
targets: ['dateOnly'],
className: 'toTheLeft',
render: DataTable.render.datetime(JSSimpleDateFormatDisplay, JSSimpleDateFormatDisplay, 'en')
}
]
and

DataTable.type('datetime-MM/DD/YYYY', 'className', 'abce ');
DataTable.type('datetime-MM/DD/YYYY HH:mm', 'className', 'abce ');

(the values of the format display variable - momentjs)

it didn't override the .dt-right classs name for those two types.
I ended up adding a class name toTheLeft
.toTheLeft {
text-align: left !important;
}

for force it to the left.

It seems that the "new" types are created at render time so you can't override it before and overriding after is too late.
am I missing something?

version dt-2.1.6

thanks

allan

Ah! No you are right, my apologies. The type is being added when the setup for the rendering function is run - in this case it is when the DataTable initialisation object is readied.

I had been thinking you could just create the date renderer before that:

let dateRenderer = DataTable.render.datetime('Do MMM YYYY');
DataTable.type('datetime-Do MMM YYYY', 'className', 'dt-left');

new DataTable('#example', {
    columnDefs: [
        {
            targets: 4,
            render: dateRenderer
        }
    ]
});

And that should work since the type is setup on the first line. Unfortunately there is a bug preventing it from working... I've committed a fix and it is now in the nightly: https://live.datatables.net/kemupivu/1/edit .

I'll be doing a patch release of DataTables next week (2.1.8) which will include the fix. Sorry for the error.

Allan

coolblades1

What you suggested works.
Thanks @allan !