Answers

• allan Posts: 63,534Questions: 1Answers: 10,475 Site admin

  February 15

  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 Posts: 17Questions: 3Answers: 0

  February 16

  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 Posts: 63,534Questions: 1Answers: 10,475 Site admin

  February 16

  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 Posts: 17Questions: 3Answers: 0

  February 20

  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 Posts: 63,534Questions: 1Answers: 10,475 Site admin

  February 20

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

  Regards,
  Allan
• mc2002tii Posts: 17Questions: 3Answers: 0

  February 20

  I appreciate it. Thank you!
• coolblades1 Posts: 26Questions: 2Answers: 0

  September 24

  @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 Posts: 63,534Questions: 1Answers: 10,475 Site admin

  September 24

  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 Posts: 26Questions: 2Answers: 0

  September 25

  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 Posts: 63,534Questions: 1Answers: 10,475 Site admin

  September 26

  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 Posts: 26Questions: 2Answers: 0

  September 27

  What you suggested works.
  Thanks @allan !