Rule of thumb CreatedCell vs Render: function() ?

Jim Nayzium

Rule of thumb CreatedCell vs Render: function() ?

I have used both to accomplish very very similar things. It kind of depends on what I have closest to me to copy and paste honestly.
Here is my latest example. I could have easily done this same thing with render: function(), right?
So when should I be choosing the render functions over the createdCell: function() ?

 createdCell: function (td, cellData, rowData, row, col) {
    $(td).addClass("p-1");
    $(td).html(cellData > 0 ? '<div class="alert alert-success fw-bold p-1 m-0">SOLD</div>' : "<em>STOCK</em>");
}

kthorngren

columns.render is used to manipulate the Datatables data. It doesn't provide access to the DOM elements as it doesn't always have access to them when the function is executed. I've seen people try some creative coding to access the DOM elements but it seems a lot of work when columns.createdCell is meant for this. Plus, on initial load the DOM element might not be available for columns.render especially if ajax is used.

TL;DR:
Manipulate data = columns.render
Manipulate DOM element = columns.createdCell, createdRow or rowCallback

Kevin

Jim Nayzium

Just took note of a tangible example of usage differences... in my example listed above, when I enabled colReorder and then dragged that column listed above and dropped it a few columns over, all the values go back to their data-field value of 1 or 0, not the manipulated data HTML I created above. So i moved it to the render function and it stays in place even whille draggng the column all around. Meaning the new HTML value stays in place if in the render: function.