Default value for empty cell

lucas_araujo

Hi there!

I'm new to DataTables and been searching for this unsuccesful. Is there a option to set a default value when a cell is empty?

In my case I want it to show 'Info Unavailable', but only found a way by validating it in the render:
validationRender(data) {
return data ? data : 'Info Unavailable';
}

But since this is repeated across the whole project, there is a lot of duplicates.

kthorngren

On the client side you can use columns.defaultContent for this.

Kevin

rf1234

Hi Kevin,

that works, but you will have to add the option to every relevant field in every data table.

I thought of something like the code below but couldn't really drill down deep enough into the returned object. If you are only one level deep, it works with Object.keys. But if you have multiple levels like "forex.rate" etc. you would need to build an iterator to go deeper, "Object.Keys" won't work.

But this is the idea:

var allDt = $.fn.dataTable.tables({api: true});

allDt.rows().every( function ( rowIdx, tableLoop, rowLoop ) {
    var d = this.data(); //"this" refers to the current row
    var keys = Object.keys(d);
    keys.forEach(function(key) {        
        d[key].rate = 'bla bla';
    });
    this.invalidate().draw(false);
} );

Well it worked - with the limitation that I had to specify "rate". So this would need to be replaced with the "drill down".

Roland

rf1234

In the meantime I also got it working a level deeper. Don't know what I did wrong last time.

var allDt = $.fn.dataTable.tables({api: true});

allDt.rows().every( function ( rowIdx, tableLoop, rowLoop ) {
    var d = this.data(); //"this" refers to the current row
    var keys = Object.keys(d);
    keys.forEach(function(key) { 
        var subKeys = Object.keys(d[key]);
        subKeys.forEach(function(subKey) {
            d[key][subKey] = 'bla bla';
        });
    });
    this.invalidate().draw(false);
} );

Of course the real code should look more like this. But I haven't teste that.

var allDt = $.fn.dataTable.tables({api: true});

allDt.rows().every( function ( rowIdx, tableLoop, rowLoop ) {
    var d = this.data(); //"this" refers to the current row
    var keys = Object.keys(d);
    keys.forEach(function(key) { 
        var subKeys = Object.keys(d[key]);
        subKeys.forEach(function(subKey) {
            if ( typeof subkey !== 'object' ) {
               if ( d[key][subKey] <= " " ) {
                    d[key][subKey] = 'Info Unavailable';
                }
             }
        });
    });
    this.invalidate().draw(false);
} );

kthorngren

Another option is to use columnDefs with columnDefs.targets set to _all with columns.defaultContent. This will apply to all columns. For example:

    columnDefs: [
        { targets: '_all', defaultContent: '' }
    ]

Kevin

rf1234

That's probably even better, Kevin.

You need to put it into every data table definition, but it is only one additional line in "columnDefs" which you would mostly need anyway.

I prefer your solution over mine

But I guess you mean:

columnDefs: [
    { targets: '_all', defaultContent: 'Info Unavailable' }
]

Roland

kthorngren

@rf1234 mentioned to me that defaultContent isn't applied if there is an empty string but if the data is null or undefined.

In that case another option is to use createdRow to look for empty strings and replace the cell contents with Info Unavailable. See this example.

Kevin

rf1234

Hi Kevin,

just verified it. I have a data table that shows a 1:N relationship: one order can have multiple payments. If there is more than one payment the order data are not repeated on the left hand side.

In that case I return an empty string from the server for the respective fields.

Works fine. If I want to have "Info Unavailable" in the empty fields I must return NULL from the server like this.

That produces this result:

Doesn't even work for the formatted amount field ...

@allan, it would be great if "defaultContent" also worked for empty strings. That would be really helpful.

Ok, in this situation

columnDefs: [
    { targets: '_all', defaultContent: '' }
]

you would end up replacing an empty string with an empty string, but that doesn't hurt, I guess.

Roland

allan

I considered an empty string to be a data point that the dev might want to show the end user, whereas null and undefined are not (i.e. an empty string might be a valid value).

Allan

rf1234

You are right: An empty string might be a valid value. But now there is no simple solution for the request of @lucas_araujo

Even if you followed my idea you would still be able to leave empty strings unchanged: Just don't use the "_all" parameter. And for everyone who uses " defaultContent: '' " nothing changes anyway.

In most use cases an empty string, null or undefined mean the same: There is nothing there

allan

Yup - at the moment a renderer would need to be used. I'll have a think about how I might offer something different.

Allan

lucas_araujo

Thanks for helping me out!

All the data I have is already processed earlier by me, so I can change all empty strings to null so the columnDefs kinda works for me.