Rendering when "data: null" and re-ordering columns causing an issue

Rendering when "data: null" and re-ordering columns causing an issue

Mik_raterMik_rater Posts: 12Questions: 4Answers: 0
edited April 2021 in Free community support

Live Example: **http://live.datatables.net/qekekiwe/1/**
(Note Javascript comments)

When I move a column it has strange interactions when using data: null and a render. In this specific example, trying to move a column just moves the header (seemingly):

Our users were trying to reorder the columns in a Datatables table we have, but we were finding some strange issues with it, mainly that column headers weren't lining up with the respective columns below them.
After some testing and playing around in live.datatables I managed to see it was the way I was doing the rendering.

// VERSION 1 - THIS IS BROKEN
// ------------------------------------------------
**data: null,**
"render": function (data, type, row, meta) {
    if (data != null) {
        return **data[id];**
    }
    return "";
},
// VERSION 2 - THIS WORKS
// *******************************************
**data: i,**
"render": function (data, type, row, meta) {
    if (data != null) {
        return **data;**
    }
    return "";
},

Since I have fixed my own issue with the second version,
I wanted to check what was wrong with the first version or is this some kind of bug?

Thank you for your time!

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

Answers

  • Mik_raterMik_rater Posts: 12Questions: 4Answers: 0

    Sorry, I can't see anywhere to edit my post, but the first link should not have the stars
    Live Example: http://live.datatables.net/qekekiwe/1/

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    It's a nicely complicated problem this one - simple on the surface, not so much when you realise what is going on :).

    So, when you assign a column data using the columns.data property, RowReorder can "understand" that and it will remap the data properties when the columns are reordered.

    However, if you use a rendering function, there is no way for it to do that remapping - you'd need to do it in your rendering function (i.e. convert what was column index 1 into column index 2 now).

    Your fix is the correct way to address this - or perhaps use columns.defaultContent rather than a rendering function since it basically does the same thing as what you are using your rendering function for there.

    I'm inclined not to see this one as a bug, but rather an implementation detail....

    Regards,
    Allan

This discussion has been closed.