Proper way to use Renderers in vue3

Proper way to use Renderers in vue3

stsdatastsdata Posts: 4Questions: 2Answers: 0
edited July 4 in General

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..

Answers

  • allanallan Posts: 62,484Questions: 1Answers: 10,262 Site admin

    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

  • stsdatastsdata Posts: 4Questions: 2Answers: 0

    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

  • allanallan Posts: 62,484Questions: 1Answers: 10,262 Site admin

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

    Allan

Sign In or Register to comment.