How to deal with nested data in javascript grid using pqgrid API?

This example shows how to display, edit, sort, filter, etc nested data in grid.

Normally the data in a javascript grid is in the following format:

[row1, row2, row3, ...]

row = {key1: value1, key2: value2, ...}

But sometimes developers have to deal with nested values in a row such as

row = {key1: {foo: {bar: value1}}, key2: value2, ...}

In this example, revenues column values are one level nested while profits column values are two level nested.

{
    rank: 1, company: 'Exxon Mobil',
    foo: {
        revenues: 339938.0,
        bar: { profits: 36130.0 }
    }
},

pqgrid API

makes it quite easy to work with nested values by using rowTemplate option.

This effectively maps scalar variables to values nested inside multiple level of objects. Henceforth, developers can treat the data as plain formatted data and access the values same as scalar variables anywhere in the code.

rowTemplate: {
    get revenues() {        
        return this.foo.revenues;
    },
    set revenues(val) {        
        this.foo.revenues = val;
    },
    get profits() {
        return this.foo.bar.profits;
    },
    set profits(val) {
        this.foo.bar.profits = val;
    }
},

undefined values

Furthermore if some rows may have undefined values, then following check can be added while doing the mapping with rowTemplate option.

rowTemplate: {
    get revenues() {
        this.foo = this.foo || {};
        return this.foo.revenues;
    },
    set revenues(val) {
        this.foo = this.foo || {};
        this.foo.revenues = val;
    },
    get profits() {
        this.foo = this.foo || {};
        this.foo.bar = this.foo.bar || {};
        return this.foo.bar.profits;
    },
    set profits(val) {
        this.foo = this.foo || {};
        this.foo.bar = this.foo.bar || {};
        this.foo.bar.profits = val;
    }
},