How to show two comma separated values in one column in aurelia slick grid using complex object

Question

I can show Range.width but i want to show the content in this format: Width x Height: 100 x 100

This works:

{ id:"Range", name:"Fixed Range", field: "Range.width", formatter: Formatters.complexObject, sortable: true, filterable: true, minWidth: 100, },

But it only shows width and i want to show both width and height.

This is how the data looks like:

"Range": {
        "width": 2,
        "height": 2
    },

My goal is to show data like this in the column:

Answer 1

I fixed this using:

 RangeFormatter(row, cell, value, columnDef, dataContext) {
    return dataContext.Range.width? ( dataContext.Range.width + " x " + dataContext.Range.height) : "<span style='color: red;'>" + "x" + "</span>";
}

/* Define grid Options and Columns */
defineMotionDevicesGrid() {
    this.columnDefinitionsMotionDevices = [
        { id: "HardwareId", name: "Hardware Id", field: "HardwareId", sortable: true, filterable: true, minWidth: 100, },
        { id: "Range", name: "Fixed Range (Width x Height)", field: "Range", selectable: false, formatter: this.RangeFormatter, sortable: true, filterable: true, minWidth: 100, },
             
    ];
}