Proper way to use Renderers in vue3

stsdata

Hi,
I'm having difficulties using a built-in data renderer, specifically concerning date formats. I'm using DataTables via a Vue component and need to render columns where I pass a date in ISO8601 format into a more readable format. I've tried using all the methods available on the renderers page (https://datatables.net/manual/data/renderers#Date-and-time-helpers) without success.
This is the option object inside a <script setup> inside my vue3 component:

const options = {
  fixedColumns: false,
  columnDefs: {
    targets: [9, 10, 11],
    render: function () {
      return DataTable.render.date();
    }
  },
  scrollX: true,
  select: true,
  info: false,
  language: language
};

and right now it still displays the date as ISO8601.

If i use the way as it is suggested in this example: https://datatables.net/examples/datetime/auto-locale-moment.html i get [Vue warn]: Invalid vnode type when creating vnode: undefined..

allan

DataTable.render.date() returns a function which is the rendering function. At the moment, with the above, the rendering function would be passed nothing. You _could) try:

render: function (data, type, row) {
  return DataTable.render.date()(data, type, row);
}

But that is redundant.

render: DataTable.render.date()

is how it should be done.

If you can create a Stackbltiz example showing the issue, I can take a look at it.

Allan

stsdata

Thanks for the reply, but i currently find out where the error was: since i'm using datatables via vue component implementation, the proper way to call renderer methods is:

render: DataTablesCore.render.date()

Thanks again

allan

That is correct, and what the example shows. Great to hear you got it working!

Allan