Commit/render values made in createdRow

measuredworkshop

Link to test case: https://jsfiddle.net/measuredworkshop/hcn47x2m/
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

This one might be a doozy. I'm attempting to get the average color of a thumbnail that I've loaded into a column via fast-average-color. I've managed to get it to work with createdRow (also works with a rowCallback) to populate a column with both the hex value of the calculated color as well as setting the css value of said color. Looks sharp!

However, when attempting to sort this column, nothing works. I understand that createdRow only lays ontop of actual data within the cells, so the original values applied to that column are what sorting and filtering uses.

This question leads me to believe it is possible to commit those changes created in callback functions via the row().data() API but I cannot seem to get that to work.

I'd much rather do this in columns.render, but because of the nature of fast-average-color, it's asynchronous, so there's no way to "return" the average color since it works with java promises.

So the questions would be:

1.) Is there a way to commit changes made in createdRow via row().data() to fix sort & filter on that data?
2.) Is there a way to asynchronously use columns.render?
3.) Probably more of a javascript question, but am I overengineering this and missing a simpler way to populate a column with an average color of a jpg? Short of doing it by hand and populating my JSON with such data, fast-average-color seemed like a good way to save on more complex code.

Any help or thoughts would be appreciated! Thanks so much for this amazing tool!

kthorngren

That thread was a good find. Looks like adding this code to createdRow does the job:

data.avgcolor = sauceColor.rgb;
this.api().row(row).data(data);

It uses the createdRow row parameter as the row-selector. this.api() provides access to the Datatables API in most of the callbacks.
https://jsfiddle.net/hzusm8vr/

Kevin

measuredworkshop

Wow, absolutely incredible! Elegant and simple solution. Thank you so much, I was worried that providing such a complicated test case might make things annoying, but you cut right to it.

Thanks again!

kthorngren

There was a lot to go through. The simpler the better. But you provided good information to make it easier

Kevin