Search code examples
javascripttabulator

How to display several fields in one column in tabulator.info grid


I have several columns in my tabledata structure, what I want to display in one single column

var tabledata = [
    {id:1, first_name:"Bob", last_name:"Smith"},
    {id:2, first_name:"Mary", last_name:"Hope"}
];

I can have access to the actual cell data by using the var val1 = cell.getValue(); command, but how can I get access from the first_name to the last_name field to display both of them at once? The getValue() function has no parameter to specify an other field and the formatter parameter describes only the cell parameter (i.e. no row) for the formatter function. I'm looking to get something like that:

{title:"Name", field:"first_name", width:550, formatter:function(cell, formatterParams){
    var val1 = cell.getValue();
    var val2 = cell.getCell("last_name");

    return  val1 + " " + val2;
}},

Solution

  • I would recommend that you dont use a formatter for this, because formatters are visual only it means that you would be unable to sort that column.

    The correct approach would be to use a field property that doesn't exist, for example lets call it full_name and then use a Mutator to create this value for you. this would then have the added benifit of being filterable and sortable.

    //define custom mutator
    var customMutator = function(value, data, type, params, component){
        return data.first_name + " " + data.last_name;
    }
    
    //column definition
    {title:"Name", field:"full_name", mutator:customMutator}