Re-call createdCell?

crwdzr

I have a table that uses both render and createdCell to format cells. The former is used to translate a status code to a label, the latter is used to apply a background color to the cell. To save a bit of time and overhead I'm having the table update row data locally instead of reloading entirely when someone saves a field. However I have just ran into this problem: updating table data with table.row().data() does not call createdCell again.

Fiddle: https://jsfiddle.net/7qL370rx/1/

Fiddle should be self explanatory, when it's initialized it calls createdCell, but when data is updated or redrawn it only calls render. This, in my actual application, results in labels created with "render" changing but colors created by "createdCell" staying the same.

My question is: how do I/can I get datatables to re-call createdCell? I've tried .draw() but no luck there.

• note: I am not using the Editor plugin

allan

No - the columns.createdCell function is called only when the cell is created (i.e. once in the life cycle of the cell).

For applying background colour to cell, the rowCallback option is probably the best option if the data can be updated in the table.

This is a gap in the options / events presented by DataTables and is something that I will be addressing in future. A updatedCell event or similar is really needed.

Allan

crwdzr

Thanks for the response. An updatedCell event would definitely be useful. I tried using rowCallback but I couldn't get it to update the cell's background after it's been created.

I've settled to just using row.remove() and row.add() with new data. It's a bit of a hack but whatever overhead it causes on the client isn't really noticeable to me, and so far nothing about how my application behaves has changed due to it. It also lets me keep using createdCell so it's nice and right next to the render functions.

function updateTableData (table, rowID, data) {
    const row = table.row('#'+rowID)
    const newData = row.data()

    row.remove()

    for (var k in data)
        newData[k] = data[k]    
    
    table.row.add(newData)
    table.draw(false)
    return true
}

allan

rowCallback: function ( row, data, index ) {
  var cell = $('td:eq(2)');
  cell.removeClass('myClass');

  if ( data.myCheck ) {
    cell.addClass('myClass');
  }
}

should do it.

Allan

adjenks

I am looking forward to being able to call createCell again somehow.
I was expecting that I could call something like:
myTable.cell(td).render(); and have createdCell() be called again. However if I modify the data in a cell using cell().data(newData); the cell gets re-rendered without calling createdCell to apply custom styling and features.
I do not want to re-draw the whole table because that would collapse any child cells that are currently open.

keith.abramo

Hey Allan,

Is this still in the pipeline for creating an "updatedCell" event hook? I'm using editor and when the inline edit row data is returned, the formating of my cell display I set in createdCell is overriden with just the data for that cell. I'm not sure how to redraw the cell

allan

It is planning, but it will be in the v2 update, which will most likely happen sometime next year. I don't want to put it in v1 since the event system is quite slow.

In v1.10 you'd probably need to call your update function directly yourself after you've done the update, rather than using an event handler or callback - e.g.:

table.cell(x, y).data(...);
formatCell( table.cell(x, y).node() );

Allan