How to format columns

jstuardo

Hello... at the moment, I have seen a way to define columns data, but what about the column format? for example, if a column is a date, it is displayed as ISO format in the grid. I need to show it using a certain format. How to do it?

I have read something about datetime plugin, but I am wondering if there is an easier way for such a common task?

If not.... how can I install the plugin using YARN package manager? it is necesarry to use it with momenJS library? what if I am using date-fns library?

Furthermore, is there a way to define column widths?

Regards
Jaime

rf1234

Hi Jaime

If you want to do it in Javascript you would need to use this
https://datatables.net/plug-ins/dataRender/datetime
plus moment.js
Easy to install.

If you want to have ordering / sorting of converted dates properly you would need to use this plugin as well which also requires moment.js
https://datatables.net/plug-ins/sorting/datetime-moment

That's it.

I personally do the rendering of dates on the server and only use the sorting plugin mentioned above.

This is my getFormatter for dates in PHP (two formats English(UK) or German)

function getFormatterDate(&$val, $Ymd = null) {
    if ($val == null) {
        return '';
    } else {
        $date = new DateTime($val);
    }
    if ( is_null($Ymd) ) {
        if ($_SESSION['lang'] === 'de') {  
            return $date->format("d.m.Y");
        } else {
            return $date->format("d/m/Y");
        }
    } else { //if $Ymd is being 
        return $date->format("Ymd");
    }
}

and my setFormatter in PHP to handle all kinds of dates (English(UK) or German)

function setFormatterDate($val = null) {  
    //Dates in the m/d/y or d-m-y formats are disambiguated by looking at the separator between the various components: 
    //if the separator is a slash (/), then the American m/d/y is assumed; 
    //whereas if the separator is a dash (-) or a dot (.), then the European d-m-y format is assumed. 
    //If, however, the year is given in a two digit format and the separator is a dash (-, the date string is parsed as y-m-d.
    if ( is_null($val) ) {
        return $val;
    }
    if ( $val <= '' ) {
        return null;
    }
    $val = str_replace(
        ['Januar ', 'Februar ', 'März ', 'April ', 'Mai ', 'Juni ', 'Juli ',
            'August ', 'September ', 'Oktober ', 'November ', 'Dezember '],
        ['January ', 'February ', 'March ', 'April ', 'May ', 'June ', 'July ',
            'August ', 'September ', 'October ', 'November ', 'December '],
        $val);
    $val = str_replace('/', '-', $val);
    $val = str_replace('.', '-', $val);
    
    if ($val == '00-00-0000' || $val == '0000-00-00 00:00:00') {
        return null;
    }
    
    $dateTime = new DateTime($val);    
    return $dateTime->format('Y-m-d H:i:s');
}

jstuardo

Hello,

It turns out that the result set provides from Doctrine and it returns an array of objects. In order to format dates in server, I will need to do a foreach after the execution of the query fo format each value. Its true that the result set being returned is limited to the page size (10 in my case), so performance is not an issue here, but the server coding.

What if in the future the needed format changes? for example, if at development time, a date and time column is formatted with time, but some day in the future, customer decided not to have time but only date, should I need to modify server side code?

I thought there was an easier way to do this in DataTable plugin, since this is something all grid plugins should have.

Regards
Jaime

rf1234

You don't need to do it on the server. You can do this all in Javascript by simply using the plug ins mentioned above plus moment.js which is standard anyway. It takes less than 5 minutes to have those two plug ins up and running. Moment.js is a little more complicated but you will most likely need it anyway regardless of whether or not you are using data tables.

jstuardo

The problem is that I am using already date-fns instead of momentjs in this project... if I am using other date library, I don't want to use another one.. however, I could install momentjs and use it only for this grid, but this is only one hair of the tail.... I have found a lot of other problems in DataTable.... when one uses a plugin, it is supposed the energies should be concentrated in business login, not in presentation logic.... column formatting is something a grid plugin should have on its own.... such as all other plugins I have worked on before, for example, jqGrid, Gijgo, and others I have tested. All of them, has column formatting (not only date) incorportated... no need to include an external library.